Skip to content

Commit 39d3748

Browse files
gildesmaraisgildesmarais
committed
Align feed row utility links
1 parent 92cd2cd commit 39d3748

1 file changed

Lines changed: 106 additions & 119 deletions

File tree

‎src/components/FeedDirectory.astro‎

Lines changed: 106 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ const staticFeedUrls = configs.map((config) => ({
1515
...config,
1616
staticFeedUrl: "#",
1717
defaultSummary: formatDefaultParameters(config.default_parameters),
18+
sourceSummary: config.channel?.url
19+
?.replace(/^https?:\/\//, "")
20+
.replace(/^www\./, "")
21+
.replace(/\/$/, ""),
1822
}));
1923
---
2024

@@ -104,11 +108,6 @@ const staticFeedUrls = configs.map((config) => ({
104108
</div>
105109

106110
<div class="feed-table" data-feed-list>
107-
<div class="feed-table-head" aria-hidden="true">
108-
<span>Feed</span>
109-
<span>Actions</span>
110-
</div>
111-
112111
{
113112
staticFeedUrls.map((config, index) => (
114113
<article
@@ -118,76 +117,69 @@ const staticFeedUrls = configs.map((config) => ({
118117
data-searchable={`${config.domain}/${config.name} ${config.channel?.url || ""}`}
119118
>
120119
<div class="feed-info">
121-
<h2 class="feed-title">
122-
<span class="feed-domain">{config.domain}</span>
123-
<span class="feed-separator">/</span>
124-
<span class="feed-name">{config.name}</span>
125-
</h2>
126-
127-
{config.channel?.url && (
128-
<a
129-
href={config.channel.url}
130-
target="_blank"
131-
rel="noopener noreferrer nofollow"
132-
class="source-link"
133-
title={config.channel.url}
134-
>
135-
{config.channel.url}
136-
</a>
137-
)}
138-
139-
{config.defaultSummary && <p class="defaults-summary">Using defaults: {config.defaultSummary}</p>}
140-
141-
<div class="feed-meta">
142-
{Object.keys(config.url_parameters || {}).length > 0 && (
120+
<div class="feed-mainline">
121+
<h2 class="feed-title">{config.sourceSummary || `${config.domain}/${config.name}`}</h2>
122+
123+
<div class="feed-actions">
124+
<a
125+
href={config.staticFeedUrl}
126+
target="_blank"
127+
rel="noopener noreferrer nofollow"
128+
data-feed-url
129+
class="action action-primary"
130+
aria-label="Open RSS feed"
131+
title="Open RSS feed"
132+
>
133+
<span>RSS</span>
134+
</a>
135+
</div>
136+
</div>
137+
138+
<div class="feed-subline">
139+
{config.defaultSummary ? (
140+
<p class="defaults-summary">Defaults: {config.defaultSummary}</p>
141+
) : (
142+
<span aria-hidden="true"></span>
143+
)}
144+
145+
<div class="feed-meta">
146+
{config.channel?.url && (
147+
<a
148+
href={config.channel.url}
149+
target="_blank"
150+
rel="noopener noreferrer nofollow"
151+
class="meta-link"
152+
title={config.channel.url}
153+
>
154+
<span>View source</span>
155+
</a>
156+
)}
157+
158+
{Object.keys(config.url_parameters || {}).length > 0 && (
159+
<button
160+
class="meta-link"
161+
type="button"
162+
aria-expanded="false"
163+
aria-controls={`params-${index}`}
164+
data-target={`params-${index}`}
165+
>
166+
<span>Customize</span>
167+
</button>
168+
)}
169+
143170
<button
144-
class="meta-link"
145171
type="button"
146-
aria-expanded="false"
147-
aria-controls={`params-${index}`}
148-
data-target={`params-${index}`}
172+
data-copy-feed
173+
class="meta-link"
174+
aria-label="Copy RSS link"
175+
title="Copy RSS link"
149176
>
150-
<span>Customize</span>
177+
<span>Copy link</span>
151178
</button>
152-
)}
153-
154-
<button
155-
type="button"
156-
data-copy-feed
157-
class="meta-link"
158-
aria-label="Copy RSS link"
159-
title="Copy RSS link"
160-
>
161-
<span>Copy link</span>
162-
</button>
163-
164-
<a
165-
href={`https://github.com/html2rss/html2rss-configs/edit/master/lib/html2rss/configs/${encodeURIComponent(config.domain)}/${encodeURIComponent(config.name)}.yml`}
166-
target="_blank"
167-
rel="noopener noreferrer nofollow"
168-
class="meta-link meta-link-muted"
169-
aria-label="Edit configuration on GitHub"
170-
title="Edit configuration on GitHub"
171-
>
172-
<span>Edit</span>
173-
</a>
179+
</div>
174180
</div>
175181
</div>
176182

177-
<div class="feed-actions">
178-
<a
179-
href={config.staticFeedUrl}
180-
target="_blank"
181-
rel="noopener noreferrer nofollow"
182-
data-feed-url
183-
class="action action-primary"
184-
aria-label="Open RSS feed"
185-
title="Open RSS feed"
186-
>
187-
<span>RSS</span>
188-
</a>
189-
</div>
190-
191183
{Object.keys(config.url_parameters || {}).length > 0 && (
192184
<div class="parameter-form" id={`params-${index}`} hidden>
193185
<form class="form">
@@ -208,7 +200,19 @@ const staticFeedUrls = configs.map((config) => ({
208200
/>
209201
</div>
210202
))}
203+
211204
<div class="form-actions">
205+
<a
206+
href={`https://github.com/html2rss/html2rss-configs/edit/master/lib/html2rss/configs/${encodeURIComponent(config.domain)}/${encodeURIComponent(config.name)}.yml`}
207+
target="_blank"
208+
rel="noopener noreferrer nofollow"
209+
class="meta-link meta-link-muted"
210+
aria-label="Edit configuration on GitHub"
211+
title="Edit configuration on GitHub"
212+
>
213+
<span>Edit</span>
214+
</a>
215+
212216
<button type="button" class="done-button" data-close-form aria-label="Close customization">
213217
Done
214218
</button>
@@ -270,7 +274,6 @@ const staticFeedUrls = configs.map((config) => ({
270274
.search-block,
271275
.instance-block,
272276
.empty-state,
273-
.feed-table-head,
274277
.feed-row,
275278
.parameter-form {
276279
padding: var(--fd-padding);
@@ -411,17 +414,6 @@ const staticFeedUrls = configs.map((config) => ({
411414
overflow: hidden;
412415
}
413416

414-
.feed-table-head {
415-
display: none;
416-
grid-template-columns: minmax(0, 1fr) auto;
417-
gap: 1rem;
418-
border-bottom: 1px solid var(--fd-border);
419-
color: var(--fd-muted);
420-
font-size: var(--sl-text-xs);
421-
letter-spacing: 0.04em;
422-
text-transform: uppercase;
423-
}
424-
425417
.feed-row {
426418
display: grid;
427419
grid-template-columns: minmax(0, 1fr);
@@ -441,54 +433,42 @@ const staticFeedUrls = configs.map((config) => ({
441433
.feed-info {
442434
min-width: 0;
443435
display: grid;
444-
gap: 0.25rem;
436+
gap: var(--fd-gap);
445437
}
446438

447-
.feed-title {
448-
display: flex;
449-
flex-wrap: wrap;
439+
.feed-mainline {
440+
display: grid;
441+
grid-template-columns: minmax(0, 1fr) auto;
442+
gap: 1rem;
450443
align-items: baseline;
451-
gap: 0.25rem;
452-
font-size: var(--sl-text-base);
453-
line-height: var(--sl-line-height-headings);
454-
}
455-
456-
.feed-domain {
457-
color: var(--sl-color-gray-2);
458-
font-weight: 500;
459444
}
460445

461-
.feed-separator {
462-
color: var(--sl-color-gray-4);
446+
.feed-subline {
447+
display: grid;
448+
grid-template-columns: minmax(0, 1fr) auto;
449+
gap: 1rem;
450+
align-items: end;
463451
}
464452

465-
.feed-name {
453+
.feed-title {
454+
font-size: var(--sl-text-base);
455+
line-height: var(--sl-line-height-headings);
466456
color: var(--sl-color-white);
467457
font-weight: 600;
468458
}
469459

470-
.source-link {
471-
display: block;
472-
overflow: hidden;
473-
text-overflow: ellipsis;
474-
white-space: nowrap;
475-
text-decoration: none;
476-
}
477-
478-
.source-link:hover {
479-
color: var(--sl-color-white);
480-
text-decoration: underline;
481-
}
482-
483460
.defaults-summary {
461+
min-width: 0;
484462
font-size: var(--sl-text-xs);
485463
}
486464

487465
.feed-meta {
488466
display: flex;
489467
flex-wrap: wrap;
468+
justify-content: flex-end;
490469
gap: 0.5rem;
491470
align-items: center;
471+
align-self: end;
492472
font-size: var(--sl-text-xs);
493473
}
494474

@@ -515,8 +495,8 @@ const staticFeedUrls = configs.map((config) => ({
515495
}
516496

517497
.feed-actions {
518-
display: flex;
519-
align-items: center;
498+
justify-self: end;
499+
align-self: start;
520500
}
521501

522502
.action,
@@ -628,18 +608,15 @@ const staticFeedUrls = configs.map((config) => ({
628608

629609
.form-actions {
630610
display: flex;
611+
flex-wrap: wrap;
612+
gap: var(--fd-gap);
631613
justify-content: flex-end;
614+
align-items: center;
632615
}
633616

634617
@media (min-width: 50rem) {
635-
.feed-table-head {
636-
display: grid;
637-
}
638-
639618
.feed-row {
640-
grid-template-columns: minmax(0, 1fr) auto;
641-
align-items: center;
642-
gap: 1rem;
619+
gap: 0;
643620
}
644621

645622
.parameter-form {
@@ -657,8 +634,18 @@ const staticFeedUrls = configs.map((config) => ({
657634
grid-template-columns: 1fr;
658635
}
659636

660-
.feed-actions {
661-
justify-content: flex-end;
637+
.feed-mainline,
638+
.feed-subline {
639+
gap: 0.375rem;
640+
}
641+
642+
.feed-subline > :first-child:empty,
643+
.feed-subline > [aria-hidden="true"] {
644+
display: none;
645+
}
646+
647+
.feed-meta {
648+
justify-content: flex-start;
662649
}
663650
}
664651
</style>

0 commit comments

Comments
 (0)