Naast en over elkaar
Dat werkt, maar het is nog niet gelukt om de schermen die links van het scherm afschuiven te laten staan, waarbij de overige schermen er als het ware bovenop schuiven, als een stapel. Ik geloof dat je daarvoor display: sticky; moet gebruiken en dat het alleen werkt als je met absolute groottes werkt in plaats van relatieve.
Iemand een idee hoe je dat zou kunnen doen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html { scroll-behaviour: smooth; }
html,
body {
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.wrapper {
width: 100vh;
height: 100vw;
margin-top: 100vh;
transform: rotate(-90deg);
transform-origin: top left;
overflow: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.schermen {
display: flex;
height: 100vh;
min-width: 100vw;
margin-left: 100vh;
transform: rotate(90deg);
transform-origin: top left;
}
.scherm {
flex: 1 0 50vw;
scroll-snap-align: start;
overflow-x: none;
overflow-y: auto;
}
.s1 { background: gainsboro; }
.s2 { background: grey; font-size: 24px; }
.s3 { background: lightblue; }
.s4 { background: slategrey; }
.s5 { background: lightgreen; }
</style>
</head>
<body>
<div class="wrapper">
<div class="schermen">
<div class="scherm s1">Eerste scherm
<button onclick="document.getElementById('einde').scrollIntoView({
behavior: 'smooth'
});">OK</button>
</div>
<div class="scherm s2"><h3>Tweede scherm</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed faucibus turpis in eu. Lacus luctus accumsan tortor posuere. Facilisis gravida neque convallis a cras semper. Donec et odio pellentesque diam volutpat commodo sed. Dapibus ultrices in iaculis nunc sed. Ac ut consequat semper viverra nam libero justo laoreet. Metus dictum at tempor commodo ullamcorper. Consectetur lorem donec massa sapien faucibus et molestie. Enim facilisis gravida neque convallis a.
Mattis vulputate enim nulla aliquet porttitor lacus. Risus nec feugiat in fermentum posuere. Laoreet sit amet cursus sit amet dictum sit. Nisl vel pretium lectus quam id leo in. Eget gravida cum sociis natoque penatibus et. Elit at imperdiet dui accumsan sit amet nulla facilisi. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Non nisi est sit amet facilisis magna etiam tempor orci. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Purus non enim praesent elementum. Pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed. Vulputate dignissim suspendisse in est ante. Donec et odio pellentesque diam. Pellentesque eu tincidunt tortor aliquam nulla. Ornare suspendisse sed nisi lacus sed viverra.</div>
<div class="scherm s3">Derde scherm</div>
<div class="scherm s4">Vierde scherm</div>
<div id="einde" class="scherm s5">Vijfde scherm</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Test</title>
<style>
html { scroll-behaviour: smooth; }
html,
body {
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.wrapper {
width: 100vh;
height: 100vw;
margin-top: 100vh;
transform: rotate(-90deg);
transform-origin: top left;
overflow: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.schermen {
display: flex;
height: 100vh;
min-width: 100vw;
margin-left: 100vh;
transform: rotate(90deg);
transform-origin: top left;
}
.scherm {
flex: 1 0 50vw;
scroll-snap-align: start;
overflow-x: none;
overflow-y: auto;
}
.s1 { background: gainsboro; }
.s2 { background: grey; font-size: 24px; }
.s3 { background: lightblue; }
.s4 { background: slategrey; }
.s5 { background: lightgreen; }
</style>
</head>
<body>
<div class="wrapper">
<div class="schermen">
<div class="scherm s1">Eerste scherm
<button onclick="document.getElementById('einde').scrollIntoView({
behavior: 'smooth'
});">OK</button>
</div>
<div class="scherm s2"><h3>Tweede scherm</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed faucibus turpis in eu. Lacus luctus accumsan tortor posuere. Facilisis gravida neque convallis a cras semper. Donec et odio pellentesque diam volutpat commodo sed. Dapibus ultrices in iaculis nunc sed. Ac ut consequat semper viverra nam libero justo laoreet. Metus dictum at tempor commodo ullamcorper. Consectetur lorem donec massa sapien faucibus et molestie. Enim facilisis gravida neque convallis a.
Mattis vulputate enim nulla aliquet porttitor lacus. Risus nec feugiat in fermentum posuere. Laoreet sit amet cursus sit amet dictum sit. Nisl vel pretium lectus quam id leo in. Eget gravida cum sociis natoque penatibus et. Elit at imperdiet dui accumsan sit amet nulla facilisi. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Non nisi est sit amet facilisis magna etiam tempor orci. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Purus non enim praesent elementum. Pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed. Vulputate dignissim suspendisse in est ante. Donec et odio pellentesque diam. Pellentesque eu tincidunt tortor aliquam nulla. Ornare suspendisse sed nisi lacus sed viverra.</div>
<div class="scherm s3">Derde scherm</div>
<div class="scherm s4">Vierde scherm</div>
<div id="einde" class="scherm s5">Vijfde scherm</div>
</div>
</div>
</body>
</html>
https://css-tricks.com/stacked-cards-with-sticky-positioning-and-a-dash-of-sass/
In het kort, dit lijkt te werken op het scrollen met het muiswieltje na:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { scroll-behaviour: smooth; }
html, body { margin: 0; }
.cards {
display: flex;
height: 100vh;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.card {
flex: 1 0 50vw;
position: sticky;
left: 0;
scroll-snap-align: start;
}
.b1 { background: gainsboro; }
.b2 { background: grey; flex-basis: 200px;}
.b3 { background: lightblue; }
.b4 { background: slategrey; }
.b5 { background: lightgreen; }
</style>
</head>
<body>
<div class="cards">
<div class="card b1">Eerste scherm</div>
<div class="card b2">Tweede scherm</div>
<div class="card b3">Derde scherm</div>
<div class="card b4">Vierde scherm</div>
<div class="card b5">Vijfde scherm</div>
</div>
</body>
</html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { scroll-behaviour: smooth; }
html, body { margin: 0; }
.cards {
display: flex;
height: 100vh;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.card {
flex: 1 0 50vw;
position: sticky;
left: 0;
scroll-snap-align: start;
}
.b1 { background: gainsboro; }
.b2 { background: grey; flex-basis: 200px;}
.b3 { background: lightblue; }
.b4 { background: slategrey; }
.b5 { background: lightgreen; }
</style>
</head>
<body>
<div class="cards">
<div class="card b1">Eerste scherm</div>
<div class="card b2">Tweede scherm</div>
<div class="card b3">Derde scherm</div>
<div class="card b4">Vierde scherm</div>
<div class="card b5">Vijfde scherm</div>
</div>
</body>
</html>
Nu nog kijken hoe ik dat horizontaal scrollen met de muis voor elkaar ga krijgen.
Het werkt nu al niet echt lekker met scroll-snap, als je bijvoorbeeld helemaal naar links wilt scrollen moet je echt moeite doen met alleen al de scrollbalk..
Toevoeging op 23/07/2024 09:41:44:
Overigens werkt horizontaal scrollen met de muis wel gewoon wanneer je SHIFT ingedrukt houdt, maar dat zie ik de meeste gebruikers niet snel doen..
https://stackoverflow.com/questions/18481308/set-mouse-wheel-to-horizontal-scroll-using-css
Alleen… ik heb een vaag vermoeden dat dit zowel accessibility als de UX ondermijnt (vanwege Jakob’s Law onder andere).
Wat ik probeer is een <div> om de <div class="cards"> heen voor het draaien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="scrollfix">
<div class="cards">
<div class="card b1">Eerste scherm
<button onclick="document.getElementById('einde').scrollIntoView({behavior:'smooth'});">OK</button>
</div>
<div class="card b2">Tweede scherm</div>
<div class="card b3">Derde scherm</div>
<div class="card b4">Vierde scherm</div>
<div id="einde" class="card b5">Vijfde scherm</div>
</div>
</div>
<div class="cards">
<div class="card b1">Eerste scherm
<button onclick="document.getElementById('einde').scrollIntoView({behavior:'smooth'});">OK</button>
</div>
<div class="card b2">Tweede scherm</div>
<div class="card b3">Derde scherm</div>
<div class="card b4">Vierde scherm</div>
<div id="einde" class="card b5">Vijfde scherm</div>
</div>
</div>
Met deze styles:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.scrollfix {
width: 100vh;
height: 100vw;
margin-top: 100vh;
transform: rotate(-90deg);
transform-origin: top left;
overflow: auto;
}
.cards {
display: flex;
height: 100vh;
min-width: 100vw;
/* toevoeging scrollfix */
margin-left: 100vh;
transform: rotate(90deg);
transform-origin: top left;
}
.card {
flex: 1 0 50vw;
position: sticky;
left: 0;
top: 0;
}
width: 100vh;
height: 100vw;
margin-top: 100vh;
transform: rotate(-90deg);
transform-origin: top left;
overflow: auto;
}
.cards {
display: flex;
height: 100vh;
min-width: 100vw;
/* toevoeging scrollfix */
margin-left: 100vh;
transform: rotate(90deg);
transform-origin: top left;
}
.card {
flex: 1 0 50vw;
position: sticky;
left: 0;
top: 0;
}
Ik had verwacht dat flex childs met position: sticky; zouden blijven staan, maar dat doen ze niet.
Het probleem lijkt te zijn bij .scrollfix, als ik daar overflow: auto; weglaat dan scrollt er niets.
Dat 90 graden draaien in CSS maakt het onnodig ingewikkeld, ook voor de style zelf. De scrollbalk komt dan bovenaan in het scherm te staan en dan moet die weer verborgen worden (UX idd).
Ik zou het muiswieltje kunnen afvangen met JavaScript, maar dan moet je (denk ik) weer ingewikkeld gaan doen om onderscheid te maken tussen het horizontaal scrollen van de cards en het verticaal scrollen als de cards langer zijn dan het scherm hoog is.
Misschien gewoon de gebruikers de tip geven dat ze ook met SHIFT + wieltje horizontaal kunnen scrollen, dat lijkt me beter. Raken ze ook niet in de war als het scherm 'ineens' horizontaal gaat schuiven.
Is dat ook hoe het bij andere PWA's werkt?
Toevoeging op 23/07/2024 11:56:45:
Heh, bah, met SHIFT ingedrukt scrollen werkt alleen goed naar rechts, niet naar links...
Je zou een stap terug kunnen zetten om hoger over te vliegen in information design. Misschien is het soort card dat je nu in gedachten hebt niet het beste design pattern voor de informatie die je wilt ontsluiten.
https://ui-patterns.com/patterns/cards
Gewijzigd op 23/07/2024 21:37:52 door Ward van der Put
Althans, dat was de gedachte. Op het eerste gezicht lijkt mij dat een goed idee, omdat de intranet site een gelaagdheid kent, als: persoonlijk niveau / afdelingsniveau / itemniveau.
Dan krijg je na het inloggen je persoonlijke profielpagina met dashboard en zo, met rechts een menu voor de verschillende processen van afdelingen (waar je recht op hebt). Als je dan een optie in dat menu kiest, verschuift (letterlijk) de focus. Door horizontaal te schuiven krijg je visueel een gevoel van een kruimelpad.
Misschien werkt dit idee alleen op smartphones, want wanneer het gaat schuiven op beeldschermen met een diameter van anderhalve tot twee meter is de focus eerder weg dan dat het helpt om de focus te houden. (Ik kan me de misstap met het startmenu van Windows 8 nog levendig herinneren). Dat zou ik wel weer kunnen verhelpen door een gelaagdheid aan te brengen met meerdere flexboxen, zodat het ook in 2d opgezet kan worden.
Als de nieuwe interface klaar is, wordt de 2-tier intranetsite omgebouwd naar een 3-tier PWA, en dan is het wel fijn als het ook 'gewoon' op mobile te gebruiken is.
Maar de basis van dit idee wordt eerst om de intranetsite inhoudelijk te vervolmaken, alvorens het een app wordt. Hopelijk zit ik hiermee op de goede weg, al weet ik nog niet hoe het dan op tablets of op kleine netbookschermen zal uitpakken.
Een meer klassieke gelaagdheid kun je aanbrengen met tabs. Een modernere variant daarvan is de verticale navigation rail die op desktop tegen de linkerrand staat.
Gewijzigd op 24/07/2024 12:30:49 door Ward van der Put
Mijn eerste idee was alleen voor desktop, met verticale tabs ("navigation rail") om de invalshoek te bepalen, met een verticale strook voor de inhoudsopgave en de rest voor de inhoud (beetje zoals in de IDE).
En nu ik alle opties voor mij heb, denk ik dat ik zo simpel mogelijk moet blijven. Drie <div>s voor de navigation rail, inhoudsopgave en content, eventueel met een vierde <div> voor de details als side of bottom sheet.
De <div>s kan ik dan met een enkele media query instellen als cards voor op een smartphone.
Het beste onderdeel is dat veel van de bestaande applicatielogica dan gewoon kan blijven, al zal ik die wel meteen ombouwen.