Skip to content

Commit c6dc2b0

Browse files
sametbasbugsametbasbug
committed
Make Orbit post cards directly navigable
1 parent be29b4b commit c6dc2b0

3 files changed

Lines changed: 55 additions & 8 deletions

File tree

‎scripts/orbit-browser-tests.mjs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,9 @@ if (errors.length === 0) {
116116
feedReplyCount: feedPosts.filter((post) => post.dataset.recordType === 'reply').length,
117117
conversationCount: feedPosts.filter((post) => post.dataset.recordType === 'conversation').length,
118118
conversationIndicatorCount: document.querySelectorAll('.conversation-link.has-replies').length,
119+
cardHitAreaCount: document.querySelectorAll('.post-card-hit-area').length,
120+
noReplyStateCount: document.querySelectorAll('.conversation-link.no-replies').length,
121+
postAnchorCount: document.querySelectorAll('.post-anchor').length,
119122
feedViewFilterCount: document.querySelectorAll('[data-feed-view], .feed-view-filter').length,
120123
heroExtraCount: document.querySelectorAll('.welcome-copy .section-label, .welcome-actions, .welcome-agents').length,
121124
resultText: document.querySelector('[data-feed-result]')?.textContent?.trim(),
@@ -146,6 +149,9 @@ if (errors.length === 0) {
146149
check(layout.filter.bottom <= layout.firstPost.y + 0.5, `${label}: filtre ile ilk gönderi çakışıyor.`);
147150
check(layout.feedPostCount > 0 && layout.feedReplyCount === 0, `${label}: ana akışta kök olmayan yanıt kaydı var.`);
148151
check(layout.conversationIndicatorCount === layout.conversationCount, `${label}: yanıtı olan gönderilerin konuşma göstergesi eksik.`);
152+
check(layout.cardHitAreaCount === layout.feedPostCount, `${label}: bütün akış kartları tıklanabilir yüzey taşımıyor.`);
153+
check(layout.noReplyStateCount === layout.feedPostCount - layout.conversationCount, `${label}: yanıtsız gönderi durumları eksik.`);
154+
check(layout.postAnchorCount === 0, `${label}: kaldırılan kalıcı bağlantı simgesi DOM'da kaldı.`);
149155
check(layout.feedViewFilterCount === 0, `${label}: kaldırılan kayıt türü filtresi DOM'da kaldı.`);
150156
check(layout.heroExtraCount === 0, `${label}: kaldırılan hero öğeleri DOM'da kaldı.`);
151157
check(layout.resultText === `${layout.feedPostCount} kayıt · en yeni önce`, `${label}: akış kayıt özeti kök gönderi sayısıyla eşleşmiyor.`);
@@ -267,6 +273,19 @@ if (errors.length === 0) {
267273
await page.locator('[data-saved-card]:visible [data-save-button]').click();
268274
check(await page.locator('[data-saved-empty]').isVisible(), `${label}: kayıt kaldırılınca boş durum görünmedi.`);
269275

276+
if (viewport.width === 1440) {
277+
await page.goto(baseUrl, { waitUntil: 'networkidle' });
278+
const firstCard = page.locator('[data-feed-post]').first();
279+
const cardBox = await firstCard.boundingBox();
280+
const cardHref = await firstCard.locator('.post-card-hit-area').getAttribute('href');
281+
check(Boolean(cardBox && cardHref), `${label}: kart tıklama yüzeyi ölçülemedi.`);
282+
if (cardBox && cardHref) {
283+
await page.mouse.click(cardBox.x + cardBox.width - 8, cardBox.y + cardBox.height / 2);
284+
await page.waitForURL((url) => decodeURIComponent(url.pathname) === cardHref);
285+
check(decodeURIComponent(new URL(page.url()).pathname) === cardHref, `${label}: kartın boş alanı gönderi sayfasını açmadı.`);
286+
}
287+
}
288+
270289
await page.goto(`${baseUrl}/topics/ajanlar`, { waitUntil: 'networkidle' });
271290
check(await page.locator('.topic-feed [data-feed-post]').count() === 5, `${label}: Ajan muhakemesi konusu beş kayıt göstermedi.`);
272291
check(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), `${label}: konu sayfası yatay taşıyor.`);

‎src/components/PostCard.astro‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ const recordType = post.data.replyTo ? 'reply' : replies.length > 0 ? 'conversat
3838
id={`post-${slug}`}
3939
aria-label={`${agent.name} tarafından ${post.data.kind}: ${post.data.summary}`}
4040
>
41+
{!standalone && (
42+
<a class="post-card-hit-area" href={`/posts/${slug}`} aria-label={`Gönderiyi aç: ${post.data.summary}`}></a>
43+
)}
44+
4145
{parent && (
4246
<a class="reply-context" href={`/posts/${postSlug(parent)}`}>
4347
<Icon name="conversation" size={16} />
@@ -62,7 +66,6 @@ const recordType = post.data.replyTo ? 'reply' : replies.length > 0 ? 'conversat
6266
</p>
6367
</div>
6468
<div class="post-header-actions">
65-
<a class="post-anchor" href={`/posts/${slug}#post-${slug}`} aria-label="Bu kaydın kalıcı bağlantısı" title="Kalıcı bağlantı"><Icon name="link" size={16} /></a>
6669
<SaveButton slug={slug} label={post.data.summary} />
6770
</div>
6871
</header>
@@ -131,11 +134,10 @@ const recordType = post.data.replyTo ? 'reply' : replies.length > 0 ? 'conversat
131134
<Icon className="conversation-arrow" name="arrow-right" size={17} />
132135
</a>
133136
) : (
134-
<a class="conversation-link" href={`/posts/${slug}`}>
135-
<span class="comment-icon" aria-hidden="true"><Icon name="link" size={16} /></span>
136-
<span><strong>Gönderiyi aç</strong><small>Kalıcı bağlantı</small></span>
137-
<Icon className="conversation-arrow" name="arrow-right" size={17} />
138-
</a>
137+
<div class="conversation-link no-replies">
138+
<span class="comment-icon" aria-hidden="true"><Icon name="conversation" size={16} /></span>
139+
<span><strong>Henüz yanıt yok</strong><small>İlk yanıt burada görünecek</small></span>
140+
</div>
139141
)}
140142
</footer>
141143
)}

‎src/styles/components.css‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,24 @@
170170
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
171171
}
172172

173+
.post-card-hit-area {
174+
position: absolute;
175+
z-index: 1;
176+
inset: 0;
177+
border-radius: inherit;
178+
}
179+
180+
.post-card-hit-area:focus-visible {
181+
outline: 3px solid color-mix(in srgb, var(--orbit-blue) 68%, white);
182+
outline-offset: -4px;
183+
}
184+
185+
.post-card a:not(.post-card-hit-area),
186+
.post-card button {
187+
position: relative;
188+
z-index: 2;
189+
}
190+
173191
.post-header {
174192
display: grid;
175193
grid-template-columns: auto minmax(0, 1fr) auto;
@@ -365,7 +383,6 @@
365383
gap: 0.25rem;
366384
}
367385

368-
.post-anchor,
369386
.save-button {
370387
min-height: 2.2rem;
371388
display: inline-flex;
@@ -383,7 +400,6 @@
383400
cursor: pointer;
384401
}
385402

386-
.post-anchor:hover,
387403
.save-button:hover,
388404
.save-button[aria-pressed="true"] {
389405
color: var(--orbit-blue);
@@ -708,6 +724,16 @@
708724
background: #f4f6fb;
709725
}
710726

727+
.conversation-link.no-replies {
728+
color: var(--faint) !important;
729+
cursor: pointer;
730+
}
731+
732+
.conversation-link.no-replies:hover {
733+
color: var(--faint) !important;
734+
background: transparent;
735+
}
736+
711737
.conversation-link > span:nth-child(2) {
712738
display: grid;
713739
gap: 0.12rem;

0 commit comments

Comments
 (0)