...

1 files changed, 40 insertions, 43 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 1aa5e731..5af3a9ef 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -6,10 +6,6 @@
   width: 100%
   overflow-wrap: break-word
 
-  &-item
-    position: relative
-    padding: 0.5em
-
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
 $timeline-line-color: $primary
@@ -32,29 +28,23 @@ $timeline-line-color-current: #36c2e6
     box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)
 
 .timeline-line
-  &-area-container
-    position: absolute
-    display: flex
-    justify-content: flex-end
-    padding-right: 5px
-    z-index: 1
+  display: flex
+  flex-direction: column
+  align-items: center
+  width: 30px
 
-    top: 0em
-    bottom: 0em
-    left: 0.5em
-    width: 60px
-    transition: width 0.8s
+  position: absolute
+  z-index: 1
+  left: 2em
+  top: 0
+  bottom: 0
 
-    @include media-breakpoint-down(sm)
-      width: 40px
+  transition: left 0.5s
 
-  &-area
-    display: flex
-    flex-direction: column
-    align-items: center
-    width: 30px
+  @include media-breakpoint-down(sm)
+    left: 1em
 
-  &-segment
+  .segment
     width: $timeline-line-width
     background: $timeline-line-color
 
@@ -70,13 +60,13 @@ $timeline-line-color-current: #36c2e6
       flex: 0 0 auto
       background: linear-gradient($timeline-line-color-current, transparent)
 
-  &-node-container
+  .node-container
     flex: 0 0 auto
     position: relative
     width: $timeline-line-node-radius
     height: $timeline-line-node-radius
 
-  &-node
+  .node
     width: $timeline-line-node-radius + 2
     height: $timeline-line-node-radius + 2
     position: absolute
@@ -88,42 +78,49 @@ $timeline-line-color-current: #36c2e6
     animation: 1s infinite alternate
     animation-name: timeline-line-node-noncurrent
 
-.timeline-top
-  position: relative
-  text-align: right
-
-  .timeline-line-segment
-    flex: 1 1 auto
-
 .current
   &.timeline-item
     padding-bottom: 2.5em
 
   .timeline-line
-    &-segment
-
+    .segment
       &.start
         background: linear-gradient($timeline-line-color, $timeline-line-color-current)
-
       &.end
         background: $timeline-line-color-current
-
-    &-node
+    .node
       animation-name: timeline-line-node-current
 
+.timeline-top
+  position: relative
+  text-align: right
+
+.timeline-item
+  position: relative
+  padding: 0.5em
+
 .timeline-item-card
   @extend .cru-card
-  @extend .clearfix
   position: relative
-  padding: 0.5em 2em 0.5em 60px
-  transition: background 0.5s, padding-left 0.8s
+  padding: 0.5em 2em 0.5em 4em
+  transition: background 0.5s, padding-left 0.5s
 
   @include media-breakpoint-down(sm)
-    padding-left: 40px
+    padding-left: 3em
 
   &:hover
     background: $gray-200
 
+.timeline-item-header
+  display: flex
+  align-items: center
+  @extend .mb-2
+
+.timeline-avatar
+  border-radius: 50%
+  width: 2em
+  height: 2em
+
 .timeline-item-delete-button
   position: absolute
   right: 0
@@ -171,5 +168,5 @@ $timeline-line-color-current: #36c2e6
   justify-content: center
 
   .timeline
-    max-width: 100em
-    flex-grow: 1
\ No newline at end of file
+    max-width: 80em
+    flex-grow: 1