cottongin/pi-weekly-newspaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: streamline publish tab and calendar UI

Browse Source 
- Merged Weekly and Multi-Week tabs into a single "By Week" tab
- Updated calendar to visually indicate days with articles via a dot indicator
- Improved calendar week selection to allow toggling multiple individual weeks
- Enhanced calendar hover states to invert foreground text for readability
- Fixed active tab styling to remove clashing bottom borders and focus outlines

Made-with: Cursor
This commit is contained in:
cottongin
2026-04-07 12:16:11 -04:00
parent 0d1a898caa
commit c5e5836ac1
3 changed files with 113 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
static/style.css
View File

@@ -62,17 +62,25 @@ nav .brand { font-weight: bold; font-size: 1.1rem; }
padding: 0.5rem 1.2rem;
background: none;
border: none;
border-bottom: 3px solid transparent;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
font-size: 0.95rem;
color: var(--pico-muted-color);
}
.tab:focus {
outline: none;
box-shadow: none;
}
.tab.active {
color: var(--pico-primary);
color: var(--pico-primary-inverse);
background: var(--pico-primary);
border-bottom-color: var(--pico-primary);
border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
font-weight: 600;
}
.tab:hover { color: var(--pico-primary); }
.tab.active:hover { color: var(--pico-primary-inverse); }
.tab-content { display: none; }
.tab-content.active { display: block; }
@@ -103,17 +111,49 @@ nav .brand { font-weight: bold; font-size: 1.1rem; }
cursor: pointer;
}
.cal-week, .cal-week-multi { cursor: pointer; }
.cal-week:hover, .cal-week-multi:hover {
background: var(--pico-secondary-hover-background);
.cal-week:hover > td, .cal-week-multi:hover > td {
background: var(--pico-primary-hover-background);
color: var(--pico-primary-inverse);
}
.cal-week.selected, .cal-week-multi.selected {
.cal-week:hover .cal-wk, .cal-week-multi:hover .cal-wk {
color: var(--pico-primary-inverse);
}
.cal-week:hover .has-articles::after, .cal-week-multi:hover .has-articles::after {
background-color: var(--pico-primary-inverse);
}
.cal-week.selected > td, .cal-week-multi.selected > td {
background: var(--pico-primary-background);
color: var(--pico-primary-inverse);
}
.cal-week-multi.in-range {
.cal-week-multi.in-range > td {
background: var(--pico-primary-focus);
color: var(--pico-primary-inverse);
}
.cal-week.selected .cal-wk, .cal-week-multi.selected .cal-wk,
.cal-week-multi.in-range .cal-wk {
color: var(--pico-primary-inverse);
}
.has-articles {
font-weight: bold;
position: relative;
}
.has-articles::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--pico-primary);
}
.cal-week.selected .has-articles::after,
.cal-week-multi.selected .has-articles::after,
.cal-week-multi.in-range .has-articles::after {
background-color: var(--pico-primary-inverse);
}
/* Publish page */
.publish-summary {