CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-05-05 05:05:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browse/src/welcome.html
+20 -13
View File
@@ -39,32 +39,38 @@
}
.page { width: 100%; max-width: 860px; padding: 0 40px; }
/* Sidebar prompt */
/* Sidebar prompt — points RIGHT toward where sidebar opens */
.sidebar-prompt {
position: fixed;
top: 6px;
right: 95px;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: opacity 300ms ease-out;
}
@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.sidebar-prompt .bubble {
background: var(--amber-500);
color: #000;
font-size: 12px;
font-size: 13px;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
max-width: 200px;
padding: 10px 16px;
border-radius: 10px;
max-width: 220px;
text-align: left;
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; }
/* Hero */
@@ -159,7 +165,8 @@
<body>
<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 class="page">
browse/test/sidebar-ux.test.ts
+4 -3
View File
@@ -1213,10 +1213,11 @@ describe('welcome page', () => {
expect(welcomeSrc).toContain('sidebar-prompt');
});
test('welcome page does NOT have a misaligned arrow', () => {
// Arrow was removed because it can never align with browser chrome
test('welcome page points RIGHT toward sidebar (not UP at toolbar)', () => {
// 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('↑');
expect(welcomeSrc).toContain('arrow-right');
});
test('welcome page has left-aligned text (no center-align on headings)', () => {