Skip to content

Redesign readings page: two-column layout, compact reading list, toggle widgets #167

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 1 commit into from
Aug 10, 2026
Merged

Redesign readings page: two-column layout, compact reading list, toggle widgets #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 10 additions & 9 deletions calendarium/templates/calendar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,16 @@
<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=previous_month.year month=previous_month.month %}" {% if previous_nofollow %}rel="nofollow"{% endif %}>&larr; {{ previous_month|date:"F" }}</a>
<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=next_month.year month=next_month.month %}" {% if next_nofollow %}rel="nofollow"{% endif %}>{{ next_month|date:"F" }} &rarr;</a>

<br>

<label class="tradition-label-with-badge" title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
<label class="tradition-label-with-badge" title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek <span class="status-badge">New</span></label>

<br>

<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
<div class="toggle-row">
<div class="segmented-control">
<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek<span class="status-badge">New</span></label>
</div>
<div class="segmented-control">
<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
</div>
</div>
{% endblock extra_nav %}

{% block main %}
Expand Down
41 changes: 31 additions & 10 deletions calendarium/templates/readings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,16 @@
<a class="cal-nav" href="{% url "index" %}">Today</a>
<a class="cal-nav" href="{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day %}" {% if next_nofollow %}rel="nofollow"{% endif %}>Next Day &rarr;</a>

<br>

<label class="tradition-label-with-badge" title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
<label class="tradition-label-with-badge" title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek <span class="status-badge">New</span></label>

<br>

<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
<div class="toggle-row">
<div class="segmented-control">
<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek<span class="status-badge">New</span></label>
</div>
<div class="segmented-control">
<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
</div>
</div>
{% endblock %}

{% block main %}
Expand Down Expand Up @@ -59,6 +60,24 @@ <h2>Service Notes</h2>
</section>
{% endif %}

{% if day.readings %}
<section class="scripture-list">
<h2>Scripture Readings</h2>
<ul>
{% for reading in day.readings %}
<li>
<a href="#reading-{{ reading.id }}">
{% filter widont %}
{{ reading.pericope.display }}
({{ reading.source }}{% if reading.desc %}, {{ reading.desc }}{% endif %})
{% endfilter %}
</a>
</li>
{% endfor %}
</ul>
</section>
{% endif %}

{% if day.saints %}
<section class="commemorations">
<h2>Commemorations</h2>
Expand All @@ -71,6 +90,7 @@ <h2>Commemorations</h2>
{% endif %}
</header>

<div class="readings-columns">
<section class="readings">
{% if day.language == "en" %}
<h1>Scripture Readings</h1>
Expand All @@ -92,7 +112,7 @@ <h1>Scripture Readings&nbsp;({{ translation_label }})</h1>
{% endif %}

{% for reading in day.readings %}
<article class="passage">
<article class="passage" id="reading-{{ reading.id }}">
<h2>
{% filter widont %}
{{ reading.pericope.display }}
Expand Down Expand Up @@ -123,6 +143,7 @@ <h2>{{ reading.title|widont }}</h2>
{% endfor %}
{% endif %}
</section>
</div>
{% endblock %}

{% block scripts %}
Expand Down
77 changes: 60 additions & 17 deletions orthocal/static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,24 @@ main#orthocal > header h1 span {
text-decoration: underline;
}

section.readings {
.readings-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3em;
align-items: start;
border-top: 3px solid #ddd;
padding-top: 1.5em;
margin-top: 1.5em;
}
section.readings h2 {
color: #a00;
}
@media (max-width: 800px) {
.readings-columns {
grid-template-columns: 1fr;
gap: 0;
}
}

.fasting {
font-size: 1.4em;
Expand Down Expand Up @@ -170,13 +180,10 @@ section.readings h2 {
padding-top: 1.5em;
border-top: 5px solid #eee;
}
.commemorations li, .feasts li, .day > p {
.commemorations li, .scripture-list li, .feasts li, .day > p {
color: #555;
}
.passage {
columns: 3 20em;
column-gap: 2em;
column-rule: 1px solid #ddd;
padding-top: 2em;
widows: 3;
orphans: 3;
Expand Down Expand Up @@ -207,13 +214,49 @@ section.readings h2 {
label {
font-size: 0.75em;
}
.tradition-label-with-badge {
display: inline-flex;
align-items: center;
gap: 0.3em;
.toggle-row {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
flex-wrap: wrap;
margin: 0.5em 0;
}
.segmented-control {
display: inline-flex;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
}
label input[type="radio"] {
accent-color: #888;
.segmented-control label {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35em;
margin: 0;
padding: 3px 14px;
color: #666;
cursor: pointer;
transition-property: background-color, color;
transition-duration: 0.2s;
}
.segmented-control label:not(:last-child) {
border-right: 1px solid #ccc;
}
.segmented-control label:hover {
background-color: #eee;
}
.segmented-control input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.segmented-control label:has(input:checked) {
background-color: #a00;
color: #fff;
}
.segmented-control label:has(input:checked):hover {
background-color: #a00;
}
.status-badge {
display: inline-block;
Expand All @@ -228,14 +271,14 @@ label input[type="radio"] {
margin-left: 2px;
vertical-align: middle;
}
.service-notes ul, .commemorations ul, .feasts ul {
.service-notes ul, .commemorations ul, .scripture-list ul, .feasts ul {
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
text-wrap: balance;
}
.service-notes h2, .feasts h2, .commemorations h2 {
.service-notes h2, .feasts h2, .commemorations h2, .scripture-list h2 {
margin-bottom: 0em;
font-size: 1.2em;
}
Expand Down Expand Up @@ -282,20 +325,20 @@ table.month tr:first-child th {
padding-bottom: 1em;
}

.commemorations li, .feasts li, .service-notes li {
.commemorations li, .scripture-list li, .feasts li, .service-notes li {
display: inline;
color: #a00;
}
.commemorations li + li:before, .feasts li + li:before {
.commemorations li + li:before, .scripture-list li + li:before, .feasts li + li:before {
content: "●";
color: black;
padding: 0.5em;
}
.commemorations li a {
.commemorations li a, .scripture-list li a {
color: inherit;
text-decoration: none;
}
.commemorations li a:hover {
.commemorations li a:hover, .scripture-list li a:hover {
text-decoration: underline;
}

Expand Down
4 changes: 2 additions & 2 deletions orthocal/static/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ table.month tr:first-child th {
orphans: 2;
column-rule: 0;
}
section.readings {
border: 0;
.readings-columns {
border-top: 0;
}
main#orthocal > header h1 {
font-size: 200%;
Expand Down