pub / stagit-scripts

commit 568cac8db6b48e7007c7bf7e4562ce2b676c6513
parent e7aff9b9773d6b94c3eb52ad16f6d73fb351a4d9
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Sat,  8 Jun 2024 13:00:17 +0200

feat: modern table layout

this greatly improves visibility, particularly on mobile devices

Diffstat:
M
assets/style.css
 | 
112
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---

1 file changed, 109 insertions(+), 3 deletions(-)
diff --git a/assets/style.css b/assets/style.css
@@ -89,9 +89,9 @@ pre a.h {
     text-decoration: none;
 }
 
-table thead td {
+/*table thead td {
     font-weight: bold;
-}
+}*/
 
 table td {
     padding: 0 0.4em;
@@ -99,7 +99,7 @@ table td {
 
 #content table td, #content table th {
     vertical-align: top;
-    white-space: nowrap !important;
+    /*white-space: nowrap !important;*/
     /* Makes navigation easier on mobile */
     padding-bottom: 0.25em !important;
     padding-top: 0.25em !important;
@@ -173,3 +173,109 @@ pre a.d:hover {
 #activitylegend {
     font-size: 0.8em;
 }
+
+/* Modern Layout scheme ----------------------------------------------------- */
+
+/* Ensure Tables are full width */
+table#index,
+table#log,
+table#branches
+{
+    width:100%
+}
+
+/* Hide Table headlines */
+#index > thead > tr > td,
+#log > thead > tr > td,
+#branches > thead > tr > td
+{
+    display: none;
+}
+
+/* Make table rows vartical with full width */
+#index > tbody > tr > td,
+#log > tbody > tr > td,
+#branches > tbody > tr > td
+{
+    display:inline-block;
+    padding: 0;
+    width: 100%;
+    background: var(--bg1);
+}
+
+/* Ensure table rows are full with with normal background */
+#index > tbody > tr,
+#log > tbody > tr,
+#branches > tbody > tr
+{
+    width: 100%;
+    background: var(--bg1);
+}
+#index > tbody > tr:hover,
+#log > tbody > tr:hover,
+#branches > tbody > tr:hover
+{
+    background: var(--bg2);
+}
+
+/* Ensure all table entries are left-aligned */
+#index > tbody > tr > td,
+#log > tbody > tr > td
+#branches > tbody > tr > td
+{
+    text-align: left;
+}
+
+/* Mark first entrie of each table row as headline */
+#index > tbody > tr > td:nth-child(1),
+#log > tbody > tr > td:nth-child(1),
+#branches > tbody > tr > td:nth-child(1)
+{
+    border-top: 1px solid var(--bg2);
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+/* Secondary information in each row should be smaller */
+#index > tbody > tr > td:nth-child(3),
+#index > tbody > tr > td:nth-child(4),
+#log > tbody > tr > td:nth-child(3),
+#branches > tbody > tr > td:nth-child(3)
+ {
+    font-size: 0.8em;
+}
+
+/* Add descriptor to username entry */
+#index > tbody > tr > td:nth-child(3):before,
+#log > tbody > tr > td:nth-child(3):before,
+#branches > tbody > tr > td:nth-child(3):before
+{
+    content: "User: ";
+}
+
+/* Add descriptor to commit date */
+#index > tbody > tr > td:nth-child(4):before,
+#log > tbody > tr x> td:nth-child(1):before,
+#branches > tbody > tr > td:nth-child(2):before
+{
+    content: "Last Commit: ";
+}
+
+/* File change indicators should be in a single row */
+#log > tbody > tr > td:nth-child(4),
+#log > tbody > tr > td:nth-child(5),
+#log > tbody > tr > td:nth-child(6) {
+    width: auto;
+    margin-right: 1em;
+}
+
+/* Add descriptors to file change indicators */
+#log > tbody > tr > td:nth-child(4):before {
+    content: "Modified: ";
+}
+#log > tbody > tr > td:nth-child(5):before {
+    content: "Added: ";
+}
+#log > tbody > tr > td:nth-child(6):before {
+    content: "Removed: ";
+}