eSales Media Git repositories
Browse code

Progress

Benjamin Roth authored on15/11/2022 15:35:41
Showing5 changed files
contao/dca/tl_eSM_team.php
History View file @39e3ec0
... ... 
@@ -83,7 +83,7 @@ $GLOBALS['TL_DCA']['tl_eSM_team'] = array
83 83 
 			(
84 84 
 				'href'                => 'act=delete',
85 85 
 				'icon'                => 'delete.svg',
86 
-				'attributes'          => 'onclick="if (!confirm(\'' . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\')) return false; Backend.getScrollOffset();"'
86 
+                'attributes'          => 'onclick="if(!confirm(\'' . ($GLOBALS['TL_LANG']['MSC']['deleteConfirm'] ?? null) . '\'))return false;Backend.getScrollOffset()"'
87 87 
 			),
88 88 
 			'toggle' => array
89 89 
 			(
contao/dca/tl_eSM_team_group.php
History View file @39e3ec0
... ... 
@@ -82,7 +82,7 @@ $GLOBALS['TL_DCA']['tl_eSM_team_group'] = array
82 82 
             (
83 83 
                 'href'                => 'act=delete',
84 84 
                 'icon'                => 'delete.svg',
85 
-                'attributes'          => 'onclick="if (!confirm(\'' . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\')) return false; Backend.getScrollOffset();"'
85 
+                'attributes'          => 'onclick="if(!confirm(\'' . ($GLOBALS['TL_LANG']['MSC']['deleteConfirm'] ?? null) . '\'))return false;Backend.getScrollOffset()"'
86 86 
             ),
87 87 
             'show' => array
88 88 
             (
contao/templates/mod_team_list.html.twig
History View file @39e3ec0
... ... 
@@ -19,8 +19,12 @@
19 19 
             </li>
20 20 
           {% endfor %}
21 21 
         </ul>
22 
-        <div class="swiper-button-next"></div>
23 
-        <div class="swiper-button-prev"></div>
22 
+        <div class="nav-holder">
23 
+          <div class="content-wrapper">
24 
+            <div class="swiper-button-next"></div>
25 
+            <div class="swiper-button-prev"></div>
26 
+          </div>
27 
+        </div>
24 28 
       </div>
25 29 
     </div>
26 30 
   {% endif %}
... ... 
@@ -28,12 +32,12 @@
28 32 
   <script>
29 33 
     var swiperEl = document.getElementById('swiper-{{ id }}');
30 34 
     new Swiper(swiperEl, {
31 
-      "loop": true,
32 
-      "speed": 500,
35 
+      "loop": false,
36 
+      "speed": 1000,
33 37 
       "slidesPerColumn": 2,
34 38 
       "slidesPerColumnFill": 'row',
35 
-      "slidesPerView": 5,
36 
-      "slidesPerGroup": 10,
39 
+      "slidesPerView": 6,
40 
+      "slidesPerGroup": 12,
37 41 
       "spaceBetween": 5,
38 42 
       "effect": "slide",
39 43 
       "navigation": {
... ... 
@@ -41,25 +45,35 @@
41 45 
         "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
42 46 
       },
43 47 
       "breakpoints": {
48 
+        1980: {
49 
+          "slidesPerView": 6,
50 
+          "slidesPerGroup": 12,
51 
+          "slidesPerColumn": 2,
52 
+        },
44 53 
         1650: {
45 54 
           "slidesPerView": 5,
46 55 
           "slidesPerGroup": 10,
56 
+          "slidesPerColumn": 2,
47 57 
         },
48 58 
         1320: {
49 59 
           "slidesPerView": 4,
50 60 
           "slidesPerGroup": 8,
61 
+          "slidesPerColumn": 2,
51 62 
         },
52 63 
         990: {
53 64 
           "slidesPerView": 3,
54 65 
           "slidesPerGroup": 6,
66 
+          "slidesPerColumn": 2,
55 67 
         },
56 68 
         660: {
57 69 
           "slidesPerView": 2,
58 70 
           "slidesPerGroup": 4,
71 
+          "slidesPerColumn": 2,
59 72 
         },
60 73 
         0: {
61 74 
           "slidesPerView": 1,
62 75 
           "slidesPerGroup": 2,
76 
+          "slidesPerColumn": 2,
63 77 
         }
64 78 
       }
65 79 
     })</script>
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @39e3ec0
... ... 
@@ -937,4 +937,69 @@ p.info {
937 937
938 938 
 .modal-content {
939 939 
   display: none;
940 
+}
941 
+
942 
+@-webkit-keyframes swiperNextAnimation {
943 
+  0% {
944 
+    opacity: 1;
945 
+    @include transform(translateX(0));
946 
+  }
947 
+  50% {
948 
+    opacity: .5;
949 
+    @include transform(scale(0.75));
950 
+  }
951 
+  100% {
952 
+    opacity: 1;
953 
+    @include transform(translateX(0) scale(1));
954 
+  }
955 
+}
956 
+@keyframes swiperNextAnimation {
957 
+  0% {
958 
+    opacity: 1;
959 
+    @include transform(translateX(0));
960 
+  }
961 
+  50% {
962 
+    opacity: .5;
963 
+    @include transform(scale(0.75));
964 
+  }
965 
+  100% {
966 
+    opacity: 1;
967 
+    @include transform(translateX(0) scale(1));
968 
+  }
969 
+}
970 
+@-webkit-keyframes swiperPrevAnimation {
971 
+  0% {
972 
+    opacity: 0;
973 
+    @include transform(translateX(0));
974 
+  }
975 
+  45% {
976 
+    opacity: .7;
977 
+    @include transform(scale(0.75));
978 
+  }
979 
+  90% {
980 
+    opacity: 0;
981 
+    @include transform(scale(0.75));
982 
+  }
983 
+  100% {
984 
+    opacity: 0;
985 
+    @include transform(translateX(0) scale(1));
986 
+  }
987 
+}
988 
+@keyframes swiperPrevAnimation {
989 
+  0% {
990 
+    opacity: 0;
991 
+    @include transform(translateX(0));
992 
+  }
993 
+  45% {
994 
+    opacity: .7;
995 
+    @include transform(scale(0.75));
996 
+  }
997 
+  90% {
998 
+    opacity: 0;
999 
+    @include transform(scale(0.75));
1000 
+  }
1001 
+  100% {
1002 
+    opacity: 0;
1003 
+    @include transform(translateX(0) scale(1));
1004 
+  }
940 1005 
 }
941 1006 
\ No newline at end of file
files/themes/aldegott_2022/assets/css/theme.scss
History View file @39e3ec0
... ... 
@@ -732,11 +732,44 @@
732 732
733 733 
 .mod_team_list {
734 734
735 
+  .nav-holder {
736 
+    position: absolute;
737 
+    top: 50%;
738 
+    width: 100%;
739 
+  }
740 
+
735 741 
   .swiper-button-prev,
736 742 
   .swiper-button-next {
737 743 
     &:after {
738 744 
       background: $color-bg-secondary;
739 745 
     }
746 
+
747 
+    &.swiper-button-disabled {
748 
+      cursor: not-allowed;
749 
+      pointer-events: unset;
750 
+    }
751 
+
752 
+    &:not(.swiper-button-disabled) {
753 
+      &.swiper-button-next {
754 
+        &:after {
755 
+          -webkit-animation: swiperNextAnimation 4s linear infinite;
756 
+          animation: swiperNextAnimation 4s linear infinite;
757 
+          //content: 'next';
758 
+        }
759 
+      }
760 
+
761 
+      &.swiper-button-prev {
762 
+        &:after {
763 
+          -webkit-animation: swiperNextAnimation 4s linear infinite;
764 
+          animation: swiperNextAnimation 4s linear infinite;
765 
+          //content: 'prev';
766 
+        }
767 
+      }
768 
+    }
769 
+  }
770 
+
771 
+  .swiper-container {
772 
+    margin-bottom: -50px;
740 773 
   }
741 774
742 775 
   ul {
... ... 
@@ -745,7 +778,7 @@
745 778
746 779 
     li {
747 780 
       @include box-sizing(border-box);
748 
-      padding: 100px 75px 0 0;
781 
+      padding: 130px 75px 50px 0;
749 782 
     }
750 783
751 784 
     .content {