Merge pull request #13945 from ncounter/timeline-alignment

Fix: computing timeline icon and avatar alignment
openSUSE · Mar 6, 2023 · e57d07e · e57d07e
2 parents af4f3d0 + 791e523
commit e57d07e
Showing 1 changed file with 8 additions and 15 deletions.
diff --git a/src/api/app/assets/stylesheets/webui/timeline.scss b/src/api/app/assets/stylesheets/webui/timeline.scss
@@ -1,28 +1,21 @@
 // This stylesheet defines styles for use in the comments and request history merged timeline
 .timeline {
     $timeline-border-width: 0.125rem;
-    $timeline-offset: -(($avatars-counter-size / 2) + $timeline-border-width);
+    $timeline-item-avatar-width: 1.5rem;
+    $timeline-item-avatar-height: 1.5rem;
+    $timeline-offset: -(($timeline-item-avatar-width / 2) + ($timeline-border-width / 2));
     border-left: $timeline-border-width solid $gray-400;
 
     .timeline-item {
         position: relative;
         left: $timeline-offset; // The avatars of users involved in timeline items will be displayed on the timeline border
 
         .d-inline-flex i:first-child {
-            padding-top: $avatars-counter-size / 2;
-            height: $avatars-counter-size;
+            padding-top: $timeline-item-avatar-height / 2;
+            height: $timeline-item-avatar-height;
+            width: $timeline-item-avatar-width;
+            text-align: center;
             @extend .bg-white;
-
-            // Align specific icons with the timeline border, this differs depending on the icon shape
-            &.fa-code-commit {
-                padding-left: $timeline-border-width / 2;
-            }
-            &.fa-check, &.fa-comment {
-                padding-left: $timeline-border-width;
-            }
-            &.fa-circle, &.fa-times {
-                padding-left: $timeline-border-width * 2;
-            }
         }
 
         $timeline-item-avatar-margin: 0.5rem;
@@ -32,7 +25,7 @@
         }
 
         .timeline-item-comment {
-            margin-left: $avatars-counter-size + $timeline-border-width + $timeline-item-avatar-margin;
+            margin-left: $timeline-item-avatar-width + ($avatars-counter-size / 2);
         }
 
         i.timeline-break, i.timeline-offset {