Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video
www.life-series.online
Member list improvements and other tings (#57)
* Add scroll shadows, adjust member list spacing on mobile
* Fix video item icon stroke width
* Align footer items to the right on Firefox
* Fix transition
* Fix member link focus outline
* FIx member list horizontal scroll on mobile
* Make focus indicator on mobile full visible in member list
* Allow member list to shrink
* Remove scroll shadows and use simple borders instead, fix overscroll
* Scroll active page link in view on page load
+62
-64
-6
astro.config.mjs
-6
astro.config.mjs
+5
-1
src/components/rewrite/MemberItem.astro
+5
-1
src/components/rewrite/MemberItem.astro
···
10
10
const { memberName, title } = Astro.props;
11
11
---
12
12
13
-
<div class="cluster gap-text-icon">
13
+
<div class="cluster gap-text-icon member-item-wrapper">
14
14
<Image
15
15
src={getMemberImage(memberName)}
16
16
alt=""
···
22
22
</div>
23
23
24
24
<style>
25
+
.member-item-wrapper {
26
+
--cluster-wrap: nowrap;
27
+
}
28
+
25
29
img {
26
30
max-width: 30px;
27
31
aspect-ratio: 1;
+26
-12
src/components/rewrite/SeasonLayout.astro
+26
-12
src/components/rewrite/SeasonLayout.astro
···
52
52
}
53
53
54
54
aside {
55
+
@media (width < 48rem) {
56
+
margin-block: 16px;
57
+
margin-inline: clamp(16px, 10.2857px + 1.7857vw, 24px);
58
+
}
59
+
55
60
@media (width >= 48rem) {
56
61
display: grid;
57
62
grid-row: 1 / -1;
···
60
65
top: 0;
61
66
overflow-y: auto;
62
67
overscroll-behavior-y: none;
63
-
}
64
68
65
-
nav {
66
-
@media (width < 48rem) {
67
-
margin-inline: clamp(16px, 10.2857px + 1.7857vw, 24px);
69
+
@media (prefers-reduced-motion: no-preference) {
70
+
scroll-behavior: smooth;
68
71
}
72
+
}
73
+
}
69
74
70
-
@media (width >= 48rem) {
71
-
align-self: center;
72
-
padding: 16px 24px;
73
-
}
75
+
nav {
76
+
@media (width >= 48rem) {
77
+
align-self: center;
78
+
padding: 16px 24px;
74
79
}
80
+
}
81
+
82
+
.sidebar-nav-list {
83
+
@media (width < 48rem) {
84
+
display: grid;
85
+
border-block: 1px solid var(--color-surface-2);
86
+
max-block-size: 25vmax;
87
+
overflow-y: auto;
75
88
76
-
.sidebar-nav-list {
77
-
@media (width < 48rem) {
78
-
max-block-size: 25vmax;
79
-
overflow-y: auto;
89
+
/* Makes focus indicator fully visible and not partially cut off */
90
+
padding-block: 2px;
91
+
92
+
@media (prefers-reduced-motion: no-preference) {
93
+
scroll-behavior: smooth;
80
94
}
81
95
}
82
96
}
+1
-1
src/components/rewrite/VideoItem.astro
+1
-1
src/components/rewrite/VideoItem.astro
+27
-39
src/pages/rewrite/seasons/[season_id]/[member_name].astro
+27
-39
src/pages/rewrite/seasons/[season_id]/[member_name].astro
···
60
60
<SeasonLayout season={season}>
61
61
{
62
62
season.data.sessionCount && (
63
-
<a
64
-
slot="inline-start-links"
65
-
href={`/rewrite/seasons/${season.id}/sessions/1`}
66
-
>
63
+
<a slot="inline-start-links" href={`/rewrite/seasons/${season.id}/sessions/1`}>
67
64
<span>All sessions</span>
68
65
</a>
69
66
)
···
85
82
class="member-item-link"
86
83
role={!isPlaying ? 'link' : undefined}
87
84
aria-disabled={!isPlaying ? 'true' : undefined}
88
-
href={
89
-
isPlaying
90
-
? `/rewrite/seasons/${season.id}/${member.data.name}`
91
-
: undefined
92
-
}
93
-
aria-current={
94
-
isPlaying
95
-
? isCurrentPage(
96
-
Astro.url.pathname,
97
-
`/rewrite/seasons/${season.id}/${member.data.name}`,
98
-
)
99
-
: undefined
100
-
}
85
+
href={isPlaying ? `/rewrite/seasons/${season.id}/${member.data.name}` : undefined}
86
+
aria-current={isPlaying ? isCurrentPage(Astro.url.pathname, `/rewrite/seasons/${season.id}/${member.data.name}`) : undefined}
101
87
>
102
88
<MemberItem memberName={member.data.name} />
103
89
</a>
···
106
92
})
107
93
}
108
94
</ul>
109
-
<MemberItem
110
-
slot="main-title"
111
-
memberName={member.data.name}
112
-
title={`${member.data.name} - ${season.data.title}`}
113
-
/>
95
+
<MemberItem slot="main-title" memberName={member.data.name} title={`${member.data.name} - ${season.data.title}`} />
114
96
<div class="flow movie-session-wrapper">
115
97
{
116
98
movie && (
117
99
<div class="flow movie-wrapper">
118
100
<h2>The Movie</h2>
119
-
<VideoItem
120
-
ytId={movie.id}
121
-
title={movie.title}
122
-
/>
101
+
<VideoItem ytId={movie.id} title={movie.title} />
123
102
</div>
124
103
)
125
104
}
···
131
110
{sessions.map((session, i) => (
132
111
<li>
133
112
<h3>
134
-
<VideoItem
135
-
ytId={session.id}
136
-
title={`Session ${i + 1} - ${session.title}`}
137
-
/>
113
+
<VideoItem ytId={session.id} title={`Session ${i + 1} - ${session.title}`} />
138
114
</h3>
139
115
</li>
140
116
))}
···
146
122
</SeasonLayout>
147
123
</BaseLayout>
148
124
125
+
<script>
126
+
const currentPageLink = document.querySelector('[aria-current="page"]');
127
+
currentPageLink?.scrollIntoView({ block: 'center' });
128
+
</script>
129
+
149
130
<style>
150
131
.member-list {
132
+
min-width: 0;
133
+
151
134
&:has(.member-item-link:focus-visible) .member-item-link:not(:focus-visible) {
152
135
filter: grayscale(75%);
153
136
opacity: 0.8;
154
137
}
155
138
139
+
@media (width < 48rem) {
140
+
padding-inline-end: 12px;
141
+
}
142
+
156
143
@media (hover) {
157
144
&:has(.member-item-link:not([aria-disabled='true']):hover)
158
145
.member-item-link:not(:hover) {
···
167
154
justify-content: start;
168
155
inline-size: 100%;
169
156
padding-block: 4px;
170
-
padding-inline-end: 12px;
171
157
text-decoration: none;
172
158
transition-property: filter, opacity;
173
159
transition-duration: 100ms;
···
176
162
&:focus-visible {
177
163
outline: none;
178
164
179
-
> :global(div) {
165
+
&:not([aria-current='page']) {
166
+
translate: 8px;
167
+
}
168
+
169
+
> div {
180
170
outline: 2px solid var(--color-canvas-text);
181
171
outline-offset: 4px;
182
172
}
183
173
}
184
174
185
175
@media (prefers-reduced-motion: no-preference) {
186
-
transition: translate var(--spring-transition-duration);
187
-
transition-timing-function: var(--spring-transition-timing-function);
188
-
189
-
&:focus-visible:not([aria-current='page']) {
190
-
translate: 8px;
191
-
}
176
+
transition:
177
+
filter 100ms linear,
178
+
opacity 100ms linear,
179
+
translate var(--spring-transition-duration) var(--spring-transition-timing-function);
192
180
}
193
181
194
-
@media (hover) and (prefers-reduced-motion: no-preference) {
182
+
@media (hover) {
195
183
&:hover:not([aria-current='page']):not([aria-disabled]) {
196
184
translate: 8px;
197
185
}
+1
-1
src/styles/rewrite/global.css
+1
-1
src/styles/rewrite/global.css
···
117
117
.cluster {
118
118
display: flex;
119
119
flex-direction: var(--cluster-direction, row);
120
-
flex-wrap: wrap;
120
+
flex-wrap: var(--cluster-wrap, wrap);
121
121
align-items: center;
122
122
justify-content: var(--cluster-horizontal-alignment, flex-start);
123
123
column-gap: var(--cluster-column-gap, var(--gutter, 16px));