From 9b5f9e144092b5cb82742163a2ba0a405b3188c8 Mon Sep 17 00:00:00 2001
From: Robert Kleinschuster <robert.kleinschuster@niceshops.com>
Date: Fri, 26 May 2023 17:30:44 +0200
Subject: [PATCH] Filter layout small (#2458)

* improve feed layout on small screens

* improve feed layout on small screens
---
 src/components/FeedPage.vue        | 69 +++++++++++++++++-------------
 src/components/HistoryPage.vue     | 10 ++---
 src/components/ModalComponent.vue  |  4 +-
 src/components/SortingSelector.vue |  2 +-
 4 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 436726cc..fde456db 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,40 +1,49 @@
 <template>
     <h1 v-t="'titles.feed'" class="font-bold text-center my-4" />
 
-    <button class="btn mr-2" @click="exportHandler">
-        <router-link to="/subscriptions">Subscriptions</router-link>
-    </button>
+    <div class="flex flex-wrap md:items-center flex-col md:flex-row gap-2 children:(flex gap-1 items-center)">
+        <span>
+            <label for="filters">
+                <strong v-text="`${$t('actions.filter')}:`" />
+            </label>
+            <select
+                id="filters"
+                v-model="selectedFilter"
+                default="all"
+                class="select flex-grow"
+                @change="onFilterChange()"
+            >
+                <option v-for="filter in availableFilters" :key="filter" :value="filter" v-t="`video.${filter}`" />
+            </select>
+        </span>
 
-    <span>
-        <a :href="getRssUrl">
+        <span>
+            <label for="group-selector">
+                <strong v-text="`${$t('titles.channel_groups')}:`" />
+            </label>
+            <select id="group-selector" v-model="selectedGroupName" default="" class="select flex-grow">
+                <option value="" v-t="`video.all`" />
+                <option
+                    v-for="group in channelGroups"
+                    :key="group.groupName"
+                    :value="group.groupName"
+                    v-text="group.groupName"
+                />
+            </select>
+        </span>
+
+        <span class="md:ml-auto">
+            <SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
+        </span>
+    </div>
+    <hr />
+
+    <span class="flex gap-2">
+        <router-link class="btn" to="/subscriptions">Subscriptions</router-link>
+        <a :href="getRssUrl" class="btn">
             <font-awesome-icon icon="rss" />
         </a>
     </span>
-
-    <label for="filters" class="ml-10 mr-2">
-        <strong v-text="`${$t('actions.filter')}:`" />
-    </label>
-    <select id="filters" v-model="selectedFilter" default="all" class="select w-auto" @change="onFilterChange()">
-        <option v-for="filter in availableFilters" :key="filter" :value="filter" v-t="`video.${filter}`" />
-    </select>
-
-    <label for="group-selector" class="ml-10 mr-2">
-        <strong v-text="`${$t('titles.channel_groups')}:`" />
-    </label>
-    <select id="group-selector" v-model="selectedGroupName" default="" class="select w-auto">
-        <option value="" v-t="`video.all`" />
-        <option
-            v-for="group in channelGroups"
-            :key="group.groupName"
-            :value="group.groupName"
-            v-text="group.groupName"
-        />
-    </select>
-
-    <span class="md:float-right">
-        <SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
-    </span>
-
     <hr />
 
     <LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 8b592cb5..598cc9e0 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,14 +1,12 @@
 <template>
     <h1 class="font-bold text-center" v-t="'titles.history'" />
 
-    <div class="flex">
-        <div>
-            <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
+    <div class="flex md:items-center gap-2 flex-col md:flex-row">
+        <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
 
-            <button class="btn mx-3" v-t="'actions.export_to_json'" @click="exportHistory" />
-        </div>
+        <button class="btn" v-t="'actions.export_to_json'" @click="exportHistory" />
 
-        <div class="right-1">
+        <div class="ml-auto flex gap-1 items-center">
             <SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
         </div>
     </div>
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 0adb6744..0861e70c 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -45,13 +45,13 @@ export default {
 }
 
 .modal-container {
-    @apply w-min m-auto px-8 bg-white p-6 rounded-xl min-w-[20vw] relative;
+    @apply w-min m-auto bg-white p-5 rounded-xl min-w-[20vw] relative;
 }
 .dark .modal-container {
     @apply bg-dark-700;
 }
 
 .modal-container > button {
-    @apply absolute right-8 top-6;
+    @apply absolute right-2.5 top-1;
 }
 </style>
diff --git a/src/components/SortingSelector.vue b/src/components/SortingSelector.vue
index 3121c32c..c9f4b4a2 100644
--- a/src/components/SortingSelector.vue
+++ b/src/components/SortingSelector.vue
@@ -1,6 +1,6 @@
 <template>
     <label for="ddlSortBy" v-t="'actions.sort_by'" />
-    <select id="ddlSortBy" v-model="selectedSort" class="select w-auto">
+    <select id="ddlSortBy" v-model="selectedSort" class="select flex-grow">
         <option v-for="(value, key) in options" v-t="`actions.${key}`" :key="key" :value="value" />
     </select>
 </template>