✨ Refactor CSS (#5085)

argilla-io · Jun 25, 2024 · 4762f77 · 4762f77
1 parent 461ac7e
commit 4762f77
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="panel" :class="isExpanded ? '--expanded' : '--collapsed'">
+  <div
+    class="panel"
+    :class="[
+      isExpanded ? '--expanded' : '--collapsed',
+      hideOnDesktop ? '--mobile' : undefined,
+    ]"
+  >
     <BaseButton class="panel__header" @click="toggleExpand(isExpanded)">
       <slot name="panelHeader" />
       <svgicon
@@ -25,6 +31,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideOnDesktop: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     toggleExpand(value) {
@@ -72,4 +82,10 @@ export default {
     @include font-size(13px);
   }
 }
+
+.--mobile {
+  @include media(">=desktop") {
+    display: none !important;
+  }
+}
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -164,8 +164,8 @@
         </HorizontalResizable>
       </template>
       <BaseCollapsablePanel
-        class="--mobile"
-        :is-expanded="expandedGuidelines"
+        hideOnDesktop
+        :isExpanded="expandedGuidelines"
         @toggle-expand="expandedGuidelines = !expandedGuidelines"
       >
         <template #panelHeader>
@@ -543,9 +543,4 @@ export default {
 [data-title] {
   @include tooltip-mini("right", 12px);
 }
-.--mobile {
-  @include media(">=desktop") {
-    display: none;
-  }
-}
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
@@ -84,8 +84,8 @@
       </HorizontalResizable>
     </template>
     <BaseCollapsablePanel
-      class="--mobile"
-      :is-expanded="expandedGuidelines"
+      hideOnDesktop
+      :isExpanded="expandedGuidelines"
       @toggle-expand="expandedGuidelines = !expandedGuidelines"
     >
       <template #panelHeader>
@@ -213,9 +213,4 @@ export default {
     display: none;
   }
 }
-.--mobile {
-  @include media(">=desktop") {
-    display: none;
-  }
-}
 </style>