git ssb - Reorder nearby links to prev, up, next · Grey the earthling/gkn.me.uk@9e8c00ea

Commit 9e8c00eafa3d6d94f2b92037243fe07b6ba66aad

Reorder nearby links to prev, up, next

This order matches the typical reading order of
the intended visual appearance in a wide graphical display.

This makes it possible to achieve this grid layout
without targetting something other than the links' rel attributes
and without using :has() which has no browser support yet.

The linear order is less logical:
the middle item is a different category to the 2 around it.

Greg K Nicholson committed on 2/16/2018, 11:24:35 AM
Parent: 2a2b9271cfb5614e3cbf6c6b3ff2f4b127e8abe9

Files changed

themes/ran/static/style/ran.css	changed
themes/ran/templates/article.html	changed
themes/ran/templates/period_archives.html	changed
themes/ran/templates/tag.html	changed

themes/ran/static/style/ran.cssView
		@@ -151,8 +151,15 @@
151	151 …	display: block;
152	152 …	margin-top: 1rem;
153	153 …	}
154	154 …
	155 …	+ nav.nearby li,
	156 …	+ nav.nearby ul {
	157 …	+ display: inline;
	158 …	+ margin: 0;
	159 …	+ padding: 0;
	160 …	+ }
	161 …	+
155	162 …	nav.nearby a {
156	163 …	display: block;
157	164 …	margin-top: 1rem;
158	165 …	margin-right: 1rem;
		@@ -176,16 +183,15 @@
176	183 …	content: "← ";
177	184 …	}
178	185 …
179	186 …	@media (min-width: 42rem) {
180		- nav.nearby {
	187 …	+ nav.nearby ul {
181	188 …	display: grid;
182	189 …	grid-template-columns: 1fr 1fr 1fr;
183	190 …	margin-right:0;
184	191 …	}
185	192 …
186	193 …	nav.nearby a {
187		- grid-row: 1/2;
188	194 …	margin-top: 0;
189	195 …	margin-right: 0;
190	196 …	text-align: center;
191	197 …	}
		@@ -194,19 +200,16 @@
194	200 …	width: 100%;
195	201 …	}
WritePreview
196	202 …
197	203 …	nav.nearby a[rel="up"] {
198		- grid-column: 2/3;
199	204 …	text-align: center;
200	205 …	}
201	206 …
202	207 …	nav.nearby a[rel="next"] {
203		- grid-column: 3/4;
204	208 …	text-align: right;
205	209 …	}
206	210 …
207	211 …	nav.nearby a[rel="prev"] {
208		- grid-column: 1/2;
209	212 …	text-align: left;
210	213 …	}
211	214 …	}
212	215 …

themes/ran/templates/article.htmlView
		@@ -149,8 +149,16 @@
149	149 …	</ul>
150	150 …	{%- endif -%}
151	151 …	<nav class="nearby">
152	152 …	<ul>
	153 …	+ {%- if article.prev_article -%}
	154 …	+ <li>
	155 …	+ <a href="/{{- article.prev_article.url -}}" rel="prev">
	156 …	+ <span> ← </span>
	157 …	+ {{- article.prev_article.title \| trim -}}
	158 …	+ </a>
	159 …	+ </li>
	160 …	+ {%- endif -%}
153	161 …	<li>
154	162 …	<a href="/{{- article.date \| strftime('%Y/%m/%d') -}}" rel="up">
155	163 …	<span> ↑ </span>
156	164 …	{{- article.date \| strftime(DATE_FORMAT_DAY) -}}
		@@ -163,16 +171,8 @@
163	171 …	{{- article.next_article.title \| trim -}}
164	172 …	</a>
165	173 …	</li>
166	174 …	{%- endif -%}
167		- {%- if article.prev_article -%}
168		- <li>
169		- <a href="/{{- article.prev_article.url -}}" rel="prev">
170		- <span> ← </span>
171		- {{- article.prev_article.title \| trim -}}
172		- </a>
173		- </li>
174		- {%- endif -%}
175	175 …	</ul>
176	176 …	</nav>
177	177 …	{{- super() -}}
178	178 …	{%- endblock -%}

themes/ran/templates/period_archives.htmlView
		@@ -57,8 +57,52 @@
57	57 …	{%- endblock -%}
58	58 …	{%- block maincontent -%}
59	59 …	<nav class="nearby">
60	60 …	<ul>
	61 …	+ {%- for article in articles \|
	62 …	+ selectattr("date", "lessthan",
	63 …	+ dates[ dates \| length - 1].date) -%}
	64 …	+ {%- if loop.index == 1 -%}
	65 …	+ {%- if period \| length == 1 -%}
	66 …	+ <li>
	67 …	+ <a href="/{{- article.date \| strftime('%Y') -}}"
	68 …	+ rel="prev">
	69 …	+ <span> ← </span>
	70 …	+ <time datetime="{{- article.date \|
	71 …	+ strftime('%Y') -}}">
	72 …	+ {{- article.date \|
	73 …	+ strftime(DATE_FORMAT_YEAR) -}}
	74 …	+ </time>
	75 …	+ </a>
	76 …	+ </li>
	77 …	+ {%- elif period \| length == 2 -%}
	78 …	+ <li>
	79 …	+ <a href="/{{- article.date \| strftime('%Y/%m') -}}"
	80 …	+ rel="prev">
	81 …	+ <span> ← </span>
	82 …	+ <time datetime="{{- article.date \|
	83 …	+ strftime('%Y-%m') -}}">
	84 …	+ {{- article.date \|
	85 …	+ strftime(DATE_FORMAT_MONTH) -}}
	86 …	+ </time>
	87 …	+ </a>
	88 …	+ </li>
	89 …	+ {%- else -%}
	90 …	+ <li>
	91 …	+ <a href="/{{- article.date \|
	92 …	+ strftime('%Y/%m/%d') -}}"
	93 …	+ rel="prev">
	94 …	+ <span> ← </span>
	95 …	+ <time datetime="{{- article.date \|
	96 …	+ strftime('%Y-%m-%d') -}}">
	97 …	+ {{- article.date \|
	98 …	+ strftime(DATE_FORMAT_DAY) -}}
	99 …	+ </time>
	100 …	+ </a>
	101 …	+ </li>
	102 …	+ {%- endif -%}
	103 …	+ {%- endif -%}
	104 …	+ {%- endfor -%}
61	105 …	{%- if period \| length == 1 -%}
62	106 …	<li>
63	107 …	<a href="/entries" rel="up">
64	108 …	<span> ↑ </span>
		@@ -129,52 +173,8 @@
129	173 …	</li>
130	174 …	{%- endif -%}
131	175 …	{%- endif -%}
132	176 …	{%- endfor -%}
133		- {%- for article in articles \|
134		- selectattr("date", "lessthan",
135		- dates[ dates \| length - 1].date) -%}
136		- {%- if loop.index == 1 -%}
137		- {%- if period \| length == 1 -%}
138		- <li>
139		- <a href="/{{- article.date \| strftime('%Y') -}}"
140		- rel="prev">
141		- <span> ← </span>
142		- <time datetime="{{- article.date \|
143		- strftime('%Y') -}}">
144		- {{- article.date \|
145		- strftime(DATE_FORMAT_YEAR) -}}
146		- </time>
147		- </a>
148		- </li>
149		- {%- elif period \| length == 2 -%}
150		- <li>
151		- <a href="/{{- article.date \| strftime('%Y/%m') -}}"
152		- rel="prev">
153		- <span> ← </span>
154		- <time datetime="{{- article.date \|
155		- strftime('%Y-%m') -}}">
156		- {{- article.date \|
157		- strftime(DATE_FORMAT_MONTH) -}}
158		- </time>
159		- </a>
160		- </li>
161		- {%- else -%}
162		- <li>
163		- <a href="/{{- article.date \|
164		- strftime('%Y/%m/%d') -}}"
165		- rel="prev">
166		- <span> ← </span>
167		- <time datetime="{{- article.date \|
168		- strftime('%Y-%m-%d') -}}">
169		- {{- article.date \|
170		- strftime(DATE_FORMAT_DAY) -}}
171		- </time>
172		- </a>
173		- </li>
174		- {%- endif -%}
175		- {%- endif -%}
176		- {%- endfor -%}
177	177 …	</ul>
178	178 …	</nav>
179	179 …	{{- super() -}}
180	180 …	{%- endblock -%}

themes/ran/templates/tag.htmlView
		@@ -9,8 +9,20 @@
9	9 …	{% endblock %}
10	10 …	{% block maincontent %}
11	11 …	<nav class="nearby">
12	12 …	<ul>
	13 …	+ {%- for othertag, otherarticles in tags \| sort \| reverse if
	14 …	+ othertag.slug < tag.slug and
	15 …	+ otherarticles \| list \| length > 1 -%}
	16 …	+ {%- if loop.index == 1 -%}
	17 …	+ <li>
	18 …	+ <a href="/entries/{{- othertag.slug -}}" rel="prev">
	19 …	+ <span> ← </span>
	20 …	+ {{- othertag -}}
	21 …	+ </a>
	22 …	+ </li>
	23 …	+ {%- endif -%}
	24 …	+ {%- endfor -%}
13	25 …	<li>
14	26 …	<a href="/entries" rel="up">
15	27 …	<span> ↑ </span>
16	28 …	{{- ARCHIVES_TITLE -}}
		@@ -27,20 +39,8 @@
27	39 …	</a>
28	40 …	</li>
29	41 …	{%- endif -%}
30	42 …	{%- endfor -%}
31		- {%- for othertag, otherarticles in tags \| sort \| reverse if
32		- othertag.slug < tag.slug and
33		- otherarticles \| list \| length > 1 -%}
34		- {%- if loop.index == 1 -%}
35		- <li>
36		- <a href="/entries/{{- othertag.slug -}}" rel="prev">
37		- <span> ← </span>
38		- {{- othertag -}}
39		- </a>
40		- </li>
41		- {%- endif -%}
42		- {%- endfor -%}
43	43 …	</ul>
44	44 …	</nav>
45	45 …	{{- super() -}}
46	46 …	{% endblock %}

Built with git-ssb-web

Grey the earthling / gkn.me.uk

Commit 9e8c00eafa3d6d94f2b92037243fe07b6ba66aad

Reorder nearby links to prev, up, next

Files changed