On 25 November 2017 at 08:53, Richard Hipp<[email protected]> wrote: > Send me your ideas of what you think timelines should look like. Even > better: send me mock-ups.
Since we’re at it, I’m going ahead with some other CSS suggestions. Here I’ve mostly focused on “calendar” demarcations which Ithink should get more attention. Overall, it’s more compact but it uses more visualcues to “guide” the users’ eyes. These modifications can be directly added at end of the “style.css”verbatim; however, for one or two of these items I had to get into HTML code andunfortunately that can only be applied in fossil C code (Just added a class to TRs for timelineDate and changed Branch background colors opacity). Applying over https://www3.fossil-scm.org/site.cgi/timeline http://giometriq.com/fossil-css-drafts/www3.fossil-scm.org_site.cgi_timeline-draft1.png And over https://www2.fossil-scm.org/fossil/timeline?b=2017-09-01 http://giometriq.com/fossil-css-drafts/www2.fossil-scm.org_fossil_timeline_b=2017-09-01-draft1.png And https://www2.fossil-scm.org/fossil/timeline?b=2017-07-01+18:09:59 http://giometriq.com/fossil-css-drafts/www2.fossil-scm.org_fossil_timeline_b=2017-07-01+18_09_59-draft1.png That highlighted commit has the mouse hover over it. I wishI could achieve these without modifying the HTML code so this could be a simpleCSS theme change anyone could try it live with a copy and paste; I guess for now Ijust settle for some screen captures. /* resetting some values */.content { color: #222;}div.divider { background: none; border: none; font-weight: bold;}table.timelineTable { border-collapse: separate; border-spacing: 0px 1px; margin-left: 20px;} /* Adds a padding between "days" */table#timelineTable0 div.timelineDate { padding: 18px 0px 2px 0px; margin-left:-20px;}/* Skips the first date */table#timelineTable0 tr:nth-child(1) div.timelineDate:nth-child(1) { padding: 0;} /* Adds alternate row shades */table#timelineTable0 tr:nth-child(odd) { background-color:#f4f4f4;}table#timelineTable0 tr:nth-child(odd) td:nth-child(1) { background-color: #f0f6f9;}table#timelineTable0 td:nth-child(3) { border-radius: 0px 5px 5px 0px;}table#timelineTable0 td:nth-child(1) { border-radius: 5px 0px 0px 5px;;} /* Adds some more padding */table#timelineTable0 > tbody td { padding-top: 4px; padding-bottom: 5px;}td.timelineTableCell { padding-left: 7px; border: none;} /* mouse hover over effects */table#timelineTable0 tr:hover:nth-child(odd) { background-color: hsla(210, 70%, 94%, 1);}table#timelineTable0 tr:hover:nth-child(even) { background-color: hsla(210, 70%, 94%, 1);}table#timelineTable0 tr:hover td:nth-child(1) { background-color:hsl(210, 53%, 51%);}table#timelineTable0 tr:hover td:nth-child(1) a { color: white;} /* No shading for "date" stamps for this to work, each "date" TR should be classed with timelineDateTR in HTML source */ table#timelineTable0 tr.timelineDateTR, table#timelineTable0 tr.timelineDateTR:hover { background-color: rgba(255, 255, 255, 0);}table#timelineTable0 tr.timelineDateTR td:nth-child(1), table#timelineTable0 tr.timelineDateTR:hover td:nth-child(1) { background-color: rgba(255, 255, 255, 0);} table#timelineTable0 td:nth-child(1) a.timelineHistLink { display: inline-block; width: 100%; text-align: center;} Also I reduced the opacity of Branch background colors whichI’ve always felt were all a bit too dark and actually made the overlying textless readable. This can only be done in C code and is the most involved modificationhere. Colors are coded as RGB hexes in fossil. They need to be converted torgba(r, g, b, alpha) before sending over. I went with alpha value of 0.5. By the way, I greatly appreciate all the efforts everyone's puttinginto this project. Mike.
_______________________________________________ fossil-users mailing list [email protected] http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
