Addons store: Multiple styling improvements (#2833)

Follow-up for #2216.

- Do not use addon swiper on iPad.
- Revert addon card size changes.
- Show more addon cards in swiper in landscape mode.

---------

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

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

@@ -25,7 +25,7 @@
           <addon-stats-line :addon="addon" :iconSize="15" />
         </div>
       </div>
-      <addon-logo class="logo-square" :lazy="true" :addon="addon" :size="150" />
+      <addon-logo class="logo-square" :lazy="lazyLogo !== undefined ? lazyLogo : true" :addon="addon" :size="150" />
     </div>
   </f7-link>
 </template>
@@ -111,7 +111,7 @@ import AddonStatsLine from './addon-stats-line.vue'
 import AddonLogo from '@/components/addons/addon-logo.vue'
 
 export default {
-  props: ['addon', 'headline', 'installActionText'],
+  props: ['addon', 'headline', 'installActionText', 'lazyLogo'],
   components: {
     AddonLogo,
     AddonStatsLine

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

@@ -10,19 +10,19 @@
       {{ subtitle }}
     </f7-block-footer>
     <template v-if="featuredAddons?.length > 0">
-      <addons-swiper v-if="!$device.desktop" :addons-list="featuredAddons" :install-action-text="installActionText" :headline="'Featured'" @addonButtonClick="addonButtonClick" />
+      <addons-swiper v-if="!$device.desktop && !$device.ipad" :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" />
+      <addons-swiper v-if="!$device.desktop && !$device.ipad" :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" />
+      <addons-swiper v-if="!$device.desktop && !$device.ipad && !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>
@@ -91,16 +91,14 @@
     gap 10px
     .addon-card-desktop
       width 100%
-      @media (min-width: 450px)
+      @media (min-width: 481px)
         width calc(50% - 10px)
-      @media (min-width: 600px)
+      @media (min-width: 768px)
         width calc(33.333% - 10px)
-      @media (min-width: 800px)
+      @media (min-width: 1281px)
         width calc(25% - 10px)
-      @media (min-width: 1250px)
+      @media (min-width: 1601px)
         width calc(20% - 10px)
-      @media (min-width: 1600px)
-        width: calc(16.667% - 10px)
 </style>
 
 <script>

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

@@ -1,8 +1,8 @@
 <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 class="addons-swiper" v-else pagination :params="{ spaceBetween: 10, slidesPerView: slidesPerView }" :key="slidesPerView">
     <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" />
+      <addon-card :key="addon.uid" :addon="addon" :install-action-text="installActionText" :headline="headline" :lazy-logo="false" @addonButtonClick="addonButtonClick" />
     </f7-swiper-slide>
   </f7-swiper>
 </template>
@@ -16,6 +16,12 @@ export default {
   components: {
     AddonCard
   },
+  computed: {
+    slidesPerView () {
+      if (this.$f7.width > this.$f7.height) return 3.5
+      return 1.5
+    }
+  },
   methods: {
     addonButtonClick (addon) {
       this.$emit('addonButtonClick', addon)