toggle-components-library 1.36.1-beta.2 → 1.36.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.1-beta.2",
+    "version": "1.36.1-beta.4",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/cards/ToggleCommentCard.vue

@@ -2,7 +2,7 @@
   <div class="toggle-comment-card">
     <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
       <div class="toggle-comment-card-text">
-        <p>"{{ displayComment }}"</p>
+        <p>"{{ comment }}"</p>
       </div>
       <div class="toggle-comment-card-name">
         <slot name="button_contacts"></slot>
@@ -50,10 +50,7 @@ export default {
         (this.cardIndex / this.totalCards) * colorPalette.length
       );
       return colorPalette[paletteIndex];
-    },
-    displayComment() {
-        return this.comment.length > 420 ? this.comment.substring(0, 420) + "..." : this.comment;
-    },
+    }
   }
 };
 </script>

package/src/components/carousel/ToggleCarousel.vue

@@ -1,28 +1,34 @@
 <template>
-    <swiper
-        ref="swiper"
-        class="swiper toggle-carousel"
-        :class="[
-            carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
-            carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
-        ]"
-        :options="carouselOptions"
-        @slideChangeTransitionStart="onSlideTransition"
-    >
-        <slot></slot>
+    <div class="toggle-carousel-wrapper">
+        <swiper
+            ref="swiper"
+            class="swiper toggle-carousel"
+            :class="[
+                carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
+                carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
+            ]"
+            :options="carouselOptions"
+            @slideChangeTransitionStart="onSlideTransition"
+        >
+            <slot></slot>
+        </swiper>
         <div v-if="carouselPrev && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--prev"
-            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': prevDisabled}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition,
+            {'toggle-carousel-button--disabled': prevDisabled},
+            {'toggle-carousel-button--comments-left-arrow': carouselStyle == 'comments'}]"
             @click="slidePrev"  
             slot="button-prev"
         ></div>
         <div v-if="carouselNext && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--next"
-            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': nextDisabled}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition,
+            {'toggle-carousel-button--disabled': nextDisabled},
+            {'toggle-carousel-button--comments-right-arrow': carouselStyle == 'comments'}]"
             @click="$refs.swiper.swiperInstance.slideNext()"  
             slot="button-next"
         ></div>
-    </swiper>
+    </div>
 </template>
 
 <script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -1,5 +1,5 @@
 <template>
-    <swiper-slide class="toggle-carousel-slide" :style="'width:' + slideWidth + '; height:' + slideHeight">
+    <swiper-slide class="toggle-carousel-slide">
         <slot></slot>
     </swiper-slide>
 </template>

package/src/sass/includes/_as_cards.scss

@@ -178,7 +178,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 30px 70px 20px 30px;
+    padding: 30px 30px 20px 30px;
     color: white;
     border-radius: 30px;
     width: 100%;
@@ -186,6 +186,11 @@
     .toggle-comment-card-text {
         text-align: justify;
         line-height: 1.5rem;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 6;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        display: -webkit-box;
 
         p {
             margin: 0

package/src/sass/includes/_as_carousels.scss

@@ -28,6 +28,10 @@
             max-width: 100%;
         }
     }
+}
+.toggle-carousel-wrapper {
+    position: relative;
+
     .toggle-carousel-button{
         width: 50px;
         height: 50px;
@@ -102,6 +106,14 @@
                 }
             }
         }
+        &--comments-left-arrow{
+            left: -24px;
+            opacity: 0.8;
+        }
+        &--comments-right-arrow{
+            right: -24px !important;
+            opacity: 0.8;
+        }
         &--next{
             right: 20px;
             @media only screen and (max-width:768px){

package/src/sass/includes/_as_navs.scss

@@ -4,7 +4,7 @@
 
 .toggle-sidenav-container {
   font-size: $toggle-font-size-regular;
-  width: 25%;
+  width: 20%;
   float: left;
   max-width: 280px;
   min-height: 100vh;
@@ -134,7 +134,7 @@
   
   line-height: 1rem;
   font-size: $toggle-font-size-regular;
-  width: 25%;
+  width: 20%;
   float: left;
   max-width: 280px;
   min-height: 100vh;