@saooti/octopus-sdk 36.0.2 → 36.0.3

package/src/assets/bootstrap.scss

@@ -22,14 +22,14 @@
     }
 		margin-top: 0;
 		margin-bottom:0;
-		font-weight: 600;
+		font-weight: 400;
 		line-height: 1.2;
 	}
 	h1,.h1{
 		font-size: 1.8rem;
 		text-align: center;
     color: #666;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 		@media (max-width: 500px){
       font-size: 1.2rem;
       margin: 0.5rem 0 1rem;
@@ -39,6 +39,12 @@
 		font-size: 1.17rem;
 		@media (max-width: 500px){
       font-size: 1rem;
+    }
+	}
+	.big-h2{
+		font-size: 1.7rem;
+		@media (max-width: 500px){
+      font-size: 1.1rem;
     }
 	}
 	h3,.h3{
@@ -54,6 +60,7 @@
 		font-size: .63rem;
 		display: flex;
     align-items: center;
+		font-weight: normal;
 	}
 	.text-truncate{
 		overflow: hidden;
@@ -71,7 +78,7 @@
 		user-select: none;
 		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 		font-size:.7rem;
-		border-radius: 4px;
+		border-radius: $octopus-borderradius;
 		background: $octopus-secondary-color; 
 		text-decoration: none !important;
 		white-space: nowrap;
@@ -94,9 +101,9 @@
 				padding: 0;
 				margin: 0 2rem 1rem 0;
 				border-radius: 0;
+				font-size: 0.9rem;
 				@media (max-width: 600px) {
-						margin: 0 1rem 1rem 0;
-						font-size: 0.8em;
+					margin: 0 1rem 1rem 0;
 				}
 				position: relative;
 				&:after {    
@@ -122,16 +129,23 @@
 					justify-content: center;
 					background: $octopus-primary-color;
 					border: 1px solid $octopus-primary-color;
-					border-radius: 4px !important;
+					border-radius: $octopus-borderradius !important;
 					color: white !important;
-					font-weight: bold;
-					&:focus,
-					&:hover,
-					&:active,
-					&.active {
+					font-weight: 500;
+					&:not(.btn-on-dark):focus,
+					&:not(.btn-on-dark):hover,
+					&:not(.btn-on-dark):active,
+					&:not(.btn-on-dark).active {
 							background: transparent;
 							color: $octopus-primary-color !important;
 					}
+					&.btn-on-dark:focus,
+					&.btn-on-dark:hover,
+					&.btn-on-dark:active,
+					&.btn-on-dark.active {
+							background: transparent;
+							border-color: white !important;
+					}
 					&:disabled{
 							background-color: #cccccc;
 							border: black;
@@ -165,7 +179,7 @@
 					justify-content: center;
 					color : $octopus-primary-color;
 					flex-shrink: 0;
-					font-weight: normal;
+					font-weight: 500;
 					border-radius: 50% !important;
 			}
 	

package/src/assets/form.scss

@@ -7,7 +7,7 @@
 		outline-color: transparent !important;
 		padding: 0.25rem 0.4rem;
 		border: 0.1rem solid #dee2e6;
-		border-radius: 0.3rem;
+		border-radius: $octopus-borderradius;
 		height: 2rem;
 		padding-right: 40px;
 	}
@@ -21,7 +21,7 @@
 		background: #fff;
 		background-image: none;
 		border: 0.1rem solid #dee2e6;
-		border-radius: 0.3rem;
+		border-radius:$octopus-borderradius;
 		color: #353535;
 		display: block;
 		font-size: 0.8rem;

package/src/assets/general.scss

@@ -32,6 +32,7 @@ body{
     color: $octopus-primary-color;
     &.link-hover{
       color: black !important;
+      font-weight: 500;
     }
     &.link-hover:hover, &.link-hover.router-link-exact-active.router-link-active{
       color: $octopus-primary-color !important;
@@ -73,8 +74,10 @@ body{
   }
   .page-box{
     background-color: $octopus-background;
-    padding: 2rem 5rem 5rem 5rem;
+    padding: 0 5rem 5rem 5rem;
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
     @media (max-width: 1400px) {
       padding: 2rem;
     }
@@ -90,28 +93,18 @@ body{
     background-color: white;
     padding: 1.3rem;
     margin: 0.5rem 0.5rem 0 0.5rem;
-    border-radius: 1rem;
+    border-radius: $octopus-borderradius;
     flex-grow: 1;
     overflow: auto;
-    box-shadow: 0px 12px 48px 6px $primaryColorReallyTransparent !important;
+    border: 2px solid #eee;
     @media (max-width: 500px){
       margin: 0.3rem;
       padding: 0.8rem;
-      box-shadow:0px 6px 20px 3px $primaryColorReallyTransparent !important;
-    }
-  }
-
-  .shadow-element{
-    box-shadow: 0px 12px 48px 6px $primaryColorMoreTransparent !important;
-    @media (max-width: 500px){
-      box-shadow:0px 6px 20px 3px $primaryColorMoreTransparent !important;
     }
   }
   
   .descriptionText{
-    white-space: pre-wrap; 
     word-wrap: break-word;
-    text-align: justify;
     font-size: 0.7rem;
     @media (max-width: 450px) {
       margin: 1rem 0;
@@ -144,6 +137,11 @@ body{
 			display: none !important;
 		}
 	}
+  .hide-smallest-screen{
+		@media (max-width: 380px) {
+			display: none !important;
+		}
+	}
   .show-phone{
     display: none;
     @media (max-width: 960px) {
@@ -157,10 +155,10 @@ body{
     display: contents;
   }
   .img-box{
-    height: 13rem;
-    width: 13rem;
+    height: $octopus-item-size;
+    width: $octopus-item-size;
     background-size: cover;
-    border-radius: 0.8rem !important;
+    border-radius: $octopus-borderradius !important;
     overflow: hidden;
     flex-shrink: 0;
     @media (max-width: 960px) {
@@ -171,18 +169,10 @@ body{
       margin: auto;
       float: inherit !important;
       display: flex;
+      width: $octopus-mobile-item-size;
+      height: $octopus-mobile-item-size;
     }
   }
-  .img-box-circle {
-    height: 10rem;
-    width: 10rem;
-    position: relative;
-    border-radius: 50%;
-    background-size: cover;
-    box-shadow: 0px 8px 26px 6px $primaryColorMoreTransparent;
-    margin: auto;
-    display: flex;
-  }
 
   .comma {
     display: flex;

package/src/assets/live.scss

@@ -18,22 +18,4 @@
   }
   .publishing-bg {
     background: rgb(112, 112, 112);
-  }
-  .planned-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(188, 88, 16, 0.2);
-  }
-  .pending-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(216, 58, 14, 0.2);
-  }
-  .recording-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(233, 12, 12, 0.2);
-  }
-  .debriefing-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(54, 134, 54, 0.2);
-  }
-  .publishing-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(112, 112, 112, 0.2);
-  }
-  .error-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(173, 0, 0, 0.2);
   }

package/src/assets/multiselect.scss

@@ -52,30 +52,12 @@
         font-size: 0.65rem;
         margin: 0.2rem;
     } 
-
-    .octopus-arrow-down
-    {
-        height: 1.2rem;
-        width: 1.2rem;
-        font-size: 1.2rem;
-        cursor: pointer;
-        margin: 0;
-        background-color: #ccc;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        padding: 0;
-        &:before{
-            font-size: 0.8rem;
-        }
-    }
     .octopus-arrow-down-absolute
     {
         position: absolute;
         right: 10px;
-        top: 0.5rem;
+        top: 0.7rem;
+        cursor: pointer;
     }
 
 
@@ -149,6 +131,10 @@
         color: #35495e;
     }
 
+    .multiselect-white .multiselect{
+        color: white !important;
+    }
+
 
 
     .multiselect * {
@@ -176,7 +162,7 @@
         min-height: 20px;
         line-height: 28px;
         border: none;
-        border-radius: 5px;
+        border-radius: $octopus-borderradius;
         padding: 0 0 0 5px;
         width: 100%;
         transition: border 0.1s ease;
@@ -223,7 +209,7 @@
         padding-right: 40px;
         padding-left: 5px;
         align-items: center;
-        border-radius: 0.3em;
+        border-radius: $octopus-borderradius;
         border: 0.1rem solid #dee2e6;
         background: #fff;
         font-size: 14px;
@@ -237,7 +223,7 @@
         position: relative;
         display: inline-block;
         padding: 4px 26px 4px 10px;
-        border-radius: 5px;
+        border-radius: $octopus-borderradius;
         margin-right: 10px;
         color: black;
         line-height: 1;
@@ -262,7 +248,7 @@
         text-align: center;
         line-height: 22px;
         transition: all 0.2s ease;
-        border-radius: 5px;
+        border-radius: $octopus-borderradius;
     }
 
     .multiselect__tag-icon:after {
@@ -286,7 +272,7 @@
         overflow: hidden;
         padding: 8px 30px 0 12px;
         white-space: nowrap;
-        border-radius: 5px;
+        border-radius: $octopus-borderradius;
         border: 1px solid #e8e8e8;
     }
 
@@ -349,6 +335,10 @@
         z-index: 50;
         -webkit-overflow-scrolling: touch;
     }
+    .multiselect-white .multiselect__content-wrapper{
+        background: black;
+    }
+
 
     .multiselect__content {
         list-style: none;

package/src/assets/share.scss

@@ -31,10 +31,46 @@
 		&:hover {
 			border: 0;
 		}
-	}
+	} 
+  .page-element-title-container{
+    background: black;
+    position: absolute;
+    right: 0;
+    left: 0;
+  }
+  .page-element-bg{
+    height: 15rem;
+    opacity: 0.5;
+    filter: blur(8px);
+    -webkit-filter: blur(8px);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  .page-element-title{
+    position: absolute;
+    top:0;
+    bottom:0;
+    right:0;
+    left:0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    h1{
+      color: white !important;
+      font-size: 2rem;
+    }
+  }
+  .page-element{
+    margin-top: 12rem;
+    position: relative;
+    z-index: 3;
+  }
 
   .vue-swatches__trigger{
     border: solid 1px black;
+    border-radius: $octopus-borderradius !important;
   }
   .podcast-list {
       align-self: stretch;
@@ -42,7 +78,7 @@
       margin: 1em 0 0;
       padding: 0;
       display: grid; /* 1 */
-      grid-template-columns: repeat(auto-fill, 13rem); /* 2 */
+      grid-template-columns: repeat(auto-fill, $octopus-item-size); /* 2 */
       grid-gap: 1rem; /* 3 */
       justify-content: space-between; /* 4 */
       @media (max-width: 960px) {
@@ -52,6 +88,9 @@
         justify-content: space-around;
         flex-wrap: wrap;
       }
+      @media (max-width: 450px) {
+        grid-template-columns: repeat(auto-fill, $octopus-mobile-item-size); /* 2 */
+      }
   }
 
   .element-list-inline {
@@ -115,11 +154,11 @@
   .emission-item-container{
     list-style: none;
     background: #fff;
-    border-radius: 2rem;
+    border-radius: $octopus-borderradius;
     display: flex;
     flex-grow: 1;
+    border: 2px solid #eee;
     .img-box {
-      border-radius: 2rem !important;
       @media (max-width: 680px) {
         margin: 1rem auto auto !important;
       }
@@ -136,11 +175,11 @@
     padding: 1rem;
     display: flex;
     flex-direction: column;
-    max-height: 13rem;
+    max-height: 16.5rem;
     flex-grow: 1;
     .emission-name {
-      font-size: 0.9rem;
-      font-weight: 600;
+      font-size: 1.2rem;
+      font-weight: 400;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 2;
@@ -166,10 +205,6 @@
         background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
       }
     }
-    .emission-producer {
-      font-weight: 300;
-      font-size: 0.6rem;
-    }
   }
   .status-Pending {
       background: #eb7d22;
@@ -197,7 +232,7 @@
   }
   .advanced-search-container {
     background: #fff;
-    border-radius: 0.8rem;
+    border-radius:$octopus-borderradius;
     display: flex;
     width: 100%;
     padding: 1rem 2rem;

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

@@ -55,7 +55,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
+            class="saooti-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -1,68 +1,72 @@
 <template>
   <div
-    v-show="isDisplay"
-    class="mt-3"
+    v-show="isHeaderDisplay"
+    class="header-img flex-column justify-content-end"
+    :style="backgroundDisplay"
   >
-    <ol
-      v-if="filterIab || filterRubrique.length"
-      class="octopus-breadcrumb d-flex align-items-center flex-wrap"
-    >
-      <li class="octopus-breadcrumb-li">
-        <a
-          href="#"
-          @click="removeFilter(-1, $event)"
-        >{{ $t('All') }}</a>
-      </li>
-      <li
-        v-if="filterIab"
-        class="octopus-breadcrumb-li"
+    <h1>{{titleDisplay}}</h1>
+    <div v-show="isDisplay" class="d-flex flex-column justify-content-end">
+      <ol
+        v-if="filterIab || filterRubrique.length"
+        class="octopus-breadcrumb d-flex align-items-center justify-content-center flex-wrap"
       >
-        {{ filterIab.name }}
-      </li>
-      <li 
-        v-for="(filter, index) in filterRubrique" 
-        :key="filter.rubriqueId"
-        class="d-flex align-items-center octopus-breadcrumb-li"
-        :class="filterRubrique.length-1 === index ? 'active':''"
-      >
-        <a
-          v-if="filterRubrique.length - 1 !== index"
-          href="#"
-          @click="removeFilter(index,$event)"
-        >{{ filter.nameRubriquage }}</a>
-        <template v-else>
-          {{ filter.nameRubriquage }}
-        </template>
-        <div class="mx-1">
-          :
-        </div>
-        <RubriqueChooser
-          v-if="getRubriques(filter.rubriquageId).length"
-          class="ms-2 multiselect-transparent"
-          :multiple="false"
-          :rubriquage-id="filter.rubriquageId"
-          :rubrique-selected="filter.rubriqueId"
-          :all-rubriques="getRubriques(filter.rubriquageId)"
-          :cannot-be-undefined="true"
-          width="auto"
-          @selected="onRubriqueSelected(index,$event)"
-        />
-      </li>
-    </ol>
-    <CategoryList
-      v-if="!filterIab && !rubriquageFilter.length"
-      :is-filter="true"
-      :is-display="isDisplay"
-      @categoriesLength="checkIfCategories"
-    />
-    <RubriqueList
-      v-else-if="isDisplay && rubriquageFilter.length !== filterRubrique.length"
-      :rubriquages="rubriquageFilter"
-    />
+        <li class="octopus-breadcrumb-li">
+          <a
+            href="#"
+            @click="removeFilter(-1, $event)"
+          >{{ $t('All') }}</a>
+        </li>
+        <li
+          v-if="filterIab"
+          class="octopus-breadcrumb-li"
+        >
+          {{ filterIab.name }}
+        </li>
+        <li 
+          v-for="(filter, index) in filterRubrique" 
+          :key="filter.rubriqueId"
+          class="d-flex align-items-center octopus-breadcrumb-li"
+          :class="filterRubrique.length-1 === index ? 'active':''"
+        >
+          <a
+            v-if="filterRubrique.length - 1 !== index"
+            href="#"
+            @click="removeFilter(index,$event)"
+          >{{ filter.nameRubriquage }}</a>
+          <div class="fw-bold" v-else>
+            {{ filter.nameRubriquage }}
+          </div>
+          <div class="mx-1">
+            :
+          </div>
+          <RubriqueChooser
+            v-if="getRubriques(filter.rubriquageId).length"
+            class="ms-2 multiselect-transparent multiselect-white"
+            :multiple="false"
+            :rubriquage-id="filter.rubriquageId"
+            :rubrique-selected="filter.rubriqueId"
+            :all-rubriques="getRubriques(filter.rubriquageId)"
+            :cannot-be-undefined="true"
+            width="auto"
+            @selected="onRubriqueSelected(index,$event)"
+          />
+        </li>
+      </ol>
+      <CategoryList
+        v-if="!filterIab && !rubriquageFilter.length"
+        :is-filter="true"
+        :is-display="isDisplay"
+        @categoriesLength="checkIfCategories"
+      />
+      <RubriqueList
+        v-else-if="isDisplay && rubriquageFilter.length !== filterRubrique.length"
+        :rubriquages="rubriquageFilter"
+      />
+    </div>
   </div>
   <div
     v-if="!isDisplay"
-    class="categary-filter-no-filter"
+    class="category-filter-no-filter"
   />
 </template>
 
@@ -71,6 +75,7 @@ import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
 import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
 import { Rubrique } from '@/stores/class/rubrique/rubrique';
 import { useFilterStore } from '@/stores/FilterStore';
+import { state } from '../../../stores/ParamSdkStore';
 import { mapState, mapActions } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CategoryList = defineAsyncComponent(() => import('./CategoryList.vue'));
@@ -95,9 +100,34 @@ export default defineComponent({
       return ("homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name) 
       && (this.isCategories || undefined!==this.filterIab || 0!==this.filterRubrique.length || 0!==this.rubriquageFilter.length);
     },
+    isHeaderDisplay(){
+      return this.isDisplay ||'participants' === this.$route.name || 'playlists'=== this.$route.name;
+    },
     rubriquageFilter(): Array<Rubriquage>{
       return this.filterOrgaId ? this.filterRubriquage : [];
     },
+    titleDisplay(): string{
+      let title = "";
+      switch (this.$route.name) {
+        case 'podcasts':title= state.podcastsPage.titlePage ?? this.$t('All podcasts');break;
+        case 'emissions':title= state.emissionsPage.titlePage??this.$t('All emissions');break;
+        case 'participants': title= state.intervenantsPage.titlePage ?? this.$t('All participants');break;
+        case 'playlists': title= this.$t('All playlists');break;
+        default:break;
+      }
+      return title;
+    },
+    backgroundDisplay():string{
+      let imgName = "home";
+      switch (this.$route.name) {
+        case 'podcasts': imgName= "podcasts";break;
+        case 'emissions': imgName= "emissions";break;
+        case 'participants': imgName= "intervenants";break;
+        case 'playlists': imgName= "playlists";break;
+        default:break;
+      }
+      return `background-image: url('/img/header-${imgName}.webp');`;
+    }
   },
   methods:{
     ...mapActions(useFilterStore, ['filterUpdateIab', 'filterUpdateRubrique']),
@@ -145,15 +175,32 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .octopus-app{
+  .header-img{
+    display: flex;
+    min-height: 15rem;
+    background-size: cover;
+    h1{
+      margin: 2rem 1rem auto;
+      font-size: 2rem;
+      color: white;
+    }
+    @media (max-width: 960px) {
+      min-height: 6rem;
+    }
+  }
   .octopus-breadcrumb{
     padding: 1rem;
     align-items: center;
-    background: #FAFAFA;
     .octopus-breadcrumb-li{
       list-style: none;
+      color: white !important;
+      a{
+        color: white !important;
+        font-weight: bold;
+      }
       &:after {
-        content: "/";
-        margin: 0 0.2rem;
+        content: "-";
+        margin: 0 0.5rem;
       }
       &:last-child {
         &:after {
@@ -162,7 +209,7 @@ export default defineComponent({
       }
     }
   }
-  .categary-filter-no-filter{
+  .category-filter-no-filter{
     position: absolute;
     top: 0;
     bottom: 0;