diff --git a/catalog/templates/_item_user_pieces.html b/catalog/templates/_item_user_pieces.html index 7acc6981..387a2637 100644 --- a/catalog/templates/_item_user_pieces.html +++ b/catalog/templates/_item_user_pieces.html @@ -172,13 +172,8 @@ diff --git a/common/static/scss/_mark.scss b/common/static/scss/_mark.scss index 327e9404..8ca82189 100644 --- a/common/static/scss/_mark.scss +++ b/common/static/scss/_mark.scss @@ -11,18 +11,39 @@ } } +// make log list like a timeline list +// source: https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem ul.log-list { - padding-left: 20px; - li { - list-style-type: disc; - - .log-info { - margin-right: 0.5rem; - } - } + list-style: disc; + // You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page + position: relative; + // Use padding to space things out rather than margins as the line would get broken up otherwise + margin: 0; + padding-bottom: 0.5em; + padding-left: 0.8em; } +// The actual line being placed before each list item, tweak width and color as appropriate +li:before { + background-color: var(--pico-color); + width: 2px; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: -0.75em; +} + +// Start the line further down on the first list item +li:first-child:before { top: 15px; } + +// Stop the line short on the final list item +li:last-child:before { height: 15px; } +} + + + footer.log-command { display: flex;