change to timeline list

catalog/templates/_item_user_pieces.html

@@ -172,13 +172,8 @@
     <ul class="log-list">
       {% for log in mark.logs %}
         <li>
-          <span class="action">
-            <span>
-              <a target="_blank" rel="noopener"></a>
-            </span>
-            <span class="timestamp">{{ log.timestamp|date }}</span>
-          </span>
-          <p>{{ log.action_label }}</p>
+          <span class="log-info">{{ log.timestamp|date }}</span>
+          <span class="log-info">{{ log.action_label }}</span>
         </li>
       {% endfor %}
     </ul>

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;