lion/calender.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

snap scroll horizontally (for weeksview)w

Browse source
This commit is contained in:
Alexander Mahr 2025-02-15 19:29:44 +01:00
parent 031e6c00bd
commit 59abe2e50b
1 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/index.html
View file

@ -10,28 +10,29 @@
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);