Skip to content

Commit 28d0c52

Browse files
paulgirardpaulgirard
committed
[how-to] three-state toggler
1 parent 48c63c7 commit 28d0c52

2 files changed

Lines changed: 110 additions & 31 deletions

File tree

‎src/pages/how-to/index.astro‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { Icon } from "astro-icon/components";
23
import { Image } from "astro:assets";
34
import Gephi from "../../components/how-to/Gephi.md";
45
import GephiLite from "../../components/how-to/GephiLite.md";
@@ -14,26 +15,41 @@ import Layout from "../../layouts/Layout.astro";
1415

1516
<main id="how-to-page" class="py-5">
1617
<section class="how-to-choice w-100 sticky-top container">
17-
<h2 class="d-flex justify-content-center align-item-center gap-3 w-100">
18-
<div class="label-container" id="gephi">
19-
<label for="onlyGephi">
18+
<h2 class="d-flex justify-content-center align-items-center gap-3 w-100">
19+
<div class="label-container">
20+
<a href="#gephi" id="gephi-choice-label">
2021
<Image
2122
src="/icons/gephi-desktop-logo-inverted.svg"
2223
class="mb-3 mb-md-0"
2324
alt="Gephi logo"
2425
width="100"
2526
height="100"
2627
/>
27-
<span class="label-content">Gephi</span></label
28-
>
28+
<span class="label-content">Gephi</span>
29+
</a>
2930
</div>
30-
<div class="d-flex align-items-center gap-1">
31-
<input name="how-to-columns" type="radio" id="onlyGephi" />
32-
<input name="how-to-columns" type="radio" id="both" />
33-
<input name="how-to-columns" type="radio" id="onlyGephiLite" />
31+
<div class="togglers" role="radiogroup" aria-label="How-to columns">
32+
<div class="toggler" role="none"></div>
33+
<a
34+
href="#gephi"
35+
title="gephi"
36+
class="toggle gephi"
37+
id="gephi"
38+
role="radio"
39+
aria-labelledby="gephi-choice-label"></a>
40+
<a href="#_" title="both" class="toggle both" role="radio" aria-label="Both Gephi and Gephi Lite"
41+
><Icon name="ph:text-columns" role="none" /></a
42+
>
43+
<a
44+
href="#gephi-lite"
45+
title="gephi-lite"
46+
id="gephi-lite"
47+
class="toggle gephi-lite"
48+
role="radio"
49+
aria-labelledby="gephi-lite-choice-label"></a>
3450
</div>
35-
<div class="label-container" id="gephi-lite">
36-
<label for="onlyGephiLite">
51+
<div class="label-container">
52+
<a href="#gephi-lite" id="gephi-lite-choice-label">
3753
<span class="label-content">Gephi Lite</span>
3854

3955
<Image
@@ -43,15 +59,15 @@ import Layout from "../../layouts/Layout.astro";
4359
width="100"
4460
height="100"
4561
/>
46-
</label>
62+
</a>
4763
</div>
4864
</h2>
4965
</section>
5066
<section class="how-to container">
51-
<article class="how-to-column" id="gephi">
67+
<article class="how-to-column" id="gephi-column">
5268
<Gephi />
5369
</article>
54-
<article class="how-to-column" id="gephi-lite">
70+
<article class="how-to-column" id="gephi-lite-column">
5571
<GephiLite />
5672
</article>
5773
</section>

‎src/styles/_how-to.scss‎

Lines changed: 80 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
#how-to-page {
2+
--togglers-padding: 0px;
3+
24
// column choice selector
35
.how-to-choice {
46
@extend .py-3;
57

68
background-color: var(--bs-body-bg);
79
h2 {
810
.label-container {
9-
text-align: center;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
1014
flex-grow: 1;
1115
width: 1px;
1216
@include media-breakpoint-down(md) {
@@ -15,6 +19,65 @@
1519
}
1620
}
1721
}
22+
a {
23+
text-decoration: none;
24+
color: inherit;
25+
}
26+
.togglers {
27+
--togglers-base-size: 48px;
28+
height: var(--togglers-base-size);
29+
width: calc(var(--togglers-base-size) * 3);
30+
border-radius: calc(var(--togglers-base-size) / 2);
31+
position: relative;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
36+
background-color: #0001;
37+
38+
.toggler {
39+
//position
40+
position: absolute;
41+
transition: all 0.5s;
42+
// default position: middle show both
43+
@include media-breakpoint-up(lg) {
44+
left: calc(50% - (33% - var(--togglers-padding)) / 2);
45+
}
46+
@include media-breakpoint-down(lg) {
47+
left: var(--togglers-padding);
48+
}
49+
// color
50+
background-color: $primary;
51+
opacity: 30%;
52+
z-index: 0;
53+
//size
54+
width: calc(33% - var(--togglers-padding));
55+
height: calc(100% - var(--togglers-padding));
56+
border-radius: 50%;
57+
}
58+
59+
a {
60+
&.toggle {
61+
z-index: 1;
62+
height: 100%;
63+
width: 33%;
64+
position: relative;
65+
&.both {
66+
// center icon
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
71+
> * {
72+
//icon size
73+
width: 80%;
74+
height: 80%;
75+
margin: 0;
76+
}
77+
}
78+
}
79+
}
80+
}
1881
}
1982
}
2083

@@ -29,45 +92,45 @@
2992
}
3093

3194
// only gephi
32-
&:has(input#onlyGephi:checked) {
95+
&:has(#gephi:target) {
96+
.toggler {
97+
left: var(--togglers-padding);
98+
}
3399
.how-to {
34100
grid-template-columns: [gephi] var(--solo-column-width);
35101
justify-content: center;
36102

37-
#gephi-lite {
103+
#gephi-lite-column {
38104
section {
39105
display: none;
40106
}
41107
}
42108
}
43-
label#gephi-lite {
44-
@extend .text-muted;
45-
}
46109
}
47110
// only gephi lite
48-
&:has(input#onlyGephiLite:checked) {
111+
&:has(#gephi-lite:target) {
112+
.toggler {
113+
left: calc(100% - 33% - var(--togglers-padding) - var(--togglers-padding));
114+
}
49115
.how-to {
50116
grid-template-columns: [gephi-lite] var(--solo-column-width);
51117

52118
justify-content: center;
53119

54-
#gephi {
120+
#gephi-column {
55121
section {
56122
display: none;
57123
}
58124
}
59125
}
60-
label#gephi-lite {
61-
@extend .text-muted;
62-
}
63126
}
64127
// both
65-
&:has(input#both:checked) {
128+
&:not(:has(#gephi:target)):not(:has(#gephi-lite:target)) {
66129
.how-to {
67130
// both is not allowed on small screens
68131
@include media-breakpoint-down(lg) {
69132
grid-template-columns: [gephi] var(--solo-column-width);
70-
#gephi-lite {
133+
#gephi-lite-column {
71134
section {
72135
display: none;
73136
}
@@ -76,12 +139,12 @@
76139
@include media-breakpoint-up(lg) {
77140
grid-template-columns: [gephi] 1fr [gephi-lite] 1fr;
78141

79-
#gephi {
142+
#gephi-column {
80143
section.common-title {
81144
grid-column: 1 / 3;
82145
}
83146
}
84-
#gephi-lite {
147+
#gephi-lite-column {
85148
section.common-title {
86149
display: none;
87150
}
@@ -163,14 +226,14 @@
163226
$nb-sections: 50;
164227
// place sections in the right rows
165228
@for $i from 1 through $nb-sections {
166-
#gephi > section:nth-child(#{$i}) {
229+
#gephi-column > section:nth-child(#{$i}) {
167230
grid-column: gephi;
168231

169232
@include media-breakpoint-up(lg) {
170233
grid-row: $i;
171234
}
172235
}
173-
#gephi-lite > section:nth-child(#{$i}) {
236+
#gephi-lite-column > section:nth-child(#{$i}) {
174237
grid-column: gephi-lite;
175238

176239
@include media-breakpoint-up(lg) {

0 commit comments

Comments
 (0)