@saooti/octopus-sdk 36.0.27 → 36.0.28

package/package.json

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

package/src/assets/general.scss

@@ -174,6 +174,10 @@ body{
       height: $octopus-mobile-item-size;
     }
   }
+  .img-box-podcast{
+    height: $octopus-item-podcast-size;
+    width: $octopus-item-podcast-size;
+  }
 
   .comma {
     display: flex;

package/src/assets/share.scss

@@ -77,7 +77,7 @@
       margin: 1em 0 0;
       padding: 0;
       display: grid; /* 1 */
-      grid-template-columns: repeat(auto-fill, $octopus-item-size); /* 2 */
+      grid-template-columns: repeat(auto-fill, $octopus-item-podcast-size); /* 2 */
       grid-gap: 1rem; /* 3 */
       justify-content: space-between; /* 4 */
       @media (max-width: 960px) {
@@ -280,6 +280,7 @@
       align-items: center;
       justify-content: center;
       z-index: 2;
+      width: fit-content;
       
       &:hover {
         background: #00000030;

package/src/components/display/categories/CategoryFilter.vue

@@ -186,7 +186,7 @@ export default defineComponent({
     background-size: cover;
     background-position: center;
     h1{
-      margin: 2rem 1rem auto;
+      margin: auto 1rem auto;
       font-size: 2rem;
       color: white;
     }

package/src/components/display/list/SwiperList.vue

@@ -50,7 +50,7 @@ export default defineComponent({
       if (window.innerWidth <= 450) {
         return 12.5;
       }
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 16.5;
+      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13.5;
     },
   },
   
@@ -93,7 +93,7 @@ export default defineComponent({
 .swiper-button-prev{
   left: 0;
 }
-.swiper-slide-active{
+/* .swiper-slide-active{
   padding-left:27px;
   @media (max-width: 550px) {
     padding-left:0;
@@ -101,7 +101,7 @@ export default defineComponent({
 }
 .swiper-slide-next{
   padding-right:27px;
-}
+} */
 .swiper-button-lock{
   display: flex;
 }

package/src/components/display/live/RadioImage.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="img-box position-relative flex-shrink-0 mb-3 me-3 float-start">
+  <div class="img-box img-box-podcast position-relative flex-shrink-0 mb-3 me-3 float-start">
     <img
       v-lazy="radio.imageUrl ?proxyImageUrl(radio.imageUrl, '330') :'/img/emptyradio.webp'"
       width="330"
       height="330"
-      class="img-box"
+      class="img-box img-box-podcast"
       :title="$t('Canal name image',{name:radio.name})"
       :alt="$t('Canal name image',{name:radio.name})"
     >

package/src/components/display/participant/ParticipantItem.vue

@@ -130,6 +130,7 @@ export default defineComponent({
   flex-direction: column;
   margin: 1rem 0;
   align-items: center;
+  width: $octopus-item-size;
 
   .participant-description {
     overflow: hidden;

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

@@ -1,13 +1,13 @@
 <template>
   <div
     v-if="podcast"
-    class="img-box mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start"
+    class="img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start"
   >
     <img
       v-lazy="proxyImageUrl(podcast.imageUrl,'330')"
       width="330"
       height="330"
-      class="img-box"
+      class="img-box img-box-podcast"
       :alt="$t('Episode name image', {name:podcast.title})"
     >
     <div

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

@@ -128,8 +128,8 @@ export default defineComponent({
   border-radius: $octopus-borderradius;
   list-style: none;
   position: relative;
-  width: $octopus-item-size;
-  height: 23.5rem;
+  width: $octopus-item-podcast-size;
+  height: 20.5rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -142,12 +142,12 @@ export default defineComponent({
     padding: 1rem;
     color: #333;
     background-color: rgba(255, 255, 255, 0.92);
-    height: $octopus-item-size;
+    height: $octopus-item-podcast-size;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.9em;
     position: absolute;
-    width: $octopus-item-size;
+    width: $octopus-item-podcast-size;
     word-break: break-word;
     &.after-podcast-description:after {
       content: '...';

package/src/components/form/ClassicMultiselect.vue

@@ -167,6 +167,8 @@ import vSelect from "vue-select";
   --vs-dropdown-option--active-bg: #ddd;
   --vs-dropdown-option--active-color: black;
   --vs-font-size:0.8rem;
+  --vs-border-width: 2px;
+  --vs-border-color: #dee2e6;
 }
 .octopus-app{
   .vs__dropdown-option{

package/src/components/form/ClassicSearch.vue

@@ -48,6 +48,7 @@ export default defineComponent({
       border: 2px solid #dee2e6;
       border-radius: $octopus-borderradius;
       margin: 0 !important;
+      height: 44px;
     }
     .saooti-search,
     .saooti-remove {

package/src/sass/_variables.scss

@@ -3,7 +3,8 @@ $font-family-sans-serif: sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
-$octopus-item-size: 16.5rem !default;
+$octopus-item-size: 12.5rem !default;
+$octopus-item-podcast-size: 13.5rem !default;
 $octopus-mobile-item-size: 12.5rem !default;
 $octopus-borderradius: 0.2rem !default;
 

package/src/stores/ParamSdkStore.ts

@@ -18,7 +18,7 @@ const state:ParamStore = {
     allCategories: [],
     isLiveTab: true,
     isCaptchaTest: true,
-    podcastItem:16.5,
+    podcastItem:13.5,
     isInlineAnimation:true,
   },
   podcastPage: {