Author: Manos Pitsidianakis [manos@pitsidianak.is]
Hash: 3a22ea6887d16de92d01f5ca5b77960a2d9872c0
Timestamp: Thu, 27 Apr 2023 12:02:30 +0000 (1 year ago)

+63 -25 +/-7 browse
web: css menu changes for small viewports
1diff --git a/Cargo.lock b/Cargo.lock
2index c952db9..b23337c 100644
3--- a/Cargo.lock
4+++ b/Cargo.lock
5 @@ -1853,6 +1853,7 @@ dependencies = [
6 "dyn-clone",
7 "eyre",
8 "http",
9+ "indexmap",
10 "lazy_static",
11 "mailpot",
12 "minijinja",
13 diff --git a/archive-http/src/cal.rs b/archive-http/src/cal.rs
14index 571950d..3725d8a 100644
15--- a/archive-http/src/cal.rs
16+++ b/archive-http/src/cal.rs
17 @@ -31,8 +31,8 @@ use chrono::*;
18 ///
19 /// # Examples
20 /// ```
21- /// use mailpot_archives::cal::calendarize;
22 /// use chrono::*;
23+ /// use mailpot_archives::cal::calendarize;
24 ///
25 /// let date = NaiveDate::parse_from_str("2021-01-02", "%Y-%m-%d").unwrap();
26 /// // Week = [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
27 @@ -59,8 +59,8 @@ pub fn calendarize(date: NaiveDate) -> Vec<[u32; 7]> {
28 ///
29 /// # Examples
30 /// ```
31- /// use mailpot_archives::cal::calendarize_with_offset;
32 /// use chrono::*;
33+ /// use mailpot_archives::cal::calendarize_with_offset;
34 ///
35 /// let date = NaiveDate::parse_from_str("2021-01-02", "%Y-%m-%d").unwrap();
36 /// // Week = [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
37 diff --git a/web/Cargo.toml b/web/Cargo.toml
38index 0abb12a..1b8b008 100644
39--- a/web/Cargo.toml
40+++ b/web/Cargo.toml
41 @@ -28,6 +28,7 @@ chrono = { version = "^0.4" }
42 dyn-clone = { version = "^1" }
43 eyre = { version = "0.6" }
44 http = "0.2"
45+ indexmap = { version = "1.9" }
46 lazy_static = "^1.4"
47 mailpot = { version = "^0.0", path = "../core" }
48 minijinja = { version = "0.31.0", features = ["source", ] }
49 diff --git a/web/src/lists.rs b/web/src/lists.rs
50index d9e400d..3c4c9ea 100644
51--- a/web/src/lists.rs
52+++ b/web/src/lists.rs
53 @@ -17,6 +17,8 @@
54 * along with this program. If not, see <https://www.gnu.org/licenses/>.
55 */
56
57+ use indexmap::IndexMap;
58+
59 use super::*;
60
61 /// Mailing list index.
62 diff --git a/web/src/templates/css.html b/web/src/templates/css.html
63index 9290322..5c06388 100644
64--- a/web/src/templates/css.html
65+++ b/web/src/templates/css.html
66 @@ -85,7 +85,7 @@
67 }
68
69 a.self-link {
70- --width: 28px;
71+ --width: 22px;
72 position: absolute;
73 top: 0px;
74 left: calc(var(--width) - 3.5rem);
75 @@ -340,11 +340,12 @@
76 margin: 1rem;
77 }
78
79- main.layout>div.header>h2 {
80- margin-inline-start: 1rem;
81+ main.layout>div.header>div.page-header {
82+ width: 90vw;
83+ margin: 0px auto;
84 }
85
86- main.layout>div.header>nav + nav {
87+ main.layout>div.header>div.page-header>nav:first-child {
88 margin-top: 1rem;
89 }
90
91 @@ -364,7 +365,9 @@
92 gap: 1rem;
93 }
94 nav.main-nav>ul>li>a {
95+ /* fallback if clamp() isn't supported */
96 padding: 1rem;
97+ padding: 1rem clamp(0.6svw,1rem,0.5vmin);
98 }
99 nav.main-nav > ul > li > a:hover {
100 outline: 0.1rem solid;
101 @@ -380,7 +383,6 @@
102
103 nav.breadcrumbs {
104 padding: 10px 14px 10px 0px;
105- margin-inline-start: 1rem;
106 }
107
108 nav.breadcrumbs ol {
109 @@ -388,6 +390,18 @@
110 padding-left: 0;
111 }
112
113+ /* If only the root crumb is visible, hide it to avoid unnecessary visual clutter */
114+ li.crumb:only-child>span[aria-current="page"] {
115+ --secs: 500ms;
116+ transition: all var(--secs) linear;
117+ color: transparent;
118+ }
119+
120+ li.crumb:only-child>span[aria-current="page"]:hover {
121+ transition: all var(--secs) linear;
122+ color: revert;
123+ }
124+
125 .crumb, .crumb>a {
126 display: contents;
127 }
128 @@ -508,20 +522,35 @@
129 div.entries {
130 display: flex;
131 flex-direction: column;
132- gap: 1rem;
133+ }
134+
135+ div.entries>p:first-child {
136+ margin: 1rem 0rem;
137 }
138
139 div.entries>div.entry {
140 display: flex;
141 flex-direction: column;
142 gap: 0.5rem;
143+ border: 1px solid var(--border-secondary);
144+ padding: 1rem 1rem;
145 }
146
147- div.posts>div.entry>span.subject {
148- font-size: larger;
149+ div.entries>div.entry+div.entry {
150+ border-top:none;
151+ }
152+
153+ div.entries>div.entry span.metadata.replies {
154+ background: CanvasText;
155+ border-radius: .6rem;
156+ color: Canvas;
157+ padding: 0.1rem 0.4rem;
158+ font-size: small;
159+ font-variant-numeric: tabular-nums;
160 }
161
162 div.entries>div.entry>span.metadata {
163+ font-size: small;
164 color: GrayText;
165 word-break: break-all;
166 }
167 @@ -578,15 +607,18 @@
168 span.message-id:before{
169 content: '<';
170 display: inline-block;
171+ opacity: 0.6;
172 }
173 td.message-id:after,
174 span.message-id:after{
175 content: '>';
176 display: inline-block;
177+ opacity: 0.6;
178 }
179 span.message-id + span.message-id:before{
180 content: ', <';
181 display: inline-block;
182+ opacity: 0.6;
183 }
184 td.faded,
185 span.faded {
186 diff --git a/web/src/templates/header.html b/web/src/templates/header.html
187index 6fc7615..eef1a3b 100644
188--- a/web/src/templates/header.html
189+++ b/web/src/templates/header.html
190 @@ -14,13 +14,21 @@
191 <p class="description">{{ description }}</p>
192 {% endif %}
193 {% include "menu.html" %}
194- {% if messages %}
195- <ul class="messagelist">
196- {% for message in messages %}
197- <li class="{{ message.level|lower }}">
198- <span class="label">{{ message.level }}: </span>{{ message.message }}
199- </li>
200- {% endfor %}
201- </ul>
202- {% endif %}
203+ <div class="page-header">
204+ {% if page_title %}
205+ <h2>{{ page_title }}</h2>
206+ {% endif %}
207+ <nav aria-label="Breadcrumb" class="breadcrumbs">
208+ <ol>{% for crumb in crumbs %}{% if loop.last %}<li class="crumb"><span aria-current="page" title="current page">{{ crumb.label }}</span></li>{% else %}<li class="crumb"><a href="{{ root_url_prefix }}{{ crumb.url }}">{{ crumb.label }}</a></li>{% endif %}{% endfor %}</ol>
209+ </nav>
210+ {% if messages %}
211+ <ul class="messagelist">
212+ {% for message in messages %}
213+ <li class="{{ message.level|lower }}">
214+ <span class="label">{{ message.level }}: </span>{{ message.message }}
215+ </li>
216+ {% endfor %}
217+ </ul>
218+ {% endif %}
219+ </div>
220 </div>
221 diff --git a/web/src/templates/menu.html b/web/src/templates/menu.html
222index fc9fd3c..ead407e 100644
223--- a/web/src/templates/menu.html
224+++ b/web/src/templates/menu.html
225 @@ -9,9 +9,3 @@
226 {% endif %}
227 </ul>
228 </nav>
229- {% if page_title %}
230- <h2>{{ page_title }}</h2>
231- {% endif %}
232- <nav aria-label="Breadcrumb" class="breadcrumbs">
233- <ol>{% for crumb in crumbs %}{% if loop.last %}<li class="crumb"><span aria-current="page">{{ crumb.label }}</span></li>{% else %}<li class="crumb"><a href="{{ root_url_prefix }}{{ crumb.url }}">{{ crumb.label }}</a></li>{% endif %}{% endfor %}</ol>
234- </nav>