Commit

Author:

Hash:

Timestamp:

+26 -53 +/-4 browse

Kevin Schoon [me@kevinschoon.com]

261be7925b052a963ce64ece2b4493a6c945a815

Fri, 16 May 2025 21:49:12 +0000 (6 months ago)

fixup table on small displays
1diff --git a/ayllu/templates/repo.html b/ayllu/templates/repo.html
2index 580d11e..e0986aa 100644
3--- a/ayllu/templates/repo.html
4+++ b/ayllu/templates/repo.html
5 @@ -58,13 +58,14 @@
6 </section>
7 {% call macros::selectable_text("ref", refname) %}
8 </section>
9+ <div class="scrollable">
10 <table class="data-table">
11 <thead>
12 <tr>
13 <th scope="col">File</th>
14- <th class="collapse-xs" scope="col">Commit</th>
15- <th class="collapse" scope="col">Size</th>
16- <th class="collapse" scope="col">Mode</th>
17+ <th scope="col">Commit</th>
18+ <th scope="col">Size</th>
19+ <th scope="col">Mode</th>
20 <th scope="col">Time</th>
21 </tr>
22 </thead>
23 @@ -78,11 +79,11 @@
24 {% if item.0.kind == "pointer" %}<span class="tiny">ptr</span>{% endif %}
25 </a>
26 </td>
27- <td class="collapse-xs">
28+ <td>
29 <a href="/{{ collection }}/{{ name }}/commit/{{ item.1.id }}">{{ item.1.summary | truncate(length=60) }}</a>
30 </td>
31- <td class="collapse">{{ item.0.size | human_bytes_i64 }}</td>
32- <td class="collapse">{{ item.0.mode | file_mode }}</td>
33+ <td>{{ item.0.size | human_bytes_i64 }}</td>
34+ <td>{{ item.0.mode | file_mode }}</td>
35 <td>
36 <a href="/{{ collection }}/{{ name }}/commit/{{ item.1.id }}">{{ item.1.epoch | friendly_time }}</a>
37 </td>
38 @@ -91,6 +92,7 @@
39 </tbody>
40 </table>
41 </section>
42+ </div>
43 {% if let Some(readme) = readme %}
44 <section class="raised">
45 {% if let Some(file_name) = rendered_file_name %}
46 diff --git a/ayllu/themes/base.css b/ayllu/themes/base.css
47index 8bd4c1b..1a6f2c6 100644
48--- a/ayllu/themes/base.css
49+++ b/ayllu/themes/base.css
50 @@ -303,42 +303,13 @@ section.lower-half {
51 border-radius: unset;
52 }
53
54- section#tree {
55- table {
56- border-collapse: collapse;
57- border: solid 2px;
58- background: none;
59- white-space: nowrap;
60- font-family: monospace;
61- font-size: 120%;
62- }
63-
64- table :is(td, th) {
65- padding: 0;
66- /* border-block: 10px solid pink; */
67- border-radius: 0;
68- white-space: nowrap;
69- text-align: start;
70- }
71-
72- table :is(td, th):nth-child(1) {
73- padding-left: 5px;
74- }
75-
76- table :is(td, th):nth-child(5) {
77- padding-right: 5px;
78- }
79-
80- table :is(td, th):nth-child(2) {
81- overflow: hidden;
82- max-inline-size: 70ch;
83- white-space: nowrap;
84- text-overflow: ellipsis;
85- }
86-
87- table :is(td, th):last-of-type {
88- text-align: end;
89- }
90+ table.data-table {
91+ border-collapse: collapse;
92+ border: solid 2px;
93+ background: none;
94+ white-space: nowrap;
95+ font-family: monospace;
96+ font-size: 120%;
97 }
98
99 code.highlighted {
100 diff --git a/ayllu/themes/catppuccin.css b/ayllu/themes/catppuccin.css
101index 9f8cc76..3cb8c96 100644
102--- a/ayllu/themes/catppuccin.css
103+++ b/ayllu/themes/catppuccin.css
104 @@ -81,16 +81,16 @@ nav .subnav {
105 background-color: var(--ctp-latte-mantle);
106 }
107
108- .data-table thead {
109+ table.data-table thead {
110 color: var(--ctp-latte-surface0);
111 background-color: var(--ctp-latte-lavender);
112 }
113
114- .data-table tbody tr:nth-child(odd) {
115+ table.data-table tbody tr:nth-child(odd) {
116 background-color: var(--ctp-latte-surface0);
117 }
118
119- .data-table tbody tr:nth-child(even) {
120+ table.data-table tbody tr:nth-child(even) {
121 background-color: var(--ctp-latte-surface1);
122 }
123
124 @@ -245,16 +245,16 @@ span.ts_addition {
125 }
126 }
127
128- .data-table thead {
129+ table.data-table thead {
130 color: var(--ctp-mocha-surface0);
131 background-color: var(--ctp-mocha-lavender);
132 }
133
134- .data-table tbody tr:nth-child(odd) {
135+ table.data-table tbody tr:nth-child(odd) {
136 background-color: var(--ctp-mocha-surface1);
137 }
138
139- .data-table tbody tr:nth-child(even) {
140+ table.data-table tbody tr:nth-child(even) {
141 background-color: var(--ctp-mocha-surface2);
142 }
143
144 diff --git a/ayllu/themes/nord.css b/ayllu/themes/nord.css
145index d7be16a..bbcc218 100644
146--- a/ayllu/themes/nord.css
147+++ b/ayllu/themes/nord.css
148 @@ -45,15 +45,15 @@ nav.subnav {
149 background-color: var(--nord2);
150 }
151
152- .data-table tbody tr:nth-child(odd) {
153+ table.data-table tbody tr:nth-child(odd) {
154 background-color: var(--nord5);
155 }
156
157- .data-table tbody tr:nth-child(even) {
158+ table.data-table tbody tr:nth-child(even) {
159 background-color: var(--nord6);
160 }
161
162- section#tree > table > thead {
163+ table.data-table thead {
164 color: var(--nord4);
165 background-color: var(--nord10);
166 }
167 @@ -221,11 +221,11 @@ span.ts_addition {
168 background-color: var(--nord2);
169 }
170
171- .data-table tbody tr:nth-child(odd) {
172+ table.data-table tbody tr:nth-child(odd) {
173 background-color: var(--nord1);
174 }
175
176- .data-table tbody tr:nth-child(even) {
177+ table.data-table tbody tr:nth-child(even) {
178 background-color: var(--nord2);
179 }
180