Skip to content

Commit 07a7730

Browse files
delucisdelucis
authored
Refactor card nav components (withastro#6403)
1 parent b5e4de3 commit 07a7730

File tree

9 files changed

+43
-205
lines changed

9 files changed

+43
-205
lines changed

‎src/components/BackendGuidesNav.astro

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,25 +33,6 @@ const links = enPages
3333
});
3434
---
3535

36-
<section class="backend-nav">
36+
<section>
3737
<CardsNav minimal links={links} />
3838
</section>
39-
40-
<style>
41-
.backend-nav > :global(*) {
42-
margin-top: -2rem;
43-
}
44-
45-
.backend-nav > :global(* + *) {
46-
margin-top: -3rem;
47-
}
48-
49-
.backend-nav :global(.scope) {
50-
font-weight: normal;
51-
color: var(--theme-text-lighter);
52-
}
53-
54-
h3 {
55-
margin-bottom: 0;
56-
}
57-
</style>

‎src/components/CMSGuidesNav.astro

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,6 @@ const links = enPages
3333
});
3434
---
3535

36-
<section class="cms-nav">
36+
<section>
3737
<CardsNav minimal links={links} />
3838
</section>
39-
40-
<style>
41-
.cms-nav > :global(*) {
42-
margin-top: -2rem;
43-
}
44-
</style>

‎src/components/DeployGuidesNav.astro

Lines changed: 1 addition & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -46,94 +46,10 @@ const services: Service[] = [
4646

4747
<CardsNav
4848
minimal={minimal}
49-
class="deploy-guides-nav"
5049
links={services.map(({ title, slug, supports }) => ({
5150
title,
5251
href: `/${lang}/guides/deploy/${slug}/`,
5352
logo: slug,
5453
tags: Object.fromEntries(supports.map((s) => [s, t(`deploy.${s}Tag`)!])),
5554
}))}
56-
>
57-
<span class="filter-text">{t('deploy.filterLabel')}</span>
58-
<input type="checkbox" id="ssr-checkbox" class="sr-only" />
59-
<label for="ssr-checkbox" class="filter-text">{t('deploy.ssrTag')}</label>
60-
<input type="checkbox" id="static-checkbox" class="sr-only" />
61-
<label for="static-checkbox" class="filter-text">{t('deploy.staticTag')}</label>
62-
</CardsNav>
63-
64-
<style>
65-
@media (min-width: 37.75em) {
66-
:global(.deploy-guides-nav) {
67-
text-align: end;
68-
}
69-
}
70-
71-
h2 {
72-
text-align: start;
73-
}
74-
75-
.minimal h2 {
76-
border-top: 4px solid var(--theme-divider);
77-
padding-top: 3rem;
78-
}
79-
80-
label {
81-
margin-inline-start: 0.5em;
82-
border: 2px solid;
83-
border-radius: 1.5em;
84-
padding: 0.25em 0.75em;
85-
color: var(--theme-text-lighter);
86-
user-select: none;
87-
font-weight: bold;
88-
cursor: pointer;
89-
unicode-bidi: plaintext;
90-
}
91-
92-
.filter-text {
93-
font-size: var(--theme-text-sm);
94-
white-space: nowrap;
95-
}
96-
97-
label::after {
98-
content: ' +';
99-
}
100-
101-
input[type='checkbox']:checked + label {
102-
background-color: var(--theme-text);
103-
border-color: var(--theme-text);
104-
color: var(--theme-bg);
105-
}
106-
107-
input[type='checkbox']:checked + label::after {
108-
content: ' ✕';
109-
}
110-
111-
label:hover,
112-
input[type='checkbox']:focus-visible + label {
113-
outline: 2px solid var(--theme-accent-secondary);
114-
outline-offset: 2px;
115-
}
116-
117-
#ssr-checkbox ~ :global(* .card) {
118-
/* By default, hide cards and move them to the end of the flow order. */
119-
visibility: hidden;
120-
order: 1;
121-
}
122-
123-
@media (max-width: 72em) {
124-
/* On smaller screens, collapse space for hidden cards in maximal variant. */
125-
#ssr-checkbox ~ :global(* .card--maximal) {
126-
display: none;
127-
}
128-
}
129-
130-
#ssr-checkbox:checked ~ :global(* .ssr),
131-
#static-checkbox:checked ~ :global(* .static),
132-
#ssr-checkbox:not(:checked) ~ #static-checkbox:not(:checked) ~ :global(* .card) {
133-
/* When a service supports a selected deploy type, show its card and restore its flow order position. */
134-
visibility: visible;
135-
order: unset;
136-
/* Also restore display for maximal variant. */
137-
display: grid;
138-
}
139-
</style>
55+
/>

‎src/components/IntegrationsNav.astro

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -51,31 +51,18 @@ const category = allCategories[Astro.props.category!];
5151
const categories = category ? [category] : allCategories;
5252
---
5353

54-
<section class="integrations-nav">
55-
{
56-
Object.values(categories).map((category) => (
57-
<CardsNav minimal links={category.links}>
58-
<h3>{category.title}</h3>
59-
</CardsNav>
60-
))
61-
}
62-
</section>
54+
{
55+
Object.values(categories).map((category) => (
56+
<>
57+
<h3>{category.title}</h3>
58+
<CardsNav minimal links={category.links} class="integrations-nav" />
59+
</>
60+
))
61+
}
6362

6463
<style>
65-
.integrations-nav > :global(*) {
66-
margin-top: -2rem;
67-
}
68-
69-
.integrations-nav > :global(* + *) {
70-
margin-top: -3rem;
71-
}
72-
7364
.integrations-nav :global(.scope) {
74-
font-weight: normal;
75-
color: var(--theme-text-lighter);
76-
}
77-
78-
h3 {
79-
margin-bottom: 0;
65+
font-weight: 400;
66+
color: var(--sl-color-text);
8067
}
8168
</style>

‎src/components/MigrationGuidesNav.astro

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,25 +33,6 @@ const links = enPages
3333
});
3434
---
3535

36-
<section class="cms-nav">
36+
<section>
3737
<CardsNav minimal links={links} />
3838
</section>
39-
40-
<style>
41-
.cms-nav > :global(*) {
42-
margin-top: -2rem;
43-
}
44-
45-
.cms-nav > :global(* + *) {
46-
margin-top: -3rem;
47-
}
48-
49-
.cms-nav :global(.scope) {
50-
font-weight: normal;
51-
color: var(--theme-text-lighter);
52-
}
53-
54-
h3 {
55-
margin-bottom: 0;
56-
}
57-
</style>

‎src/components/NavGrid/Card.astro

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ export interface Props {
1313
const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props as Props;
1414
---
1515

16-
<li class:list={['card', minimal ? 'card--minimal' : 'card--maximal', classes]} {...attrs}>
16+
<li class:list={['card', minimal && 'card--minimal', classes]} {...attrs}>
1717
{logo && <BrandLogo brand={logo} />}
18-
<div class="stack">
18+
<div class="stack sl-flex">
1919
<h3>
2020
<a href={href} aria-current={current ? 'page' : 'false'}>
2121
<slot name="title" />
@@ -28,51 +28,50 @@ const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props a
2828
<style>
2929
.card {
3030
position: relative;
31-
margin: -0.5rem !important;
32-
padding: 0.75rem 0.75rem 0.75rem 0.75rem;
31+
margin: -0.75rem;
32+
padding: 0.75rem;
3333
display: grid;
3434
grid-template-columns: auto 1fr;
35-
gap: 0.75rem;
35+
gap: 0.5rem;
3636
align-items: center;
37-
border-radius: 1rem;
38-
}
39-
40-
@media (forced-colors: active) {
41-
.card:hover,
42-
.card:focus-within {
43-
outline: 1px solid LinkText;
44-
}
37+
border-radius: 0.5rem;
4538
}
46-
4739
.card--minimal {
4840
grid-template-columns: 1fr;
4941
justify-items: center;
5042
text-align: center;
51-
gap: 0.5rem;
5243
}
5344

5445
.card:hover,
5546
.card:focus-within {
5647
background-color: var(--sl-color-gray-6);
48+
outline: 1px solid var(--sl-color-text-accent);
49+
}
50+
@media (forced-colors: active) {
51+
.card:hover,
52+
.card:focus-within {
53+
outline: 1px solid LinkText;
54+
}
5755
}
5856

59-
.card:focus-within {
60-
outline: 2px solid var(--sl-color-text-accent);
57+
.stack {
58+
flex-direction: column;
59+
gap: 0.5rem;
6160
}
6261

6362
h3 {
64-
margin: 0;
65-
line-height: 1.25;
66-
font-size: 1.15rem !important;
63+
line-height: var(--sl-line-height-headings);
64+
font-size: var(--sl-text-lg);
65+
font-weight: 600;
6766
}
6867

6968
.card--minimal h3 {
70-
font-size: 0.875rem;
69+
font-size: var(--sl-text-body);
7170
}
7271

7372
a {
7473
text-decoration: none;
75-
color: var(--sl-color-white) !important;
74+
color: var(--sl-color-white);
7675
}
7776

7877
a:focus {
@@ -88,8 +87,4 @@ const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props a
8887
bottom: 0;
8988
left: 0;
9089
}
91-
92-
.stack > :global(* + *) {
93-
margin-top: 0.5rem;
94-
}
9590
</style>

‎src/components/NavGrid/CardsNav.astro

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const currentPage = new URL(Astro.request.url).pathname;
3838
<Fragment slot="details">
3939
{description && <p class="description">{description}</p>}
4040
{tags && (
41-
<div class="tags">
41+
<div class="tags sl-flex">
4242
{Object.values(tags).map((tag) => (
4343
<Badge>{tag}</Badge>
4444
))}
@@ -52,20 +52,12 @@ const currentPage = new URL(Astro.request.url).pathname;
5252
</section>
5353

5454
<style>
55-
.cards-nav {
56-
padding: 2rem 0;
57-
accent-color: var(--theme-accent-secondary);
58-
}
59-
6055
.description {
61-
margin-top: 0.25rem;
62-
color: var(--theme-text-lighter);
63-
font-size: var(--theme-text-sm);
56+
color: var(--sl-color-gray-2);
57+
font-size: var(--sl-text-body-sm);
6458
}
6559

6660
.tags {
67-
margin-top: 0.5rem !important;
68-
display: flex;
6961
gap: 0.5rem;
7062
}
7163
</style>

‎src/components/NavGrid/Grid.astro

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,19 @@ const { minimal } = Astro.props as Props;
1414
.fluid-grid {
1515
--column-min-width: 13rem;
1616
text-align: start;
17-
padding: 2rem 0;
17+
margin-block: 0.5rem;
18+
padding-inline-start: 0;
1819
display: grid;
1920
grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));
2021
grid-template-columns: repeat(auto-fill, minmax(min(var(--column-min-width), 100%), 1fr));
21-
gap: 2rem;
22+
gap: 1.5rem 2rem;
2223
list-style: none;
2324
align-items: start;
2425
}
2526

2627
@media (min-width: 37.75em) {
2728
.fluid-grid {
28-
gap: 2rem 2.5rem;
29+
gap: 2rem;
2930
}
3031
}
3132

‎src/components/RecipesNav.astro

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import { createIsLangEntry, isEnglishEntry, type DocsEntry } from '~/content/con
44
import { getLanguageFromURL, stripLangFromSlug } from '~/util';
55
import CardsNav from './NavGrid/CardsNav.astro';
66
7-
export interface Props {
8-
minimal?: boolean;
9-
}
7+
export interface Props {}
108
119
const lang = getLanguageFromURL(Astro.url.pathname);
1210
const langRecipes = recipePages.filter(createIsLangEntry(lang));
@@ -22,7 +20,6 @@ const recipes = englishRecipes.map((fallback) => {
2220

2321
<div>
2422
<CardsNav
25-
minimal={Astro.props.minimal}
2623
links={recipes.map(({ data, slug }) => {
2724
const linkLang = slug.split('/').shift();
2825
return {
@@ -38,9 +35,3 @@ const recipes = englishRecipes.map((fallback) => {
3835
})}
3936
/>
4037
</div>
41-
42-
<style>
43-
div > :global(*) {
44-
margin-top: -2rem;
45-
}
46-
</style>

0 commit comments

Comments
 (0)