Timeline: Fine-tuning (See #39)

v6ak · Sep 26, 2023 · 2f00720 · 2f00720
1 parent 859cb6a
commit 2f00720
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/client/src/main/scala/com/v6ak/zbdb/TimeLineRenderer.scala b/client/src/main/scala/com/v6ak/zbdb/TimeLineRenderer.scala
@@ -55,6 +55,13 @@ final class TimeLineRenderer(participantTable: ParticipantTable, plotRenderer: P
       td(`class` := "timeline-content", content),
     )
 
+    private def empty() = tr(
+      `class` := s"timeline-process",
+      td(`class` := "timeline-time")(br()),
+      td(`class` := "timeline-duration"),
+      td(`class` := "timeline-content"),
+    )
+
     private def end(content: Frag, className: String = "") = tr(
       `class` := s"timeline-end $className",
       td(`class` := "timeline-time"),
@@ -145,10 +152,13 @@ final class TimeLineRenderer(participantTable: ParticipantTable, plotRenderer: P
               duration = intervalTime,
             ),
             if (isFinish)
-              finish(
-                endTime,
-                fseq(s"Cíl: ${partMeta.place}", cumLen)
-                // TODO: stats
+              fseq(
+                empty(),
+                finish(
+                  endTime,
+                  fseq(s"Cíl: ${partMeta.place}", cumLen)
+                  // TODO: stats
+                )
               )
             else
               timePoint(

diff --git a/server/app/assets/main.less b/server/app/assets/main.less
@@ -167,6 +167,8 @@ body{
 
 .timeline {
     margin-bottom: 20px;
+
+    // We recomment even numbers. Otherwise, the centering looks quite odd.
     @thin-line: 2px;
     @thick-line: 6px;
 
@@ -204,6 +206,7 @@ body{
     .timeline-duration {
         padding-left: 5px
     }
+
     .timeline-point {
 
         &.arrival {
@@ -228,20 +231,7 @@ body{
         .with-bullet(red, red, 0, solid);
     }
     .timeline-point.finish {
-        .timeline-time, .timeline-content {
-            padding-top: 20px;
-        }
-        .with-bullet(green, green, @thick-line, solid, 20px);
-        .timeline-time:before{
-            // silly hack that covers the end of the line
-            content: "";
-            width: 7px;
-            height: 30px;
-            background-color: white;
-            position: absolute;
-            top: 27px;
-            right: -7px;
-        }
+        .with-bullet(green, green, 0, solid);
     }
     .timeline-point.start {
         .timeline-time, .timeline-content {