xtink4/crosspoint-reader
0
0
Fork 0
mirror of https://github.com/crosspoint-reader/crosspoint-reader.git synced 2026-04-29 10:26:52 -07:00
Code Issues Packages Projects Releases Wiki Activity

style: unify page headers across web UI (#1702)

Browse Source 
## Summary

* **Goal**: Align `FilesPage` and `SettingsPage` headers with the
existing `HomePage` pattern.
* **Changes**:
- Added `<h1>πŸ“š CrossPoint Reader</h1>` at the top of `<body>` on both
pages.
- Demoted the page-specific `πŸ“ File Manager` heading on `FilesPage` from
`<h1>` to `<h2>` (inside `.page-header`), so every page has a single
`<h1>` β€” the app name.
- Moved the accent-colored `border-bottom` from `.page-header` to `h1`,
matching the HomePage CSS.

All three pages now share the same top structure:
`<h1>CrossPoint Reader</h1>` β†’ nav links β†’ page content.

## Screenshots

### Home

**Before and after is the same**
<img width="1153" height="388" alt="home before"
src="https://github.com/user-attachments/assets/4eb1c969-89fd-4965-ba17-5ff956576a8b"
/>

### File Manager

**Before**
<img width="1153" height="388" alt="files before"
src="https://github.com/user-attachments/assets/ba689d6b-56b1-44d1-a151-3f67b0fcdb16"
/>

**After**
<img width="1153" height="388" alt="files after"
src="https://github.com/user-attachments/assets/437db5e4-9102-4a19-b049-7a93e4e403b2"
/>

### Settings

**Before**
<img width="1153" height="388" alt="settings before"
src="https://github.com/user-attachments/assets/39a7e489-f0d3-4ac1-a2d7-98028aae65c0"
/>

**After**
<img width="1153" height="388" alt="settings_after"
src="https://github.com/user-attachments/assets/1c479618-ec8b-4dee-b704-3da07e6c279e"
/>



## Additional Context

* Pure markup + CSS, no JavaScript or behavioral changes.
* Improves HTML semantics (single `<h1>` per page, referring to the
app).
* No new CSS duplication introduced β€” borrows existing styling from
HomePage.

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it helps set the right
context for reviewers.

Did you use AI tools to help write this code? _**YES**_

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Pietro Campagnano
2026-04-21 17:32:13 -05:00
committed by GitHub
co-authored by Claude Sonnet 4.6
parent 5e26baef63
commit 867fb7cbe2
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/network/html/FilesPage.html
+5 -4
View File
@@ -39,7 +39,8 @@
}
h1 {
color: var(--title-color);
margin-bottom: 5px;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 10px;
}
h2 {
color: var(--title-color);
@@ -59,8 +60,6 @@
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--accent-color);
}
.page-header-left {
display: flex;
@@ -1463,6 +1462,8 @@
</style>
</head>
<body>
<h1>πŸ“š CrossPoint Reader</h1>
<div class="nav-links">
<a href="/">Home</a>
<a href="/files" class="active">File Manager</a>
@@ -1471,7 +1472,7 @@
<div class="page-header">
<div class="page-header-left">
<h1>πŸ“ File Manager</h1>
<h2>πŸ“ File Manager</h2>
<div class="breadcrumb-inline" id="directory-breadcrumbs"></div>
</div>
src/network/html/SettingsPage.html
+1 -1
View File
@@ -237,7 +237,7 @@
</style>
</head>
<body>
<h1>βš™οΈ Settings</h1>
<h1>πŸ“š CrossPoint Reader</h1>
<div class="nav-links">
<a href="/">Home</a>