Skip to content

Improve the month calendar and page navigation on phones #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brianglass merged 4 commits into from
Nov 6, 2026
Merged

Improve the month calendar and page navigation on phones #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fad0451
Show the month calendar as a list of days on phones
brianglass Nov 6, 2026
85897df
Make the day and month navigation finger-sized on phones
brianglass Nov 6, 2026
d98c59f
Line up the title and menu with the navigation buttons on phones
brianglass Nov 6, 2026
477a9da
Add day links at the foot of the readings page, and widen text on phones
brianglass Nov 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions calendarium/templates/readings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,4 +148,13 @@ <h2>{{ reading.title }}</h2>
{% endif %}
</section>
</div>

{# The same day links again at the foot of the page, for phones (see main.css), where a day runs to several screens. show:window:top brings the new day up from its start. #}
{% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day as previous_url %}
{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day as next_url %}
<nav class="day-nav bottom-day-nav" aria-label="Other days">
<a class="cal-nav" href="{{ previous_url }}" {% if previous_nofollow %}rel="nofollow"{% endif %} hx-get="{{ previous_url }}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true show:window:top" hx-push-url="true">&larr; Previous Day</a>
<a class="cal-nav" href="{% url "index" %}" hx-get="{% url "index" %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true show:window:top" hx-push-url="true">Today</a>
<a class="cal-nav" href="{{ next_url }}" {% if next_nofollow %}rel="nofollow"{% endif %} hx-get="{{ next_url }}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true show:window:top" hx-push-url="true">Next Day &rarr;</a>
</nav>
{% endblock %}
153 changes: 153 additions & 0 deletions orthocal/static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -569,6 +569,83 @@ a.active {
flex-wrap: wrap;
}
}
/* The second row of day links at the foot of the readings page is for
phones only (below). */
.bottom-day-nav {
display: none;
}
/* Phones: the day/month links become full-width buttons at least 44px tall
(Apple's minimum tap target), and the toggles get 16px text, below which
iOS Safari zooms the page when a <select> is tapped. */
@media (max-width: 600px) {
/* The title row above shares the nav's gutter, so the title, the
hamburger and its menu line up with the buttons' edges. The column
gap and the nav's negative margin (1.5em each, but at different font
sizes) otherwise leave the hamburger 3px past the gutter. */
.topbar-inner {
width: auto;
padding-left: 16px;
padding-right: 16px;
column-gap: 0;
}
.topbar-inner > nav {
margin-left: 0;
}
.topbar-inner > nav > ul {
right: 16px;
}
nav.page-nav {
width: auto;
padding: 0.5em 16px;
font-size: 0.85rem;
}
.page-nav-row {
flex-direction: column;
align-items: stretch;
}
.day-nav {
flex-wrap: wrap;
gap: 0.5rem;
}
.bottom-day-nav {
display: flex;
margin-top: 2.5em;
font-family: var(--font-sans);
font-size: 0.85rem;
}
.bottom-day-nav a.cal-nav:link, .bottom-day-nav a.cal-nav:visited {
color: var(--color-text-muted);
text-decoration: none;
}
nav.page-nav a.cal-nav, .bottom-day-nav a.cal-nav {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
box-sizing: border-box;
margin: 0;
padding: 0 0.6em;
white-space: nowrap;
border: 1px solid var(--color-border-input);
border-radius: 6px;
background-color: var(--color-bg-input);
}
.toggle-row {
justify-content: stretch;
}
.toggle-picker {
flex: 1 1 0;
}
/* nav.page-nav outranks the base .toggle-picker select rule below,
which sets font-size: inherit. */
nav.page-nav .toggle-picker select {
width: 100%;
min-height: 44px;
font-size: 16px;
border-radius: 6px;
}
}

/* ==========================================================================
Main content shell
Expand All @@ -579,6 +656,15 @@ main#orthocal {
min-height: 100%;
container-type: inline-size;
}
/* Phones: the same 16px gutter as the topbar, rather than 75% of an
already narrow screen. */
@media (max-width: 600px) {
main#orthocal {
width: auto;
margin-left: 16px;
margin-right: 16px;
}
}
main#orthocal p {
text-indent: 1.5em;
margin-top: 0;
Expand Down Expand Up @@ -802,6 +888,12 @@ section.readings h2 {
-ms-hyphens: auto;
hyphens: auto;
}
/* On a phone's narrow column, justifying opens wide gaps between words. */
@media (max-width: 600px) {
#content, .passage {
text-align: left;
}
}
.passage h2 {
margin-top: 0;
font-size: 1.1em;
Expand Down Expand Up @@ -998,6 +1090,67 @@ p.day-number {
font-size: 1.5em;
}

/* Phones: a seven-column grid sized in vw leaves 40px cells with 4-7px text,
so the month becomes a list of days instead, one per row. This is CSS
only: the oEmbed API hands this same table HTML to other sites, which
style it themselves. The weekday names are English, like the header row
they replace (Python's calendar module writes that). */
@media (max-width: 600px) {
table.month {
font-size: 1.2em;
width: 100%;
margin: 1em 0;
}
table.month,
table.month tbody,
table.month tr,
table.month tr:first-child th,
table.month td {
display: block;
width: auto;
}
/* The weekday header row, and the blank cells padding the first and
last weeks. */
table.month tr:nth-child(2),
table.month td.noday {
display: none;
}
table.month td {
border-width: 0 0 1px 0;
}
table.month td a {
padding: 0.6em 1em;
}
table.month tr td p {
margin-bottom: 0.3em !important;
}
table.month ul {
margin-bottom: 0.3em;
}
table.month li + li:before {
padding: 0 0.4em;
}
table.month ul.saints li {
font-size: 0.85em;
}
p.day-number {
font-size: 1.3em;
font-weight: bold;
}
td.sun p.day-number::after { content: " Sunday"; }
td.mon p.day-number::after { content: " Monday"; }
td.tue p.day-number::after { content: " Tuesday"; }
td.wed p.day-number::after { content: " Wednesday"; }
td.thu p.day-number::after { content: " Thursday"; }
td.fri p.day-number::after { content: " Friday"; }
td.sat p.day-number::after { content: " Saturday"; }
td p.day-number::after {
font-size: 0.7em;
font-weight: normal;
color: var(--color-text-secondary);
}
}

/* ==========================================================================
Saint search page
========================================================================== */
Expand Down
Loading