rays/ipx
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

No logo in the phone's top bar (#66)

Browse Source 
The logo moved into the top bar beside the add-feed button (#60). On a
phone that bar is tight: the logo squeezed the search box down to a few
letters, and with no hover there its version tooltip showed nothing.
Below the phone breakpoint it is left out.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-09-28 18:53:34 +00:00
parent 5967aa1e57
commit bf785299b0
3 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
orange of its needle. orange of its needle.
- The logo follows the page: the dark version in a dark theme, the light one in a light theme. - The logo follows the page: the dark version in a dark theme, the light one in a light theme.
- The browser tab's icon follows the page's light or dark mode too. - The browser tab's icon follows the page's light or dark mode too.
- On a phone, the top bar leaves out the logo, giving its room to the search box.
- Between releases, the version on the logo says so: 0.9.1-dev, not 0.9.0. - Between releases, the version on the logo says so: 0.9.1-dev, not 0.9.0.
- The logo's needle is a brighter, redder orange that stands apart from the blue bars. - The logo's needle is a brighter, redder orange that stands apart from the blue bars.
- The logo is in the top bar beside the add-feed button, in place of the name at the top of the - The logo is in the top bar beside the add-feed button, in place of the name at the top of the

5
tests/ui/app.spec.js
View File

@@ -470,6 +470,11 @@ test('marking an OPML subscription read covers the feeds inside it', async ({ pa
test.describe('on a phone', () => { test.describe('on a phone', () => {
test.use({ viewport: { width: 390, height: 844 } }); test.use({ viewport: { width: 390, height: 844 } });
test('the top bar leaves the logo out, for the search box', async ({ page }) => {
await expect(page.locator('#burger')).toBeVisible();
await expect(page.locator('#applogo')).toBeHidden();
});
test('the feed list is reachable and an item reads full screen', async ({ page }) => { test('the feed list is reachable and an item reads full screen', async ({ page }) => {
// The burger used to live in the player bar, which is hidden until something plays -- // The burger used to live in the player bar, which is hidden until something plays --
// leaving no way to reach the feeds at all. // leaving no way to reach the feeds at all.

2
web/app.css
View File

@@ -978,6 +978,8 @@ body:has(#player.on) #status{padding-bottom:3px}
/* The feed list is reachable whether or not anything is playing. */ /* The feed list is reachable whether or not anything is playing. */
#burger{display:grid} #burger{display:grid}
/* No logo on a phone: the bar has no room to spare for it, and no hover to show its version. */
#applogo{display:none}
#topbar{ #topbar{
gap:6px;padding-top:calc(6px + var(--safe-t));padding-bottom:6px; gap:6px;padding-top:calc(6px + var(--safe-t));padding-bottom:6px;
padding-left:calc(8px + var(--safe-l));padding-right:calc(8px + var(--safe-r)); padding-left:calc(8px + var(--safe-l));padding-right:calc(8px + var(--safe-r));