@saooti/octopus-sdk 33.1.3 → 33.2.0

package/src/assets/bootstrap.scss

@@ -0,0 +1,181 @@
+// Bootstrap styles overload
+*, *:before, *:after {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.octopus-app{
+	input, button, select, optgroup, textarea {
+		margin: 0;
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+	}
+	button {
+		cursor: pointer;
+	}
+	.btn{
+		display: inline-block;
+		padding: 0.375rem 0.75rem;
+		font-size: 1rem;
+		line-height: 1.5;
+		color: #212529;
+		text-align: center;
+		vertical-align: middle;
+		cursor: pointer;
+		user-select: none;
+		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+		font-size:.7rem;
+		border-radius: 4px;
+		background: $octopus-secondary-color; 
+		text-decoration: none !important;
+		white-space: nowrap;
+		border-width: 0;
+		@media (max-width: 960px) {
+				white-space: normal;
+		}
+		&:hover,
+		&:focus,
+		&:active,
+		&.active {
+			box-shadow: none;
+		}
+		&:hover{
+			background: $primaryColorMoreTransparent;
+		}
+		//Button disable halo after click
+		&.btn-underline{
+				background: none;
+				padding: 0;
+				margin: 0 2rem 1rem 0;
+				border-radius: 0;
+				@media (max-width: 600px) {
+						margin: 0 1rem 1rem 0;
+						font-size: 0.8em;
+				}
+				position: relative;
+				&:after {    
+						bottom: 0;
+						content: "";
+						display: block;
+						height: 2px;
+						left: 50%;
+						position: absolute;
+						background: $octopus-primary-color;
+						transition: width 0.3s ease 0s, left 0.3s ease 0s;
+						width: 0;
+				}
+				&:hover:after,&.active:after { 
+						width: 100%; 
+						left: 0; 
+				}
+		}
+	
+			&.btn-primary {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: $octopus-primary-color;
+					border: 1px solid $octopus-primary-color;
+					border-radius: 4px !important;
+					color: white !important;
+					font-weight: bold;
+					&:focus,
+					&:hover,
+					&:active,
+					&.active {
+							background: transparent;
+							color: $octopus-primary-color !important;
+					}
+					&:disabled{
+							background-color: #cccccc;
+							border: black;
+							cursor: default;
+							color: gray !important;
+					}
+					@media (max-width: 500px){
+					margin: 0.3rem;
+					}
+			}
+
+			&.btn-more{
+					background: $octopus-primary-color;
+					color: $octopus-background;
+					width: 2rem;
+					height: 2rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 50px;
+					margin: 1rem;
+			}
+	
+			&.admin-button{
+					padding: 0.3rem;
+					height: 2.2rem !important;
+					width: 2.2rem !important;
+					font-size: 1.1rem;
+					display: inline-flex;
+					align-items: center;
+					justify-content: center;
+					color : $octopus-primary-color;
+					flex-shrink: 0;
+					font-weight: normal;
+					border-radius: 50% !important;
+			}
+	
+	}
+	.share-btn {
+			font-size: 1.3rem;
+			width: 2.5rem !important;
+			height: 2.5rem !important;
+			padding: 0.5rem;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			color : $octopus-primary-color;
+			flex-shrink: 0;
+			border-radius: 50% !important;
+	}
+
+	.btn-rss {
+			background: #ddd !important;
+			&:hover {
+					border: 0;
+					background: #ccc !important;
+			}
+	}
+	.btn-facebook {
+			background: #d8dfea !important;
+			color: #3b5998 !important;
+			&:hover {
+					background: #afbdd4 !important;
+			}
+	}
+	.btn-twitter {
+			background: #d2ecfc !important;
+			color: #1da1f2 !important;
+			&:hover {
+					background: #bbe3fb !important;
+			}
+	}
+	.btn-linkedin {
+			background: #0077b550 !important;
+			color: #0077b5 !important;
+			&:hover {
+					background: #00a0dc !important;
+			}
+	}
+	.btn-whatsapp {
+			background: #25d36645 !important;
+			color: #25D366 !important;
+			&:hover {
+					background: #25d36563 !important;
+			}
+	}
+
+	.bg-secondary{
+		background: #eee !important;
+	}
+}
+
+	

package/src/assets/form.scss

@@ -47,26 +47,6 @@
 		margin-right: 5px;
 		cursor: pointer;
 	}
-
-	//Navigation Bar
-	.nav{
-		border-bottom: 0.05rem solid #ddd;
-		.nav-item{
-			cursor: pointer;
-			flex-grow: 1;
-			text-align: center;
-			a {
-				color: black;
-			}
-			.nav-link{
-				border-bottom: 0.1rem solid transparent;
-			}
-			.active{
-				border-bottom-color: $octopus-primary-color;
-				color: $octopus-primary-color;
-			}
-		}
-	}
 	.classic-select select {
 		width: 100%;
 	}

package/src/assets/general.scss

@@ -4,6 +4,7 @@ html{
   height: 100%;
 }
 body{
+  margin: 0;
   color: #353535;
   font-family: Montserrat,sans-serif,Helvetica Neue;
   font-size: 0.8rem;

package/src/assets/modal.scss

@@ -1,14 +1,32 @@
 //Modal
 .octopus-app{
-	.modal{
+	.octopus-modal{
+		position: fixed;
+		top: 0;
+		left: 0;
 		display: block;
+		z-index: 1055;
+		width: 100%;
+		height: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+		outline: 0;
 	}
-	.modal-backdrop {
+	.octopus-modal-backdrop {
 		opacity: 0.5;
 		z-index: 0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: black;
 	}
 
-	.modal-dialog {
+	.octopus-modal-dialog {
+		position: relative;
+		pointer-events: none;
+		margin: 1.75rem auto;
 		max-height: 75vh;
 		max-width: 640px;
 		width: 100%;
@@ -19,31 +37,54 @@
 			margin: 2.5% !important;
 		}
 	}
-	.modal-header { 
+	.octopus-modal-body{
+		position: relative;
+		flex: 1 1 auto;
+		padding: 1rem;
+	}
+	.octopus-modal-header { 
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: space-between;
 		border: 0;
 		border-radius: 0.8rem 0.8rem 0 0;
 		background: $octopus-primary-color;
 		color: white;
+		padding: 1rem;
     }
-	.modal-body{
+	.octopus-modal-body{
 		overflow-x: auto;
 		.scroller-vertical {
 			min-height: 200px;
 			height: 200px;
 		}
 	}
-	.modal-dialog, .modal-content {
+	.octopus-modal-dialog, .octopus-modal-content {
 		min-height: 300px;
 	}
-	.modal-content{
+	.octopus-modal-content{
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		pointer-events: auto;
+    	width: 100%;
+		background-color: white;
+		background-clip: padding-box;
 		border: 0;
+		outline: 0;
 		height: auto !important;
 		max-height: calc(100vh - 250px) !important;
 		border-radius: 0.8rem;
 		box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
 	}
-	.modal-footer{
+	.octopus-modal-footer{
+		display: flex;
+		flex-shrink: 0;
 		border: 0;
 		flex-wrap: initial;
+		align-items: center;
+		justify-content: flex-end;
+		padding: 1rem;
 	}
 }

package/src/assets/octopus-library.scss

@@ -10,9 +10,8 @@ $h5-font-size:                $font-size-base * 0.9 !default;
 $h6-font-size:                $font-size-base * 0.7 !default;
 $breadcrumb-bg:                     #f3f3f3 !default;
 $breadcrumb-border-radius:          2rem !default;
-@import 'node_modules/bootstrap/scss/bootstrap.scss';
-@import './bootstrap-diff.scss';
-/* @import 'node_modules/bootstrap-vue-3/dist/bootstrap-vue-3.css'; */
+@import './utilities';
+@import './bootstrap.scss';
 @import './general.scss';
 @import './live.scss';
 @import './form.scss';

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

@@ -6,7 +6,7 @@
     <label
       :for="id"
       class="hid"
-    >{{$t('Type string to filter by categories')}}</label>
+    >{{ $t('Type string to filter by categories') }}</label>
     <VueMultiselect
       :id="id"
       ref="multiselectRef"

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

@@ -3,54 +3,51 @@
     v-show="isDisplay"
     class="mt-3"
   >
-    <nav
+    <ol
       v-if="categoryFilter || rubriqueFilter.length"
-      title="breadcrumb"
+      class="octopus-breadcrumb d-flex align-items-center flex-wrap"
     >
-      <ol class="breadcrumb">
-        <li class="breadcrumb-item">
-          <a
-            href="#"
-            @click="removeFilter(-1, $event)"
-          >{{ $t('All') }}</a>
-        </li>
-        <li
-          v-if="categoryFilter"
-          class="breadcrumb-item active"
-        >
-          {{ categoryFilter.name }}
-        </li>
-        <li 
-          v-for="(filter, index) in rubriqueFilter" 
-          :key="filter.rubriqueId"
-          class="breadcrumb-item d-flex align-items-center"
-          :class="rubriqueFilter.length-1 === index ? 'active':''"
-        >
-          <a
-            v-if="rubriqueFilter.length - 1 !== index"
-            href="#"
-            @click="removeFilter(index,$event)"
-          >{{ filter.nameRubriquage }}</a>
-          <template v-else>
-            {{ filter.nameRubriquage }}
-          </template>
-          <div class="mx-1">
-            :
-          </div>
-          <RubriqueChooser
-            v-if="getRubriques(filter.rubriquageId).length"
-            class="ms-2 multiselect-transparent"
-            :multiple="false"
-            :rubriquage-id="filter.rubriquageId"
-            :rubrique-selected="filter.rubriqueId"
-            :all-rubriques="getRubriques(filter.rubriquageId)"
-            :cannot-be-undefined="true"
-            width="auto"
-            @selected="onRubriqueSelected(index,$event)"
-          />
-        </li>
-      </ol>
-    </nav>
+      <li>
+        <a
+          href="#"
+          @click="removeFilter(-1, $event)"
+        >{{ $t('All') }}</a>
+      </li>
+      <li
+        v-if="categoryFilter"
+      >
+        {{ categoryFilter.name }}
+      </li>
+      <li 
+        v-for="(filter, index) in rubriqueFilter" 
+        :key="filter.rubriqueId"
+        class="d-flex align-items-center"
+        :class="rubriqueFilter.length-1 === index ? 'active':''"
+      >
+        <a
+          v-if="rubriqueFilter.length - 1 !== index"
+          href="#"
+          @click="removeFilter(index,$event)"
+        >{{ filter.nameRubriquage }}</a>
+        <template v-else>
+          {{ filter.nameRubriquage }}
+        </template>
+        <div class="mx-1">
+          :
+        </div>
+        <RubriqueChooser
+          v-if="getRubriques(filter.rubriquageId).length"
+          class="ms-2 multiselect-transparent"
+          :multiple="false"
+          :rubriquage-id="filter.rubriquageId"
+          :rubrique-selected="filter.rubriqueId"
+          :all-rubriques="getRubriques(filter.rubriquageId)"
+          :cannot-be-undefined="true"
+          width="auto"
+          @selected="onRubriqueSelected(index,$event)"
+        />
+      </li>
+    </ol>
     <CategoryList
       v-if="!categoryFilter && !rubriquageFilter.length"
       :is-filter="true"
@@ -149,6 +146,23 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .octopus-app{
+  .octopus-breadcrumb{
+    padding: 1rem;
+    align-items: center;
+    background: #FAFAFA;
+    li{
+      list-style: none;
+      &:after {
+        content: "/";
+        margin: 0 0.2rem;
+      }
+      &:last-child {
+        &:after {
+          content: "";
+        }
+      }
+    }
+  }
   .categary-filter-no-filter{
     position: absolute;
     top: 0;

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

@@ -17,38 +17,41 @@
         {{ category.name }}
       </button>
     </div>
-    <div
+    <button
       v-show="hidenCategories.length"
-      class="dropdown btn-group"
+      id="categories-dropdown"
+      class="btn admin-button saooti-more"
+      :title="$t('See more')"
+    />
+    <Popover
+      target="categories-dropdown"
+      :only-click="true"
+      :is-fixed="true"
+      :left-pos="true"
     >
       <button
-        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        :title="$t('See more')"
-      />
-      <div class="dropdown-menu dropdown-menu-right px-4">
-        <div
-          v-for="category in hidenCategories"
-          :key="category.id"
-          class="me-3 dropdown-item"
-          @click="checkIfFilter(category)"
-        >
-          {{ category.name }}
-        </div>
-      </div>
-    </div>
+        v-for="category in hidenCategories"
+        :key="category.id"
+        class="me-3 octopus-dropdown-item"
+        @mousedown="checkIfFilter(category)"
+      >
+        {{ category.name }}
+      </button>
+    </Popover>
   </div>
 </template>
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../../store/paramStore';
-
+import Popover from '../../misc/Popover.vue';
 import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CategoryList',
+  components:{
+    Popover
+  },
 
   props: {
     isFilter: { default: false, type: Boolean },

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

@@ -1,84 +1,77 @@
 <template>
-  <div
-    id="add-comment-modal"
-    class="modal"
+  <ClassicModal
+    id-modal="add-comment-modal"
+    :title-modal="$t('Welcome, thanks for your comment')"
+    :closable="false"
+    @close="closePopup"
   >
-    <div class="modal-backdrop" />
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">
-            {{ $t('Welcome, thanks for your comment') }}
-          </h5>
+    <template #body>
+      <template v-if="!sending">
+        <div>{{ $t("Let's get acquainted :") }}</div>
+        <input
+          v-model="name"
+          class="form-input"
+          type="text"
+          :placeholder="$t('Your name')"
+          :class="{ 'border border-danger': 0 === countName || !validName }"
+        >
+        <p
+          class="d-flex justify-content-end small-text"
+          :class="{ 'text-danger': !validName }"
+        >
+          {{ countName + ' / ' + maxName }}
+        </p>
+        <div
+          v-if="''!==errorText"
+          class="mt-1 text-danger"
+        >
+          {{ errorText }}
         </div>
-        <div class="modal-body">
-          <template v-if="!sending">
-            <div>{{ $t("Let's get acquainted :") }}</div>
-            <input
-              v-model="name"
-              class="form-input"
-              type="text"
-              :placeholder="$t('Your name')"
-              :class="{ 'border border-danger': 0 === countName || !validName }"
-            >
-            <p
-              class="d-flex justify-content-end small-text"
-              :class="{ 'text-danger': !validName }"
-            >
-              {{ countName + ' / ' + maxName }}
-            </p>
-            <div
-              v-if="''!==errorText"
-              class="mt-1 text-danger"
-            >
-              {{ errorText }}
-            </div>
-          </template>
-          <template v-else>
-            <div>{{ $t('Send in progress') }}</div>
-          </template>
-        </div>
-        <div class="modal-footer">
-          <button
-            class="btn m-1"
-            @click="closePopup"
-          >
-            {{ $t('Close') }}
-          </button>
-          <vue-recaptcha 
-            v-if="!isVerify"
-            ref="invisibleRecaptcha"
-            :load-recaptcha-script="true"
-            @verify="handleSuccess"
-            @expired="handleError"
-            size="invisible"
-            sitekey="6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh"
-          >
-          </vue-recaptcha>
-          <button
-            v-if="!sending"
-            class="btn btn-primary m-1"
-            :disabled="0 === countName || !validName"
-            @click="submit"
-          >
-            {{ $t('Validate') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+      </template>
+      <template v-else>
+        <div>{{ $t('Send in progress') }}</div>
+      </template>
+    </template>
+    <template #footer>
+      <button
+        class="btn m-1"
+        @click="closePopup"
+      >
+        {{ $t('Close') }}
+      </button>
+      <vue-recaptcha 
+        v-if="!isVerify"
+        ref="invisibleRecaptcha"
+        :load-recaptcha-script="true"
+        size="invisible"
+        sitekey="6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh"
+        @verify="handleSuccess"
+        @expired="handleError"
+      />
+      <button
+        v-if="!sending"
+        class="btn btn-primary m-1"
+        :disabled="0 === countName || !validName"
+        @click="submit"
+      >
+        {{ $t('Validate') }}
+      </button>
+    </template>
+  </ClassicModal>
 </template>
 
 <script lang="ts">
 import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
+import ClassicModal from '../../misc/modal/ClassicModal.vue';
 import api from '@/api/initialize';
 import { VueRecaptcha } from 'vue-recaptcha';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'AddCommentModal',
   components:{
-    VueRecaptcha
+    VueRecaptcha,
+    ClassicModal
   },
 
   props: {},

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

@@ -17,9 +17,8 @@
       <Popover
         :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"
-      >
-        {{ $t('Comment waiting') }}
-      </Popover>
+        :content="$t('Comment waiting')"
+      />
       <span
         v-if="comment.certified"
         class="saooti-certified"

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

@@ -22,7 +22,8 @@
           <span
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :title="$t('Emission have not podcasts')"
-            class="saooti-warning text-danger me-1"/>
+            class="saooti-warning text-danger me-1"
+          />
           <div
             class="emission-name"
           >