Fossil: Timeline

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

About branch accordion-experiments

Notes:

Simple plain text indicators hinting the status / available actions for the accordion may also work well, for example [+] and [-], or [open] and [close].
Since the "Open" and "Close" icons are defined as CSS background images, they may not be visible by default on web pages printed to paper or PDF. The same applies to the "Copy Hash" icon, and either could be changed to work with foreground <img> elements, if required.
- Update: the icons are now dynamically created foreground image elements instead of CSS background images. The advantage is they are now visible by default for printouts and PDFs, giving the important hint that there's more hidden contents in case of a folded accordion section.
- The variant of an empty <span> element with a CSS background image for the Copy Hash button was chosen so that no unwanted white-space is inserted around the button, to make it easier to keep the button on the same (wrapped) line as the target element, and to avoid the unwanted white-space to become part of text selection and copy-and-paste operations. The Copy Hash button may appear as a white gap on printouts, but without obscuring the fact there's more hidden contents. If the white gap on printouts is troublesome, the Copy Hash button could simply be suppressed using a CSS print media query.
This raises the question whether the accordion should be "disabled" and "unfolded" on printing? Probably not, i.e. follow the principle to "print what's visible"? And technically it may be complicated to unfold the accordion on printing, i.e. override Javascript-modified styles with CSS print media query styles?

Uncompressed source code for the "Open" and "Close" icons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
  style="fill: black; opacity:0"
  d="M16,16H0V0h16v16z" />
<path
  style="fill:rgb(240,240,240)"
  d="M14,14H2V2h12v12z" />
<path
  style="fill:rgb(64,64,64)"
  d="M13,13H3V3h10v10z" />
<path
  style="fill:rgb(248,248,248)"
  d="M12,12H4V4h8v8z" />
<path
  style="fill:rgb(80,128,208)"
  d="M11,9H5V7h6v6z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
  style="fill: black; opacity:0"
  d="M16,16H0V0h16v16z" />
<path
  style="fill:rgb(240,240,240)"
  d="M14,14H2V2h12v12z" />
<path
  style="fill:rgb(64,64,64)"
  d="M13,13H3V3h10v10z" />
<path
  style="fill:rgb(248,248,248)"
  d="M12,12H4V4h8v8z" />
<path
  style="fill:rgb(80,128,208)"
  d="M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z" />
</svg>

4 check-ins related to "accordion-experiments"

2020-04-08
14:07		Use dynamically created foreground image elements instead of CSS background images to indicate the status and available actions for the accordion, so they are visible by default for printouts and PDFs, invisible for noscript clients, and enhance compatibility with most skins (Xekri's "justify-content: space-around;" is crunchy, however). ... (check-in: 1006de1e66 user: florian tags: accordion-experiments-2)
2020-04-05
14:30		Use regular comments in Javascript files, instead of comments private to the mkbuiltin utility, so the files are easier to reuse and test outside of Fossil, and easier to process with synatx highlighting-enabled text editors. ... (Closed-Leaf check-in: 04f232aaae user: florian tags: accordion-experiments)
14:28		Use SVG icons to indicate the status and available actions for the accordion. ... (check-in: 6126a54132 user: florian tags: accordion-experiments)
2020-04-02
18:56		Fix the "fossil revert" command so that it works even for a new --empty checkout. ... (Closed-Leaf check-in: 04bbb05df7 user: drh tags: accordion-about-wiki)