Fossil SCM
Replaced recent activity list fieldset element with a fieldset-like element because of Safari fieldset layout/sizing bugs.
Commit
dc3f028290648d3d1ab609b046c8308091eb300ddf65ea11f4f0b426fa27cd71
Parent
fced72da8610bd4…
2 files changed
+2
-2
+10
-6
+2
-2
| --- src/chat.c | ||
| +++ src/chat.c | ||
| @@ -181,20 +181,20 @@ | ||
| 181 | 181 | @ <input type="file" name="file" id="chat-input-file"> |
| 182 | 182 | @ </div> |
| 183 | 183 | @ <div id="chat-drop-details"></div> |
| 184 | 184 | @ </div> |
| 185 | 185 | @ </div> |
| 186 | - @ <fieldset id='chat-user-list-wrapper' class='hidden'> | |
| 186 | + @ <div id='chat-user-list-wrapper' class='hidden'> | |
| 187 | 187 | @ <legend>Active Users (most recent first)</legend> |
| 188 | 188 | @ <div id='chat-user-list'> |
| 189 | 189 | @ <div class='help-buttonlet'> |
| 190 | 190 | @ Users who have messages in the currently-loaded list.<br> |
| 191 | 191 | @ Tap a user name to filter messages on that user and |
| 192 | 192 | @ tap again to clear the filter. |
| 193 | 193 | @ </div> |
| 194 | 194 | @ </div> |
| 195 | - @ </fieldset> | |
| 195 | + @ </div> | |
| 196 | 196 | @ <div id='chat-preview' class='hidden chat-view'> |
| 197 | 197 | @ <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header> |
| 198 | 198 | @ <div id='chat-preview-content' class='message-widget-content'></div> |
| 199 | 199 | @ <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div> |
| 200 | 200 | @ </div> |
| 201 | 201 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -181,20 +181,20 @@ | |
| 181 | @ <input type="file" name="file" id="chat-input-file"> |
| 182 | @ </div> |
| 183 | @ <div id="chat-drop-details"></div> |
| 184 | @ </div> |
| 185 | @ </div> |
| 186 | @ <fieldset id='chat-user-list-wrapper' class='hidden'> |
| 187 | @ <legend>Active Users (most recent first)</legend> |
| 188 | @ <div id='chat-user-list'> |
| 189 | @ <div class='help-buttonlet'> |
| 190 | @ Users who have messages in the currently-loaded list.<br> |
| 191 | @ Tap a user name to filter messages on that user and |
| 192 | @ tap again to clear the filter. |
| 193 | @ </div> |
| 194 | @ </div> |
| 195 | @ </fieldset> |
| 196 | @ <div id='chat-preview' class='hidden chat-view'> |
| 197 | @ <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header> |
| 198 | @ <div id='chat-preview-content' class='message-widget-content'></div> |
| 199 | @ <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div> |
| 200 | @ </div> |
| 201 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -181,20 +181,20 @@ | |
| 181 | @ <input type="file" name="file" id="chat-input-file"> |
| 182 | @ </div> |
| 183 | @ <div id="chat-drop-details"></div> |
| 184 | @ </div> |
| 185 | @ </div> |
| 186 | @ <div id='chat-user-list-wrapper' class='hidden'> |
| 187 | @ <legend>Active Users (most recent first)</legend> |
| 188 | @ <div id='chat-user-list'> |
| 189 | @ <div class='help-buttonlet'> |
| 190 | @ Users who have messages in the currently-loaded list.<br> |
| 191 | @ Tap a user name to filter messages on that user and |
| 192 | @ tap again to clear the filter. |
| 193 | @ </div> |
| 194 | @ </div> |
| 195 | @ </div> |
| 196 | @ <div id='chat-preview' class='hidden chat-view'> |
| 197 | @ <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header> |
| 198 | @ <div id='chat-preview-content' class='message-widget-content'></div> |
| 199 | @ <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div> |
| 200 | @ </div> |
| 201 |
+10
-6
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -136,11 +136,10 @@ | ||
| 136 | 136 | } |
| 137 | 137 | |
| 138 | 138 | /** Container for the list of /chat messages. */ |
| 139 | 139 | body.chat #chat-messages-wrapper { |
| 140 | 140 | overflow: auto; |
| 141 | - flex: 2 1 auto; | |
| 142 | 141 | padding: 0 0.25em; |
| 143 | 142 | margin-bottom: 0.5em; |
| 144 | 143 | } |
| 145 | 144 | body.chat #chat-messages-wrapper.loading > * { |
| 146 | 145 | /* An attempt at reducing flicker when loading lots of messages. */ |
| @@ -265,18 +264,20 @@ | ||
| 265 | 264 | |
| 266 | 265 | body.chat #chat-drop-details img { |
| 267 | 266 | max-width: 45%; |
| 268 | 267 | max-height: 45%; |
| 269 | 268 | } |
| 270 | - | |
| 269 | +body.chat .chat-view { | |
| 270 | + flex: 20 1 auto | |
| 271 | + /*ensure that these grow more than the non-.chat-view elements*/; | |
| 272 | +} | |
| 271 | 273 | body.chat #chat-config, |
| 272 | 274 | body.chat #chat-preview { |
| 273 | 275 | /* /chat configuration widget */ |
| 274 | 276 | display: flex; |
| 275 | 277 | flex-direction: column; |
| 276 | 278 | overflow: auto; |
| 277 | - flex: 2 1 auto; | |
| 278 | 279 | padding: 0; |
| 279 | 280 | margin: 0; |
| 280 | 281 | align-items: stretch; |
| 281 | 282 | min-height: 6em; |
| 282 | 283 | } |
| @@ -324,27 +325,30 @@ | ||
| 324 | 325 | flex: 0 1 auto; |
| 325 | 326 | margin: 0.25em 0; |
| 326 | 327 | } |
| 327 | 328 | |
| 328 | 329 | body.chat #chat-user-list-wrapper { |
| 329 | - flex: 1 1 auto/*attempt to work around Safari mobile bug*/; | |
| 330 | + /* Safari can't do fieldsets right, so we emulate one. */ | |
| 330 | 331 | border-radius: 0.5em; |
| 331 | 332 | margin: 0.3em 0 0.2em 0; |
| 332 | 333 | padding: 0.25em 0.5em; |
| 333 | 334 | font-size: 85%; |
| 334 | - border-width: 1px/*some skins remove fieldset borders*/; | |
| 335 | + border-style: inset; | |
| 336 | + border-width: 0 1px 1px 1px/*else collides with the LEGEND*/; | |
| 335 | 337 | } |
| 336 | 338 | body.chat #chat-user-list-wrapper > legend { |
| 337 | 339 | font-weight: initial; |
| 338 | 340 | padding: 0 0.5em; |
| 341 | + position: relative; | |
| 342 | + top: -1.75ex; | |
| 339 | 343 | } |
| 340 | 344 | body.chat #chat-user-list { |
| 345 | + margin-top: -1.25ex; | |
| 341 | 346 | display: flex; |
| 342 | 347 | flex-direction: row; |
| 343 | 348 | flex-wrap: wrap; |
| 344 | 349 | align-items: center; |
| 345 | - min-height: fit-content/*attempt to work around Safari mobile*/; | |
| 346 | 350 | } |
| 347 | 351 | body.chat #chat-user-list .help-buttonlet { |
| 348 | 352 | margin: 0.2em 0.5em 0.2em 0; |
| 349 | 353 | } |
| 350 | 354 | body.chat #chat-user-list .chat-user { |
| 351 | 355 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -136,11 +136,10 @@ | |
| 136 | } |
| 137 | |
| 138 | /** Container for the list of /chat messages. */ |
| 139 | body.chat #chat-messages-wrapper { |
| 140 | overflow: auto; |
| 141 | flex: 2 1 auto; |
| 142 | padding: 0 0.25em; |
| 143 | margin-bottom: 0.5em; |
| 144 | } |
| 145 | body.chat #chat-messages-wrapper.loading > * { |
| 146 | /* An attempt at reducing flicker when loading lots of messages. */ |
| @@ -265,18 +264,20 @@ | |
| 265 | |
| 266 | body.chat #chat-drop-details img { |
| 267 | max-width: 45%; |
| 268 | max-height: 45%; |
| 269 | } |
| 270 | |
| 271 | body.chat #chat-config, |
| 272 | body.chat #chat-preview { |
| 273 | /* /chat configuration widget */ |
| 274 | display: flex; |
| 275 | flex-direction: column; |
| 276 | overflow: auto; |
| 277 | flex: 2 1 auto; |
| 278 | padding: 0; |
| 279 | margin: 0; |
| 280 | align-items: stretch; |
| 281 | min-height: 6em; |
| 282 | } |
| @@ -324,27 +325,30 @@ | |
| 324 | flex: 0 1 auto; |
| 325 | margin: 0.25em 0; |
| 326 | } |
| 327 | |
| 328 | body.chat #chat-user-list-wrapper { |
| 329 | flex: 1 1 auto/*attempt to work around Safari mobile bug*/; |
| 330 | border-radius: 0.5em; |
| 331 | margin: 0.3em 0 0.2em 0; |
| 332 | padding: 0.25em 0.5em; |
| 333 | font-size: 85%; |
| 334 | border-width: 1px/*some skins remove fieldset borders*/; |
| 335 | } |
| 336 | body.chat #chat-user-list-wrapper > legend { |
| 337 | font-weight: initial; |
| 338 | padding: 0 0.5em; |
| 339 | } |
| 340 | body.chat #chat-user-list { |
| 341 | display: flex; |
| 342 | flex-direction: row; |
| 343 | flex-wrap: wrap; |
| 344 | align-items: center; |
| 345 | min-height: fit-content/*attempt to work around Safari mobile*/; |
| 346 | } |
| 347 | body.chat #chat-user-list .help-buttonlet { |
| 348 | margin: 0.2em 0.5em 0.2em 0; |
| 349 | } |
| 350 | body.chat #chat-user-list .chat-user { |
| 351 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -136,11 +136,10 @@ | |
| 136 | } |
| 137 | |
| 138 | /** Container for the list of /chat messages. */ |
| 139 | body.chat #chat-messages-wrapper { |
| 140 | overflow: auto; |
| 141 | padding: 0 0.25em; |
| 142 | margin-bottom: 0.5em; |
| 143 | } |
| 144 | body.chat #chat-messages-wrapper.loading > * { |
| 145 | /* An attempt at reducing flicker when loading lots of messages. */ |
| @@ -265,18 +264,20 @@ | |
| 264 | |
| 265 | body.chat #chat-drop-details img { |
| 266 | max-width: 45%; |
| 267 | max-height: 45%; |
| 268 | } |
| 269 | body.chat .chat-view { |
| 270 | flex: 20 1 auto |
| 271 | /*ensure that these grow more than the non-.chat-view elements*/; |
| 272 | } |
| 273 | body.chat #chat-config, |
| 274 | body.chat #chat-preview { |
| 275 | /* /chat configuration widget */ |
| 276 | display: flex; |
| 277 | flex-direction: column; |
| 278 | overflow: auto; |
| 279 | padding: 0; |
| 280 | margin: 0; |
| 281 | align-items: stretch; |
| 282 | min-height: 6em; |
| 283 | } |
| @@ -324,27 +325,30 @@ | |
| 325 | flex: 0 1 auto; |
| 326 | margin: 0.25em 0; |
| 327 | } |
| 328 | |
| 329 | body.chat #chat-user-list-wrapper { |
| 330 | /* Safari can't do fieldsets right, so we emulate one. */ |
| 331 | border-radius: 0.5em; |
| 332 | margin: 0.3em 0 0.2em 0; |
| 333 | padding: 0.25em 0.5em; |
| 334 | font-size: 85%; |
| 335 | border-style: inset; |
| 336 | border-width: 0 1px 1px 1px/*else collides with the LEGEND*/; |
| 337 | } |
| 338 | body.chat #chat-user-list-wrapper > legend { |
| 339 | font-weight: initial; |
| 340 | padding: 0 0.5em; |
| 341 | position: relative; |
| 342 | top: -1.75ex; |
| 343 | } |
| 344 | body.chat #chat-user-list { |
| 345 | margin-top: -1.25ex; |
| 346 | display: flex; |
| 347 | flex-direction: row; |
| 348 | flex-wrap: wrap; |
| 349 | align-items: center; |
| 350 | } |
| 351 | body.chat #chat-user-list .help-buttonlet { |
| 352 | margin: 0.2em 0.5em 0.2em 0; |
| 353 | } |
| 354 | body.chat #chat-user-list .chat-user { |
| 355 |