Fossil SCM

Improved the flow of the chat input buttons so that they don't move around as the input area grows and shrinks. Removed max-height from compact-mode input. This makes compact mode behave more like what was requested in /chat, so that it grows organically as the user types.

stephan 2021-10-01 13:01 UTC chat-input-rework
Commit 9191823207b147857039c934b7932d7f535a36dabaa26997d8e977cdb4038d34
Parent f9e2851a998b29e…
1 file changed +10 -9
~ src/style.chat.css
M src/style.chat.css
+10 -9
--- src/style.chat.css
+++ src/style.chat.css
@@ -218,36 +218,37 @@
218218
 }
219219
 /*body.chat #chat-input-line:not(.compact) {
220220
 flex-wrap: nowrap;
221221
 }*/
222222
 body.chat #chat-input-line.compact #chat-input-field {
223
- max-height: 2rem
224
- /*enough space to see, after wrapping, that there's more text*/;
225223
 }
226224
227225
 body.chat #chat-edit-buttons {
228226
 flex: 1 1 auto;
229227
 display: flex;
230228
 flex-direction: column;
231229
 justify-content: space-between;
232230
 min-width: 4em;
233231
 min-height: 1.5em;
232
+ align-self: flex-end;
234233
 }
235234
 body.chat #chat-input-line.compact #chat-edit-buttons {
236235
 flex-direction: row;
237236
 margin-top: 0.25em;
238237
 }
239238
 body.chat #chat-edit-buttons > * {
240239
 flex: 1 1 auto;
241240
 padding: initial/*some skins mess this up for buttons*/;
242241
 line-height: inherit/*undo skin funkiness*/;
242
+ min-width: 4ex;
243243
 }
244244
 body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
245
- max-width: 4em;
246
- max-height: 4em;
245
+ max-width: 6ex;
246
+ min-width: 6ex;
247
+ min-height: 6ex;
248
+ max-height: 6ex;
247249
 margin: 0.25em;
248
- min-height: 2em;
249250
 }
250251
 body.chat #chat-input-line:not(.compact) #chat-input-field {
251252
 /*border-left-style: double;
252253
 border-left-width: 3px;
253254
 border-right-style: double;
@@ -273,16 +274,16 @@
273274
 */
274275
 }
275276
276277
 body.chat #chat-input-line.compact #chat-edit-buttons > * {
277278
 margin: 0 0.25em;
278
- min-width: 2em;
279
+ min-width: 5ex;
280
+ max-width: 5ex;
281
+ min-height: 3ex;
282
+ max-height: 3ex;
279283
 }
280284
281
-body.chat #chat-input-line > button {
282
- max-width: 4em;
283
-}
284285
 body.chat #chat-input-line > #chat-settings-button{
285286
 margin: 0 0 0 0.25em;
286287
 max-width: 2em;
287288
 }
288289
 body.chat #chat-input-line > input[type=text],
289290
--- src/style.chat.css
+++ src/style.chat.css
@@ -218,36 +218,37 @@
218 }
219 /*body.chat #chat-input-line:not(.compact) {
220 flex-wrap: nowrap;
221 }*/
222 body.chat #chat-input-line.compact #chat-input-field {
223 max-height: 2rem
224 /*enough space to see, after wrapping, that there's more text*/;
225 }
226
227 body.chat #chat-edit-buttons {
228 flex: 1 1 auto;
229 display: flex;
230 flex-direction: column;
231 justify-content: space-between;
232 min-width: 4em;
233 min-height: 1.5em;
 
234 }
235 body.chat #chat-input-line.compact #chat-edit-buttons {
236 flex-direction: row;
237 margin-top: 0.25em;
238 }
239 body.chat #chat-edit-buttons > * {
240 flex: 1 1 auto;
241 padding: initial/*some skins mess this up for buttons*/;
242 line-height: inherit/*undo skin funkiness*/;
 
243 }
244 body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
245 max-width: 4em;
246 max-height: 4em;
 
 
247 margin: 0.25em;
248 min-height: 2em;
249 }
250 body.chat #chat-input-line:not(.compact) #chat-input-field {
251 /*border-left-style: double;
252 border-left-width: 3px;
253 border-right-style: double;
@@ -273,16 +274,16 @@
273 */
274 }
275
276 body.chat #chat-input-line.compact #chat-edit-buttons > * {
277 margin: 0 0.25em;
278 min-width: 2em;
 
 
 
279 }
280
281 body.chat #chat-input-line > button {
282 max-width: 4em;
283 }
284 body.chat #chat-input-line > #chat-settings-button{
285 margin: 0 0 0 0.25em;
286 max-width: 2em;
287 }
288 body.chat #chat-input-line > input[type=text],
289
--- src/style.chat.css
+++ src/style.chat.css
@@ -218,36 +218,37 @@
218 }
219 /*body.chat #chat-input-line:not(.compact) {
220 flex-wrap: nowrap;
221 }*/
222 body.chat #chat-input-line.compact #chat-input-field {
 
 
223 }
224
225 body.chat #chat-edit-buttons {
226 flex: 1 1 auto;
227 display: flex;
228 flex-direction: column;
229 justify-content: space-between;
230 min-width: 4em;
231 min-height: 1.5em;
232 align-self: flex-end;
233 }
234 body.chat #chat-input-line.compact #chat-edit-buttons {
235 flex-direction: row;
236 margin-top: 0.25em;
237 }
238 body.chat #chat-edit-buttons > * {
239 flex: 1 1 auto;
240 padding: initial/*some skins mess this up for buttons*/;
241 line-height: inherit/*undo skin funkiness*/;
242 min-width: 4ex;
243 }
244 body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
245 max-width: 6ex;
246 min-width: 6ex;
247 min-height: 6ex;
248 max-height: 6ex;
249 margin: 0.25em;
 
250 }
251 body.chat #chat-input-line:not(.compact) #chat-input-field {
252 /*border-left-style: double;
253 border-left-width: 3px;
254 border-right-style: double;
@@ -273,16 +274,16 @@
274 */
275 }
276
277 body.chat #chat-input-line.compact #chat-edit-buttons > * {
278 margin: 0 0.25em;
279 min-width: 5ex;
280 max-width: 5ex;
281 min-height: 3ex;
282 max-height: 3ex;
283 }
284
 
 
 
285 body.chat #chat-input-line > #chat-settings-button{
286 margin: 0 0 0 0.25em;
287 max-width: 2em;
288 }
289 body.chat #chat-input-line > input[type=text],
290

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button