fix(#1407): fix visualization in 1024px viewport (#1420)

(cherry picked from commit 7e224d4) - styles of selectors for 1024px screens (#1441) (cherry picked from commit 4646c17)
argilla-io · May 10, 2022 · 46f8d4d · 46f8d4d
1 parent 261f53a
commit 46f8d4d
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 27 deletions.
diff --git a/frontend/assets/scss/abstract/mixins/_media-queries.scss b/frontend/assets/scss/abstract/mixins/_media-queries.scss
@@ -43,7 +43,7 @@
 /// @example scss - Creates a single breakpoint with the label `phone`
 ///  $breakpoints: ('phone': 320px);
 ///
-$breakpoints: ( 'phone': 320px, 'tablet': 768px, 'desktop': 1024px, 'desktopLarge': 1450px, 'xxl': 1900px, ) !default;
+$breakpoints: ( 'phone': 320px, 'tablet': 768px, 'desktop': 1100px, 'desktopLarge': 1450px, 'xxl': 1900px, ) !default;
 ///
 /// Creates a list of static expressions or media types
 ///

diff --git a/frontend/components/commons/header/filters/FilterDropdown.vue b/frontend/components/commons/header/filters/FilterDropdown.vue
@@ -124,7 +124,7 @@ export default {
   }
   &__content {
     position: absolute;
-    top: 50px;
+    top: calc(100% + 10px);
     left: 0;
     margin-top: 0;
     box-shadow: $shadow;

diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -147,8 +147,11 @@ export default {
     width: calc(100% - 300px);
   }
   &__searchbar {
-    margin-right: 2em;
+    margin-right: 10px;
     width: 100%;
+    @include media(">desktop") {
+      margin-right: 15px;
+    }
     &.--extended {
       width: 100%;
       margin-right: 0;

diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue
@@ -288,35 +288,31 @@ $number-size: 18px;
   $this: &;
   position: relative;
   display: inline-block;
-  z-index: 2;
   &__list {
     display: flex;
     &__content {
       width: 455px;
-      left: 0;
-      right: 0;
+      right: -10em;
       margin: auto;
       position: absolute;
-      top: calc(100% + 1em);
+      top: calc(100% + 10px);
       box-shadow: $shadow;
       background: $lighter-color;
       padding: 20px 20px 10px 4em;
       border-radius: $border-radius;
       max-height: 550px;
+      z-index: 2;
+      @include media(">desktop") {
+        left: 0;
+        right: 0;
+      }
       &--sort {
         max-width: 410px;
       }
       &--large {
         // width: 910px;
         max-height: 80vh;
         overflow: auto;
-        & > span {
-          // display: inline-block;
-          // width: 50%;
-          // &:nth-child(2n + 1) {
-          //   padding-right: 1em;
-          // }
-        }
       }
     }
     &__item {
@@ -341,13 +337,17 @@ $number-size: 18px;
       position: relative;
       margin-bottom: 0;
       margin-top: 0;
-      padding: 0.8em 1em;
+      padding: 0.8em;
       border-radius: $border-radius;
-      margin-right: 1em;
+      margin-right: 10px;
       color: $font-secondary;
       @include font-size(15px);
       font-family: $sff;
       white-space: nowrap;
+      @include media(">desktop") {
+        padding: 0.8em 1em;
+        margin-right: 15px;
+      }
       &:hover {
         background: palette(grey, smooth);
       }

diff --git a/frontend/components/core/ReTag.vue b/frontend/components/core/ReTag.vue
@@ -20,11 +20,14 @@ export default {
   border-radius: 8px;
   padding: 0.3em 1em;
   margin: 3.5px;
-  max-width: 200px;
+  max-width: 175px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: top;
   background: palette(grey, bg);
+  @include media(">desktopLarge") {
+    max-width: 200px;
+  }
 }
 </style>
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
@@ -478,6 +478,11 @@ export default {
       @include font-size(14px);
       font-family: $sff;
       text-align: left;
+      @include media("<=desktop") {
+        .svg-icon {
+          display: block;
+        }
+      }
       span {
         white-space: nowrap;
       }
@@ -494,7 +499,7 @@ export default {
   &__item {
     position: relative;
     list-style: none;
-    padding: 2em 8em 2em 2em;
+    padding: 2em 5em 2em 2em;
     display: flex;
     width: 100%;
     border-bottom: 1px solid $line-light-color;
@@ -509,8 +514,9 @@ export default {
         max-width: 120px;
       }
       &:first-child {
-        flex-shrink: 0;
-        min-width: 240px;
+        width: auto;
+        min-width: auto;
+        flex-grow: 1.5;
       }
     }
     .svg-icon {

diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -228,9 +228,16 @@ button {
   outline: none;
   background: transparent;
   padding-left: 0;
+  padding-right: 0;
   color: $font-secondary;
   @include font-size(14px);
   font-family: $sff;
+  @include media("<=desktop") {
+    ::v-deep svg {
+      margin-right: 0 !important;
+      display: block;
+    }
+  }
   &:hover,
   &.active {
     background: $bg;

diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
@@ -258,13 +258,6 @@ export default {
   }
   &__table {
     margin-bottom: 2em !important;
-    @include media("<=desktop") {
-      ::v-deep .table-info__header {
-        .table-info__item__col:first-child button {
-          width: 70px;
-        }
-      }
-    }
     ::v-deep {
       .table-info__item__col {
         width: 130px;