selfhostable, read-only reddit client
Use separate styles for sort/vew opts to utilize appropriate `grid-template-rows` values
+21
-9
+18
-6
src/public/styles.css
+18
-6
src/public/styles.css
···
82
82
.info-container a,
83
83
.comment-info-container a,
84
84
.sort-opts a,
85
+
.view-opts a,
85
86
.more a
86
87
{
87
88
text-decoration: none;
···
116
117
align-items: center;
117
118
}
118
119
119
-
.sorting {
120
+
.sorting,
121
+
.viewing {
120
122
margin-top: 20px;
121
123
}
122
124
123
-
.sort-opts {
125
+
.sort-opts,
126
+
.view-opts {
124
127
display: grid;
125
128
margin: 10px;
126
129
}
127
130
128
-
.sort-opts {
131
+
.sort-opts,
132
+
.view-opts {
129
133
grid-template-columns: repeat(2, 1fr);
130
134
grid-template-rows: repeat(5, 1fr);
131
135
grid-auto-flow: column;
136
+
}
137
+
138
+
.view-opts {
139
+
grid-template-rows: repeat(2, 1fr);
132
140
}
133
141
134
142
.footer {
···
397
405
form {
398
406
width: 40%;
399
407
}
400
-
.sort-opts {
408
+
.sort-opts,
409
+
.view-opts {
401
410
grid-template-columns: repeat(9, 1fr);
402
411
grid-template-rows: repeat(1, 1fr);
403
412
grid-auto-flow: row;
···
442
451
form {
443
452
width: 20%;
444
453
}
445
-
.sort-opts {
454
+
.sort-opts,
455
+
.view-opts {
446
456
grid-template-columns: repeat(9, 1fr);
447
457
grid-template-rows: repeat(1, 1fr);
448
458
grid-auto-flow: row;
···
459
469
{
460
470
max-height: 20vh;
461
471
}
462
-
.sort-opts {
472
+
.sort-opts,
473
+
.view-opts {
463
474
grid-template-columns: repeat(9, 1fr);
464
475
grid-template-rows: repeat(1, 1fr);
465
476
grid-auto-flow: row;
···
542
553
543
554
.header a,
544
555
.sort-opts a,
556
+
.view-opts a,
545
557
.sub-title a {
546
558
color: var(--text-color);
547
559
}
+3
-3
src/views/index.pug
+3
-3
src/views/index.pug
···
55
55
a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year
56
56
div
57
57
a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all
58
-
details.sort-details
59
-
summary.sorting viewing as #{viewQuery}
60
-
div.sort-opts
58
+
details.view-details
59
+
summary.viewing viewing as #{viewQuery}
60
+
div.view-opts
61
61
div
62
62
a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact
63
63
div