update timeline

webdevelop-pro · May 22, 2024 · 5aa8025 · 5aa8025
1 parent 9d9d5e6
commit 5aa8025
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 8 deletions.
diff --git a/src/components/BaseFilter/BaseFilter.vue b/src/components/BaseFilter/BaseFilter.vue
@@ -62,7 +62,6 @@ const onClearClick = () => {
 onClickOutside(target, () => close())
 
 watch(() => props.items, () => {
-  console.log(props.items)
   itemsInner.value = props.items;
   selectedFilters.value = 0;
   updateFilters();

diff --git a/src/components/BaseTable/BaseTable.vue b/src/components/BaseTable/BaseTable.vue
@@ -86,4 +86,11 @@ const btnClasses = computed(() => {
 					+mt(.3s)
 		td
 			color: $table-tbody-td-color
+	
+	&.is--size-small
+		:deep(tbody)
+			td
+				padding: $table-td-padding-small
+		:deep(th)
+			padding: $table-th-padding-small
 </style>
diff --git a/src/components/BaseTimeline/BaseTimeline.vue b/src/components/BaseTimeline/BaseTimeline.vue
@@ -4,11 +4,18 @@
       type: String,
       required: false,
     },
+    contentStyleDefault: {
+      type: Boolean,
+      default: true,
+    }
   })
 </script>
 
 <template>
-  <div class="BaseTimeline base-timeline">
+  <div
+    class="BaseTimeline base-timeline"
+    :class="{ 'is--content-style-default': contentStyleDefault }"
+  >
     <div class="base-timeline__content">
       <h3
         v-if="title"
@@ -24,6 +31,8 @@
 <style lang="sass" scoped>
 @import 'index.sass'
 .base-timeline
+  $root: &
+
   position: relative
 
   &__title
@@ -32,9 +41,12 @@
 
   &__content
     width: 100%
+    position: relative
+
+  &.is--content-style-default
+    #{$root}__content
     max-width: 740px
     margin: 108px auto 0
-    position: relative
     @media screen and (max-width: 767px)
       margin: 80px auto 0
 </style>
diff --git a/src/components/BaseTimeline/BaseTimelineCircle.vue b/src/components/BaseTimeline/BaseTimelineCircle.vue
@@ -41,6 +41,7 @@ const btnClasses = computed(() => {
   border-style: solid
   gap: 10px
   border-radius: 100%
+  z-index: 2
 
   &.is--type-inner
     width: 9px

diff --git a/src/components/BaseTimeline/BaseTimelineItem.vue b/src/components/BaseTimeline/BaseTimelineItem.vue
@@ -65,6 +65,9 @@ const btnClasses = computed(() => {
 @import 'index.sass'
 .base-timeline-item
   --top: 42px
+  --normal-circle-height: 24px
+  --highlight-circle-bigger: 8px
+  --highlight-circle-height: calc(var(--normal-circle-height) + var(--highlight-circle-bigger))
 
   $root: &
 
@@ -80,11 +83,21 @@ const btnClasses = computed(() => {
   &::before
     content: ""
     position: absolute
-    top: calc(var(--top) + 24px)
+    top: calc(var(--top) + var(--normal-circle-height))
     left: 11px
     z-index: 1
     width: 2px
-    height: calc(100% - 24px)
+    height: calc(100% - var(--top) - var(--normal-circle-height) - (2 * var(--highlight-circle-bigger)))
+    background-color: $gray-30
+
+  &::after
+    content: ""
+    position: absolute
+    top: -16px // -(2 * var(--highlight-circle-bigger))
+    left: 11px
+    z-index: 1
+    width: 2px
+    height: calc(var(--top) + (2 * var(--highlight-circle-bigger)))
     background-color: $gray-30
 
   &.is--line-regular:last-child
@@ -93,6 +106,9 @@ const btnClasses = computed(() => {
   &.is--line-hidden:last-child
     &::before
       background: linear-gradient($gray-30, rgba($gray-30, 0)) !important
+  &:first-child
+    &::after
+      display: none
 
   &__items
     margin-left: 50px
@@ -115,6 +131,24 @@ const btnClasses = computed(() => {
 
   &.is--circle-type-highlight
     &::before
-      top: calc(var(--top) + 32px)
-      height: calc(100% - 32px)
+      top: calc(var(--top) + var(--highlight-circle-height))
+      height: calc(100% - var(--top) - var(--highlight-circle-height) - var(--highlight-circle-bigger))
+    &::after
+      height: calc(var(--top) + var(--highlight-circle-bigger))
+
+  &.is--title
+    &::before
+      top: var(--normal-circle-height)
+      height: calc(100% - var(--normal-circle-height) - var(--highlight-circle-bigger))
+    &::after
+      height: calc(2 * var(--highlight-circle-bigger))
+    #{$root}__circle
+      top: 0
+  
+  &.is--title.is--circle-type-highlight
+    &::before
+      top: var(--highlight-circle-height)
+      height: calc(100% - var(--highlight-circle-height))
+    &::after
+      height: var(--highlight-circle-bigger)
 </style>
diff --git a/src/styles/_fonts.sass b/src/styles/_fonts.sass
@@ -204,4 +204,6 @@ h6
   color: $primary
   cursor: pointer
   &:hover
-    text-decoration: none
+    text-decoration: none
+.is--gray-10
+  color: $gray-10