Merge pull request #51 from acend/changes

slideshow arrows
acend · Sep 30, 2024 · b935502 · b935502
2 parents bc31cea + 61a258c
commit b935502
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 70 deletions.
diff --git a/site/assets/js/utils/slideshows.js b/site/assets/js/utils/slideshows.js
@@ -11,7 +11,7 @@ export default function() {
 
       var flkty = new Flickity(el.querySelector('.carousel'), {  
         //lazyLoad: 2,
-        prevNextButtons: false,
+        prevNextButtons: true,
         pageDots: false,
       //	autoPlay: $this.hasClass('auto-play') ? 3000 : false,
         wrapAround: true ,
@@ -41,13 +41,7 @@ export default function() {
         carouselCaption.textContent = el.querySelector('.is-selected .caption').textContent ? el.querySelector('.is-selected .caption').textContent : el.querySelector('.carousel-cell:first-child .caption').textContent;
       });
 
-      el.querySelector('.button-previous').addEventListener( 'click', function() {
-        flkty.previous();
-      });
-      // next
-      el.querySelector('.button-next').addEventListener( 'click', function() {
-        flkty.next();
-      });
+
 
 
     });
@@ -59,7 +53,7 @@ export default function() {
 
       var flkty = new Flickity(carouselCommunity, {  
         //lazyLoad: 2,
-        prevNextButtons: false,
+        prevNextButtons: true,
         pageDots: false,
       //	autoPlay: $this.hasClass('auto-play') ? 3000 : false,
         wrapAround: false ,
@@ -116,7 +110,7 @@ export default function() {
       window.requestAnimationFrame(_updateTicker2);
     };
 
-    //_updateTicker2();
+    _updateTicker2();
 
     }
 

diff --git a/site/assets/scss/components/_flickity.scss b/site/assets/scss/components/_flickity.scss
@@ -56,8 +56,30 @@
   z-index: 2;
 }
 
-.button-previous svg {
-  transform: rotate(180deg);
+.flickity-button {
+  background: transparent;
+  border: none;
+  color: #fff;
+  mix-blend-mode: difference;
+
+  transition: all 0.2s ease;
+
+  &:hover {
+      background: #fff;
+      color: #000;
+  }
+
+  &:disabled {  
+    display: none ;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
 }
 
 .entry-content {

diff --git a/site/assets/scss/layouts/_faq.scss b/site/assets/scss/layouts/_faq.scss
@@ -52,29 +52,6 @@
     padding-right: 2rem;
   }
 
-  .flickity-prev-next-button {
-    @include media-breakpoint-down(sm) {
-      display: none;
-    }
-
-    box-shadow: none !important;
-    border-radius: 0;
-    background: var(--primary-opaque-light);
-    width: 40px;
-    height: 40px;
-    //opacity: 0.9;
-
-    &.previous {
-      left: -1rem;
-    }
-    &.next {
-      right: -1rem;
-    }
-
-    polygon {
-      fill: var(--primary);
-    }
-  }
-
+
 
 }
diff --git a/site/layouts/shortcodes/faq-slider.html b/site/layouts/shortcodes/faq-slider.html
@@ -3,21 +3,5 @@
     {{ .Inner }}
   </div>
   <div class="img-caption"><div class="c-caption"></div><div class="carousel-status"></div></div>
-  <button class="flickity-button flickity-prev-next-button previous button-previous" type="button" aria-label="Previous">
-    <svg class="icon icon-white icon-sm" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-          <g id="AC_Icon_Pfeil_Rechts_RGB_Schwarz-Copy" transform="translate(32.500000, 32.000000) rotate(180.000000) translate(-32.500000, -32.000000) translate(11.000000, 18.000000)" fill="#000" fill-rule="nonzero">
-              <polygon id="Path" points="28.97 0.17 26.15 3 35.15 12 4.97 12 4.97 8 0.97 8 0.97 16 35.14 16 26.15 25 28.97 27.83 42.8 13.99"></polygon>
-          </g>
-      </g>
-  </svg>  </button>
-  <button class="flickity-button flickity-prev-next-button next button-next" type="button" aria-label="Next">
-    <svg class="icon icon-white icon-sm" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-       <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-          <g id="AC_Icon_Pfeil_Rechts_RGB_Schwarz" transform="translate(11.000000, 18.000000)" fill="#000" fill-rule="nonzero">
-              <polygon id="Path" points="28.97 0.17 26.15 3 35.15 12 4.97 12 4.97 8 0.97 8 0.97 16 35.14 16 26.15 25 28.97 27.83 42.8 13.99"></polygon>
-          </g>
-      </g>
-  </svg>
-  </button>  
+
 </div>
diff --git a/site/layouts/shortcodes/slideshow.html b/site/layouts/shortcodes/slideshow.html
@@ -4,21 +4,5 @@
   </div>
 
   <div class="img-caption small d-flex"><div class="c-caption me-8"></div><div class="ms-auto carousel-status"></div></div>
-  <button class="flickity-button flickity-prev-next-button previous button-previous" type="button" aria-label="Previous">
-    <svg class="icon icon-white icon-sm" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-          <g id="AC_Icon_Pfeil_Rechts_RGB_Schwarz-Copy" transform="translate(32.500000, 32.000000) rotate(180.000000) translate(-32.500000, -32.000000) translate(11.000000, 18.000000)" fill="#000" fill-rule="nonzero">
-              <polygon id="Path" points="28.97 0.17 26.15 3 35.15 12 4.97 12 4.97 8 0.97 8 0.97 16 35.14 16 26.15 25 28.97 27.83 42.8 13.99"></polygon>
-          </g>
-      </g>
-  </svg>  </button>
-  <button class="flickity-button flickity-prev-next-button next button-next" type="button" aria-label="Next">
-    <svg class="icon icon-white icon-sm" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-       <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-          <g id="AC_Icon_Pfeil_Rechts_RGB_Schwarz" transform="translate(11.000000, 18.000000)" fill="#000" fill-rule="nonzero">
-              <polygon id="Path" points="28.97 0.17 26.15 3 35.15 12 4.97 12 4.97 8 0.97 8 0.97 16 35.14 16 26.15 25 28.97 27.83 42.8 13.99"></polygon>
-          </g>
-      </g>
-  </svg>
-  </button>  
+
 </div>
diff --git a/site/layouts/ueber-uns/list.html b/site/layouts/ueber-uns/list.html
@@ -100,6 +100,8 @@ <h3  data-scroll class="mb-4">{{ .text | markdownify }}</h3>
       </div>
     {{ end }}
   {{ end }}
+
+
 </div>
 {{ end }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,8 @@ <h3 data-scroll class="mb-4">{{ .text | markdownify }}</h3> @@
           </div>
         {{ end }}
       {{ end }}
     </div>
     {{ end }}
@@ Expand Down @@