Skip to content

Commit 4782b34

Browse files
SurfooSurfoo
committed
theme-picker, 404 page
1 parent 8e5fee7 commit 4782b34

11 files changed

Lines changed: 391 additions & 18 deletions

File tree

‎assets/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ function initUploadForm() {
138138
gpx: gpxContent,
139139
referenceCode,
140140
locale: document.getElementById('locale').value,
141+
theme: document.getElementById('theme')?.value ?? '',
141142
toc: checked('toc'),
142143
note: checked('note'),
143144
long_desc: checked('long_desc'),

‎assets/editor.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ function initEditorPage(root) {
1818
pdf: root.dataset.pdfUrl,
1919
};
2020
const savedOptions = JSON.parse(root.dataset.options || '{}');
21+
const themeCss = savedOptions.theme_css || 'roadbook.css';
2122

2223
const saveBtn = document.getElementById('btn_save');
2324
const deleteBtn = document.getElementById('btn_delete');
@@ -31,7 +32,7 @@ function initEditorPage(root) {
3132
const editor = Jodit.make('#editable', {
3233
height: 900,
3334
iframe: true,
34-
iframeCSSLinks: ['/design/roadbook.css'],
35+
iframeCSSLinks: [`/design/${themeCss}`],
3536
toolbarAdaptive: false,
3637
showCharsCounter: false,
3738
showWordsCounter: false,

‎config/services.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ parameters:
2222
app.weasyprint_bin: '%env(default:app.weasyprint_bin_default:WEASYPRINT_BIN)%'
2323
app.weasyprint_bin_default: 'weasyprint'
2424
app.available_sorts: ['none', 'name', 'owner', 'difficulty', 'terrain']
25+
app.roadbook_themes:
26+
classic: { label: 'Classic', css: 'roadbook.css' }
27+
modern: { label: 'Modern', css: 'roadbook-modern.css' }
2528
app.locales:
2629
cs: 'Čeština'
2730
da: 'Dansk'

‎public/design/roadbook-modern.css‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
/* ── Roadbook "Modern" theme ──────────────────────────────
2+
Same class names/structure as roadbook.css (Jodit editor and
3+
WeasyPrint export both target these classes), different look:
4+
a warmer, editorial palette instead of pure black-on-white,
5+
a serif/sans pairing for a printed-document feel, more
6+
breathing room between blocks. */
7+
8+
:root {
9+
--ink: #1f2933;
10+
--ink-soft: #52606d;
11+
--accent: #1f5f6b;
12+
--accent-soft: #e4eff0;
13+
--rule: #cbd2d9;
14+
--rule-light: #e7ebee;
15+
}
16+
17+
body, td, pre {
18+
color: var(--ink);
19+
font-family: Georgia, 'Times New Roman', serif;
20+
font-size: 10pt;
21+
line-height: 1.45;
22+
margin: 8px;
23+
}
24+
25+
.clear {
26+
clear: both;
27+
height: 0;
28+
}
29+
.separator {
30+
margin: 0.7cm 0;
31+
border: 0;
32+
border-top: 0.5mm solid var(--rule);
33+
}
34+
.containers {
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: flex-start;
38+
gap: 4mm;
39+
padding-bottom: 2mm;
40+
border-bottom: 0.4mm solid var(--accent);
41+
}
42+
.container1 {
43+
min-width: 0;
44+
}
45+
.container2 {
46+
text-align: right;
47+
flex-shrink: 0;
48+
}
49+
.container1 p, .container2 p {
50+
margin: 0.7mm 0;
51+
color: var(--ink-soft);
52+
}
53+
h1 {
54+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
55+
font-size: 13pt;
56+
font-weight: 700;
57+
color: var(--ink);
58+
margin: 0 0 1mm 0;
59+
overflow-wrap: break-word;
60+
}
61+
h1 img {
62+
width: 20px;
63+
height: auto;
64+
}
65+
.cacheInfos {
66+
margin-bottom: 1mm;
67+
}
68+
h1 img, .finder_name img {
69+
vertical-align: middle;
70+
}
71+
.cacheGCode {
72+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
73+
font-size: 10pt;
74+
font-weight: 700;
75+
letter-spacing: 0.3pt;
76+
color: var(--accent);
77+
}
78+
.cacheAttributes {
79+
margin: 2mm 0;
80+
padding: 0;
81+
height: 30px;
82+
}
83+
.cacheAttributes li {
84+
list-style-type: none;
85+
display: inline-block;
86+
margin: 0;
87+
padding: 0 1mm 0 0;
88+
height: 30px;
89+
width: 30px;
90+
}
91+
.cacheNote {
92+
min-height: 3cm;
93+
border: 0.4mm solid var(--rule);
94+
border-radius: 1mm;
95+
margin: 2mm 0;
96+
}
97+
.cacheNote p {
98+
margin: 0;
99+
padding: 1mm 2mm;
100+
border-bottom: 0.4mm solid var(--rule);
101+
background-color: var(--accent-soft);
102+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
103+
font-weight: 700;
104+
color: var(--accent);
105+
}
106+
.cacheHint {
107+
margin-bottom: 2mm;
108+
}
109+
110+
.cacheHint p {
111+
margin: 0;
112+
}
113+
114+
.cacheLogs {
115+
margin-bottom: 2mm;
116+
}
117+
.cacheLogs img {
118+
margin: 1mm;
119+
}
120+
.cacheLogs table {
121+
border-spacing: 0px;
122+
border-collapse: collapse;
123+
width: 100%;
124+
}
125+
.cacheLogDate {
126+
width: 30mm;
127+
text-align: right;
128+
color: var(--ink-soft);
129+
}
130+
.cacheLogText {
131+
overflow: hidden;
132+
}
133+
134+
.cacheLogs tr:nth-child(odd) {
135+
background: var(--accent-soft);
136+
font-weight: bold;
137+
}
138+
.cacheLogs tr:nth-child(even) {
139+
background: #fff;
140+
border-bottom: 0.3mm solid var(--rule-light);
141+
}
142+
143+
.cacheHint p:first-child,
144+
.cacheSpoilers p:first-child,
145+
.cacheLogs p:first-child,
146+
.cacheWaypoints p:first-child {
147+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
148+
font-size: 11pt;
149+
font-weight: 700;
150+
color: var(--accent);
151+
border-bottom: 0.4mm solid var(--accent);
152+
margin: 0 0 1.5mm 0;
153+
padding-bottom: 0.5mm;
154+
}
155+
.pagebreak {
156+
display: block;
157+
clear: both;
158+
page-break-after: always;
159+
}
160+
161+
.long_description {
162+
overflow-wrap: break-word;
163+
}
164+
.long_description img {
165+
max-width: 100%;
166+
height: auto;
167+
}
168+
169+
.cacheWaypoints {
170+
margin-bottom: 2mm;
171+
}
172+
173+
.cacheWaypoints p:not(first-child) {
174+
margin: 0;
175+
padding: 1mm;
176+
border-bottom: 0.3mm solid var(--rule-light);
177+
}
178+
.cacheWaypoints p:not(first-child):nth-child(even) {
179+
background-color: var(--rule-light);
180+
}
181+
/* Table of Content */
182+
#tocTitle {
183+
text-align: center;
184+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
185+
color: var(--accent);
186+
}
187+
#toc {
188+
border-spacing: 0px;
189+
border-collapse: collapse;
190+
width: 100%;
191+
page-break-after: always;
192+
}
193+
#toc th {
194+
text-align: center;
195+
vertical-align: middle;
196+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
197+
}
198+
#tocHeadNumber {
199+
width: 0.8cm;
200+
}
201+
#tocHeadName {
202+
text-align:left;
203+
}
204+
#tocHeadFound, #tocHeadDnf, #tocHeadPage {
205+
width: 1cm;
206+
}
207+
#toc thead {
208+
border: 0.4mm solid var(--accent);
209+
background-color: var(--accent-soft);
210+
display: table-header-group;
211+
}
212+
#toc thead th {
213+
height: 0.7cm;
214+
color: var(--accent);
215+
}
216+
#toc tr {
217+
border-left: 0.3mm solid var(--rule);
218+
border-bottom: 0.3mm solid var(--rule);
219+
page-break-inside: avoid;
220+
page-break-after: auto;
221+
}
222+
223+
#tocHeadNumber, #tocHeadName, #tocHeadFound, #tocHeadDnf,
224+
.tocNumber, .tocGccode, .tocName, .tocFound, .tocDnf, .tocPage {
225+
border-right: 0.3mm solid var(--rule);
226+
}
227+
.tocNumber {
228+
text-align: center;
229+
color: var(--ink-soft);
230+
}
231+
.tocIcon {
232+
width: 0.5cm;
233+
}
234+
.tocIcon img {
235+
width: 16px;
236+
height: 16px;
237+
}
238+
.tocGccode {
239+
width: 2cm;
240+
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
241+
font-weight: 700;
242+
color: var(--accent);
243+
}
244+
.tocPage {
245+
text-align: right;
246+
}
247+
.tocName {
248+
overflow-wrap: break-word;
249+
}
250+
/* ── Print quality (WeasyPrint / CSS Paged Media) ─────────── */
251+
252+
/* Typography: avoid stranded lines, hyphenate long descriptions */
253+
body {
254+
widows: 3;
255+
orphans: 3;
256+
hyphens: auto;
257+
}
258+
259+
/* Keep logical blocks on one page */
260+
.containers,
261+
.cacheNote,
262+
.cacheHint,
263+
.cacheWaypoints p,
264+
.cacheSpoilers img,
265+
.cacheLogs tr,
266+
#toc tr {
267+
break-inside: avoid;
268+
}
269+
270+
/* Never break between a section title and its content */
271+
.cacheHint p:first-child,
272+
.cacheSpoilers p:first-child,
273+
.cacheLogs p:first-child,
274+
.cacheWaypoints p:first-child {
275+
break-after: avoid;
276+
}
277+
278+
h1 {
279+
break-after: avoid;
280+
}
281+
282+
/* Repeat table headers on every page */
283+
.cacheLogs thead,
284+
#toc thead {
285+
display: table-header-group;
286+
}
287+
288+
/* Constrain images to sane physical sizes */
289+
.long_description img,
290+
.cacheSpoilers img {
291+
max-width: 100%;
292+
max-height: 120mm;
293+
height: auto;
294+
}
295+
296+
/* Table of contents: real page numbers via target-counter */
297+
.tocPageRef {
298+
color: var(--ink);
299+
text-decoration: none;
300+
}
301+
.tocPageRef::after {
302+
content: target-counter(attr(href), page);
303+
color: var(--accent);
304+
}
305+
306+
/* Never render the Symfony dev toolbar (raw view is used for PDF export) */
307+
.sf-toolbar, .sf-toolbarreset, .sf-toolbar-clearer {
308+
display: none !important;
309+
}

0 commit comments

Comments
 (0)