fix(#1054): remove old scroll padlock button

argilla-io · Feb 3, 2022 · a1d6444 · a1d6444
1 parent 983c5d6
commit a1d6444
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 101 deletions.
diff --git a/frontend/components/text-classifier/results/RecordString.vue b/frontend/components/text-classifier/results/RecordString.vue
@@ -16,49 +16,26 @@
   -->
 
 <template>
-  <span class="record__scroll__container">
-    <span
-      ref="list"
-      :class="[
-        'record__scroll--large',
-        !allowScroll ? 'record__scroll--prevent' : '',
-      ]"
-    >
-      <re-button
-        v-if="scrollHeight >= 800"
-        :title="allowScroll ? 'prevent scroll' : 'allow scroll'"
-        class="record__scroll__button button-icon"
-        @click="allowScroll = !allowScroll"
-      >
-        <svgicon
-          :name="allowScroll ? 'unlock' : 'lock'"
-          width="15"
-          height="14"
-        ></svgicon>
-      </re-button>
-      <div v-if="isList(text)">
-        <div v-for="item in text" :key="item.index">
-          <span
-            class="record__content"
-            v-html="$highlightSearch(queryText, item)"
-          >
-          </span>
-        </div>
+  <div>
+    <div v-if="isList(text)">
+      <div v-for="item in text" :key="item.index">
+        <span
+          class="record__content"
+          v-html="$highlightSearch(queryText, item)"
+        >
+        </span>
       </div>
+    </div>
 
-      <span
-        v-else
-        class="record__content"
-        v-html="$highlightSearch(queryText, text)"
-      >
-      </span>
+    <span
+      v-else
+      class="record__content"
+      v-html="$highlightSearch(queryText, text)"
+    >
     </span>
-  </span>
+  </div>
 </template>
 <script>
-import "assets/icons/lock";
-import "assets/icons/unlock";
-
 export default {
   props: {
     text: {
@@ -70,26 +47,10 @@ export default {
       default: undefined,
     },
   },
-  data: () => ({
-    allowScroll: false,
-    scrollHeight: undefined,
-  }),
-  updated() {
-    this.calculateScrollHeight();
-  },
-  mounted() {
-    this.calculateScrollHeight();
-  },
   methods: {
     isList(record) {
       return Array.isArray(record);
     },
-    calculateScrollHeight() {
-      if (this.$refs.list) {
-        const padding = 2;
-        this.scrollHeight = this.$refs.list.clientHeight + padding;
-      }
-    },
   },
 };
 </script>
@@ -103,52 +64,6 @@ export default {
 </style>
 <style lang="scss" scoped>
 .record {
-  &__scroll {
-    display: block;
-    max-height: 300px;
-    overflow: auto;
-    border: 1px solid $line-smooth-color;
-    @include font-size(14px);
-    margin-bottom: 0.5em;
-    &--large {
-      display: block;
-      overflow: auto;
-      max-height: 800px;
-      margin-bottom: 0.5em;
-      ::v-deep .record__scroll__button {
-        right: 0;
-        top: 0;
-        .svg-icon {
-          margin-left: auto !important;
-        }
-      }
-    }
-    &__container {
-      position: relative;
-      display: block;
-    }
-    &__button {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: block;
-      background: $lighter-color;
-      border: 1px solid $primary-color;
-      border-radius: 3px;
-      height: 25px;
-      width: 25px;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      .svg-icon {
-        margin: auto;
-        fill: $primary-color;
-      }
-    }
-    &--prevent {
-      overflow: hidden;
-    }
-  }
   &__content {
     word-break: break-word;
   }

diff --git a/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue b/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
@@ -32,7 +32,7 @@
       class="sidebar__view-more"
       href="#"
       @click.prevent="$emit('limit', k)"
-      >{{ limit === 3 ? `view more` : `view less` }}</a
+      >{{ limit === 3 ? `show more` : `show less` }}</a
     >
   </div>
 </template>

diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
@@ -83,6 +83,16 @@ export default {
         style: "dracula",
       },
     ],
+    [
+      "nuxt-mq",
+      {
+        breakpoints: {
+          sm: 450,
+          md: 1901,
+          lg: Infinity,
+        },
+      },
+    ],
   ],
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)

diff --git a/frontend/package.json b/frontend/package.json
@@ -32,6 +32,7 @@
     "node-sass": "^5.0.0",
     "nuxt": "^2.14.6",
     "nuxt-highlightjs": "^1.0.1",
+    "nuxt-mq": "^2.0.2",
     "sass-loader": "^10.1.0",
     "stringz": "^2.1.0",
     "v-click-outside": "^3.1.2",