[FR] Advanced timeline features #382
Description
Is your feature request related to a problem? Please describe.
This is mostly a question about whether it might be worth it to PR some custom timeline extensions I've been using locally that allow for more flexible timelines. I already have it all working, though I'm not a theme developer so the code may not be up to full standard for ITS.
Describe the solution you'd like
There are a couple extensions I've done:
Callout icon config
This adds some icons as callout metadata, such as icon-octagon-alert. These override the icon of a callout, which in the case of a timeline replaces the clock. Useful for marking some events as important, or sorting by type. Would need a bit more CSS work to look good with icons that aren't 'nearly round'.
Timeline breaks / empty timelines
A new callout that inherits most of the properties of a timeline, but doesn't show a box. Instead, the title and subtitle will appear floating next to it as an annotation. To go with the above, t-empty or a similar attribute suppresses the display of the title entirely. There may be a cleaner way to handle this, if it's possible to somehow just detect no text and make the default title empty.
Timeline styling
A new metadata, t-dash, that makes the center line dashed instead of solid. Again works well with breaks, to indicate long periods with no notable events.
Describe alternatives you've considered
Obviously this could all just remain a custom extension.
Additional context
>[!tl-break|t-l t-empty]
>[!timeline|t-l c-red icon-octagon-alert]+ **Day of Mourning** *20th Olarune, 994 YK*
>The Day of Mourning was the event in which the nation of Cyre was destroyed in a magical holocaust of unknown origins. This event marked the beginning of the end of the Last War. Over a million Cyrans perished, including Cyre's Queen Dannel ir'Wynarn, along with military personnel from Breland, Thrane, and Karrnath within the nation's borders.
>[!tl-break|t-l t-empty]
>[!tl-break|t-r t-1 t-dash] 2 Years Pass
Source Code
/* Fix timeline center-line with rounded style */
.callout.callout[data-callout~="timeline"] {
&[data-callout-metadata~="t-l"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&[data-callout-metadata~="t-r"] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/* Add zero-content timeline alternative */
.callout.callout[data-callout~="tl-break"] {
--callout-icon: '';
--callout-padding: 0;
--callout-title-padding: 10px;
--callout-content-padding: 10px;
--callout-margin: 0;
--timeline-shadow: var(--outline, var(--background-modifier-box-shadow));
--micro: 50px;
--tiny: 100px;
--small: 200px;
--small-med: 300px;
--med-small: 400px;
--medium: 500px;
--med-tall: 600px;
--tall: 700px;
--c-timeline: calc(50% - 2px);
background-color: transparent;
margin: 0;
border: 0;
clear: both;
position: unset !important;
& .callout-title {
align-content: center;
align-items: center;
& em {
font-style: normal;
display: block;
font-size: 14px;
line-height: 12px;
color: rgb(var(--callout-color));
}
}
&[data-callout-metadata~="t-empty"] {
.callout-title-inner {
visibility: hidden;
}
}
& .callout-icon {
display: none;
}
& .callout-content {
background-color: rgb(var(--callout-color), 0.1);
display: none;
}
--timeline-border: solid;
&[data-callout-metadata~="t-dash"] {
--timeline-border: dashed;
}
/* Side Alignment */
&[data-callout-metadata~="t-l"] {
border-right: 4px var(--timeline-border) rgb(var(--callout-color));
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: var(--c-timeline);
z-index: 0;
}
&[data-callout-metadata~="t-r"] {
border-left: 4px var(--timeline-border) rgb(var(--callout-color));
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: var(--c-timeline);
}
/* Title/Icon Alignment */
&[data-callout-metadata~="t-l"] > .callout-title {
flex-direction: row-reverse;
text-align: right;
}
&[data-callout-metadata~="t-l"] > .callout-title .callout-icon {
float: right;
position: absolute;
margin-right: -20px;
}
&[data-callout-metadata~="t-r"] > .callout-title .callout-icon {
float: left;
position: absolute;
margin-left: -20px;
}
&[data-callout-metadata~="t-1"] .callout-title {
margin-top: calc(var(--micro) / 2);
margin-bottom: calc(var(--micro) / 2);
}
&[data-callout-metadata~="t-2"] .callout-title {
margin-top: calc(var(--tiny) / 2);
margin-bottom: calc(var(--tiny) / 2);
}
&[data-callout-metadata~="t-3"] .callout-title { margin-top: var(--small); }
&[data-callout-metadata~="t-4"] .callout-title { margin-top: var(--small-med); }
&[data-callout-metadata~="t-5"] .callout-title { margin-top: var(--med-small); }
&[data-callout-metadata~="t-6"] .callout-title { margin-top: var(--medium); }
&[data-callout-metadata~="t-7"] .callout-title { margin-top: 350px; }
&[data-callout-metadata~="t-8"] .callout-title { margin-top: var(--med-tall); }
&[data-callout-metadata~="t-9"] .callout-title { margin-top: var(--tall); }
&[data-callout-metadata~="t-10"] .callout-title { margin-top: 750px; }
}
/* Would replace this with SCSS like the custom color attributes */
.callout.callout[data-callout-metadata~="icon-triangle-alert"] {
--callout-icon: triangle-alert;
}
.callout.callout[data-callout-metadata~="icon-octagon-alert"] {
--callout-icon: octagon-alert;
}
Metadata
Metadata
Assignees
Labels
Projects
Status