From 59abe2e50b98b8267f9de079d924597267a39d4d Mon Sep 17 00:00:00 2001
From: Alexander Mahr <info@alexmahr.de>
Date: Sat, 15 Feb 2025 19:29:44 +0100
Subject: [PATCH] snap scroll horizontally (for weeksview)w

---
 app/assets/index.html | 58 ++++++++++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 17 deletions(-)
diff --git a/app/assets/index.html b/app/assets/index.html
index 5af9de4..57f8f9a 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -6,32 +6,33 @@
     </head>
 <style>
 * {
- font-family: sans;
- box-sizing:border-box;
+  font-family: sans;
+  box-sizing:border-box;
 }
 body,html{
-background-color:#ffa;
-margin:0;
-padding:0
+  background-color:#ffa;
+  margin:0;
+  padding:0;
+  width:100vw;
+  height:100vh;
+  overflow:hidden;
 }
 
 .infinityScroll{
-height:50vh;
-overflow:scroll;
-position:relative;
+  height:50vh;
+  overflow:scroll;
+  position:relative;
 }
 
-* {
- font-family: sans;
-}
-
-
 /* disable pinch-zoom*/
 :root {
   touch-action: pan-x pan-y;
   height: 100%
 }
 
+.monthview:hover{
+  box-shadow: 0 0 20px blue;
+}
 .monthview {
   background-color:rgba(255,255,255,0.5);
   border:2px solid rgba(0,0,0,0.5);
@@ -41,6 +42,7 @@ position:relative;
   /*margin:5px;*/
 /*  scroll-snap-align: center;*/
   overflow:hidden;
+  transition: all 0s ease-in-out;
 }
 
 .label{
@@ -67,23 +69,44 @@ position:relative;
   background-color:white;
 }
 
-#mainDiv{
+#weeksDiv{
+  background: linear-gradient(white,#aaf);
+  position: absolute;
+  top:0;
+  left:100vw;
+  
+}
+#weeksDiv, #monthsDiv{
   box-sizing:border-box;
   margin:0;
-/*  scroll-snap-type: y mandatory;*/
+  scroll-snap-align: start;
   height:100vh;
   overflow:scroll;
   margin:0;
   width:100vw;
 }
 
+
 .orig{
 box-shadow: 0 0 10px grey;
 }
 
+#all{
+    scroll-snap-type: x mandatory;
+    width:100vw;
+    overflow-x:scroll;
+    overflow-y:hidden;
+    height:100vh;
+    position:relative;
+}
+
+    
 </style>
 <body>
-    <div id="mainDiv" class="infinityScroll"></div> 
+    <div id="all">
+        <div id="monthsDiv" class="infinityScroll"></div> 
+        <div id="weeksDiv" class="infinityScroll"></div> 
+    </div>
    
 <script>
 window.addEventListener("load",()=>{
@@ -184,7 +207,8 @@ window.addEventListener("load",()=>{
         },false);
     }
 
-    document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
+    makeInfinityScroll(document.querySelector("#monthsDiv"));
+//    document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
 
 },false);
 
