RomanNum3ral
/
gstack
mirror of https://github.com/garrytan/gstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: right-pointing arrow hint for sidebar on welcome page 

Replace invisible text fallback with visible amber bubble + animated
right arrow (→) pointing toward where the sidebar opens. Always correct
regardless of window size (unlike the old up arrow at toolbar chrome).
This commit is contained in:
Garry Tan 2026-04-02 19:11:45 -07:00
parent e34aefa799
commit f7d95848f2
No known key found for this signature in database
GPG Key ID: C1F69E85C74EFE1D
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
browse/src/welcome.html
View File

@ -39,32 +39,38 @@
} }
.page { width: 100%; max-width: 860px; padding: 0 40px; } .page { width: 100%; max-width: 860px; padding: 0 40px; }
/* Sidebar prompt */ /* Sidebar prompt — points RIGHT toward where sidebar opens */
.sidebar-prompt { .sidebar-prompt {
position: fixed; position: fixed;
top: 6px; top: 50%;
right: 95px; right: 20px;
transform: translateY(-50%);
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 10px;
transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;
} }
@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.sidebar-prompt .bubble { .sidebar-prompt .bubble {
background: var(--amber-500); background: var(--amber-500);
color: #000; color: #000;
font-size: 12px; font-size: 13px;
font-weight: 600; font-weight: 600;
padding: 8px 14px; padding: 10px 16px;
border-radius: 8px; border-radius: 10px;
max-width: 200px; max-width: 220px;
text-align: left; text-align: left;
line-height: 1.4; line-height: 1.4;
} }
.sidebar-prompt .arrow-right {
font-size: 28px;
color: var(--amber-500);
animation: nudge 1.5s ease-in-out infinite;
}
@keyframes nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.sidebar-prompt.hidden { opacity: 0; pointer-events: none; } .sidebar-prompt.hidden { opacity: 0; pointer-events: none; }
/* Hero */ /* Hero */
@ -159,7 +165,8 @@
<body> <body>
<div class="sidebar-prompt" id="sidebar-prompt"> <div class="sidebar-prompt" id="sidebar-prompt">
<div class="bubble">Sidebar loading... if it doesn't appear, click the puzzle piece icon in the toolbar</div> <div class="bubble">Open the sidebar to get started. Click the puzzle piece icon in the toolbar, then pin gstack browse.</div>
<span class="arrow-right">&#x2192;</span>
</div> </div>
<div class="page"> <div class="page">

7
browse/test/sidebar-ux.test.ts
View File

@ -1213,10 +1213,11 @@ describe('welcome page', () => {
expect(welcomeSrc).toContain('sidebar-prompt'); expect(welcomeSrc).toContain('sidebar-prompt');
}); });
test('welcome page does NOT have a misaligned arrow', () => { test('welcome page points RIGHT toward sidebar (not UP at toolbar)', () => {
// Arrow was removed because it can never align with browser chrome // Up arrow can never align with browser chrome. Right arrow always
// points toward the sidebar area regardless of window size.
expect(welcomeSrc).not.toContain('arrow-up'); expect(welcomeSrc).not.toContain('arrow-up');
expect(welcomeSrc).not.toContain('↑'); expect(welcomeSrc).toContain('arrow-right');
}); });
test('welcome page has left-aligned text (no center-align on headings)', () => { test('welcome page has left-aligned text (no center-align on headings)', () => {