From 377165a38fc807892b06f8d06b543703ca20c72d Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Tue, 11 Jun 2024 19:06:56 +0000
Subject: [PATCH] Cleanup commit graph CSS (#4065)

Very little visual changes:
* class `labelled` is not used in CSS, removed from elements
* `margin-right: 0;` in `#git-graph-container .color-buttons` wasn't doing anything
* `width: 100%;` in `#git-graph-container #rev-container` and `#git-graph-container #rev-list` wasn't doing anything
(Checked on both desktop and mobile screens.)
* the now unused class `color-buttons` is left for now because it might come useful later. The button coloring is broken here and I would like to touch it separately
* removed `font-size: 80%;` from dates to ensure proper readability, it wasn't saving much space but was inconvenient to look at because other dates in the UI are normal sized
* the small size of branch labels are left as is for now because removing `small` breaks alignment, and this is a cleanup PR

So, the only visual change is date sizes, other than that there's just styling code removed.

https://codeberg.org/attachments/d02f2771-8517-4b8b-9ac7-76b020f7b14e

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4065
Reviewed-by: Otto <otto@codeberg.org>
---
 templates/repo/graph.tmpl         |  4 ++--
 templates/repo/graph/commits.tmpl |  8 ++++----
 web_src/css/features/gitgraph.css | 10 ----------
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 9eb4bd4ec..93cb5903c 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -45,8 +45,8 @@
 							{{end}}
 						</div>
 					</div>
-					<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
-					<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
+					<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
+					<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
 				</div>
 			</h2>
 			<div class="ui dividing"></div>
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index f141dbead..14da7f68a 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -37,20 +37,20 @@
 							{{if eq $refGroup "pull"}}
 								{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}}
 									<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
-									<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
+									<a class="ui basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
 										{{svg "octicon-git-pull-request"}} #{{.ShortName}}
 									</a>
 								{{end}}
 							{{else if eq $refGroup "tags"}}
-								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
+								<a class="ui basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
 									{{svg "octicon-tag"}} {{.ShortName}}
 								</a>
 							{{else if eq $refGroup "remotes"}}
-								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
+								<a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
 									{{svg "octicon-cross-reference"}} {{.ShortName}}
 								</a>
 							{{else if eq $refGroup "heads"}}
-								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+								<a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
 									{{svg "octicon-git-branch"}} {{.ShortName}}
 								</a>
 							{{else}}
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
index 6a04c44e5..f4a04d8c9 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -10,10 +10,6 @@
   align-items: center;
 }
 
-#git-graph-container .color-buttons {
-  margin-right: 0;
-}
-
 #git-graph-container .ui.header.dividing {
   padding-bottom: 10px;
 }
@@ -69,7 +65,6 @@
 
 #git-graph-container li .time {
   color: var(--color-text-light-3);
-  font-size: 80%;
 }
 
 #git-graph-container li a:not(.ui):hover {
@@ -89,14 +84,9 @@
   float: left;
 }
 
-#git-graph-container #rev-container {
-  width: 100%;
-}
-
 #git-graph-container #rev-list {
   margin: 0;
   padding: 0;
-  width: 100%;
 }
 
 #git-graph-container #rev-list li.highlight.hover {