Fossil SCM
Button size tweaks for compact mode, to make them slightly more accessible on mobile devices.
Commit
858e8153a7e676a9a6d9056299b6f02f412972167dbf9691a286081a46323def
Parent
40cdaeecd48dd7a…
2 files changed
+1
-1
+14
-3
+1
-1
| --- src/chat.c | ||
| +++ src/chat.c | ||
| @@ -170,11 +170,11 @@ | ||
| 170 | 170 | @ title="Configure chat">⚙</button> |
| 171 | 171 | @ <button id="chat-message-submit" \ |
| 172 | 172 | @ title="Send message (Ctrl-Enter)">📤</button> |
| 173 | 173 | @ </div> |
| 174 | 174 | @ </div> |
| 175 | - @ <div id='chat-input-file-area'> | |
| 175 | + @ <div id='chat-input-file-area' class='hidden'> | |
| 176 | 176 | @ <div class='file-selection-wrapper'> |
| 177 | 177 | @ <div class='help-buttonlet'> |
| 178 | 178 | @ Select a file to upload, drag/drop a file into this spot, |
| 179 | 179 | @ or paste an image from the clipboard if supported by |
| 180 | 180 | @ your environment. |
| 181 | 181 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -170,11 +170,11 @@ | |
| 170 | @ title="Configure chat">⚙</button> |
| 171 | @ <button id="chat-message-submit" \ |
| 172 | @ title="Send message (Ctrl-Enter)">📤</button> |
| 173 | @ </div> |
| 174 | @ </div> |
| 175 | @ <div id='chat-input-file-area'> |
| 176 | @ <div class='file-selection-wrapper'> |
| 177 | @ <div class='help-buttonlet'> |
| 178 | @ Select a file to upload, drag/drop a file into this spot, |
| 179 | @ or paste an image from the clipboard if supported by |
| 180 | @ your environment. |
| 181 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -170,11 +170,11 @@ | |
| 170 | @ title="Configure chat">⚙</button> |
| 171 | @ <button id="chat-message-submit" \ |
| 172 | @ title="Send message (Ctrl-Enter)">📤</button> |
| 173 | @ </div> |
| 174 | @ </div> |
| 175 | @ <div id='chat-input-file-area' class='hidden'> |
| 176 | @ <div class='file-selection-wrapper'> |
| 177 | @ <div class='help-buttonlet'> |
| 178 | @ Select a file to upload, drag/drop a file into this spot, |
| 179 | @ or paste an image from the clipboard if supported by |
| 180 | @ your environment. |
| 181 |
+14
-3
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -217,10 +217,20 @@ | ||
| 217 | 217 | flex-wrap: nowrap; |
| 218 | 218 | } |
| 219 | 219 | /*body.chat #chat-input-line:not(.compact) { |
| 220 | 220 | flex-wrap: nowrap; |
| 221 | 221 | }*/ |
| 222 | +body.chat #chat-input-line.compact { | |
| 223 | + /* "The problem" with wrapping, together with a contenteditable input | |
| 224 | + field, is that the latter grows as the user types, so causes | |
| 225 | + wrapping to happen while they type, then to unwrap as soon as the | |
| 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 | +} | |
| 222 | 232 | body.chat #chat-input-line.compact #chat-input-field { |
| 223 | 233 | } |
| 224 | 234 | |
| 225 | 235 | body.chat #chat-edit-buttons { |
| 226 | 236 | flex: 0 1 auto; |
| @@ -245,10 +255,11 @@ | ||
| 245 | 255 | min-width: 6ex; |
| 246 | 256 | min-height: 6ex; |
| 247 | 257 | max-height: 6ex; |
| 248 | 258 | margin: 0.25em; |
| 249 | 259 | } |
| 260 | + | |
| 250 | 261 | body.chat #chat-input-line:not(.compact) #chat-input-field { |
| 251 | 262 | /*border-left-style: double; |
| 252 | 263 | border-left-width: 3px; |
| 253 | 264 | border-right-style: double; |
| 254 | 265 | border-right-width: 3px;*/ |
| @@ -272,13 +283,13 @@ | ||
| 272 | 283 | feature that a manual resize of the element will pin its sits. |
| 273 | 284 | */ |
| 274 | 285 | } |
| 275 | 286 | |
| 276 | 287 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 277 | - margin: 0 0.1em; | |
| 278 | - min-width: 4ex; | |
| 279 | - max-width: 4ex; | |
| 288 | + margin: 0 0.125em 0 0.125em; | |
| 289 | + min-width: 6ex; | |
| 290 | + max-width: unset; | |
| 280 | 291 | min-height: 3ex; |
| 281 | 292 | max-height: 3ex; |
| 282 | 293 | } |
| 283 | 294 | |
| 284 | 295 | body.chat #chat-input-line > #chat-settings-button{ |
| 285 | 296 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -217,10 +217,20 @@ | |
| 217 | flex-wrap: nowrap; |
| 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: 0 1 auto; |
| @@ -245,10 +255,11 @@ | |
| 245 | min-width: 6ex; |
| 246 | min-height: 6ex; |
| 247 | max-height: 6ex; |
| 248 | margin: 0.25em; |
| 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; |
| 254 | border-right-width: 3px;*/ |
| @@ -272,13 +283,13 @@ | |
| 272 | feature that a manual resize of the element will pin its sits. |
| 273 | */ |
| 274 | } |
| 275 | |
| 276 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 277 | margin: 0 0.1em; |
| 278 | min-width: 4ex; |
| 279 | max-width: 4ex; |
| 280 | min-height: 3ex; |
| 281 | max-height: 3ex; |
| 282 | } |
| 283 | |
| 284 | body.chat #chat-input-line > #chat-settings-button{ |
| 285 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -217,10 +217,20 @@ | |
| 217 | flex-wrap: nowrap; |
| 218 | } |
| 219 | /*body.chat #chat-input-line:not(.compact) { |
| 220 | flex-wrap: nowrap; |
| 221 | }*/ |
| 222 | body.chat #chat-input-line.compact { |
| 223 | /* "The problem" with wrapping, together with a contenteditable input |
| 224 | field, is that the latter grows as the user types, so causes |
| 225 | wrapping to happen while they type, then to unwrap as soon as the |
| 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; |
| @@ -245,10 +255,11 @@ | |
| 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; |
| 264 | border-right-style: double; |
| 265 | border-right-width: 3px;*/ |
| @@ -272,13 +283,13 @@ | |
| 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 |