From 8703b6c954893b74a0f97aaa8079c968a4d245cc Mon Sep 17 00:00:00 2001 From: yp05327 <576951401@qq.com> Date: Wed, 16 Aug 2023 07:44:43 +0900 Subject: [PATCH] Improve clickable area in repo action view page (#26115) Before: ![image](https://github.com/go-gitea/gitea/assets/18380374/52e4dda1-0221-440b-93e1-242db8bd5885) After: ![image](https://github.com/go-gitea/gitea/assets/18380374/dda5e72b-205e-44f7-b4a9-83703021f2d1) In current design, the clickable area is too small, and it is hard to find the correct clickable area as the area with background color (div with class name `job-brief-item selected`) is bigger than it. --------- Co-authored-by: Giteabot --- web_src/js/components/RepoActionView.vue | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 929e971b6..2318e7fc7 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -32,16 +32,16 @@
-
- + + + {{ job.duration }} -
+
@@ -575,6 +575,7 @@ export function initRepositoryActionView() { flex-wrap: nowrap; justify-content: space-between; align-items: center; + color: var(--color-text); } .job-brief-item:hover { @@ -599,28 +600,23 @@ export function initRepositoryActionView() { transform: scale(130%); } -.job-brief-item .job-brief-link { +.job-brief-item .job-brief-item-left { display: flex; width: 100%; min-width: 0; } -.job-brief-item .job-brief-link span { +.job-brief-item .job-brief-item-left span { display: flex; align-items: center; } -.job-brief-item .job-brief-link .job-brief-name { +.job-brief-item .job-brief-item-left .job-brief-name { display: block; width: 70%; - color: var(--color-text); } -.job-brief-item .job-brief-link:hover { - text-decoration: none; -} - -.job-brief-item .job-brief-info { +.job-brief-item .job-brief-item-right { display: flex; align-items: center; }