Addons swiper: Fix single addon card width in landscape orientation (o…

…penhab#2835)

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

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

@@ -1,12 +1,19 @@
 <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" />
+  <addon-card class="addons-swiper addon-card-single" v-if="addonsList.length === 1" :addon="addonsList[0]" :install-action-text="installActionText" :headline="headline" @addonButtonClick="addonButtonClick" />
   <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" :lazy-logo="false" @addonButtonClick="addonButtonClick" />
     </f7-swiper-slide>
   </f7-swiper>
 </template>
 
+<style lang="stylus">
+.addon-card-single
+  width 66.667%
+  @media (orientation: landscape)
+    width 28.571%
+</style>
+
 <script>
 import AddonCard from '@/components/addons/addon-card.vue'