Addons store: Use swiper for addon cards on mobile & Reduce size of addon card on desktop (#2216)

Fixes #2205 and fixes #1668.

This slighly reduces the addon card size on desktop and uses a swiper
(like in many app stores) instead of a flex on mobile.

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/web/src/components/addons/addon-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-link v-if="addon" class="addon-card padding-right-half" :href="`/addons/${addon.type}/${addon.uid}`">
+  <f7-link v-if="addon" class="addon-card" :href="`/addons/${addon.type}/${addon.uid}`">
     <div class="addon-card-inner card">
       <div class="addon-card-headline">
         <div>{{ headline || autoHeadline || "&nbsp;" }}</div>
@@ -32,19 +32,19 @@
 
 <style lang="stylus">
 .addon-card
-  padding 5px
-  width: 100%
+  width 100%
   position relative
 
   .addon-card-inner
     width 100%
     height 100%
-    margin: 0px
+    margin 0
     display flex
     flex-direction column
     scroll-snap-align center center
     padding 10px
     border-radius 5px
+    box-sizing border-box
 
     &:hover
       background var(--f7-list-link-hover-bg-color)
@@ -66,8 +66,6 @@
       text-overflow ellipsis
       overflow clip
       white-space nowrap
-      // width calc(100% - 5rem)
-      width 210px
       color var(--f7-text-color)
     .addon-card-title-after
       .preloader-inner .preloader-inner-left, .preloader-inner .preloader-inner-right, .preloader-inner .preloader-inner-line

bundles/org.openhab.ui/web/src/components/addons/addons-section.vue

@@ -9,15 +9,24 @@
     <f7-block-footer v-if="subtitle">
       {{ subtitle }}
     </f7-block-footer>
-    <div class="addons-cards">
-      <addon-card v-for="addon in featuredAddons" :key="addon.uid" :addon="addon" :install-action-text="installActionText" :headline="'Featured'" @addonButtonClick="addonButtonClick" />
-    </div>
-    <div v-if="suggested" class="addons-cards">
-      <addon-card v-for="addon in addonsList" :key="addon.uid" :addon="addon" :install-action-text="installActionText" :headline="'Suggested'" @addonButtonClick="addonButtonClick" />
-    </div>
-    <div v-else-if="showAsCards" class="addons-cards">
-      <addon-card v-for="addon in addonsList" :key="addon.uid" :addon="addon" :install-action-text="installActionText" @addonButtonClick="addonButtonClick" />
-    </div>
+    <template v-if="featuredAddons?.length > 0">
+      <addons-swiper v-if="!$device.desktop" :addons-list="featuredAddons" :install-action-text="installActionText" :headline="'Featured'" @addonButtonClick="addonButtonClick" />
+      <div v-else class="addons-cards">
+        <addon-card class="addon-card-desktop" v-for="addon in featuredAddons" :key="addon.uid" :addon="addon" :install-action-text="installActionText" :headline="'Featured'" @addonButtonClick="addonButtonClick" />
+      </div>
+    </template>
+    <template v-if="suggested">
+      <addons-swiper v-if="!$device.desktop" :addons-list="addonsList" :install-action-text="installActionText" :headline="'Suggested'" @addonButtonClick="addonButtonClick" />
+      <div v-else class="addons-cards">
+        <addon-card class="addon-card-desktop" v-for="addon in addonsList" :key="addon.uid" :addon="addon" :install-action-text="installActionText" :headline="'Suggested'" @addonButtonClick="addonButtonClick" />
+      </div>
+    </template>
+    <template v-else-if="showAsCards">
+      <addons-swiper v-if="!$device.desktop && !canExpand" :addons-list="addonsList" :install-action-text="installActionText" @addonButtonClick="addonButtonClick" />
+      <div v-else class="addons-cards">
+        <addon-card class="addon-card-desktop" v-for="addon in addonsList" :key="addon.uid" :addon="addon" :install-action-text="installActionText" @addonButtonClick="addonButtonClick" />
+      </div>
+    </template>
     <f7-list v-else media-list ref="addonlist" class="addons-table-list" no-chevron no-hairlines>
       <addon-list-item v-for="addon in addonsList" :key="addon.uid" :addon="addon" :install-action-text="installActionText" @addonButtonClick="addonButtonClick" />
     </f7-list>
@@ -70,36 +79,40 @@
         width 33.333%
       @media (min-width 1601px)
         width 25%
+.addons-swiper
+    margin-top 1rem
 .addons-cards
     margin-top 1rem
     display flex
-    flex-shrink 0
     flex-direction row
     align-content flex-start
     align-items flex-end
     flex-wrap wrap
-    // gap 0.5rem
-    padding-left var(--f7-safe-area-left)
-    .addon-card
+    gap 10px
+    .addon-card-desktop
       width 100%
-      @media (min-width: 481px)
-        width 50%
-      @media (min-width: 768px)
-        width 33.333%
-      @media (min-width: 1281px)
-        width 25%
-      @media (min-width: 1601px)
-        width 20%
+      @media (min-width: 450px)
+        width calc(50% - 10px)
+      @media (min-width: 600px)
+        width calc(33.333% - 10px)
+      @media (min-width: 800px)
+        width calc(25% - 10px)
+      @media (min-width: 1250px)
+        width calc(20% - 10px)
+      @media (min-width: 1600px)
+        width: calc(16.667% - 10px)
 </style>
 
 <script>
 import AddonListItem from './addon-list-item.vue'
 import AddonCard from './addon-card.vue'
 import { compareAddons } from '@/assets/addon-store'
+import AddonsSwiper from '@/components/addons/addons-swiper.vue'
 
 export default {
   props: ['addons', 'title', 'subtitle', 'showAll', 'featured', 'showAsCards', 'suggested', 'installActionText'],
   components: {
+    AddonsSwiper,
     AddonListItem,
     AddonCard
   },

bundles/org.openhab.ui/web/src/components/addons/addons-swiper.vue

@@ -0,0 +1,25 @@
+<template>
+  <addon-card class="addons-swiper" v-if="addonsList.length === 1" style="width: 66.667%" :addon="addonsList[0]" :install-action-text="installActionText" :headline="headline" @addonButtonClick="addonButtonClick" />
+  <f7-swiper class="addons-swiper" v-else pagination :params="{ spaceBetween: 10, slidesPerView: 1.5 }">
+    <f7-swiper-slide v-for="addon in addonsList" :key="addon.uid">
+      <addon-card :key="addon.uid" :addon="addon" :install-action-text="installActionText" :headline="headline" @addonButtonClick="addonButtonClick" />
+    </f7-swiper-slide>
+  </f7-swiper>
+</template>
+
+<script>
+import AddonCard from '@/components/addons/addon-card.vue'
+
+export default {
+  props: ['addonsList', 'installActionText', 'headline'],
+  emits: ['addonButtonClick'],
+  components: {
+    AddonCard
+  },
+  methods: {
+    addonButtonClick (addon) {
+      this.$emit('addonButtonClick', addon)
+    }
+  }
+}
+</script>