From 3dca7e2dca26d2bf0dcbc1bb5433c9a45c20ce96 Mon Sep 17 00:00:00 2001
From: Alessandro Jean <14254807+alessandrojean@users.noreply.github.com>
Date: Fri, 8 Sep 2023 19:48:57 -0300
Subject: [PATCH] Show label on top in small screens at the filters. (#30)

---
 website/package.json                              |  1 +
 website/pnpm-lock.yaml                            | 15 +++++++--------
 .../components/Extensions/ExtensionFilters.vue    | 10 ++++++++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/website/package.json b/website/package.json
index 1088723a..25568698 100644
--- a/website/package.json
+++ b/website/package.json
@@ -76,6 +76,7 @@
 		"@octokit/rest": "^20.0.1",
 		"@octokit/types": "^11.1.0",
 		"@tanstack/vue-query": "^4.34.0",
+		"@vueuse/core": "^10.4.1",
 		"axios": "^1.5.0",
 		"element-plus": "^2.3.12",
 		"lodash.groupby": "^4.6.0",
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 441c591a..48d2620f 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@iconify-prerendered/vue-mdi':
     specifier: ^0.23.1689058119
@@ -17,6 +13,9 @@ dependencies:
   '@tanstack/vue-query':
     specifier: ^4.34.0
     version: 4.34.0(vue@3.3.4)
+  '@vueuse/core':
+    specifier: ^10.4.1
+    version: 10.4.1(vue@3.3.4)
   axios:
     specifier: ^1.5.0
     version: 1.5.0
@@ -1257,7 +1256,6 @@ packages:
 
   /@types/web-bluetooth@0.0.17:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
-    dev: true
 
   /@typescript-eslint/eslint-plugin@6.5.0(@typescript-eslint/parser@6.5.0)(eslint@8.48.0)(typescript@5.2.2):
     resolution: {integrity: sha512-2pktILyjvMaScU6iK3925uvGU87E+N9rh372uGZgiMYwafaw9SXq86U04XPq3UH6tzRvNgBsub6x2DacHc33lw==}
@@ -1538,7 +1536,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
 
   /@vueuse/core@9.13.0(vue@3.3.4):
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
@@ -1605,7 +1602,6 @@ packages:
 
   /@vueuse/metadata@10.4.1:
     resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
-    dev: true
 
   /@vueuse/metadata@9.13.0:
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
@@ -1618,7 +1614,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
 
   /@vueuse/shared@9.13.0(vue@3.3.4):
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
@@ -5722,3 +5717,7 @@ packages:
   /yoga-wasm-web@0.3.3:
     resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue b/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
index b780b294..2250d9aa 100644
--- a/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
+++ b/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { toRefs } from "vue"
+import { computed, toRefs } from "vue"
+import { useMediaQuery } from "@vueuse/core"
+
 import {
 	ElForm,
 	ElFormItem,
@@ -9,6 +11,7 @@ import {
 	ElRadioGroup,
 	ElSelect,
 } from "element-plus"
+
 import { langName, simpleLangName } from "../../../config/scripts/languages"
 import type { Extension } from "../../queries/useExtensionsRepositoryQuery"
 
@@ -31,11 +34,14 @@ defineEmits<{
 }>()
 
 const { extensions } = toRefs(props)
+
+const isSmallScreen = useMediaQuery("(max-width: 767px)")
+const labelPosition = computed(() => isSmallScreen.value ? "top" : "right")
 </script>
 
 <template>
 	<div class="filters-list">
-		<ElForm label-width="120px">
+		<ElForm label-width="120px" :label-position="labelPosition">
 			<ElFormItem label="Search:">
 				<ElInput
 					:model-value="search"