@saooti/octopus-sdk 30.0.30 → 30.0.34

package/README.md

@@ -527,4 +527,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.27 Top bar responsive
  * 30.0.28 Limiter caractères des commentaires
  * 30.0.29 Pour podcastmaker sudPresse
- * 30.0.30 Problème fetch participants
+ * 30.0.30 Problème fetch participants
+ * 30.0.31 Amélioration interface
+ * 30.0.32 Amélioration interface
+ * 30.0.33 Pb categories list
+ * 30.0.34 Bouton css

package/package.json

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

package/src/assets/bootstrap-diff.scss

@@ -120,26 +120,28 @@
     
         &.admin-button{
             padding: 0.3rem;
-            height: 1.8rem;
-            width: 1.8rem;
-            font-size: 1rem;
+            height: 2.2rem !important;
+            width: 2.2rem !important;
+            font-size: 1.1rem;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             color : $octopus-primary-dark;
+            flex-shrink: 0;
         }
     
     }
 
     .share-btn {
         font-size: 1.3rem;
-        width: 2.5rem;
+        width: 2.5rem !important;
         height: 2.5rem !important;
         padding: 0.5rem;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color : $octopus-primary-dark;
+        flex-shrink: 0;
     }
 
     .btn-rss {

package/src/assets/general.scss

@@ -13,9 +13,11 @@ body{
   overscroll-behavior-y: contain;
 }
 .octopus-app{
+  h1{
+    margin-bottom: 2rem;
+  }
   h1,h2,h3,h4,h5,h6{
     font-weight: 600;
-    margin-bottom: 0.25rem;
     margin-top: 0;
     @media (max-width: 500px){
       margin: 0.2rem;
@@ -35,6 +37,10 @@ body{
       font-size: 1rem;
     }
   }
+  hr{
+    height: 0.01rem;
+    color: #999;
+  }
 
   .small-text{
     font-size: 0.6rem;

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="isDisplay"
+    v-show="isDisplay"
     class="mt-3"
   >
     <nav
@@ -54,12 +54,18 @@
     <CategoryList
       v-if="!categoryFilter && !rubriquageFilter.length"
       :is-filter="true"
+      :is-display="isDisplay"
+      @categoriesLength="checkIfCategories"
     />
     <RubriqueList
       v-else-if="rubriquageFilter.length !== rubriqueFilter.length"
       :rubriquages="rubriquageFilter"
     />
   </div>
+  <div
+    v-if="!isDisplay"
+    class="categary-filter-no-filter"
+  />
 </template>
 
 <script lang="ts">
@@ -79,6 +85,11 @@ export default defineComponent({
     RubriqueList,
     RubriqueChooser
   },
+  data() {
+    return {
+      isCategories: false as boolean,
+    };
+  },
   computed: {
     categoryFilter(): Category|undefined{
       return this.$store.state.filter.iab;
@@ -87,16 +98,20 @@ export default defineComponent({
       return this.$store.state.filter.rubriqueFilter;
     },
     isDisplay(): boolean {
-      return "homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name;
+      return ("homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name) 
+      && (this.isCategories || undefined!==this.categoryFilter || 0!==this.rubriqueFilter.length || 0!==this.rubriquageFilter.length);
     },
     rubriquageFilter(): Array<Rubriquage>{
       if(this.$store.state.filter.organisationId){
         return this.$store.state.filter.rubriquageArray;
       }
       return [];
-    }
+    },
   },
   methods:{
+    checkIfCategories(length: number): void{
+      this.isCategories = 0!==length;
+    },
     onRubriqueSelected(index: number, rubrique: Rubrique): void {
       if(!rubrique ||this.rubriqueFilter[index].rubriqueId === rubrique.rubriqueId){
         return;
@@ -145,4 +160,15 @@ export default defineComponent({
     }
   }
 })
-</script>
+</script>
+<style lang="scss">
+.categary-filter-no-filter{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: white;
+  z-index: -1;
+}
+</style>

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list">
+  <div
+    v-if="categories.length"
+    class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list"
+  >
     <div
       id="category-list-container"
       class="category-list-container"
@@ -49,7 +52,9 @@ export default defineComponent({
 
   props: {
     isFilter: { default: false, type: Boolean },
+    isDisplay: { default: false, type: Boolean },
   },
+  emits:['categoriesLength'],
 
   data() {
     return {
@@ -65,27 +70,36 @@ export default defineComponent({
       return this.$store.state.categories;
     },
     categories(): Array<Category> {
+      let arrayCategories: Array<Category>  = [];
       if (this.filterOrga) {
-        return this.$store.state.categoriesOrga.filter((c: Category) => {
+        arrayCategories = this.$store.state.categoriesOrga.filter((c: Category) => {
           return c.podcastOrganisationCount;
         });
+      }else{
+        arrayCategories = this.$store.state.categories.filter((c: Category) => {
+          if (this.isPodcastmaker) return c.podcastOrganisationCount;
+          return c.podcastCount;
+        });
       }
-      return this.$store.state.categories.filter((c: Category) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
-        return c.podcastCount;
-      });
+      this.$emit('categoriesLength', arrayCategories.length);
+      return arrayCategories;
     },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
   },
   watch: {
-    categories: {
-      deep: true,
-      handler(){
+    isDisplay():void{
       this.$nextTick(() => {
         this.resizeWindow();
       });
+    },
+    categories: {
+      deep: true,
+      handler(){
+        this.$nextTick(() => {
+          this.resizeWindow();
+        });
       }
     },
     filterOrga(): void {

package/src/components/pages/Participant.vue

@@ -12,7 +12,7 @@
         </template>
       </h1>
       <div
-        class="d-flex flex-column align-items-center"
+        class="d-flex flex-column align-items-center mb-3"
       >
         <div
           class="img-box-circle mb-3"
@@ -43,7 +43,7 @@
             <div class="saooti-rss-bounty" />
           </a>
         </div>
-        <div class="d-flex">
+        <div class="d-flex mt-3">
           <EditBox
             v-if="editRight && isEditBox"
             :participant="participant"

package/src/components/pages/Podcast.vue

@@ -68,6 +68,7 @@
           :fetch-conference="fetchConference"
         />
         <PodcastInlineList
+          class="mt-4"
           :emission-id="podcast.emission.emissionId"
           :href="'/main/pub/emission/' + podcast.emission.emissionId"
           :title="$t('More episodes of this emission')"