feat: streamline publish tab and calendar UI

- 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
2026-04-07 12:16:11 -04:00
parent 0d1a898caa
commit c5e5836ac1
3 changed files with 113 additions and 117 deletions
--- a/src/routes/publish.py
+++ b/src/routes/publish.py
@@ -31,10 +31,12 @@ def _calendar_data(year: int, month: int) -> list[dict]:
        week_end = current + timedelta(days=6)
        iso_week = week_start.isocalendar()[1]

-        article_count = Article.query.filter(
+        week_articles = Article.query.filter(
            Article.pub_date >= str(week_start),
            Article.pub_date < str(week_end + timedelta(days=1)),
-        ).count()
+        ).all()
+        article_count = len(week_articles)
+        article_dates = {a.pub_date.date() for a in week_articles}

        days = []
        for i in range(7):
@@ -43,6 +45,7 @@ def _calendar_data(year: int, month: int) -> list[dict]:
                "day": d.day,
                "date": d.isoformat(),
                "in_month": d.month == month,
+                "has_articles": d in article_dates,
            })

        weeks.append({
--- a/static/style.css
+++ b/static/style.css
@@ -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 {
--- a/templates/publish.html
+++ b/templates/publish.html
@@ -4,13 +4,13 @@
 <h1>Publish Issue</h1>

 <div class="tab-bar">
-    <button class="tab active" data-tab="weekly" onclick="switchTab('weekly')">Weekly Issue</button>
-    <button class="tab" data-tab="multi-week" onclick="switchTab('multi-week')">Multi-Week</button>
+    <button class="tab active" data-tab="weekly" onclick="switchTab('weekly')">By Week</button>
    <button class="tab" data-tab="single-article" onclick="switchTab('single-article')">Single Article</button>
 </div>

 <!-- WEEKLY TAB -->
 <div id="tab-weekly" class="tab-content active">
+    <p><small><em>Select a single week, or click two different weeks to select a range.</em></small></p>
    <div class="calendar-widget">
        <div class="calendar-nav">
            <button class="outline" onclick="changeMonth(-1)">&#9664;</button>
@@ -26,10 +26,10 @@
            <tbody id="cal-body">
                {% for week in calendar_weeks %}
                <tr class="cal-week" data-start="{{ week.week_start }}" data-end="{{ week.week_end }}"
-                    onclick="selectWeek(this)">
+                    onclick="selectWeekMulti(this)">
                    <td class="cal-wk">{{ week.iso_week }}{% if week.article_count %} <small>({{ week.article_count }})</small>{% endif %}</td>
                    {% for day in week.days %}
-                    <td class="{% if not day.in_month %}cal-dim{% endif %}">{{ day.day }}</td>
+                    <td class="{% if not day.in_month %}cal-dim{% endif %} {% if day.has_articles %}has-articles{% endif %}">{{ day.day }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
@@ -41,7 +41,7 @@
    <form method="post" action="/publish" id="weekly-form">
        <input type="hidden" name="week_start" id="weekly-start">
        <input type="hidden" name="week_end" id="weekly-end">
-        <input type="hidden" name="issue_type" value="weekly">
+        <input type="hidden" name="issue_type" id="weekly-issue-type" value="weekly">
        <div id="weekly-checkboxes"></div>
        <div class="publish-actions">
            <select name="cover_method">
@@ -53,48 +53,6 @@
    </form>
 </div>

-<!-- MULTI-WEEK TAB -->
-<div id="tab-multi-week" class="tab-content">
-    <div class="calendar-widget">
-        <div class="calendar-nav">
-            <button class="outline" onclick="changeMonthMulti(-1)">&#9664;</button>
-            <strong id="cal-month-label-multi">{{ cal_month_name }}</strong>
-            <button class="outline" onclick="changeMonthMulti(1)">&#9654;</button>
-        </div>
-        <table class="calendar-grid">
-            <thead>
-                <tr>
-                    <th>Wk</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th>
-                </tr>
-            </thead>
-            <tbody id="cal-body-multi">
-                {% for week in calendar_weeks %}
-                <tr class="cal-week-multi" data-start="{{ week.week_start }}" data-end="{{ week.week_end }}"
-                    onclick="selectWeekMulti(this)">
-                    <td class="cal-wk">{{ week.iso_week }}{% if week.article_count %} <small>({{ week.article_count }})</small>{% endif %}</td>
-                    {% for day in week.days %}
-                    <td class="{% if not day.in_month %}cal-dim{% endif %}">{{ day.day }}</td>
-                    {% endfor %}
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    <div id="multi-summary" class="publish-summary"></div>
-    <form method="post" action="/publish" id="multi-form">
-        <input type="hidden" name="week_start" id="multi-start">
-        <input type="hidden" name="week_end" id="multi-end">
-        <input type="hidden" name="issue_type" value="multi_week">
-        <div id="multi-checkboxes"></div>
-        <div class="publish-actions">
-            <select name="cover_method">
-                <option value="mosaic">Mosaic Cover</option>
-                <option value="text">Text Cover</option>
-            </select>
-            <button type="submit">Generate Issue</button>
-        </div>
-    </form>
-</div>

 <!-- SINGLE ARTICLE TAB -->
 <div id="tab-single-article" class="tab-content">
@@ -132,10 +90,7 @@
 <script>
 let calYear = {{ cal_year }};
 let calMonth = {{ cal_month }};
-let calYearMulti = {{ cal_year }};
-let calMonthMulti = {{ cal_month }};
-let multiStart = null;
-let multiEnd = null;
+let selectedWeeks = [];

 function switchTab(tab) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
@@ -157,57 +112,58 @@ async function loadArticles(start, end, targetId) {
    return articles.length;
 }

-async function selectWeek(row) {
-    document.querySelectorAll('.cal-week').forEach(r => r.classList.remove('selected'));
-    row.classList.add('selected');
-    const start = row.dataset.start;
-    const end = row.dataset.end;
-    document.getElementById('weekly-start').value = start;
-    document.getElementById('weekly-end').value = end;
-    const count = await loadArticles(start, end, 'weekly-checkboxes');
-    const ws = new Date(start + 'T00:00:00');
-    const we = new Date(end + 'T00:00:00');
-    const opts = { month: 'short', day: 'numeric' };
-    const optsYear = { month: 'short', day: 'numeric', year: 'numeric' };
-    document.getElementById('weekly-summary').innerHTML =
-        `<strong>Week ${row.cells[0].textContent.trim().split(' ')[0]}:</strong> ${ws.toLocaleDateString('en-US', opts)} &ndash; ${we.toLocaleDateString('en-US', optsYear)} &middot; <strong>${count} articles</strong>`;
-}
-
 async function selectWeekMulti(row) {
    const start = row.dataset.start;
    const end = row.dataset.end;
-
-    if (!multiStart || (multiStart && multiEnd)) {
-        multiStart = { start, end, row };
-        multiEnd = null;
-        document.querySelectorAll('.cal-week-multi').forEach(r => r.classList.remove('selected', 'in-range'));
-        row.classList.add('selected');
+    
+    // Toggle selection
+    const existingIndex = selectedWeeks.findIndex(w => w.start === start);
+    if (existingIndex >= 0) {
+        selectedWeeks.splice(existingIndex, 1);
+        row.classList.remove('selected');
    } else {
-        multiEnd = { start, end, row };
-        if (multiEnd.start < multiStart.start) {
-            [multiStart, multiEnd] = [multiEnd, multiStart];
-        }
-        document.querySelectorAll('.cal-week-multi').forEach(r => {
-            r.classList.remove('selected', 'in-range');
-            if (r.dataset.start >= multiStart.start && r.dataset.end <= multiEnd.end) {
-                r.classList.add('in-range');
-            }
-        });
-        multiStart.row.classList.add('selected');
-        multiEnd.row.classList.add('selected');
+        selectedWeeks.push({ start, end, row });
+        row.classList.add('selected');
+    }
+    
+    if (selectedWeeks.length === 0) {
+        document.getElementById('weekly-start').value = '';
+        document.getElementById('weekly-end').value = '';
+        document.getElementById('weekly-checkboxes').innerHTML = '';
+        document.getElementById('weekly-summary').innerHTML = '';
+        return;
+    }
+    
+    // Sort selected weeks by start date
+    selectedWeeks.sort((a, b) => a.start.localeCompare(b.start));
+    
+    const rangeStart = selectedWeeks[0].start;
+    const rangeEnd = selectedWeeks[selectedWeeks.length - 1].end;
+    
+    document.getElementById('weekly-start').value = rangeStart;
+    document.getElementById('weekly-end').value = rangeEnd;
+    
+    // Update issue_type based on selection
+    const issueTypeInput = document.getElementById('weekly-issue-type');
+    if (rangeStart === rangeEnd) {
+        issueTypeInput.value = 'weekly';
+    } else {
+        issueTypeInput.value = 'multi_week';
    }

-    const rangeStart = multiStart.start;
-    const rangeEnd = (multiEnd || multiStart).end;
-    document.getElementById('multi-start').value = rangeStart;
-    document.getElementById('multi-end').value = rangeEnd;
-    const count = await loadArticles(rangeStart, rangeEnd, 'multi-checkboxes');
+    const count = await loadArticles(rangeStart, rangeEnd, 'weekly-checkboxes');
    const ws = new Date(rangeStart + 'T00:00:00');
    const we = new Date(rangeEnd + 'T00:00:00');
    const opts = { month: 'short', day: 'numeric' };
    const optsYear = { month: 'short', day: 'numeric', year: 'numeric' };
-    document.getElementById('multi-summary').innerHTML =
-        `<strong>Range:</strong> ${ws.toLocaleDateString('en-US', opts)} &ndash; ${we.toLocaleDateString('en-US', optsYear)} &middot; <strong>${count} articles</strong>`;
+    
+    let summaryHtml = '';
+    if (rangeStart === rangeEnd) {
+        summaryHtml = `<strong>Week ${selectedWeeks[0].row.cells[0].textContent.trim().split(' ')[0]}:</strong> ${ws.toLocaleDateString('en-US', opts)} &ndash; ${we.toLocaleDateString('en-US', optsYear)} &middot; <strong>${count} articles</strong>`;
+    } else {
+        summaryHtml = `<strong>Range:</strong> ${ws.toLocaleDateString('en-US', opts)} &ndash; ${we.toLocaleDateString('en-US', optsYear)} &middot; <strong>${count} articles</strong>`;
+    }
+    document.getElementById('weekly-summary').innerHTML = summaryHtml;
 }

 async function changeMonth(delta) {
@@ -216,30 +172,27 @@ async function changeMonth(delta) {
    if (calMonth < 1) { calMonth = 12; calYear--; }
    const resp = await fetch(`/publish/calendar?year=${calYear}&month=${calMonth}`);
    const weeks = await resp.json();
-    renderCalendar(weeks, 'cal-body', 'cal-week', 'selectWeek(this)');
+    renderCalendar(weeks, 'cal-body', 'cal-week', 'selectWeekMulti(this)');
    document.getElementById('cal-month-label').textContent =
        new Date(calYear, calMonth - 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-}
-
-async function changeMonthMulti(delta) {
-    calMonthMulti += delta;
-    if (calMonthMulti > 12) { calMonthMulti = 1; calYearMulti++; }
-    if (calMonthMulti < 1) { calMonthMulti = 12; calYearMulti--; }
-    const resp = await fetch(`/publish/calendar?year=${calYearMulti}&month=${calMonthMulti}`);
-    const weeks = await resp.json();
-    renderCalendar(weeks, 'cal-body-multi', 'cal-week-multi', 'selectWeekMulti(this)');
-    document.getElementById('cal-month-label-multi').textContent =
-        new Date(calYearMulti, calMonthMulti - 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-    multiStart = null;
-    multiEnd = null;
+    
+    // Re-apply selected classes based on tracked selectedWeeks
+    document.querySelectorAll('.cal-week').forEach(row => {
+        if (selectedWeeks.some(w => w.start === row.dataset.start)) {
+            row.classList.add('selected');
+        }
+    });
 }

 function renderCalendar(weeks, tbodyId, rowClass, onclickFn) {
    const tbody = document.getElementById(tbodyId);
    tbody.innerHTML = weeks.map(w => {
-        const days = w.days.map(d =>
-            `<td class="${d.in_month ? '' : 'cal-dim'}">${d.day}</td>`
-        ).join('');
+        const days = w.days.map(d => {
+            let classes = [];
+            if (!d.in_month) classes.push('cal-dim');
+            if (d.has_articles) classes.push('has-articles');
+            return `<td class="${classes.join(' ')}">${d.day}</td>`;
+        }).join('');
        const count = w.article_count ? ` <small>(${w.article_count})</small>` : '';
        return `<tr class="${rowClass}" data-start="${w.week_start}" data-end="${w.week_end}" onclick="${onclickFn}">
            <td class="cal-wk">${w.iso_week}${count}</td>${days}