vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SimpleChat:HtmlCss: Cleanup UI flow

Browse source 
set margin wrt vmin rather than vw or vh so portrait/landscape ok.

Use flex and flex-grow to put things on the same line as well as
distribute available space as needed. Given two main elements/line
so it remains simple.

In each line have one element with grows and one sits with a basic
comfortably fixed size.
This commit is contained in:
HanishKVC 2024-05-20 10:40:50 +05:30
parent c191e475d5
commit c88088c7a1
2 changed files with 24 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

15
examples/server/public_simplechat/simplechat.css
View file

@ -12,8 +12,8 @@
.role-user { .role-user {
background-color: lightgray; background-color: lightgray;
} }
.wideinput { .flex-grow {
width: 90vw; flex-grow: 1;
} }
.float-right { .float-right {
float: right; float: right;
@ -22,6 +22,13 @@
height: 75vh; height: 75vh;
overflow: scroll; overflow: scroll;
} }
* { button {
margin: 0.4vh; min-width: 8vw;
}
.sameline {
display: flex;
flex-direction: row;
}
* {
margin: 0.6vmin;
} }

24
examples/server/public_simplechat/simplechat.html
View file

@ -13,18 +13,20 @@
</head> </head>
<body> <body>
<div class="float-right"> <div class="sameline">
<label for="api-ep">Mode:</label> <p class="heading flex-grow" > <b> SimpleChat </b> </p>
<select name="api-ep" id="api-ep"> <div class="sameline">
<option value="chat" selected>Chat</option> <label for="api-ep">Mode:</label>
<option value="completion">Completion</option> <select name="api-ep" id="api-ep">
</select> <option value="chat" selected>Chat</option>
<option value="completion">Completion</option>
</select>
</div>
</div> </div>
<p class="heading" > <b> SimpleChat </b> </p>
<div> <div class="sameline">
<label for="system">System</label> <label for="system">System</label>
<input type="text" name="system" id="system" class="wideinput"/> <input type="text" name="system" id="system" class="flex-grow"/>
</div> </div>
<hr> <hr>
<div id="chat"> <div id="chat">
@ -34,8 +36,8 @@
</div> </div>
<hr> <hr>
<div> <div class="sameline">
<input type="text" id="user" class="wideinput" /> <input type="text" id="user" class="flex-grow" />
<button id="submit">submit</button> <button id="submit">submit</button>
</div> </div>
</body> </body>