💄 (ui): Make repo and org list rows fully clickable
Changes
7 files changed, +55 -14
MODIFY
src/main/resources/META-INF/resources/shark.css
+29 -0
@@ -574,6 +574,35 @@
574
574
text-align: left;
575
575
}
576
576
577
+/* full-row click target: the name anchor stretches over the whole row via ::after,
578
+ so clicking anywhere in the row opens the link — not only the name text. Other
579
+ controls in the row (pin buttons) stack above the stretched link. */
580
+tr.row-link {
581
+ position: relative;
582
+}
583
+
584
+td.cell-link {
585
+ padding: 0;
586
+}
587
+
588
+td.cell-link > a {
589
+ display: flex;
590
+ align-items: center;
591
+ gap: var(--s2);
592
+ padding: var(--s3) var(--s4);
593
+}
594
+
595
+tr.row-link td.cell-link > a::after {
596
+ content: "";
597
+ position: absolute;
598
+ inset: 0;
599
+}
600
+
601
+tr.row-link .actions form {
602
+ position: relative;
603
+ z-index: 1;
604
+}
605
+
577
606
th {
578
607
background: var(--accent-soft);
579
608
color: var(--accent-deep);
MODIFY
src/main/resources/templates/HomeResource/dashboard.html
+6 -6
@@ -10,8 +10,8 @@
10
10
<table>
11
11
<tr><th>Repository</th><th>Visibility</th><th></th></tr>
12
12
{#for repo in pinned}
13
- <tr>
14
- <td>{#repoAvatar repo=repo /} <a class="mono" href="/repos/{repo.ownerHandle}/{repo.name}">{repo.ownerHandle}/{repo.name}</a></td>
13
+ <tr class="row-link">
14
+ <td class="cell-link"><a class="mono" href="/repos/{repo.ownerHandle}/{repo.name}">{#repoAvatar repo=repo /} {repo.ownerHandle}/{repo.name}</a></td>
15
15
<td><span class="badge badge-{repo.visibility.name().toLowerCase()}">{repo.visibility.name().toLowerCase()}</span></td>
16
16
<td class="actions">
17
17
<form class="inline" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/unpin">
@@ -33,8 +33,8 @@
33
33
<table>
34
34
<tr><th>Organisation</th><th>Your role</th></tr>
35
35
{#for membership in orgs}
36
- <tr>
37
- <td><span class="av-fallback">{membership.organisation.name.charAt(0)}</span> <a class="mono" href="/orgs/{membership.organisation.name}">{membership.organisation.name}</a></td>
36
+ <tr class="row-link">
37
+ <td class="cell-link"><a class="mono" href="/orgs/{membership.organisation.name}"><span class="av-fallback">{membership.organisation.name.charAt(0)}</span> {membership.organisation.name}</a></td>
38
38
<td><span class="badge">{membership.role.name().toLowerCase()}</span></td>
39
39
</tr>
40
40
{/for}
@@ -64,8 +64,8 @@
64
64
<table>
65
65
<tr><th>Repository</th><th>Visibility</th><th>Description</th><th></th></tr>
66
66
{#for row in repositories}
67
- <tr>
68
- <td>{#repoAvatar repo=row.repo /} <a class="mono" href="/repos/{row.repo.ownerHandle}/{row.repo.name}">{row.repo.ownerHandle}/{row.repo.name}</a></td>
67
+ <tr class="row-link">
68
+ <td class="cell-link"><a class="mono" href="/repos/{row.repo.ownerHandle}/{row.repo.name}">{#repoAvatar repo=row.repo /} {row.repo.ownerHandle}/{row.repo.name}</a></td>
69
69
<td><span class="badge badge-{row.repo.visibility.name().toLowerCase()}">{row.repo.visibility.name().toLowerCase()}</span></td>
70
70
<td class="muted">{row.repo.description ?: ''}</td>
71
71
<td class="actions">
MODIFY
src/main/resources/templates/HomeResource/home.html
+2 -2
@@ -21,8 +21,8 @@
21
21
<table>
22
22
<tr><th>Repository</th><th>Visibility</th><th>Description</th></tr>
23
23
{#for repo in repositories}
24
- <tr>
25
- <td>{#repoAvatar repo=repo /} <a class="mono" href="/repos/{repo.ownerHandle}/{repo.name}">{repo.ownerHandle}/{repo.name}</a></td>
24
+ <tr class="row-link">
25
+ <td class="cell-link"><a class="mono" href="/repos/{repo.ownerHandle}/{repo.name}">{#repoAvatar repo=repo /} {repo.ownerHandle}/{repo.name}</a></td>
26
26
<td><span class="badge badge-{repo.visibility.name().toLowerCase()}">{repo.visibility.name().toLowerCase()}</span></td>
27
27
<td class="muted">{repo.description ?: ''}</td>
28
28
</tr>
MODIFY
src/main/resources/templates/OrganisationResource/org.html
+2 -2
@@ -16,8 +16,8 @@
16
16
<table>
17
17
<tr><th>Repository</th><th>Visibility</th><th>Description</th></tr>
18
18
{#for repo in repos}
19
- <tr>
20
- <td>{#repoAvatar repo=repo /} <a class="mono" href="/repos/{repo.ownerHandle}/{repo.name}">{repo.name}</a></td>
19
+ <tr class="row-link">
20
+ <td class="cell-link"><a class="mono" href="/repos/{repo.ownerHandle}/{repo.name}">{#repoAvatar repo=repo /} {repo.name}</a></td>
21
21
<td><span class="badge badge-{repo.visibility.name().toLowerCase()}">{repo.visibility.name().toLowerCase()}</span></td>
22
22
<td class="muted">{repo.description ?: ''}</td>
23
23
</tr>
MODIFY
src/test/java/de/workaround/web/DashboardTest.java
+4 -1
@@ -62,7 +62,10 @@
62
62
given().when().get("/").then().statusCode(200)
63
63
.body(not(containsString("No pinned repositories yet")))
64
64
.body(containsString("/repos/dash-pin/pinme/unpin"))
65
- .body(containsString("Unpin repository"));
65
+ .body(containsString("Unpin repository"))
66
+ // pinned and all-repositories rows are full-row click targets (stretched link)
67
+ .body(containsString("class=\"row-link\""))
68
+ .body(containsString("class=\"cell-link\""));
66
69
67
70
given().redirects().follow(false)
68
71
.contentType(ContentType.URLENC).formParam("redirect", "/")
MODIFY
src/test/java/de/workaround/web/OrganisationUiTest.java
+8 -2
@@ -103,7 +103,10 @@
103
103
.when().get("/orgs/" + org.name)
104
104
.then().statusCode(200)
105
105
.body(containsString("org-public"))
106
- .body(not(containsString("org-secret")));
106
+ .body(not(containsString("org-secret")))
107
+ // org repo rows are full-row click targets (stretched link)
108
+ .body(containsString("class=\"row-link\""))
109
+ .body(containsString("class=\"cell-link\""));
107
110
}
108
111
109
112
@Test
@@ -273,7 +276,10 @@
273
276
given()
274
277
.when().get("/")
275
278
.then().statusCode(200)
276
- .body(containsString("/orgs/" + org.name));
279
+ .body(containsString("/orgs/" + org.name))
280
+ // organisation rows are full-row click targets (stretched link)
281
+ .body(containsString("class=\"row-link\""))
282
+ .body(containsString("class=\"cell-link\""));
277
283
}
278
284
279
285
@Test
MODIFY
src/test/java/de/workaround/web/WebUiTest.java
+4 -1
@@ -37,7 +37,10 @@
37
37
.then()
38
38
.statusCode(200)
39
39
.body(containsString("ui-pub"))
40
- .body(not(containsString("ui-priv")));
40
+ .body(not(containsString("ui-priv")))
41
+ // repo rows are full-row click targets (stretched link)
42
+ .body(containsString("class=\"row-link\""))
43
+ .body(containsString("class=\"cell-link\""));
41
44
}
42
45
43
46
@Test