gitshow

commit e8e68786091bc86e0a270ba237dfc067d8590f39
parent 748962981362d1c4de755d24d72f09a0b06319d9
Author: Thomas Vigouroux <thomas.vigouroux@univ-grenoble-alpes.fr>
Date:   Wed, 10 Apr 2024 19:11:32 +0200

feat: better style for log/tree pages

Diffstat:
M
static/style.css
 | 
72
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
M
templates/log.html
 | 
2
+-
M
templates/tree.html
 | 
1
+

3 files changed, 66 insertions(+), 9 deletions(-)
diff --git a/static/style.css b/static/style.css
@@ -1,17 +1,55 @@
 :root {
   font-family: monospace;
-  --chroma-kw: #ff0000;
-}
+  --color-gray: #D7D9D7;
+  --color-lightgreen: #109648;
+  --color-green: #334139;
+  --color-purple: #8A4FFF;
+  --color-lightpurple: #D6C2FF;
+  --color-brown: #6E4555;
 
-button.selected {
-  background: #00FF00;
+  --chroma-kw: var(--color-purple);
+  --chroma-const: var(--color-lightgreen);
 }
 
+/* Tree page */
 .tree-file {
   cursor: pointer;
 }
+
 .tree-file:hover {
-  color: blue;
+  transition: 0.1s;
+  color: var(--color-purple);
+}
+
+.tree-kind {
+  color: gray;
+  padding-right: 10px;
+}
+
+/* Commit page */
+.commit-hash {
+  color: gray;
+  padding-right: 20px;
+}
+
+/* Inspired from HTMX tab example */
+.tab-list {
+  border-bottom: solid 3px lightgray;
+}
+
+.tab-list button {
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.tab-list button:hover {
+  color: var(--color-purple);
+  transition: 0.1s;
+}
+
+.tab-list button.selected {
+  background: lightgray;
 }
 
 /* Chroma related styles for file highlighting */
@@ -21,12 +59,30 @@ button.selected {
   color: gray;
 }
 
+.chroma .lnlinks:hover {
+  color: var(--color-purple);
+  transition: 0.1s;
+}
+
+/* This allows to easily see the link that has a link to it */
+.chroma span.line:has(span.ln:target) {
+   background-color: var(--color-lightpurple);
+}
+
 .chroma .k {
   color: var(--chroma-kw);
 }
 
 .chroma .kc {
-  color: var(--chroma-kw);
+  color: var(--chroma-const);
+}
+
+.chroma .s {
+  color: var(--chroma-const);
+}
+
+.chroma .o {
+  color: var(--color-brown);
 }
 
 .chroma .kd {
@@ -45,6 +101,6 @@ button.selected {
   color: var(--chroma-kw);
 }
 
-:target {
-   background-color: #ffa;
+.chroma .c1 {
+  color: gray;
 }
diff --git a/templates/log.html b/templates/log.html
@@ -7,7 +7,7 @@
 <table>
 {{range .Commits}}
   <tr>
-    <td>{{.ShortId}}</td>
+    <td class="commit-hash">{{.ShortId}}</td>
     <td>{{.Message}}</td>
   </tr>
 {{end}}
diff --git a/templates/tree.html b/templates/tree.html
@@ -9,6 +9,7 @@
 	<table>
 	{{range .Entries}}
 		<tr>
+      <td class="tree-kind">{{if isFile .}}F{{else}}D{{end}}</div>
 			<td><div{{if isFile .}} hx-push-url="true" class="tree-file" hx-get="/repos/{{$repoName}}/file/{{$branchName}}/{{.Name}}"{{end}}>{{.Name}}</div></td>
 		</tr>
 	{{end}}