diff --git a/src/routes/publish.py b/src/routes/publish.py index a549991..332c40b 100644 --- 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({ diff --git a/static/style.css b/static/style.css index d7949fd..99b907c 100644 --- 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 { diff --git a/templates/publish.html b/templates/publish.html index c1db59d..1630645 100644 --- a/templates/publish.html +++ b/templates/publish.html @@ -4,13 +4,13 @@
Select a single week, or click two different weeks to select a range.