Fossil

Check-in [dc3f028290]
Login

Check-in [dc3f028290]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Replaced recent activity list fieldset element with a fieldset-like element because of Safari fieldset layout/sizing bugs.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chat-user-filter
Files: files | file ages | folders
SHA3-256: dc3f028290648d3d1ab609b046c8308091eb300ddf65ea11f4f0b426fa27cd71
User & Date: stephan 2021-09-23 15:15:23.681
Context
2021-09-23
15:32
Micro-tweaking of CSS to account for the fieldset substitution. ... (check-in: c00002656a user: stephan tags: chat-user-filter)
15:15
Replaced recent activity list fieldset element with a fieldset-like element because of Safari fieldset layout/sizing bugs. ... (check-in: dc3f028290 user: stephan tags: chat-user-filter)
14:43
CSS to attempt to work around Safari mobile shrinking the recent activity fieldset to smaller than its content. ... (check-in: fced72da86 user: stephan tags: chat-user-filter)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.c.
︙︙
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

  @        your environment.
  @       </div>
  @       <input type="file" name="file" id="chat-input-file">
  @     </div>
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </div>
  @ <fieldset id='chat-user-list-wrapper' class='hidden'>
  @   <legend>Active Users (most recent first)</legend>
  @   <div id='chat-user-list'>
  @     <div class='help-buttonlet'>
  @      Users who have messages in the currently-loaded list.<br>
  @      Tap a user name to filter messages on that user and
  @      tap again to clear the filter.
  @     </div>
  @   </div>
  @ </fieldset>
  @ <div id='chat-preview' class='hidden chat-view'>
  @  <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header>
  @  <div id='chat-preview-content' class='message-widget-content'></div>
  @  <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div>
  @ </div>
  @ <div id='chat-config' class='hidden chat-view'>
  @ <div id='chat-config-options'></div>








|








|








179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

  @        your environment.
  @       </div>
  @       <input type="file" name="file" id="chat-input-file">
  @     </div>
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </div>
  @ <div id='chat-user-list-wrapper' class='hidden'>
  @   <legend>Active Users (most recent first)</legend>
  @   <div id='chat-user-list'>
  @     <div class='help-buttonlet'>
  @      Users who have messages in the currently-loaded list.<br>
  @      Tap a user name to filter messages on that user and
  @      tap again to clear the filter.
  @     </div>
  @   </div>
  @ </div>
  @ <div id='chat-preview' class='hidden chat-view'>
  @  <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header>
  @  <div id='chat-preview-content' class='message-widget-content'></div>
  @  <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div>
  @ </div>
  @ <div id='chat-config' class='hidden chat-view'>
  @ <div id='chat-config-options'></div>
︙︙
Changes to src/style.chat.css.
︙︙
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

  padding: 0.25em;
  z-index: 200;
}

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  overflow: auto;
  flex: 2 1 auto;
  padding: 0 0.25em;
  margin-bottom: 0.5em;
}
body.chat #chat-messages-wrapper.loading > * {
  /* An attempt at reducing flicker when loading lots of messages. */
  visibility: hidden;
}








<








134
135
136
137
138
139
140

141
142
143
144
145
146
147

  padding: 0.25em;
  z-index: 200;
}

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  overflow: auto;

  padding: 0 0.25em;
  margin-bottom: 0.5em;
}
body.chat #chat-messages-wrapper.loading > * {
  /* An attempt at reducing flicker when loading lots of messages. */
  visibility: hidden;
}
︙︙
263
264
265
266
267
268
269



270
271
272
273
274
275
276
277
278
279
280
281
282
283
284

  font-family: monospace;
}

body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}




body.chat #chat-config,
body.chat #chat-preview {
  /* /chat configuration widget */
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 2 1 auto;
  padding: 0;
  margin: 0;
  align-items: stretch;
  min-height: 6em;
}
body.chat #chat-config #chat-config-options {
  /* /chat config options go here */








>
>
>
|






<








262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278

279
280
281
282
283
284
285

  font-family: monospace;
}

body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}
body.chat .chat-view {
  flex: 20 1 auto
  /*ensure that these grow more than the non-.chat-view elements*/;
}
body.chat #chat-config,
body.chat #chat-preview {
  /* /chat configuration widget */
  display: flex;
  flex-direction: column;
  overflow: auto;

  padding: 0;
  margin: 0;
  align-items: stretch;
  min-height: 6em;
}
body.chat #chat-config #chat-config-options {
  /* /chat config options go here */
︙︙
322
323
324
325
326
327
328
329
330
331
332
333

334
335
336
337
338


339
340

341
342
343
344
345
346
347
348
349
350
351
352

body.chat #chat-preview #chat-preview-buttons > button {
  padding: 0.5em;
  flex: 0 1 auto;
  margin: 0.25em 0;
}

body.chat #chat-user-list-wrapper {
  flex: 1 1 auto/*attempt to work around Safari mobile bug*/;
  border-radius: 0.5em;
  margin: 0.3em 0 0.2em 0;
  padding: 0.25em 0.5em;
  font-size: 85%;

  border-width: 1px/*some skins remove fieldset borders*/;
}
body.chat #chat-user-list-wrapper > legend {
  font-weight: initial;
  padding: 0 0.5em;


}
body.chat #chat-user-list {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: fit-content/*attempt to work around Safari mobile*/;
}
body.chat #chat-user-list .help-buttonlet {
  margin: 0.2em 0.5em 0.2em 0;
}
body.chat #chat-user-list .chat-user {
  margin: 0.2em;
  padding: 0.1em 0.5em 0.2em 0.5em;








|




>
|




>
>


>




<








323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

350
351
352
353
354
355
356

body.chat #chat-preview #chat-preview-buttons > button {
  padding: 0.5em;
  flex: 0 1 auto;
  margin: 0.25em 0;
}

body.chat #chat-user-list-wrapper {
  /* Safari can't do fieldsets right, so we emulate one. */
  border-radius: 0.5em;
  margin: 0.3em 0 0.2em 0;
  padding: 0.25em 0.5em;
  font-size: 85%;
  border-style: inset;
  border-width: 0 1px 1px 1px/*else collides with the LEGEND*/;
}
body.chat #chat-user-list-wrapper > legend {
  font-weight: initial;
  padding: 0 0.5em;
  position: relative;
  top: -1.75ex;
}
body.chat #chat-user-list {
  margin-top: -1.25ex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;

}
body.chat #chat-user-list .help-buttonlet {
  margin: 0.2em 0.5em 0.2em 0;
}
body.chat #chat-user-list .chat-user {
  margin: 0.2em;
  padding: 0.1em 0.5em 0.2em 0.5em;
︙︙