gitshow

commit 368438971480f65deb324c7d565f1f488d1e7963
parent e8e68786091bc86e0a270ba237dfc067d8590f39
Author: Thomas Vigouroux <thomas.vigouroux@univ-grenoble-alpes.fr>
Date:   Wed, 10 Apr 2024 19:28:24 +0200

feat: better tablist

Diffstat:
M
static/style.css
 | 
12
++++++++----
M
templates/file.html
 | 
2
+-
M
templates/log.html
 | 
2
+-
M
templates/repo.html
 | 
2
+-
M
templates/tree.html
 | 
2
+-

5 files changed, 12 insertions(+), 8 deletions(-)
diff --git a/static/style.css b/static/style.css
@@ -33,22 +33,26 @@
 }
 
 /* Inspired from HTMX tab example */
-.tab-list {
+#tab-list {
+  padding-right: 80%;
+  display: flex;
   border-bottom: solid 3px lightgray;
 }
 
-.tab-list button {
+#tab-list button {
+  flex: 1;
   border: none;
+  margin: 0 10px;
   padding: 5px 10px;
   cursor: pointer;
 }
 
-.tab-list button:hover {
+#tab-list button:hover {
   color: var(--color-purple);
   transition: 0.1s;
 }
 
-.tab-list button.selected {
+#tab-list button.selected {
   background: lightgray;
 }
 
diff --git a/templates/file.html b/templates/file.html
@@ -1,5 +1,5 @@
 {{define "file_content"}}
-<div class="tab-list" role="tablist" hx-push-url="true">
+<div id="tab-list" role="tablist" hx-push-url="true">
   <button hx-get="/repos/{{.Name}}">about</button>
   <button hx-get="/repos/{{.Name}}/log">log</button>
   <button hx-get="/repos/{{.Name}}/tree/{{.Branch.Shorthand}}">tree</button>
diff --git a/templates/log.html b/templates/log.html
@@ -1,5 +1,5 @@
 {{define "log_content"}}
-<div class="tab-list" role="tablist" hx-push-url="true">
+<div id="tab-list" role="tablist" hx-push-url="true">
   <button hx-get="/repos/{{.Name}}">about</button>
   <button hx-get="/repos/{{.Name}}/log" class="selected">log</button>
   <button hx-get="/repos/{{.Name}}/tree">tree</button>
diff --git a/templates/repo.html b/templates/repo.html
@@ -1,5 +1,5 @@
 {{define "repo_content"}}
-<div class="tab-list" role="tablist" hx-push-url="true">
+<div id="tab-list" role="tablist" hx-push-url="true">
   <button hx-get="/repos/{{.Name}}" class="selected">about</button>
   <button hx-get="/repos/{{.Name}}/log">log</button>
   <button hx-get="/repos/{{.Name}}/tree/{{.Repo.Head.Shorthand}}">tree</button>
diff --git a/templates/tree.html b/templates/tree.html
@@ -1,5 +1,5 @@
 {{define "tree_content"}}
-<div class="tab-list" role="tablist" hx-push-url="true">
+<div id="tab-list" role="tablist" hx-push-url="true">
   <button hx-get="/repos/{{.Name}}">about</button>
   <button hx-get="/repos/{{.Name}}/log">log</button>
   <button hx-get="/repos/{{.Name}}/tree/{{.Branch.Shorthand}}" class="selected">tree</button>