@saooti/octopus-sdk 30.0.30 → 30.0.31

package/README.md

@@ -527,4 +527,5 @@ 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

package/package.json

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

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,17 @@
     <CategoryList
       v-if="!categoryFilter && !rubriquageFilter.length"
       :is-filter="true"
+      @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 +84,11 @@ export default defineComponent({
     RubriqueList,
     RubriqueChooser
   },
+  data() {
+    return {
+      isCategories: false as boolean,
+    };
+  },
   computed: {
     categoryFilter(): Category|undefined{
       return this.$store.state.filter.iab;
@@ -87,16 +97,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 +159,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"
@@ -50,6 +53,7 @@ export default defineComponent({
   props: {
     isFilter: { default: false, type: Boolean },
   },
+  emits:['categoriesLength'],
 
   data() {
     return {
@@ -65,15 +69,19 @@ 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;
@@ -83,9 +91,9 @@ export default defineComponent({
     categories: {
       deep: true,
       handler(){
-      this.$nextTick(() => {
-        this.resizeWindow();
-      });
+        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')"