@saooti/octopus-sdk 41.1.12 → 41.1.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 41.1.14 (18/12/2025)
+
+**Misc**
+
+- Ajustements affichage pour smartphones
+
+## 41.1.13 (18/12/2025)
+
+**Misc**
+
+- Ajustements affichage pour smartphones
+
 ## 41.1.12 (18/12/2025)
 
 **Feature**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.1.12",
+  "version": "41.1.14",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/emission/EmissionInlineList.vue

@@ -12,7 +12,7 @@
         <EmissionPresentationItem
           v-if="emissionDisplay === 'simple'"
           :emission="option"
-          class="mx-2"
+          class="mx-2 inline-list-element"
           is-description
           :is-vertical="emissionVertical"
         />
@@ -162,7 +162,7 @@ function mainRubriquage(emission: Emission): string {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .octopus-app {
   .list-episode {
     padding: 2rem 0 1rem !important;
@@ -176,4 +176,10 @@ function mainRubriquage(emission: Emission): string {
     }
   }
 }
+
+.inline-list-element {
+  @media (width <= 960px) {
+    height: 334px;
+  }
+}
 </style>

package/src/components/display/emission/EmissionItem.vue

@@ -73,9 +73,10 @@ import ClassicImageBanner from '../../misc/ClassicImageBanner.vue';
 import { useI18n } from "vue-i18n";
 
 //Props 
-const props = defineProps({
-  emission: { default: () => ({}), type: Object as () => Emission },
-});
+const props = defineProps<{
+  /** The emission to display */
+  emission: Emission;
+}>();
 
 //Data 
 const activeEmission = ref(true);
@@ -135,5 +136,23 @@ async function hasPodcast(): Promise<void> {
 <style scoped lang="scss">
 article {
   max-height: 254px;  // Image size + a few pixels for border
+
+  // Adjust display for small screens
+  @media (width <= 960px) {
+    max-height: 500px;
+
+    a {
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
+
+    .element-name {
+      font-size: 1rem;
+    }
+
+    .element-description {
+      font-size: 0.7rem;
+    }
+  }
 }
-</style>
+</style>

package/src/components/display/podcasts/PodcastPresentationList.vue

@@ -20,6 +20,7 @@
       >
         <template #after-image>
           <PodcastPlayButton
+            v-if="!isPhone"
             :podcast="item"
             :hide-play="false"
             :show-processing="false"

package/src/components/layout/PresentationItem.vue

@@ -82,7 +82,13 @@ const { useProxyImageUrl } = useImageProxy();
 // Calcul de la taille de l'image
 const tailleImage = computed(() => {
   // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
-  return props.vertical ? '396' : '250';
+  if (props.vertical) {
+    return '396';
+  } else if (isPhone.value) {
+    return '246';
+  } else {
+    return '250';
+  }
 });
 
 //Watch