@saooti/octopus-sdk 38.0.2 → 38.0.3

package/index.ts

@@ -21,7 +21,6 @@ export const getNav = () => import("./src/components/misc/ClassicNav.vue");
 export const getProgressBar = () => import("./src/components/misc/ProgressBar.vue");
 export const getSpinner = () => import("./src/components/misc/ClassicSpinner.vue");
 export const getFooter = () => import("./src/components/misc/FooterSection.vue");
-export const getLeftMenu = () => import("./src/components/misc/LeftMenu.vue");
 export const getPlayer = () => import("./src/components/misc/player/PlayerComponent.vue");
 export const getSnackbar = () => import("./src/components/misc/SnackBar.vue");
 export const getTopBar = () => import("./src/components/misc/TopBar.vue");

package/package.json

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

package/src/App.vue

@@ -1,11 +1,6 @@
 <template>
   <div v-if="isInit" :key="reload" class="d-flex flex-column h-100 octopus-app">
-    <TopBar v-model:displayMenu="displayMenu" :is-education="false" />
-    <LeftMenu
-      v-if="displayMenu"
-      :is-education="false"
-      @close="displayMenu = false"
-    />
+    <TopBar :is-education="false" />
     <CategoryFilter v-if="firstDisplayCategoryFilter" />
     <router-view />
     <ClassicLazy v-if="pageFullyLoad" :min-height="125" :unrender="true">
@@ -54,7 +49,6 @@ export default defineComponent({
 
   data() {
     return {
-      displayMenu: false as boolean,
       reload: false as boolean,
       isInit: false as boolean,
       pageFullyLoad: false as boolean,

package/src/assets/general.scss

@@ -149,6 +149,18 @@ body{
       display: block !important;
     }
   }
+  .show-phone-flex{
+    display: none !important;
+    @media (max-width: 960px) {
+      display: flex !important;
+    }
+  }
+  .show-small-phone-flex{
+    display: none !important;
+    @media (max-width: 380px) {
+      display: flex !important;
+    }
+  }
   .hid{
     display: none !important;
   }
@@ -164,7 +176,7 @@ body{
     flex-shrink: 0;
     @media (max-width: 960px) {
       flex-grow: 0;
-      margin-right: auto !important;
+      //margin-right: auto !important;
     }
     @media (max-width: 450px) {
       margin: auto;

package/src/components/display/sharing/ShareButtonsIntern.vue

@@ -218,6 +218,9 @@ export default defineComponent({
     isProduction() : boolean{
       return state.generalParameters.isProduction as boolean;
     },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
     rssUrl(): string {
       let api = state.generalParameters.ApiUri + "rss/";
       if (this.emission) {

package/src/components/form/ClassicCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-items-center octopus-form-item">
+  <div class="d-flex flex-nowrap align-items-center octopus-form-item">
     <div :class="isSwitch ? 'octopus-form-switch me-2' : ''">
       <input
         :id="idCheckbox"

package/src/components/form/ClassicRadio.vue

@@ -4,7 +4,7 @@
       v-for="option in options"
       :key="option.title"
       class="octopus-form-item"
-      :class="isColumn ? 'd-flex align-items-center' : 'me-2'"
+      :class="isColumn ? 'd-flex flex-nowrap align-items-center' : 'me-2'"
     >
       <input
         :id="idRadio + option.value"

package/src/components/misc/ClassicAccordion.vue

@@ -3,7 +3,7 @@
     <template v-if="displayAccordion">
       <button
         :id="'accordion-' + idComposer"
-        class="btn-transparent bg-white w-100 p-2 text-start d-flex align-items-center"
+        class="btn-transparent bg-white w-100 p-2 text-start d-flex flex-no-wrap align-items-center"
         :class="isOpen ? 'really-light-primary-bg' : ''"
         @click="isOpen = !isOpen"
       >
@@ -55,7 +55,7 @@ export default defineComponent({
 .octopus-accordion {
   border: 1px solid #ccc;
   > button {
-    height: 50px;
+    min-height: 50px;
   }
   .img-accordion {
     width: 30px;

package/src/components/misc/ClassicPopover.vue

@@ -193,6 +193,8 @@ export default defineComponent({
   border-radius: $octopus-borderradius;
   position: absolute;
   z-index: 9999;
+  max-height: 80vh;
+  overflow: auto;
   &.octopus-dropdown {
     min-width: 200px;
     .octopus-dropdown-item {

package/src/components/misc/HomeDropdown.vue

@@ -105,6 +105,18 @@ export default defineComponent({
     },
     routerBackoffice() {
       return [
+        {
+          title: this.$t('My space'),
+          class: "octopus-dropdown-item show-small-phone-flex",
+          path: "/main/priv/backoffice",
+          condition: this.isAuthenticatedWithOrga,
+        },
+        {
+          title: this.$t('Upload'),
+          class: "octopus-dropdown-item show-small-phone-flex",
+          path: "/main/priv/upload",
+          condition: this.isAuthenticatedWithOrga && this.isContribution,
+        },
         {
           title: this.$t("Edit my profile"),
           class: "octopus-dropdown-item",

package/src/components/misc/{LeftMenu.vue → MobileMenu.vue}

@@ -1,41 +1,52 @@
 <template>
-  <div class="left-menu-container" @mouseleave="onMenuClick">
-    <template v-for="link in routerLinkArray" :key="link.routeName">
+  <div>
+    <button
+      id="mobile-menu-dropdown"
+      class="btn-transparent saooti-menu"
+      :title="$t('open left Menu')"
+    />
+    <ClassicPopover
+      target="mobile-menu-dropdown"
+      :only-click="true"
+      :is-fixed="true"
+      :left-pos="true"
+    >
+      <template v-for="link in routerLinkArray" :key="link.routeName">
+        <router-link
+          v-if="link.condition"
+          :class="'home' === link.routeName ? 'octopus-dropdown-item show-phone-flex' : 'octopus-dropdown-item'"
+          :to="{
+            name: link.routeName,
+            query: getQueriesRouter(link.routeName),
+          }"
+        >
+          {{ link.title }}
+        </router-link>
+      </template>
+      <OrganisationChooserLight
+        v-if="!isPodcastmaker && organisationId"
+        width="auto"
+        class="octopus-dropdown-item"
+        page="leftMenu"
+        :defaultanswer="$t('No organisation filter')"
+        :value="organisationId"
+        :reset="reset"
+        @selected="onOrganisationSelected"
+      />
+      <hr class="show-phone" />
       <router-link
-        v-if="link.condition"
-        :class="'home' === link.routeName ? 'show-phone' : ''"
+        v-for="category in categories"
+        :key="category.id"
+        class="show-phone-flex octopus-dropdown-item"
         :to="{
-          name: link.routeName,
-          query: getQueriesRouter(link.routeName),
+          name: 'category',
+          params: { iabId: category.id },
+          query: { productor: filterOrgaId },
         }"
-        @click="onMenuClick"
       >
-        {{ link.title }}
+        {{ category.name }}
       </router-link>
-    </template>
-    <OrganisationChooserLight
-      v-if="!isPodcastmaker && organisationId"
-      width="auto"
-      page="leftMenu"
-      :defaultanswer="$t('No organisation filter')"
-      :value="organisationId"
-      :reset="reset"
-      @selected="onOrganisationSelected"
-    />
-    <hr class="show-phone" />
-    <router-link
-      v-for="category in categories"
-      :key="category.id"
-      class="show-phone"
-      :to="{
-        name: 'category',
-        params: { iabId: category.id },
-        query: { productor: filterOrgaId },
-      }"
-      @click="onMenuClick"
-    >
-      {{ category.name }}
-    </router-link>
+    </ClassicPopover>
   </div>
 </template>
 
@@ -52,23 +63,24 @@ import { Organisation } from "@/stores/class/general/organisation";
 const OrganisationChooserLight = defineAsyncComponent(
   () => import("../display/organisation/OrganisationChooserLight.vue"),
 );
+import ClassicPopover from "../misc/ClassicPopover.vue";
 export default defineComponent({
-  name: "LeftMenu",
+  name: "MobileMenu",
   components: {
     OrganisationChooserLight,
+    ClassicPopover
   },
   mixins: [orgaFilter],
   props: {
     isEducation: { default: false, type: Boolean },
   },
-  emits: ["close"],
   data() {
     return {
       organisationId: undefined as string | undefined,
       reset: false as boolean,
     };
   },
-  computed: {
+  computed:{
     ...mapState(useGeneralStore, ["storedCategories"]),
     ...mapState(useFilterStore, [
       "filterLive",
@@ -110,7 +122,7 @@ export default defineComponent({
         },
       ];
     },
-    categories(): Array<Category> {
+     categories(): Array<Category> {
       return this.storedCategories.filter((c: Category) => {
         if (this.isPodcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
@@ -143,7 +155,6 @@ export default defineComponent({
       },
     },
   },
-
   methods: {
     getQueriesRouter(routeName: string) {
       if (
@@ -159,9 +170,7 @@ export default defineComponent({
         rubriquesId: this.rubriqueQueryParam,
       };
     },
-    onMenuClick() {
-      this.$emit("close");
-    },
+
     async onOrganisationSelected(organisation: Organisation | undefined) {
       if (organisation?.id) {
         await this.selectOrganisation(organisation.id);
@@ -170,40 +179,10 @@ export default defineComponent({
       this.removeSelectedOrga();
     },
   },
+
 });
 </script>
 
 <style lang="scss">
-.octopus-app {
-  .left-menu-container {
-    position: fixed;
-    top: 3rem;
-    bottom: 0;
-    right: 0;
-    z-index: 10;
-    background: #fff;
-    width: 20%;
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9rem;
 
-    a {
-      color: black !important;
-      font-weight: bold;
-      margin-bottom: 1rem;
-    }
-    /** PHONES*/
-    @media (max-width: 960px) {
-      width: 75%;
-      max-height: 80%;
-      top: 2.5rem;
-      overflow-y: auto;
-      height: 100%;
-    }
-    @media (max-width: 450px) {
-      width: 94%;
-    }
-  }
-}
 </style>

package/src/components/misc/TopBar.vue

@@ -10,7 +10,6 @@
           rubriquesId: rubriqueQueryParam,
         },
       }"
-      @click="onDisplayMenu(true)"
     >
       <img
         v-if="!filterOrgaId || '' === imgUrl"
@@ -33,7 +32,7 @@
       width="auto"
       :defaultanswer="$t('No organisation filter')"
       :value="organisationId"
-      class="ms-3 me-2"
+      class="ms-3 me-2 hide-phone"
       :reset="reset"
       @selected="onOrganisationSelected"
     />
@@ -82,11 +81,8 @@
         </div>
       </ClassicPopover>
     </div>
-    <button
-      class="btn-transparent saooti-menu"
-      :title="$t('open left Menu')"
-      @click="onDisplayMenu(false)"
-    />
+    <MobileMenu :is-education="isEducation"/>
+
     <div class="d-flex flex-column">
       <div class="d-flex justify-content-end flex-nowrap">
         <HomeDropdown :is-education="isEducation" />
@@ -117,19 +113,21 @@ import { defineComponent, defineAsyncComponent } from "vue";
 const OrganisationChooserLight = defineAsyncComponent(
   () => import("../display/organisation/OrganisationChooserLight.vue"),
 );
+const MobileMenu = defineAsyncComponent(
+  () => import("./MobileMenu.vue"),
+);
 export default defineComponent({
   name: "TopBar",
   components: {
     OrganisationChooserLight,
     HomeDropdown,
     ClassicPopover,
+    MobileMenu
   },
   mixins: [orgaFilter, imageProxy],
   props: {
-    displayMenu: { default: false, type: Boolean },
     isEducation: { default: false, type: Boolean },
   },
-  emits: ["update:displayMenu"],
   data() {
     return {
       scrolled: false as boolean,
@@ -259,12 +257,6 @@ export default defineComponent({
       if (this.minScroll < window.scrollY) {
         this.minScroll = window.scrollY;
       }
-      if (!this.scrolled) {
-        this.$emit("update:displayMenu", false);
-      }
-    },
-    onDisplayMenu(param: boolean): void {
-      this.$emit("update:displayMenu", param ? false : !this.displayMenu);
     },
     async onOrganisationSelected(
       organisation: Organisation | undefined,
@@ -327,7 +319,6 @@ export default defineComponent({
     }
     /** PHONES*/
     @media (max-width: 960px) {
-      .default-multiselect-width,
       .link-hover {
         display: none;
       }

package/src/locale/en.ts

@@ -18,7 +18,7 @@ export default {
   "See my statistics": "Audience Report",
   "Edit / Delete episodes": "My episodes",
   "Welcome in the Backoffice": "Administration",
-  "Please set an animator": "Please select or create a facilitator.",
+  "Please set an animator": "Please select or create a host.",
   "Term of use": "Terms of use",
   "Producted by : ": "Produced by : ",
   "Loading podcasts ...": "Loading podcasts ...",