@saooti/octopus-sdk 33.1.3 → 33.2.1

package/src/assets/bootstrap.scss

@@ -0,0 +1,231 @@
+// 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;
+	}
+	p{
+		margin: 0;
+	}
+	h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
+		&:not(.text-uppercase){
+      letter-spacing: -0.03em;
+    }
+		margin-top: 0;
+		margin-bottom:0;
+		font-weight: 600;
+		line-height: 1.2;
+	}
+	h1,.h1{
+		font-size: 1.8rem;
+		text-align: center;
+    color: #666;
+    margin-bottom: 2rem;
+		@media (max-width: 500px){
+      font-size: 1.2rem;
+      margin: 0.5rem 0 1rem;
+    }
+	}
+	h2,.h2{
+		font-size: 1.17rem;
+		@media (max-width: 500px){
+      font-size: 1rem;
+    }
+	}
+	h3,.h3{
+		font-size: 1.125rem;
+	}
+	h4,.h4{
+		font-size: 0.99rem;
+	}
+	h5,.h5{
+		font-size: .81rem;
+	}
+	h6,.h6{
+		font-size: .63rem;
+		display: flex;
+    align-items: center;
+	}
+	.text-truncate{
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.btn{
+		display: inline-block;
+		padding: 0.375rem 0.75rem;
+		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;
+			}
+	
+	}
+	.btn-transparent{
+		background: transparent;
+		border: 0;
+	}
+	.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

@@ -1,10 +1,6 @@
 .octopus-app{
-	button.btn-transparent{
-		background: transparent;
-		border: 0;
-	}
-	.width-auto{
-	width: auto !important;
+	.octopus-form-item{
+		min-height: 1.44rem;
 	}
 	select {
 		background: white !important;
@@ -15,18 +11,7 @@
 		height: 2rem;
 		padding-right: 40px;
 	}
-	.form-check-label {
-		cursor: pointer;
-		&::before {
-		top: 0;
-		}
-		&::after {
-		top: 0;
-		}
-	}
 	.form-input {
-		-webkit-appearance: none;
-		-moz-appearance: none;
 		appearance: none;
 		background: #fff;
 		background-image: none;
@@ -42,36 +27,8 @@
 		position: relative;
 		width: 100%;
 	}
-
-	.form-check-input{
-		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%;
-	}
 	.vc-select select{
-		padding: 0 20px 0 8px !important;
+		padding: 0 !important;
 	}
 	.vc-date{
 		.vc-month,.vc-day,.vc-year{

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;
@@ -19,44 +20,22 @@ body{
   }
   a{
     word-break: break-word;
-  }
-
-  h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
-    &:not(.text-uppercase){
-      letter-spacing: -0.03em;
-    }
-    font-weight: 600;
-    margin-top: 0;
-    @media (max-width: 500px){
-      margin: 0.2rem;
+    text-decoration: none;
+    color: $octopus-primary-color;
+    &.link-hover{
+      color: black !important;
     }
-  }
-  h1{
-    font-size: 1.8rem;
-    text-align: center;
-    color: #666;
-    margin-bottom: 2rem;
-    @media (max-width: 500px){
-      font-size: 1.2rem;
-      margin: 0.5rem 0 1rem;
+    &.link-hover:hover, &.link-hover.router-link-exact-active.router-link-active{
+      color: $octopus-primary-color !important;
     }
-  }
-  h2{
-    @media (max-width: 500px){
-      font-size: 1rem;
+    &.btn, &.btn:hover{
+      color: #383838;
     }
   }
   hr{
     height: 0.01rem;
     color: #999;
   }
-
-  .small-text{
-    font-size: 0.6rem;
-    display: flex;
-    align-items: center;
-  }
-
   .d-flex-column{
 		display: flex;
 		flex-direction: row;
@@ -72,16 +51,6 @@ body{
       flex-wrap: wrap;
 		}
 	}
-
-  .primary-color{
-    color: $octopus-primary-color;
-  }
-  .primary-darker{
-    color: $octopus-primary-color;
-  }
-  .primary-bg{
-    background: $octopus-primary-color;
-  }
   .secondary-bg{
     background: $octopus-background;
   }
@@ -94,7 +63,6 @@ body{
   .width-fit-content{
     width: fit-content !important;
   }
-
   .page-box{
     background-color: $octopus-background;
     padding: 2rem 5rem 5rem 5rem;
@@ -130,21 +98,7 @@ body{
       box-shadow:0px 6px 20px 3px $primaryColorMoreTransparent !important;
     }
   }
-  a.btn{
-		color: #383838;
-		&:hover{
-			color: #383838;
-		}
-	}
-  a, a:hover{
-    text-decoration: none;
-  }
-  a.link-hover{
-    color: black !important;
-  }
-  a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
-    color: $octopus-primary-color !important;
-  }
+  
   .descriptionText{
     white-space: pre-wrap; 
     word-wrap: break-word;
@@ -190,11 +144,9 @@ body{
   .hid{
     display: none !important;
   }
-
   .d-contents{
     display: contents;
   }
-
   .img-box{
     height: 13rem;
     width: 13rem;

package/src/assets/multiselect.scss

@@ -59,19 +59,24 @@
         width: 1.2rem;
         font-size: 1.2rem;
         cursor: pointer;
-        position: absolute;
-        right: 10px;
-        top: 0.4rem;
         margin: 0;
         background-color: #ccc;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-shrink: 0;
+        padding: 0;
         &:before{
             font-size: 0.8rem;
         }
     }
+    .octopus-arrow-down-absolute
+    {
+        position: absolute;
+        right: 10px;
+        top: 0.4rem;
+    }
 
 
     /************************************************************************/

package/src/assets/octopus-library.scss

@@ -10,14 +10,12 @@ $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';
 @import './multiselect.scss';
 @import './transition.scss';
-@import './modal.scss';
 @import './share.scss';
 @import 'v-calendar/dist/style.css';

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"
@@ -55,7 +55,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-down octopus-arrow-down"
+            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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 },