From 96c95ea0745d3bed9b0f618cb2aebdf8bde34a7f Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 19 Jun 2020 22:14:21 +0800
Subject: [PATCH] fix(webui): wider display for collection expansion panel

for smaller screen size the expansion panel will take the full width
---
 komga-webui/src/views/BrowseSeries.vue | 29 +++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 645f37060..eab3f4823 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -113,7 +113,7 @@
 
           <v-row>
             <v-col>
-              <v-expansion-panels v-model="collectionPanel">
+              <v-expansion-panels v-model="collectionPanel" v-if="$vuetify.breakpoint.name !== 'xs'">
                 <v-expansion-panel v-for="(c, i) in collections"
                                    :key="i"
                 >
@@ -142,6 +142,33 @@
         </v-col>
       </v-row>
 
+      <v-row v-if="$vuetify.breakpoint.name === 'xs'">
+        <v-expansion-panels v-model="collectionPanel">
+          <v-expansion-panel v-for="(c, i) in collections"
+                             :key="i"
+          >
+            <v-expansion-panel-header>{{ c.name }} collection</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <horizontal-scroller>
+                <template v-slot:prepend>
+                  <router-link class="overline"
+                               :to="{name: 'browse-collection', params: {collectionId: c.id}}"
+                  >Manage collection
+                  </router-link>
+                </template>
+                <template v-slot:content>
+                  <div v-for="(s, i) in collectionsContent[c.id]"
+                       :key="i"
+                  >
+                    <item-card class="ma-2 card" :item="s"/>
+                  </div>
+                </template>
+              </horizontal-scroller>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-row>
+
       <v-divider class="my-4"/>
 
       <empty-state