From 313e2e070d6c3851a59b7caa612d662ce2331a40 Mon Sep 17 00:00:00 2001
From: Jaroslav Havelik <j.havelik@gmail.com>
Date: Fri, 19 Jan 2024 21:45:36 +0100
Subject: [PATCH 1/2] fix: add z-index to event leader to overlap arrow

---
 .../events-timeline.component.html            |   2 +-
 .../events-timeline.component.scss            | 314 +++++++++---------
 2 files changed, 162 insertions(+), 154 deletions(-)

diff --git a/web/src/app/shared/components/events-timeline/events-timeline.component.html b/web/src/app/shared/components/events-timeline/events-timeline.component.html
index a18802586..f1f6e8312 100644
--- a/web/src/app/shared/components/events-timeline/events-timeline.component.html
+++ b/web/src/app/shared/components/events-timeline/events-timeline.component.html
@@ -84,7 +84,7 @@ <h4><span *ngIf="event.status === 'cancelled'" class="cancelled">Zrušeno: </spa
           </div>
           <div class="row footer">
             <div class="col d-flex">
-              <p *ngIf="event.leaders?.length" [innerHTML]="event.leaders | joinLeaders"></p>
+              <p *ngIf="event.leaders?.length" [innerHTML]="event.leaders | joinLeaders" class="leaders"></p>
             </div>
             <div class="col-12 col-md-auto justify-content-end mb-3">
               <a
diff --git a/web/src/app/shared/components/events-timeline/events-timeline.component.scss b/web/src/app/shared/components/events-timeline/events-timeline.component.scss
index f1b75bec6..25a7c7534 100644
--- a/web/src/app/shared/components/events-timeline/events-timeline.component.scss
+++ b/web/src/app/shared/components/events-timeline/events-timeline.component.scss
@@ -1,153 +1,161 @@
-@import "styles/variables";
-
-$date-height: 4rem;
-$circle-size: 2.5rem;
-$arrow-size: 1.5rem;
-$arrow-offset: 2px;
-$timeline-width: 0.2vh;
-
-h5 {
-  margin-bottom: 0px !important;
-}
-.group-badges {
-  z-index: 10;
-}
-
-.timeline {
-  position: relative;
-  min-height: 200px;
-}
-.timeline .loading {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  text-align: center;
-  margin-top: -24px;
-}
-
-.timeline-container .line,
-.timeline2-container .line {
-  position: absolute;
-  left: 50%;
-  height: 100%;
-  width: $timeline-width;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  background-color: #a9a9a9;
-  z-index: 0;
-}
-
-.timeline .event {
-  .date-container {
-    height: $date-height;
-    display: table;
-
-    h5 {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-
-  .timeline-container {
-    position: relative;
-
-    .circle-container {
-      height: $date-height;
-    }
-
-    .circle {
-      position: relative;
-      top: 50%;
-      margin-top: calc(-1 * $circle-size/2);
-      width: $circle-size;
-      height: $circle-size;
-      border-radius: 50%;
-      background-color: #ccc;
-      z-index: 5;
-    }
-
-    .arrow-horizontal {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 4;
-      height: $date-height;
-    }
-    .arrow-horizontal::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      right: 0;
-      width: $arrow-size;
-      height: $arrow-size;
-      margin-top: calc(-1 * $arrow-size/2);
-      margin-right: calc(-1 * $arrow-size/2);
-
-      transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-
-      background-color: #fff;
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-    }
-
-    .arrow-horizontal::after {
-      content: " ";
-      position: absolute;
-      width: $arrow-size;
-      height: 100%;
-      left: 0;
-      background-color: #fff;
-      display: inline-block;
-    }
-  }
-
-  .event-header,
-  .description {
-    position: relative;
-    z-index: 10;
-    overflow: hidden;
-  }
-}
-
-.timeline .event.cancelled .event-details {
-  text-decoration: line-through;
-}
-
-.timeline .event .event-header {
-  padding-top: 1rem;
-}
-.timeline .event .panel {
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-  background-color: #fff;
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (max-width: 992px) {
-  .timeline .event.event-big .circle-container {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .timeline .event.event-big {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .timeline .event.event-big .circle {
-    margin-top: 0;
-  }
-}
-
-@media print {
-  .event-container {
-    padding: 0 !important;
-  }
-  .event-header {
-    padding: 0 !important;
-  }
-
-  .timeline .month:not(.first) {
-    page-break-before: always;
-  }
-}
+@import "styles/variables";
+
+$date-height: 4rem;
+$circle-size: 2.5rem;
+$arrow-size: 1.5rem;
+$arrow-offset: 2px;
+$timeline-width: 0.2vh;
+
+h5 {
+  margin-bottom: 0px !important;
+}
+
+.group-badges {
+  z-index: 10;
+}
+
+.timeline {
+  position: relative;
+  min-height: 200px;
+}
+
+.timeline .loading {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  margin-top: -24px;
+}
+
+.timeline-container .line,
+.timeline2-container .line {
+  position: absolute;
+  left: 50%;
+  height: 100%;
+  width: $timeline-width;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  background-color: #a9a9a9;
+  z-index: 0;
+}
+
+.timeline .event {
+  .date-container {
+    height: $date-height;
+    display: table;
+
+    h5 {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+  .timeline-container {
+    position: relative;
+
+    .circle-container {
+      height: $date-height;
+    }
+
+    .circle {
+      position: relative;
+      top: 50%;
+      margin-top: calc(-1 * $circle-size / 2);
+      width: $circle-size;
+      height: $circle-size;
+      border-radius: 50%;
+      background-color: #ccc;
+      z-index: 5;
+    }
+
+    .arrow-horizontal {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 4;
+      height: $date-height;
+    }
+
+    .arrow-horizontal::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: $arrow-size;
+      height: $arrow-size;
+      margin-top: calc(-1 * $arrow-size / 2);
+      margin-right: calc(-1 * $arrow-size / 2);
+
+      transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+
+      background-color: #fff;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .arrow-horizontal::after {
+      content: " ";
+      position: absolute;
+      width: $arrow-size;
+      height: 100%;
+      left: 0;
+      background-color: #fff;
+      display: inline-block;
+    }
+  }
+
+  .event-header,
+  .description {
+    position: relative;
+    z-index: 10;
+    overflow: hidden;
+  }
+
+  .leaders {
+    z-index: 10;
+  }
+}
+
+.timeline .event.cancelled .event-details {
+  text-decoration: line-through;
+}
+
+.timeline .event .event-header {
+  padding-top: 1rem;
+}
+
+.timeline .event .panel {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media (max-width: 992px) {
+  .timeline .event.event-big .circle-container {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .timeline .event.event-big {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .timeline .event.event-big .circle {
+    margin-top: 0;
+  }
+}
+
+@media print {
+  .event-container {
+    padding: 0 !important;
+  }
+  .event-header {
+    padding: 0 !important;
+  }
+
+  .timeline .month:not(.first) {
+    page-break-before: always;
+  }
+}

From 3f20b16615a0688819739398c22a4f582e992de5 Mon Sep 17 00:00:00 2001
From: Jaroslav Havelik <j.havelik@gmail.com>
Date: Fri, 19 Jan 2024 21:49:23 +0100
Subject: [PATCH 2/2] fix: attempt to fix formatting

---
 .../events-timeline/events-timeline.component.scss     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/src/app/shared/components/events-timeline/events-timeline.component.scss b/web/src/app/shared/components/events-timeline/events-timeline.component.scss
index 25a7c7534..573bb9ff2 100644
--- a/web/src/app/shared/components/events-timeline/events-timeline.component.scss
+++ b/web/src/app/shared/components/events-timeline/events-timeline.component.scss
@@ -9,7 +9,6 @@ $timeline-width: 0.2vh;
 h5 {
   margin-bottom: 0px !important;
 }
-
 .group-badges {
   z-index: 10;
 }
@@ -18,7 +17,6 @@ h5 {
   position: relative;
   min-height: 200px;
 }
-
 .timeline .loading {
   position: absolute;
   top: 50%;
@@ -61,7 +59,7 @@ h5 {
     .circle {
       position: relative;
       top: 50%;
-      margin-top: calc(-1 * $circle-size / 2);
+      margin-top: calc(-1 * $circle-size/2);
       width: $circle-size;
       height: $circle-size;
       border-radius: 50%;
@@ -76,7 +74,6 @@ h5 {
       z-index: 4;
       height: $date-height;
     }
-
     .arrow-horizontal::before {
       content: "";
       position: absolute;
@@ -84,8 +81,8 @@ h5 {
       right: 0;
       width: $arrow-size;
       height: $arrow-size;
-      margin-top: calc(-1 * $arrow-size / 2);
-      margin-right: calc(-1 * $arrow-size / 2);
+      margin-top: calc(-1 * $arrow-size/2);
+      margin-right: calc(-1 * $arrow-size/2);
 
       transform: rotate(45deg);
       -webkit-transform: rotate(45deg);
@@ -124,7 +121,6 @@ h5 {
 .timeline .event .event-header {
   padding-top: 1rem;
 }
-
 .timeline .event .panel {
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
   background-color: #fff;