Merge pull request #64 from acend/changes

clean up sticky js
acend · Oct 8, 2024 · babc972 · babc972
2 parents f22ab85 + a86c470
commit babc972
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 38 deletions.
diff --git a/site/assets/js/app.js b/site/assets/js/app.js
@@ -5,6 +5,7 @@
 import Swup from 'swup';
 import SwupBodyClassPlugin from '@swup/body-class-plugin';
 import SwupHeadPlugin from '@swup/head-plugin';
+//import SwupScrollPlugin from '@swup/scroll-plugin';
 //import SwupDebugPlugin from '@swup/debug-plugin';
 
 import starterScripts from "./assets/js/views/starter-scripts";
@@ -20,6 +21,12 @@ const swup = new Swup({
   plugins: [
     new SwupBodyClassPlugin(),
     new SwupHeadPlugin({ persistAssets: true }),
+   /*
+    new SwupScrollPlugin({
+      //doScrollingRightAway: true,
+      //animateScroll: false
+    }),
+    */
     //new SwupDebugPlugin(),
   ],
 });

diff --git a/site/assets/js/views/on-every-page.js b/site/assets/js/views/on-every-page.js
@@ -1,6 +1,6 @@
 
 import ScrollOut from "scroll-out";
-import Sticky from "sticky-js";
+//import Sticky from "sticky-js";
 
 import home from "js/views/home";
 import trainings from "js/views/trainings";
@@ -35,7 +35,7 @@ export default function() {
   });
 */
 
-  var sticky = new Sticky('.sticky');
+ // var sticky = new Sticky('.sticky');
 
 
   let root = document.documentElement;
@@ -84,16 +84,16 @@ export default function() {
 
 
 
- 
+
 // still needed?
   const anmeldeToggler = document.querySelector(".anmelde-toggler");
 if (anmeldeToggler) {
 
   anmeldeToggler.addEventListener('click', function() {
-    document.querySelector('.box-anmelden .sticky').classList.toggle('d-none');
+    document.querySelector('.box-anmelden .inner').classList.toggle('active');
   });
 }          
-  
+
 
 /* autoplay ios fix */
 document.querySelectorAll('video[autoplay]').forEach( video => {

diff --git a/site/assets/scss/common/_swup.scss b/site/assets/scss/common/_swup.scss
@@ -1,3 +1,21 @@
+::view-transition-old(*),
+::view-transition-new(*) {
+  position: absolute;
+  //top: 0;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  // animation-duration: inherit;
+  animation-fill-mode: inherit;
+  // animation-delay: inherit;
+}
+
+::view-transition-new(*) {
+  //top: -2rem;
+}
+
+
 html.is-changing .transition-fade {
   view-transition-name: main;
 }

diff --git a/site/assets/scss/layouts/_faq.scss b/site/assets/scss/layouts/_faq.scss
@@ -1,8 +1,10 @@
-.sticky-top{
+.sticky-top {
   top: 4rem;  
-    &[stuck] {
+  /* 
+  &[stuck] {
     box-shadow: 0 0 16px black;
   }
+    */
 }
 
 .topics-selector-group {

diff --git a/site/assets/scss/layouts/_trainings.scss b/site/assets/scss/layouts/_trainings.scss
@@ -144,23 +144,46 @@
   }
 }*/
 
-.box-anmelden .sticky {
-   transition:  box-shadow 0.2s ease-in-out;
+.box-anmelden.sticky-top {
+  //transition:  box-shadow 0.2s ease-in-out;
+  top: 12rem;
 
-   &.is-sticky {
-   // box-shadow: 0 0 30px rgba(0,0,0,0.2);
-   // box-shadow: 0 0 30px var(--shadowColor);
-    //z-index: 2;
-  }
-  @include media-breakpoint-down(sm) {
-    //.box-anmelden {
+  @include media-breakpoint-down(md) {
+
+    .inner {
+
+      //.box-anmelden {
         position: fixed;
-        top: 180px;
-        left: 15px;
-        right: 15px;
+        //top: 180px;
+        bottom: 180px;
+        left: 1.8rem;
+        right: 1.8rem;
         z-index: 5;
-        box-shadow: 0 0 30px rgba(0,0,0,0.2);
-        box-shadow: 0 0 30px var(--shadowColor);
+        //box-shadow: 0 0 30px rgba(0,0,0,0.2);
+        //box-shadow: 0 0 30px var(--shadowColor);
+
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.45, 0.98);
+        transform: scale(0, 0);
+        transform-origin: bottom right;
+
+        .box,
+        .btn {
+          opacity: 0;
+          transition: opacity 0.3s ease 0.3s;
+          transition-delay: 0s;
+        }
+
+        &.active {
+          transform: scale(1);
+          transition: all 0.3s cubic-bezier(0.37, 0.03, 0.27, 1.55);
+
+          .box,
+          .btn {
+            opacity: 1;
+            transition: opacity 0.3s ease 0.3s;
+          }
+        }
+      }
   // }
   }
 }

diff --git a/site/hugo_stats.json b/site/hugo_stats.json
@@ -83,6 +83,7 @@
       "align-items-start",
       "align-self-end",
       "anmelde-toggler",
+      "anmelde-toggler_",
       "ansible",
       "argo-cd",
       "author",
@@ -101,6 +102,7 @@
       "border-bottom",
       "border-top",
       "bottom-0",
+      "box",
       "box-anmelden",
       "box-large",
       "box-training",
@@ -144,6 +146,7 @@
       "col-lg-7",
       "col-lg-8",
       "col-lg-9",
+      "col-md-1",
       "col-md-10",
       "col-md-3",
       "col-md-4",
@@ -177,8 +180,12 @@
       "d-md-inline",
       "d-md-none",
       "d-none",
+      "d-none_",
       "datenschutz",
       "delivery-ci-cd",
+      "dropdown",
+      "dropdown-menu",
+      "dropdown-toggle",
       "duration",
       "email",
       "entry-content",
@@ -294,6 +301,7 @@
       "mb-lg-6",
       "mb-lg-8",
       "mb-md-0",
+      "mb-md-2",
       "mb-md-6",
       "mc-field-group",
       "md",
@@ -376,6 +384,7 @@
       "order-lg-1",
       "order-lg-3",
       "order-md-1",
+      "order-md-3",
       "outline",
       "overflow-hidden",
       "overflow-hidden_",
@@ -417,6 +426,7 @@
       "ps-lg-3",
       "ps-lg-6",
       "ps-lg-8",
+      "ps-md-10",
       "ps-md-4",
       "pt-1",
       "pt-10",

diff --git a/site/layouts/trainings/single.html b/site/layouts/trainings/single.html
@@ -17,13 +17,13 @@
   <div class="container-fluid mb-16 mb-lg-32" data-sticky-container>
     <div class="row">
 
-      <div class="col-8 col-lg-7 order-lg-1">
+      <div class="col-8 col-md-7 order-md-1">
         <div class="h4 mb-0 mb-lg-4">Training</div> 
         <h1 class="mb-8 mb-lg-16">{{ .Title }}</h1>
       </div>
 
 
-      <div class="col-4 col-lg-1 pt-2">
+      <div class="col-4 col-md-1 pt-2">
         {{ if .Params.techlogo.full }}
         {{ with .Params.techlogo.full }}
          {{ with resources.Get . }}
@@ -36,8 +36,8 @@ <h1 class="mb-8 mb-lg-16">{{ .Title }}</h1>
       </div>
 
       {{ if .Params.kooperation.enable }}
-        <div class="col-7 col-lg-3 offset-lg-1 ps-lg-10 order-lg-3">
-          <div class="mb-8 text-lg-end">{{ .Params.kooperation.subtitle | safeHTML }}</div>
+        <div class="col-7 col-md-4 col-lg-3 offset-lg-1 ps-md-10 order-md-3">
+          <div class="mb-8 text-md-end">{{ .Params.kooperation.subtitle | safeHTML }}</div>
         </div>
         {{ end }}
 
@@ -47,7 +47,7 @@ <h1 class="mb-8 mb-lg-16">{{ .Title }}</h1>
 
       <div class="row">
 
-        <div class="col-lg-7 offset-lg-1">
+        <div class="col-md-7 offset-md-1">
         <div class="h2 mb-4 mb-lg-8">{{ .Params.main_title | markdownify}}</div>
         <div class="entry-content mb-16 mb-lg-32">
           {{ .Params.main_text | markdownify}}
@@ -180,17 +180,17 @@ <h3 class="mb-4 mb-md-6 pb-2 border-bottom">{{ .title  | markdownify }}</h3>
       </div>
 
 
-      <div class="col-lg-3 offset-lg-1 ps-lg-10">
+      <div class="col-md-4 col-lg-3 offset-lg-1 ps-md-10">
 
 
-        <div id="box-anmelden" class="w-100 box-anmelden">
+        <div id="box-anmelden" class="w-100 box-anmelden sticky-top ">
           <button class="anmelde-toggler d-md-none btn btn-primary bg-primary p-2" type="button"  aria-label="Toggle navigation">
             <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.875 24C4.875 13.438 13.438 4.875 24 4.875S43.125 13.438 43.125 24 34.562 43.125 24 43.125 4.875 34.562 4.875 24Zm35.518 0c0-9.053-7.34-16.393-16.393-16.393S7.607 14.947 7.607 24 14.947 40.393 24 40.393 40.393 33.053 40.393 24Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.162 17.495a1.625 1.625 0 0 1-1.175.475 1.58 1.58 0 0 1-1.162-.475 1.58 1.58 0 0 1-.475-1.162c0-.458.158-.85.475-1.175a1.559 1.559 0 0 1 1.162-.489c.458 0 .85.163 1.175.489.326.325.489.717.489 1.175 0 .458-.163.845-.489 1.162Zm.225 2.456v13.468h-2.773V19.951h2.773Z" fill="#fff"/></svg>
           </button>
 
-          <div class="d-none d-md-block p-3_ sticky  bg-white" data-sticky-class="is-sticky" data-sticky-for="768" data-margin-top="140">
+          <div class="inner d-none_ d-md-block  bg-primary"  >
 
-            <div class="border px-5 pb-2 pt-3  mb-2 bg-white small">
+            <div class="box border px-5 pb-2 pt-3  mb-md-2 bg-white small">
 
               {{ with .Params.duration }}
                 <div class="py-2  d-flex border-bottom">

diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -23,7 +23,6 @@
     "gethyas": "^2.4.2",
     "headroom.js": "^0.12.0",
     "scroll-out": "^2.2.12",
-    "sticky-js": "^1.3.0",
     "swup": "^4.7.0"
   },
   "devDependencies": {