Merge pull request #216 from buggregator/issue/#96-inspector-page-imp…

…rove #96 polish mobile styles for inspector-page-timeline
buggregator · Aug 11, 2024 · 3a87499 · 3a87499
2 parents bd6af11 + b26d56a
commit 3a87499
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git a/src/assets/mixins.scss b/src/assets/mixins.scss
@@ -29,7 +29,7 @@
 }
 
 @mixin border-style {
-  @apply border-gray-300 dark:border-gray-500 divide-gray-300 dark:divide-gray-500;
+  @apply border border-gray-300 dark:border-gray-500 divide-gray-300 dark:divide-gray-500;
 }
 
 @mixin text-responsive {

diff --git a/src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue b/src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue
@@ -110,7 +110,13 @@ const segmentRows = computed(() => {
       </div>
     </div>
 
-    <div v-if="segmentRows.length > 0" class="inspector-page-timeline__body">
+    <div
+      v-if="segmentRows.length > 0"
+      class="inspector-page-timeline__body"
+      :style="{
+        'background-size': `${(100 / (COLUMNS_NUMBER + 1)).toFixed(2)}% 20%`,
+      }"
+    >
       <div
         class="inspector-page-timeline__body-cells"
         :class="`grid-cols-${COLUMNS_NUMBER + 1}`"
@@ -124,18 +130,16 @@ const segmentRows = computed(() => {
         </div>
       </div>
 
-      <div
-        class="inspector-page-timeline__segments"
-        :style="{
-          'background-size': `${(100 / COLUMNS_NUMBER).toFixed(2)}% 20%`,
-        }"
-      >
+      <div class="inspector-page-timeline__segments">
         <div
           v-for="segmentRow in segmentRows"
           :key="`${segmentRow.label} - ${segmentRow.duration}`"
           class="inspector-page-timeline__segment"
         >
-          <div class="inspector-page-timeline__segment-label">
+          <div
+            class="inspector-page-timeline__segment-label"
+            :title="segmentRow.label"
+          >
             {{ segmentRow.label }}
           </div>
 
@@ -212,37 +216,32 @@ const segmentRows = computed(() => {
 }
 
 .inspector-page-timeline__body {
-  @apply border border-gray-50 dark:border-gray-600;
+  @include border-style;
+  @apply bg-gradient-to-r from-gray-300 dark:from-gray-900 from-[1px] to-transparent to-[1px];
+  @apply border-l-transparent;
 }
 
 .inspector-page-timeline__body-cells {
-  @apply grid grid-cols-6 divide-x border-b;
+  @include border-style;
+  @apply grid grid-cols-6;
+  @apply border-x-0 border-t-0;
   @apply font-bold text-center text-2xs sm:text-xs md:text-sm;
-  @apply divide-gray-50 dark:divide-gray-600 border-gray-50 dark:border-gray-600;
 }
 
 .inspector-page-timeline__body-cell {
   @apply py-2 px-3;
 }
 
 .inspector-page-timeline__segments {
-  background-image: linear-gradient(to right, #dedede 1px, transparent 1px);
-
-  .dark & {
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0.04) 1px,
-      transparent 1px
-    );
-  }
+  @apply block;
 }
 
 .inspector-page-timeline__segment {
-  @apply mt-2 text-right cursor-pointer;
+  @apply text-right cursor-pointer;
 }
 
 .inspector-page-timeline__segment-label {
-  @apply text-2xs md:text-xs font-bold whitespace-nowrap pr-2 pb-1 opacity-20;
+  @apply text-2xs md:text-xs font-bold whitespace-nowrap px-2 py-1 opacity-20 overflow-auto;
 
   .inspector-page-timeline__segment:hover & {
     @apply opacity-100;

diff --git a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue b/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue
@@ -142,13 +142,13 @@ const currentDevice = ref(props.device);
 
   &::after {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
     content: "";
   }
 
   &::before {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
     content: "";
   }
 }
@@ -158,13 +158,13 @@ const currentDevice = ref(props.device);
 
   &::before {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
     content: "";
   }
 
   &::after {
     @include border-style;
-    @apply border bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
+    @apply bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
     content: "";
   }
 }

diff --git a/src/shared/ui/table-base/table-base.vue b/src/shared/ui/table-base/table-base.vue
@@ -10,7 +10,7 @@
 @import "src/assets/mixins";
 .table-base {
   @include border-style;
-  @apply bg-gray-100 dark:bg-gray-800 text-sm border divide-y;
+  @apply bg-gray-100 dark:bg-gray-800 text-sm divide-y;
 }
 </style>