@saooti/octopus-sdk 30.0.5 → 30.0.9

package/src/components/misc/Footer.vue

@@ -2,9 +2,9 @@
   <div class="bg-dark">
     <div
       id="footer"
-      class="d-flex p-3 secondary-bg border-top footer-display-phone"
+      class="d-flex-column p-3 secondary-bg border-top"
     >
-      <div class="d-flex flex-grow align-items-end flex-column">
+      <div class="d-flex flex-column flex-grow-1 align-items-end">
         <div class="d-flex flex-column">
           <router-link
             :to="{
@@ -13,7 +13,7 @@
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                        rubriquesId: rubriqueQueryParam },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Home') }}
           </router-link>
@@ -24,7 +24,7 @@
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                        rubriquesId: rubriqueQueryParam},
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Podcasts') }}
           </router-link>
@@ -34,7 +34,7 @@
               query: { productor: $store.state.filter.organisationId,
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Emissions') }}
           </router-link>
@@ -44,7 +44,7 @@
               name: 'productors',
               query: { productor: $store.state.filter.organisationId },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Productors') }}
           </router-link>
@@ -53,23 +53,23 @@
               name: 'participants',
               query: { productor: $store.state.filter.organisationId },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Speakers') }}
           </router-link>
         </div>
       </div>
-      <hr class="divided-line show-phone">
+      <hr class="show-phone">
       <div
         v-if="!isPodcastmaker"
-        class="d-flex flex-grow align-items-center flex-column"
+        class="d-flex flex-grow-1 align-items-center flex-column"
       >
         <div class="d-flex flex-column">
           <div class="text-dark">
             &copy; Saooti 2019
           </div>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/contact"
           >
             {{
@@ -77,7 +77,7 @@
             }}
           </router-link>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/cgu"
           >
             {{
@@ -85,7 +85,7 @@
             }}
           </router-link>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/libraries"
           >
             {{
@@ -93,15 +93,15 @@
             }}
           </router-link>
           <a
-            class="linkHover c-hand"
+            class="link-hover c-hand"
             @click="changeLanguage"
           >{{
             $t('Change locale')
           }}</a>
         </div>
       </div>
-      <hr class="divided-line show-phone">
-      <div class="flex-grow">
+      <hr class="show-phone">
+      <div class="flex-grow-1">
         <a
           href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
           rel="noopener"
@@ -118,12 +118,12 @@
       </div>
       <div
         v-if="isPodcastmaker && isContactLink"
-        class="d-flex flex-grow align-items-center flex-column"
+        class="d-flex flex-column flex-grow-1 align-items-center"
       >
         <div class="d-flex flex-column">
           <a
             id="footer-contact"
-            class="linkHover"
+            class="link-hover"
             :href="isContactLink"
             rel="noopener"
             target="_blank"
@@ -201,33 +201,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#footer {
+#footer{
   font-size: 0.7rem;
-  a {
-    color: #666;
-  }
   .acpm_image {
     width: 70px;
     height: 70px;
   }
-}
-.border-round {
-  border-radius: 0 0 2rem 2rem;
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .footer-display-phone {
-    flex-direction: column;
+  a{
+    color: #666;
+  }
+  .border-round {
+    border-radius: 0 0 2rem 2rem;
+  }
+  /** PHONES*/
+  @media (max-width: 960px) {
     .align-items-center,
     .align-items-end {
       align-items: flex-start !important;
     }
   }
-  .container {
-    font-size: 0.6rem;
-    .pages {
-      margin-right: 3rem;
-    }
-  }
 }
 </style>

package/src/components/misc/HomeDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
+    class="top-bar-dropdown"
   >
     <div
       v-if="authenticated"
@@ -17,46 +17,37 @@
         data-bs-toggle="dropdown"
         aria-expanded="false"
       />
-      <ul class="dropdown-menu dropdown-menu-right px-4">
-        <li>
-          <router-link
-            v-if="isContribution && !isPodcastmaker"
-            to="/main/priv/upload"
-            class="align-self-center w-100"
-          >
-            <button class="btn btn-primary w-100 mb-2">
-              {{ $t('Upload') }}
-            </button>
-          </router-link>
-        </li>
-        <li v-if="!isPodcastmaker">
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <router-link
+          v-if="isContribution && !isPodcastmaker"
+          class="btn btn-primary w-100"
+          to="/main/priv/upload"
+        >
+          {{ $t('Upload') }}
+        </router-link>
+        <template v-if="!isPodcastmaker">
           <router-link
             to="/main/priv/backoffice"
-            class="linkSpace dropdown-item"
+            class="show-phone dropdown-item"
           >
             {{ $t('My space') }}
           </router-link>
-        </li>
-        <li v-if="!isPodcastmaker">
           <router-link
             class="dropdown-item"
             to="/main/priv/edit/profile"
           >
             {{ $t('Edit my profile') }}
           </router-link>
-        </li>
-        <li v-if="!isPodcastmaker && isOrganisation">
           <router-link
+            v-if="isOrganisation"
             class="dropdown-item"
             to="/main/priv/edit/organisation"
           >
             {{ $t('Edit my organisation') }}
           </router-link>
-        </li>
-        <li v-if="!isEducation">
+        </template>
+        <template v-if="!isEducation">
           <hr class="dropdown-divider">
-        </li>
-        <li v-if="!isEducation">
           <a
             href="https://help.octopus.saooti.com/Aide/"
             class="dropdown-item"
@@ -65,8 +56,6 @@
           >
             {{ $t('Help') }}
           </a>
-        </li>
-        <li v-if="!isEducation">
           <a
             href="https://help.octopus.saooti.com/"
             class="dropdown-item"
@@ -75,50 +64,41 @@
           >
             {{ $t('TutoMag') }}
           </a>
-        </li>
-        <li><hr class="dropdown-divider"></li>
-        <li v-if="!isEducation">
+          <hr class="dropdown-divider">
           <a
             class="dropdown-item"
             href="/sso/logout"
           >
             {{ $t('Logout') }}
           </a>
-        </li>
-      </ul>
+        </template>
+      </div>
     </div>
     <div
       v-else
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle btn-secondary text-decoration-none m-1 admin-button btn-rounded-icon dropdown-toggle-no-caret"
+        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user-octopus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
-      >
-        <i class="saooti-user-octopus text-dark" />
-        <span class="visually-hidden">Profile</span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right px-4">
-        <li>
-          <a
-            class="dropdown-item"
-            href="/sso/login"
-          >
-            {{ $t('Login') }}
-          </a>
-        </li>
-        <li v-if="!isPodcastmaker">
-          <router-link
-            class="dropdown-item"
-            to="/main/pub/create"
-          >
-            {{
-              $t('Create an account')
-            }}
-          </router-link>
-        </li>
-      </ul>
+        aria-label="Profile"
+      />
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <a
+          class="dropdown-item"
+          href="/sso/login"
+        >
+          {{ $t('Login') }}
+        </a>
+        <router-link
+          v-if="!isPodcastmaker"
+          class="dropdown-item"
+          to="/main/pub/create"
+        >
+          {{ $t('Create an account') }}
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -133,12 +113,6 @@ export default defineComponent({
     isEducation: { default: false, type: Boolean},
   },
 
-  data() {
-    return {
-      showMenu: false as boolean
-    };
-  },
-
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -154,7 +128,6 @@ export default defineComponent({
     },
   },
 
-
   methods: {
     goToUrl(url: string): void {
       if (this.authenticated) {
@@ -167,19 +140,24 @@ export default defineComponent({
 
 <style lang="scss">
 .top-bar-dropdown {
+  display: flex;
+  align-items: center;
+
   .main-button-dropdown {
     padding-bottom: 0.4rem;
     width: 140px;
     text-align: left;
     padding-left: 15px;
     margin-right: 30px;
+    @media (max-width: 650px) {
+      display: none;
+    }
   }
   .btn-group .dropdown-toggle-split {
     align-items: center;
-    border-radius: 50% !important;
+    border-radius: 50%;
     width: 40px !important;
     height: 40px !important;
-    display: flex;
     justify-content: center;
     position: absolute;
     right: 5px;
@@ -190,32 +168,5 @@ export default defineComponent({
       right: auto;
     }
   }
-  .dropdown-header {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
-  .linkSpace {
-    display: none;
-  }
-
-  /** PHONES*/
-  @media (max-width: 1200px) {
-    .linkSpace {
-      display: block;
-    }
-  }
-  @media (max-width: 650px) {
-    .dropdown {
-      .main-button-dropdown {
-        display: none;
-      }
-    }
-    .btn-group .dropdown-toggle-split {
-      height: 30px;
-      width: 30px;
-      border-radius: 50% !important;
-    }
-  }
 }
 </style>

package/src/components/misc/LeftMenu.vue

@@ -3,114 +3,102 @@
     v-show="displayMenu"
     class="left-menu-container"
   >
-    <div class="routes-container h5">
-      <router-link
-        class="text-dark fw-bold mb-3 show-phone home-route"
-        :to="{
-          name: 'home',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Home') }}
-      </router-link>
-      <router-link
-        v-if="isLiveTab && filterOrga && filterOrgaLive"
-        class="text-dark fw-bold mb-3 live-route"
-        :to="{
-          name: 'lives',
-          query: { productor: $store.state.filter.organisationId},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Live') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 podcasts-route"
-        :to="{
-          name: 'podcasts',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Podcasts') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 emissions-route"
-        :to="{
-          name: 'emissions',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Emissions') }}
-      </router-link>
-      <router-link
-        v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-        class="text-dark fw-bold mb-3 productors-route"
-        :to="{
-          name: 'productors',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Productors') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 participants-route"
-        :to="{
-          name: 'participants',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Speakers') }}
-      </router-link>
-      <router-link
-        :to="{
-          name: 'playlists',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="linkHover pb-3 text-dark fw-bold playlists-route"
-        @click="onMenuClick"
-      >
-        {{ $t('Playlists') }}
-      </router-link>
-      <OrganisationChooserLight
-        v-if="!isPodcastmaker"
-        width="auto"
-        page="leftMenu"
-        :defaultanswer="$t('No organisation filter')"
-        :value="organisationId"
-        :light="true"
-        class="me-2 hide-top-bar"
-        :reset="reset"
-        @selected="onOrganisationSelected"
-      />
-      <hr class="divided-line show-phone">
-      <router-link
-        v-for="category in categories"
-        :key="category.id"
-        class="text-dark fw-bold mb-3 show-phone category-route"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ category.name }}
-      </router-link>
-      <div class="d-flex hostedBy">
-        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
-      </div>
-    </div>
+    <router-link
+      class="show-phone"
+      :to="{
+        name: 'home',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Home') }}
+    </router-link>
+    <router-link
+      v-if="isLiveTab && filterOrga && filterOrgaLive"
+      :to="{
+        name: 'lives',
+        query: { productor: $store.state.filter.organisationId},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Live') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'podcasts',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Podcasts') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'emissions',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Emissions') }}
+    </router-link>
+    <router-link
+      v-if="!isPodcastmaker && (!filterOrga || isEducation)"
+      :to="{
+        name: 'productors',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Productors') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'participants',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Speakers') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'playlists',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Playlists') }}
+    </router-link>
+    <OrganisationChooserLight
+      v-if="!isPodcastmaker"
+      width="auto"
+      page="leftMenu"
+      :defaultanswer="$t('No organisation filter')"
+      :value="organisationId"
+      :light="true"
+      :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: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ category.name }}
+    </router-link>
   </div>
 </template>
 
@@ -217,46 +205,25 @@ export default defineComponent({
   background: #fff;
   width: 20%;
   padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9rem;
 
-  .routes-container {
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9rem;
+  a{
+    color: black !important;
+    font-weight: bold;
+    margin-bottom: 1rem;
   }
-  .hostedBy {
-    font-size: 0.6rem;
-    position: absolute;
-    bottom: 10px;
-    right: 0;
-  }
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .left-menu-container {
+  /** PHONES*/
+  @media (max-width: 960px) {
     width: 75%;
     max-height: 80%;
-    left: 0.5rem;
     top: 2.5rem;
-    padding-left: 1rem;
-    font-size: 0.5rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 0.2rem 1rem rgba(79, 83, 90, 0.3);
-
-    .routes-container {
-      overflow-y: scroll;
-      height: 100%;
-    }
-  }
-  .divided-line {
-    margin: 0.5rem 0;
-    border-top: 1px solid lightgray;
+    overflow-y: auto;
+    height: 100%;
   }
-}
-@media (max-width: 450px) {
-  .left-menu-container {
+  @media (max-width: 450px) {
     width: 94%;
-    font-size: 0.3rem;
-    padding: 2rem 0 1.5rem 1rem;
   }
 }
 </style>