Skip to content

Commit 3c4fb78

Browse files
willnorriswillnorris
committed
css: responsive design for /.all page
Signed-off-by: Will Norris <[email protected]>
1 parent 340adb1 commit 3c4fb78

File tree

3 files changed

+113
-45
lines changed

3 files changed

+113
-45
lines changed

‎static/base.css

Lines changed: 88 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1230,10 +1230,38 @@ select {
12301230
display: table;
12311231
}
12321232

1233+
.hidden {
1234+
display: none;
1235+
}
1236+
12331237
.min-h-screen {
12341238
min-height: 100vh;
12351239
}
12361240

1241+
.w-full {
1242+
width: 100%;
1243+
}
1244+
1245+
.w-60 {
1246+
width: 15rem;
1247+
}
1248+
1249+
.w-32 {
1250+
width: 8rem;
1251+
}
1252+
1253+
.w-20 {
1254+
width: 5rem;
1255+
}
1256+
1257+
.max-w-screen-lg {
1258+
max-width: 1024px;
1259+
}
1260+
1261+
.max-w-\[75vw\] {
1262+
max-width: 75vw;
1263+
}
1264+
12371265
.max-w-full {
12381266
max-width: 100%;
12391267
}
@@ -1262,6 +1290,12 @@ select {
12621290
align-items: center;
12631291
}
12641292

1293+
.truncate {
1294+
overflow: hidden;
1295+
text-overflow: ellipsis;
1296+
white-space: nowrap;
1297+
}
1298+
12651299
.rounded-md {
12661300
border-radius: 0.375rem;
12671301
}
@@ -1321,11 +1355,6 @@ select {
13211355
padding: 0.5rem;
13221356
}
13231357

1324-
.px-4 {
1325-
padding-left: 1rem;
1326-
padding-right: 1rem;
1327-
}
1328-
13291358
.px-2 {
13301359
padding-left: 0.5rem;
13311360
padding-right: 0.5rem;
@@ -1336,14 +1365,23 @@ select {
13361365
padding-bottom: 0.5rem;
13371366
}
13381367

1339-
.pt-4 {
1340-
padding-top: 1rem;
1368+
.px-4 {
1369+
padding-left: 1rem;
1370+
padding-right: 1rem;
1371+
}
1372+
1373+
.pt-6 {
1374+
padding-top: 1.5rem;
13411375
}
13421376

13431377
.pb-2 {
13441378
padding-bottom: 0.5rem;
13451379
}
13461380

1381+
.pt-4 {
1382+
padding-top: 1rem;
1383+
}
1384+
13471385
.pb-1 {
13481386
padding-bottom: 0.25rem;
13491387
}
@@ -1352,10 +1390,6 @@ select {
13521390
padding-top: 0.5rem;
13531391
}
13541392

1355-
.pt-6 {
1356-
padding-top: 1.5rem;
1357-
}
1358-
13591393
.pr-4 {
13601394
padding-right: 1rem;
13611395
}
@@ -1368,28 +1402,32 @@ select {
13681402
text-align: right;
13691403
}
13701404

1371-
.align-text-top {
1372-
vertical-align: text-top;
1405+
.text-end {
1406+
text-align: end;
13731407
}
13741408

1375-
.text-2xl {
1376-
font-size: 1.5rem;
1377-
line-height: 2rem;
1409+
.align-text-top {
1410+
vertical-align: text-top;
13781411
}
13791412

13801413
.text-xl {
13811414
font-size: 1.25rem;
13821415
line-height: 1.75rem;
13831416
}
13841417

1418+
.text-xs {
1419+
font-size: 0.75rem;
1420+
line-height: 1rem;
1421+
}
1422+
13851423
.text-sm {
13861424
font-size: 0.875rem;
13871425
line-height: 1.25rem;
13881426
}
13891427

1390-
.text-xs {
1391-
font-size: 0.75rem;
1392-
line-height: 1rem;
1428+
.text-2xl {
1429+
font-size: 1.5rem;
1430+
line-height: 2rem;
13931431
}
13941432

13951433
.font-bold {
@@ -1400,18 +1438,22 @@ select {
14001438
text-transform: uppercase;
14011439
}
14021440

1441+
.leading-normal {
1442+
line-height: 1.5;
1443+
}
1444+
14031445
.leading-6 {
14041446
line-height: 1.5rem;
14051447
}
14061448

1407-
.text-gray-700 {
1449+
.text-gray-500 {
14081450
--tw-text-opacity: 1;
1409-
color: rgb(71 70 69 / var(--tw-text-opacity));
1451+
color: rgb(159 153 149 / var(--tw-text-opacity));
14101452
}
14111453

1412-
.text-gray-500 {
1454+
.text-gray-700 {
14131455
--tw-text-opacity: 1;
1414-
color: rgb(159 153 149 / var(--tw-text-opacity));
1456+
color: rgb(71 70 69 / var(--tw-text-opacity));
14151457
}
14161458

14171459
.text-blue-600 {
@@ -1439,14 +1481,14 @@ select {
14391481
border-color: rgb(77 120 200 / var(--tw-border-opacity));
14401482
}
14411483

1442-
.hover\:bg-blue-600:hover {
1484+
.hover\:bg-gray-100:hover {
14431485
--tw-bg-opacity: 1;
1444-
background-color: rgb(77 120 200 / var(--tw-bg-opacity));
1486+
background-color: rgb(246 244 242 / var(--tw-bg-opacity));
14451487
}
14461488

1447-
.hover\:bg-gray-100:hover {
1489+
.hover\:bg-blue-600:hover {
14481490
--tw-bg-opacity: 1;
1449-
background-color: rgb(246 244 242 / var(--tw-bg-opacity));
1491+
background-color: rgb(77 120 200 / var(--tw-bg-opacity));
14501492
}
14511493

14521494
.hover\:fill-blue-500:hover {
@@ -1469,4 +1511,23 @@ select {
14691511

14701512
.group:hover .group-hover\:visible {
14711513
visibility: visible;
1514+
}
1515+
1516+
.group:hover .group-hover\:text-gray-700 {
1517+
--tw-text-opacity: 1;
1518+
color: rgb(71 70 69 / var(--tw-text-opacity));
1519+
}
1520+
1521+
@media (min-width: 768px) {
1522+
.md\:block {
1523+
display: block;
1524+
}
1525+
1526+
.md\:hidden {
1527+
display: none;
1528+
}
1529+
1530+
.md\:max-w-\[40vw\] {
1531+
max-width: 40vw;
1532+
}
14721533
}

‎tmpl/all.html

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
{{ define "main" }}
2-
<h2 class="text-xl font-bold pt-6 pb-2">All Links</h2>
3-
<table class="table-auto ">
2+
<h2 class="text-xl font-bold pt-6 pb-2">All Links ({{ len . }} total)</h2>
3+
<table class="table-auto w-full max-w-screen-lg">
44
<thead class="border-b border-gray-200 uppercase text-xs text-gray-500 text-left">
5-
<tr>
6-
<th class="p-2">Link</th>
7-
<th class="p-2">Long</th>
8-
<th class="p-2">Owner</th>
9-
<th class="p-2">Created</th>
10-
<th class="p-2">Last Edit</th>
5+
<tr class="flex">
6+
<th class="flex-1 p-2">Link</th>
7+
<th class="hidden md:block w-60 truncate p-2">Owner</th>
8+
<th class="hidden md:block w-32 p-2">Last Edited</th>
119
</tr>
1210
</thead>
1311
<tbody>
1412
{{ range . }}
15-
<tr class="hover:bg-gray-100 group border-b border-gray-200">
16-
<td class="flex">
17-
<a class="block flex-1 p-2 pr-4 hover:text-blue-500 hover:underline" href="/{{ .Short }}">go/{{ .Short }}</a>
18-
<a class="flex items-center px-2 invisible group-hover:visible" title="Link Details" href="/.detail/{{ .Short }}">
19-
<svg class="hover:fill-blue-500" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 24 24" width="1.3em" fill="#000000" stroke-width="2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
20-
</a>
13+
<tr class="flex hover:bg-gray-100 group border-b border-gray-200">
14+
<td class="flex-1 p-2">
15+
<div class="flex">
16+
<a class="flex-1 hover:text-blue-500 hover:underline" href="/{{ .Short }}">go/{{ .Short }}</a>
17+
<a class="flex items-center px-2 invisible group-hover:visible" title="Link Details" href="/.detail/{{ .Short }}">
18+
<svg class="hover:fill-blue-500" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 24 24" width="1.3em" fill="#000000" stroke-width="2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
19+
</a>
20+
</div>
21+
<p class="text-sm leading-normal text-gray-500 group-hover:text-gray-700 max-w-[75vw] md:max-w-[40vw] truncate">{{ .Long }}</p>
22+
<p class="md:hidden text-sm leading-normal text-gray-700"><span class="text-gray-500 inline-block w-20">Owner</span> {{ .Owner }}</p>
23+
<p class="md:hidden text-sm leading-normal text-gray-700"><span class="text-gray-500 inline-block w-20">Last Edited</span> {{ .LastEdit.Format "Jan 2, 2006" }}</p>
2124
</td>
22-
<td class="p-2">{{ .Long }}</td>
23-
<td class="p-2">{{ .Owner }}</td>
24-
<td class="p-2">{{ .Created }}</td>
25-
<td class="p-2">{{ .LastEdit }}</td>
25+
<td class="hidden md:block w-60 truncate p-2">{{ .Owner }}</td>
26+
<td class="hidden md:block w-32 p-2">{{ .LastEdit.Format "Jan 2, 2006" }}</td>
2627
</tr>
2728
{{ end }}
2829
</tbody>
30+
<tfoot>
31+
<tr>
32+
<td class="text-sm text-end text-gray-500 py-2"><a class="hover:underline hover:text-blue-500" href="/.export">Download all links in JSON Lines format.</a></td>
33+
</tr>
34+
</tfoot>
2935
</table>
3036
{{ end }}

‎tmpl/home.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,5 @@ <h2 class="text-xl font-bold pt-6 pb-2">Popular Links</h2>
3535
{{end}}
3636
</tbody>
3737
</table>
38+
<p class="my-2 text-sm"><a class="text-blue-600 hover:underline" href="/.all">See all links.</a></p>
3839
{{ end }}

0 commit comments

Comments
 (0)