@saooti/octopus-sdk 30.0.20 → 30.0.24

package/README.md

@@ -517,4 +517,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.17 Oups
  * 30.0.18 Responsive select
  * 30.0.19 Mise à jour Api
- * 30.0.20 Petit refacto commentaires
+ * 30.0.20 Petit refacto commentaires
+ * 30.0.21 #10701 & #10698
+ * 30.0.22 Accessibilité
+ * 30.0.23 Css +  Accessibilité
+ * 30.0.24 Css +  Accessibilité

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.20",
+  "version": "30.0.24",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -39,7 +39,7 @@
     "vue-router": "^4.0.12",
     "vue3-swatches": "^1.0.5",
     "vuex": "^4.0.2",
-    "webpack": "^5.62.1"
+    "webpack": "^5.66.0"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.1.8",

package/src/assets/bootstrap-diff.scss

@@ -10,7 +10,7 @@
     .btn{
         font-size:.7rem;
         border-radius: 50px;
-        background: $octopus-light-secondary-color; 
+        background: $octopus-secondary-color; 
         transition: background .2s, border .2s, box-shadow .2s, color .2s;
         text-decoration: none !important;
         white-space: nowrap;
@@ -30,56 +30,33 @@
         // Button Primary
         &.btn-primary {
             background: $octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
+            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-linear-background));
+            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#50b685', GradientType=1 );
             border-radius: 50px;
             height: auto;
             border: 0;
-            color: white !important;
+            color: black !important;
             &:focus,
             &:hover {
             background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
-            }
-            &:active,
-            &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
-            }
-        }
-        &.btn-light{
-            color: $octopus-primary-color;
-            background: transparent;
-        }
-        &.btn-auth{
-            &:focus,
-            &:hover {
-            background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
+                background: -moz-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -webkit-gradient(left top, right bottom, color-stop(0%, darken($octopus-third-color,7%)), color-stop(100%, darken($octopus-primary-linear-background, 7%)));
+                background: -webkit-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -o-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -ms-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: linear-gradient(135deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
+                border: 0;
             }
             &:active,
             &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
+                background: darken($octopus-primary-linear-background, 4%);
+                border-color: darken($octopus-primary-linear-background, 7%);
             }
         }
         //Button disable halo after click
@@ -98,8 +75,12 @@
         }
     
         &.btn-link {
-            background: $octopus-secondary-color;
-            color: $octopus-primary-color;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: $octopus-primary-dark;
+            border: 2px solid $octopus-primary-dark;
+            color: white;
             font-weight: bold;
             margin: 2rem;
             width: fit-content;
@@ -108,39 +89,16 @@
             &:hover,
             &:active,
             &.active {
-            background: darken($octopus-secondary-color, 5%);
-            color: $octopus-primary-color;
+                background: transparent;
+                color: $octopus-primary-dark;
             }
             @media (max-width: 500px){
             margin: 0.3rem;
             }
         }
-    
-        &.btn-link-plus {
-            padding: 8px 16px;
-            font-size: 0.8rem;
-            border-radius: 50px;
-            background-color: #ddd;
-            color: #000;
-            box-shadow: none;
-            display: flex;
-            border: 1px solid transparent;
-            .saooti-plus{
-            line-height: 1.5 !important;
-            margin-left: 5px; 
-            }
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-            background: $octopus-primary-color;
-            color: white;
-            border: 1px solid $octopus-primary-color;
-            }
-        }
-    
+
         &.btn-more{
-            background: $octopus-primary-color;
+            background: $octopus-primary-dark;
             color: $octopus-background;
             width: 2rem;
             height: 2rem;
@@ -163,8 +121,7 @@
             height: 5rem;
         }
     
-        &.admin-button,
-        &.btn-arrow  {
+        &.admin-button{
             padding: 0.3rem;
             height: 1.8rem;
             width: 1.8rem;
@@ -172,13 +129,7 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
-        }
-        &.btn-arrow {
-            margin: 0.2rem;
-            background: $octopus-secondary-color;
-            &:hover {
-            background: $octopus-secondary-color;
-            }
+            color : $octopus-primary-dark;
         }
     
     }
@@ -191,6 +142,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        color : $octopus-primary-dark;
     }
 
     .btn-rss {
@@ -229,13 +181,9 @@
         }
     }
 
-    .custom-control-label {
-        //border: 1px solid #ddd;
-        border-radius: 5px;
-    }
     .dropdown-toggle-no-caret::after{
         display: none;
-      }    
+    }    
     .dropdown-menu {
         padding: 0.5rem;
     }

package/src/assets/form.scss

@@ -1,6 +1,9 @@
 .octopus-app{
 	.input-no-outline{
-	outline-width: 0 !important;
+		outline-width: 0 !important;
+	}
+	:-moz-focusring {
+		outline: 0px solid black;
 	}
 	.width-auto{
 	width: auto !important;
@@ -64,8 +67,8 @@
 				border-bottom: 0.1rem solid transparent;
 			}
 			.active{
-			border-bottom-color: $octopus-primary-color;
-			color: $octopus-primary-color;
+				border-bottom-color: $octopus-primary-dark;
+				color: $octopus-primary-dark;
 			}
 		}
 	}

package/src/assets/general.scss

@@ -8,7 +8,7 @@ body{
   font-family: Montserrat,sans-serif,Helvetica Neue;
   font-size: 0.8rem;
   overflow-x: hidden;
-  background: #fff;
+  background: #ebebeb;
   min-height: 100%;
   overscroll-behavior-y: contain;
 }
@@ -73,6 +73,12 @@ body{
   .secondary-bg{
     background: $octopus-background;
   }
+  .light-primary-bg{
+		background-color: $primaryColorTransparent !important;
+	}
+	.really-light-primary-bg{
+		background-color: $primaryColorReallyTransparent !important;
+	}
   .width-fit-content{
     width: fit-content !important;
   }
@@ -93,7 +99,7 @@ body{
   }
 
   .module-box{
-    background-color: $octopus-secondary-background;
+    background-color: white;
     padding: 1.3rem;
     margin: 0.5rem 0.5rem 0 0.5rem;
     border-radius: 1rem;
@@ -125,7 +131,7 @@ body{
     color: black !important;
   }
   a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
-    color: $octopus-primary-color !important;
+    color: $octopus-primary-dark !important;
   }
   .descriptionText{
     white-space: pre-wrap; 
@@ -158,6 +164,11 @@ body{
       display: none !important;
     }
   }
+  .hide-small-screen{
+		@media (max-width: 450px) {
+			display: none !important;
+		}
+	}
   .show-phone{
     display: none;
     @media (max-width: 960px) {

package/src/assets/share.scss

@@ -19,14 +19,6 @@
 			background: #f3f3f3;
 		}
 	}
-  .category-rubrique-item-plus {
-    display: flex;
-    height: 1.8rem;
-    width: 1.8rem;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.5rem;
-  }
   .icon-caution {
       margin-right: 5px;
       margin-bottom: 2px;
@@ -172,7 +164,6 @@
       margin-right: 0.5rem;
   }
 
-
   .saooti-stitcher-logo,
   .saooti-google-podcasts,
   .saooti-amazon,

package/src/components/display/aggregator/RssSection.vue

@@ -5,6 +5,4 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({})
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -255,6 +255,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="isDisplay">
+  <div
+    v-if="isDisplay"
+    class="mt-3"
+  >
     <nav
       v-if="categoryFilter || rubriqueFilter.length"
       title="breadcrumb"
@@ -142,6 +145,4 @@ export default defineComponent({
     }
   }
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -8,7 +8,7 @@
         v-for="category in categories"
         :id="'category' + category.id"
         :key="category.id"
-        class="category-item text-dark secondary-bg"
+        class="category-item text-dark bg-white"
         @click="checkIfFilter(category)"
       >
         {{ category.name }}
@@ -19,7 +19,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle category-rubrique-item-plus dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"
@@ -163,6 +163,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '../../../sass/_variables.scss';
 .category-list-container {
   display: inline-flex;
   justify-content: flex-start;
@@ -184,20 +185,8 @@ export default defineComponent({
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
-  .router-link-active {
-    background: #ddd !important;
+  .router-link-active,&:hover {
+    background: $octopus-secondary-color !important;
   }
-  &:hover {
-    background: #ddd !important;
-  }
-}
-
-.category-list .category-item-plus {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.5rem;
 }
 </style>

package/src/components/display/comments/CommentItem.vue

@@ -38,7 +38,7 @@
     <div class="d-flex align-items-center mt-1">
       <button
         v-if="null === comment.commentIdReferer && 'Valid'=== comment.status"
-        class="btn primary-color py-1 px-3 me-2"
+        class="btn py-1 px-3 me-2"
         :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
         @click="answerComment"
       >
@@ -49,7 +49,7 @@
           (!isFlat && comment.relatedComments) ||
             (isFlat && comment.commentIdReferer)
         "
-        class="d-flex align-items-center small-text primary-color c-hand"
+        class="d-flex align-items-center small-text primary-darker c-hand"
         @click="collapseVisible=!collapseVisible"
       >
         <div v-if="comment.relatedComments">

package/src/components/display/comments/CommentSection.vue

@@ -18,7 +18,7 @@
       <button
         v-if="!isLive"
         :title="$t('Refresh')"
-        class="btn admin-button primary-color saooti-refresh-stud"
+        class="btn admin-button saooti-refresh-stud"
         @click="reloadComments"
       />
     </div>

package/src/components/display/edit/EditBox.vue

@@ -14,5 +14,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss"></style>

package/src/components/display/edit/EditCommentBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex">
     <button
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="edit"
       @click="editComment"
     >
@@ -12,7 +12,7 @@
     </button>
     <button
       v-if="'Pending' === comment.status || 'Invalid' === comment.status"
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="valid"
       @click="commentModal('Valid')"
     >
@@ -23,7 +23,7 @@
     </button>
     <button
       v-if="'Pending' === comment.status || 'Valid' === comment.status"
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="invalid"
       @click="commentModal('Invalid')"
     >
@@ -34,7 +34,7 @@
     </button>
     <button
       v-if="organisation"
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       :title="$t('See more')"
       @click="seeMore = true"
     >
@@ -44,7 +44,7 @@
       />
     </button>
     <button
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="delete"
       @click="commentModal('Delete')"
     >

package/src/components/display/emission/EmissionChooser.vue

@@ -206,6 +206,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/emission/EmissionInlineList.vue

@@ -6,7 +6,7 @@
     >
       <div class="hide-phone">
         <button
-          class="btn btn-arrow"
+          class="btn admin-button m-1"
           :class="{ disabled: !previousAvailable }"
           :title="$t('Display previous')"
           @click="displayPrevious()"
@@ -14,7 +14,7 @@
           <div class="saooti-arrow-left2" />
         </button>
         <button
-          class="btn btn-arrow"
+          class="btn admin-button m-1"
           :class="{ disabled: !nextAvailable }"
           :title="$t('Display next')"
           @click="displayNext()"

package/src/components/display/emission/EmissionItem.vue

@@ -133,5 +133,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-<style lang="scss"></style>
+</script>

package/src/components/display/emission/EmissionList.vue

@@ -41,7 +41,7 @@
       <button
         v-show="!allFetched"
         class="btn"
-        :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
+        :class="buttonPlus ? 'btn-link' : 'btn-more'"
         :disabled="loading"
         :title="$t('See more')"
         @click="fetchContent(false)"
@@ -49,7 +49,10 @@
         <template v-if="buttonPlus">
           {{ $t('See more') }}
         </template>
-        <div class="saooti-plus" />
+        <div
+          :class="buttonPlus?'ms-1':''"
+          class="saooti-plus"
+        />
       </button>
     </template>
   </div>

package/src/components/display/filter/AdvancedSearch.vue

@@ -15,7 +15,7 @@
       class="advanced-search-container"
     >
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2">
+        <div class="primary-darker mb-2">
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
@@ -111,7 +111,7 @@
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2">
+        <div class="primary-darker mb-2">
           {{ $t('Sort') }}
         </div>
         <ClassicRadio

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

@@ -112,5 +112,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss"></style>

package/src/components/display/filter/MonetizableFilter.vue

@@ -7,7 +7,7 @@
       <select
         ref="select"
         v-model="monetization"
-        class="ms-2 mb-0 c-hand"
+        class="ms-2 mb-0 pe-4 c-hand"
         @change="onChange"
       >
         <option
@@ -48,6 +48,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/filter/ProductorSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-items-center">
+  <div class="d-flex align-items-center my-3">
     <div
       v-if="!isPodcastmaker && !filterOrga"
       class="filter-organisation-chooser"
@@ -146,7 +146,7 @@ export default defineComponent({
 
 .filter-speech-bubble {
   position: absolute;
-  background: $octopus-primary-color;
+  background: $octopus-primary-dark;
   border-radius: 0.4em;
   width: 10rem;
   right: 4rem;
@@ -165,7 +165,7 @@ export default defineComponent({
   width: 0;
   height: 0;
   border: 18px solid transparent;
-  border-left-color: $octopus-primary-color;
+  border-left-color: $octopus-primary-dark;
   border-right: 0;
   border-bottom: 0;
   margin-top: -9px;

package/src/components/display/filter/RubriqueChoice.vue

@@ -97,6 +97,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/filter/RubriqueFilter.vue

@@ -235,6 +235,4 @@ export default defineComponent({
     }
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/live/CountDown.vue

@@ -67,6 +67,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/live/LiveHorizontalList.vue

@@ -16,7 +16,7 @@
     <button
       v-show="!allFetched"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link mt-3' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -24,7 +24,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>
@@ -111,6 +114,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -272,6 +272,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>