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 {
background-color: lightgray;
}
.wideinput {
width: 90vw;
.flex-grow {
flex-grow: 1;
}
.float-right {
float: right;
@ -22,6 +22,13 @@
height: 75vh;
overflow: scroll;
}
* {
margin: 0.4vh;
button {
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>
<body>
<div class="float-right">
<label for="api-ep">Mode:</label>
<select name="api-ep" id="api-ep">
<option value="chat" selected>Chat</option>
<option value="completion">Completion</option>
</select>
<div class="sameline">
<p class="heading flex-grow" > <b> SimpleChat </b> </p>
<div class="sameline">
<label for="api-ep">Mode:</label>
<select name="api-ep" id="api-ep">
<option value="chat" selected>Chat</option>
<option value="completion">Completion</option>
</select>
</div>
</div>
<p class="heading" > <b> SimpleChat </b> </p>
<div>
<div class="sameline">
<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>
<hr>
<div id="chat">
@ -34,8 +36,8 @@
</div>
<hr>
<div>
<input type="text" id="user" class="wideinput" />
<div class="sameline">
<input type="text" id="user" class="flex-grow" />
<button id="submit">submit</button>
</div>
</body>