Fossil SCM
In compact mode, move the buttons below the input field in order to stop truncation and button layout shifting as the input field automatically resizes during editing. Takes up more a bit more space but provides better UX.
Commit
fe0760c95ddcbef71652be403471cc29ff072ad0466222e86b141354ad24e178
Parent
858e8153a7e676a…
1 file changed
+27
-9
+27
-9
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -184,11 +184,11 @@ | ||
| 184 | 184 | margin-bottom: 0; |
| 185 | 185 | } |
| 186 | 186 | #chat-input-field { |
| 187 | 187 | display: inline-block/*supposed workaround for Chrome weirdness*/; |
| 188 | 188 | padding: 0.2em; |
| 189 | - flex: 2 20 auto; | |
| 189 | + flex: 10 1 auto; | |
| 190 | 190 | background-color: rgba(156,156,156,0.3); |
| 191 | 191 | overflow: auto; |
| 192 | 192 | } |
| 193 | 193 | #chat-input-field:empty::before { |
| 194 | 194 | content: attr(data-placeholder); |
| @@ -226,38 +226,53 @@ | ||
| 226 | 226 | input field is cleared (when the message is sent). When we stay |
| 227 | 227 | wrapped in compact mode, the wrapped buttons simply take up too |
| 228 | 228 | much space. */ |
| 229 | 229 | /*flex-wrap: wrap; |
| 230 | 230 | justify-content: flex-end;*/ |
| 231 | + flex-direction: column; | |
| 232 | + /** | |
| 233 | + We "really do" need column orientation here because it's the | |
| 234 | + only way to eliminate the possibility that (A) the buttons | |
| 235 | + get truncated in very narrow windows and (B) that they keep | |
| 236 | + stable positions. | |
| 237 | + */ | |
| 231 | 238 | } |
| 232 | 239 | body.chat #chat-input-line.compact #chat-input-field { |
| 233 | 240 | } |
| 234 | 241 | |
| 235 | 242 | body.chat #chat-edit-buttons { |
| 236 | 243 | flex: 0 1 auto; |
| 237 | 244 | display: flex; |
| 238 | 245 | flex-direction: column; |
| 239 | - justify-content: space-between; | |
| 246 | + align-items: center; | |
| 240 | 247 | min-width: 4em; |
| 241 | 248 | min-height: 1.5em; |
| 242 | - align-self: flex-end; | |
| 249 | + align-self: flex-end | |
| 250 | + /*keep buttons stable at bottom/right even when input field | |
| 251 | + resizes */; | |
| 243 | 252 | } |
| 244 | 253 | body.chat #chat-input-line.compact #chat-edit-buttons { |
| 245 | 254 | flex-direction: row; |
| 246 | -} | |
| 247 | -body.chat #chat-edit-buttons > * { | |
| 248 | 255 | flex: 1 1 auto; |
| 256 | + align-self: stretch; | |
| 257 | + justify-content: flex-end; | |
| 258 | + /*flex-wrap: wrap;*/ | |
| 259 | + /* Wrapping would be ideal except that the edit widget | |
| 260 | + grows in width as the user types, moving the buttons | |
| 261 | + around */ | |
| 262 | +} | |
| 263 | +body.chat #chat-edit-buttons > * { | |
| 249 | 264 | padding: initial/*some skins mess this up for buttons*/; |
| 250 | 265 | line-height: inherit/*undo skin funkiness*/; |
| 251 | 266 | min-width: 4ex; |
| 252 | 267 | } |
| 253 | 268 | body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * { |
| 254 | 269 | max-width: 6ex; |
| 255 | 270 | min-width: 6ex; |
| 256 | 271 | min-height: 6ex; |
| 257 | 272 | max-height: 6ex; |
| 258 | - margin: 0.25em; | |
| 273 | + margin: 0.125em; | |
| 259 | 274 | } |
| 260 | 275 | |
| 261 | 276 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 262 | 277 | /*border-left-style: double; |
| 263 | 278 | border-left-width: 3px; |
| @@ -283,17 +298,20 @@ | ||
| 283 | 298 | feature that a manual resize of the element will pin its sits. |
| 284 | 299 | */ |
| 285 | 300 | } |
| 286 | 301 | |
| 287 | 302 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 288 | - margin: 0 0.125em 0 0.125em; | |
| 289 | - min-width: 6ex; | |
| 303 | + margin: 2px 0.125em 0 0.125em; | |
| 304 | + min-width: 8ex; | |
| 290 | 305 | max-width: unset; |
| 291 | 306 | min-height: 3ex; |
| 292 | 307 | max-height: 3ex; |
| 308 | + /*flex: 1 1 auto;*/ | |
| 293 | 309 | } |
| 294 | - | |
| 310 | +body.chat #chat-input-line.compact #chat-edit-buttons #chat-message-submit { | |
| 311 | + min-width: 16ex; | |
| 312 | +} | |
| 295 | 313 | body.chat #chat-input-line > #chat-settings-button{ |
| 296 | 314 | margin: 0 0 0 0.25em; |
| 297 | 315 | max-width: 2em; |
| 298 | 316 | } |
| 299 | 317 | body.chat #chat-input-line > input[type=text], |
| 300 | 318 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -184,11 +184,11 @@ | |
| 184 | margin-bottom: 0; |
| 185 | } |
| 186 | #chat-input-field { |
| 187 | display: inline-block/*supposed workaround for Chrome weirdness*/; |
| 188 | padding: 0.2em; |
| 189 | flex: 2 20 auto; |
| 190 | background-color: rgba(156,156,156,0.3); |
| 191 | overflow: auto; |
| 192 | } |
| 193 | #chat-input-field:empty::before { |
| 194 | content: attr(data-placeholder); |
| @@ -226,38 +226,53 @@ | |
| 226 | input field is cleared (when the message is sent). When we stay |
| 227 | wrapped in compact mode, the wrapped buttons simply take up too |
| 228 | much space. */ |
| 229 | /*flex-wrap: wrap; |
| 230 | justify-content: flex-end;*/ |
| 231 | } |
| 232 | body.chat #chat-input-line.compact #chat-input-field { |
| 233 | } |
| 234 | |
| 235 | body.chat #chat-edit-buttons { |
| 236 | flex: 0 1 auto; |
| 237 | display: flex; |
| 238 | flex-direction: column; |
| 239 | justify-content: space-between; |
| 240 | min-width: 4em; |
| 241 | min-height: 1.5em; |
| 242 | align-self: flex-end; |
| 243 | } |
| 244 | body.chat #chat-input-line.compact #chat-edit-buttons { |
| 245 | flex-direction: row; |
| 246 | } |
| 247 | body.chat #chat-edit-buttons > * { |
| 248 | flex: 1 1 auto; |
| 249 | padding: initial/*some skins mess this up for buttons*/; |
| 250 | line-height: inherit/*undo skin funkiness*/; |
| 251 | min-width: 4ex; |
| 252 | } |
| 253 | body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * { |
| 254 | max-width: 6ex; |
| 255 | min-width: 6ex; |
| 256 | min-height: 6ex; |
| 257 | max-height: 6ex; |
| 258 | margin: 0.25em; |
| 259 | } |
| 260 | |
| 261 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 262 | /*border-left-style: double; |
| 263 | border-left-width: 3px; |
| @@ -283,17 +298,20 @@ | |
| 283 | feature that a manual resize of the element will pin its sits. |
| 284 | */ |
| 285 | } |
| 286 | |
| 287 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 288 | margin: 0 0.125em 0 0.125em; |
| 289 | min-width: 6ex; |
| 290 | max-width: unset; |
| 291 | min-height: 3ex; |
| 292 | max-height: 3ex; |
| 293 | } |
| 294 | |
| 295 | body.chat #chat-input-line > #chat-settings-button{ |
| 296 | margin: 0 0 0 0.25em; |
| 297 | max-width: 2em; |
| 298 | } |
| 299 | body.chat #chat-input-line > input[type=text], |
| 300 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -184,11 +184,11 @@ | |
| 184 | margin-bottom: 0; |
| 185 | } |
| 186 | #chat-input-field { |
| 187 | display: inline-block/*supposed workaround for Chrome weirdness*/; |
| 188 | padding: 0.2em; |
| 189 | flex: 10 1 auto; |
| 190 | background-color: rgba(156,156,156,0.3); |
| 191 | overflow: auto; |
| 192 | } |
| 193 | #chat-input-field:empty::before { |
| 194 | content: attr(data-placeholder); |
| @@ -226,38 +226,53 @@ | |
| 226 | input field is cleared (when the message is sent). When we stay |
| 227 | wrapped in compact mode, the wrapped buttons simply take up too |
| 228 | much space. */ |
| 229 | /*flex-wrap: wrap; |
| 230 | justify-content: flex-end;*/ |
| 231 | flex-direction: column; |
| 232 | /** |
| 233 | We "really do" need column orientation here because it's the |
| 234 | only way to eliminate the possibility that (A) the buttons |
| 235 | get truncated in very narrow windows and (B) that they keep |
| 236 | stable positions. |
| 237 | */ |
| 238 | } |
| 239 | body.chat #chat-input-line.compact #chat-input-field { |
| 240 | } |
| 241 | |
| 242 | body.chat #chat-edit-buttons { |
| 243 | flex: 0 1 auto; |
| 244 | display: flex; |
| 245 | flex-direction: column; |
| 246 | align-items: center; |
| 247 | min-width: 4em; |
| 248 | min-height: 1.5em; |
| 249 | align-self: flex-end |
| 250 | /*keep buttons stable at bottom/right even when input field |
| 251 | resizes */; |
| 252 | } |
| 253 | body.chat #chat-input-line.compact #chat-edit-buttons { |
| 254 | flex-direction: row; |
| 255 | flex: 1 1 auto; |
| 256 | align-self: stretch; |
| 257 | justify-content: flex-end; |
| 258 | /*flex-wrap: wrap;*/ |
| 259 | /* Wrapping would be ideal except that the edit widget |
| 260 | grows in width as the user types, moving the buttons |
| 261 | around */ |
| 262 | } |
| 263 | body.chat #chat-edit-buttons > * { |
| 264 | padding: initial/*some skins mess this up for buttons*/; |
| 265 | line-height: inherit/*undo skin funkiness*/; |
| 266 | min-width: 4ex; |
| 267 | } |
| 268 | body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * { |
| 269 | max-width: 6ex; |
| 270 | min-width: 6ex; |
| 271 | min-height: 6ex; |
| 272 | max-height: 6ex; |
| 273 | margin: 0.125em; |
| 274 | } |
| 275 | |
| 276 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 277 | /*border-left-style: double; |
| 278 | border-left-width: 3px; |
| @@ -283,17 +298,20 @@ | |
| 298 | feature that a manual resize of the element will pin its sits. |
| 299 | */ |
| 300 | } |
| 301 | |
| 302 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 303 | margin: 2px 0.125em 0 0.125em; |
| 304 | min-width: 8ex; |
| 305 | max-width: unset; |
| 306 | min-height: 3ex; |
| 307 | max-height: 3ex; |
| 308 | /*flex: 1 1 auto;*/ |
| 309 | } |
| 310 | body.chat #chat-input-line.compact #chat-edit-buttons #chat-message-submit { |
| 311 | min-width: 16ex; |
| 312 | } |
| 313 | body.chat #chat-input-line > #chat-settings-button{ |
| 314 | margin: 0 0 0 0.25em; |
| 315 | max-width: 2em; |
| 316 | } |
| 317 | body.chat #chat-input-line > input[type=text], |
| 318 |