~emersion/public-inbox

Improve layout on tabular pages v1 PROPOSED

Pushed, thanks!

To git.sr.ht:~emersion/drmdb
   23cd002cfad8..971340a0d0b7  master -> master
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~emersion/public-inbox/patches/8511/mbox | git am -3
Learn more about email & git

[PATCH] Improve layout on tabular pages Export this patch

---
 public/assets/style.css  |  13 ++++-
 public/capabilities.html | 106 ++++++++++++++++++++-------------------
 public/formats.html      |  80 +++++++++++++++--------------
 public/properties.html   |  66 ++++++++++++------------
 public/property.html     |  32 +++++-------
 5 files changed, 152 insertions(+), 145 deletions(-)

diff --git a/public/assets/style.css b/public/assets/style.css
index 8bee2e9..149e88e 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -42,11 +42,11 @@ thead a, thead a:active, thead a:visited {
     color: white;
 }
 
-td.status-supported {
+.status-supported {
     color: green;
 }
 
-td.status-unsupported {
+.status-unsupported {
     color: red;
 }
 
@@ -118,3 +118,12 @@ dt {
 dd.muted {
     color: gray;
 }
+
+.driver-support {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.driver-support > div {
+  min-width: 25%;
+}
diff --git a/public/capabilities.html b/public/capabilities.html
index b36f790..8d8c2e3 100644
--- a/public/capabilities.html
+++ b/public/capabilities.html
@@ -1,61 +1,63 @@
 {{template "head" "Capabilities"}}
 
-<h1>DRM database capabilities</h1>
+<div style="margin: 0">
+  <h1>DRM database capabilities</h1>
 
-<p><a href="/">Back to index</a></p>
+  <p><a href="/">Back to index</a></p>
 
-<h2>Driver capabilities</h2>
+  <h2>Driver capabilities</h2>
 
-<table>
-    <thead>
-        <tr>
-            <th>Capability</th>
-            {{range .Drivers}}
-            <th>{{.}}</th>
-            {{end}}
-        </tr>
-    </thead>
-    <tbody>
-        {{range $name, $drivers := .Caps}}
-        <tr>
-            <td class="pre">{{$name}}</td>
-            {{range $.Drivers}}
-            {{if index $drivers .}}
-            <td>{{index $drivers .}}</td>
-            {{else}}
-            <td>✗</td>
-            {{end}}
-            {{end}}
-        </tr>
-        {{end}}
-    </tbody>
-</table>
+  <table>
+      <thead>
+          <tr>
+              <th>Capability</th>
+              {{range .Drivers}}
+              <th>{{.}}</th>
+              {{end}}
+          </tr>
+      </thead>
+      <tbody>
+          {{range $name, $drivers := .Caps}}
+          <tr>
+              <td class="pre">{{$name}}</td>
+              {{range $.Drivers}}
+              {{if index $drivers .}}
+              <td>{{index $drivers .}}</td>
+              {{else}}
+              <td>✗</td>
+              {{end}}
+              {{end}}
+          </tr>
+          {{end}}
+      </tbody>
+  </table>
 
-<h2>Client capabilities</h2>
+  <h2>Client capabilities</h2>
 
-<table>
-    <thead>
-        <tr>
-            <th>Client capability</th>
-            {{range .Drivers}}
-            <th>{{.}}</th>
-            {{end}}
-        </tr>
-    </thead>
-    <tbody>
-        {{range $name, $drivers := .ClientCaps}}
-        <tr>
-            <td class="pre">{{$name}}</td>
-            {{range $.Drivers}}
-            {{if index $drivers .}}
-            <td class="status-supported">✓</td>
-            {{else}}
-            <td class="status-unsupported">✗</td>
-            {{end}}
-            {{end}}
-        </tr>
-        {{end}}
-    </tbody>
-</table>
+  <table>
+      <thead>
+          <tr>
+              <th>Client capability</th>
+              {{range .Drivers}}
+              <th>{{.}}</th>
+              {{end}}
+          </tr>
+      </thead>
+      <tbody>
+          {{range $name, $drivers := .ClientCaps}}
+          <tr>
+              <td class="pre">{{$name}}</td>
+              {{range $.Drivers}}
+              {{if index $drivers .}}
+              <td class="status-supported">✓</td>
+              {{else}}
+              <td class="status-unsupported">✗</td>
+              {{end}}
+              {{end}}
+          </tr>
+          {{end}}
+      </tbody>
+  </table>
+</div>
 
 {{template "foot"}}
diff --git a/public/formats.html b/public/formats.html
index 3ce9fae..6db3c7d 100644
--- a/public/formats.html
+++ b/public/formats.html
@@ -1,45 +1,47 @@
 {{template "head" "Formats"}}
 
-<h1>DRM database formats</h1>
+<div style="margin: 0">
+  <h1>DRM database formats</h1>
 
-<p><a href="/">Back to index</a></p>
+  <p><a href="/">Back to index</a></p>
 
-<h2 id="in-formats">Input formats</h2>
+  <h2 id="in-formats">Input formats</h2>
 
-{{define "pct-cell"}}
-    <td style="color: {{pctColor .}};">{{printf "%.0f%%" .}}</td>
-{{end}}
+  {{define "pct-cell"}}
+      <td style="color: {{pctColor .}};">{{printf "%.0f%%" .}}</td>
+  {{end}}
 
-<table>
-    <thead>
-        <tr>
-            <th rowspan="2">Modifier</th>
-            <th rowspan="2">Format</th>
-            <th colspan="{{len .Planes}}">Planes</th>
-            <th colspan="{{len .Drivers}}">Drivers</th>
-        </tr>
-        <tr>
-            {{range $plane, $_ := .Planes}}
-            <th><a href="?plane={{printf "%d" $plane}}">{{$plane.String}}</a></th>
-            {{end}}
-            {{range $drv, $_ := .Drivers}}
-            <th><a href="?driver={{$drv}}">{{$drv}}</a></th>
-            {{end}}
-        </tr>
-    </thead>
-    <tbody>
-        {{range .Formats}}
-        <tr>
-            {{$row := .}}
-            <td class="pre">{{.Modifier}}</td>
-            <td class="pre">{{.Format}}</td>
-            {{range $plane, $total := $.Planes}}
-            {{template "pct-cell" (pct (index $row.Planes $plane) $total)}}
-            {{end}}
-            {{range $drv, $total := $.Drivers}}
-            {{template "pct-cell" (pct (index $row.Drivers $drv) $total)}}
-            {{end}}
-        </tr>
-        {{end}}
-    </tbody>
-</table>
+  <table>
+      <thead>
+          <tr>
+              <th rowspan="2">Modifier</th>
+              <th rowspan="2">Format</th>
+              <th colspan="{{len .Planes}}">Planes</th>
+              <th colspan="{{len .Drivers}}">Drivers</th>
+          </tr>
+          <tr>
+              {{range $plane, $_ := .Planes}}
+              <th><a href="?plane={{printf "%d" $plane}}">{{$plane.String}}</a></th>
+              {{end}}
+              {{range $drv, $_ := .Drivers}}
+              <th><a href="?driver={{$drv}}">{{$drv}}</a></th>
+              {{end}}
+          </tr>
+      </thead>
+      <tbody>
+          {{range .Formats}}
+          <tr>
+              {{$row := .}}
+              <td class="pre">{{.Modifier}}</td>
+              <td class="pre">{{.Format}}</td>
+              {{range $plane, $total := $.Planes}}
+              {{template "pct-cell" (pct (index $row.Planes $plane) $total)}}
+              {{end}}
+              {{range $drv, $total := $.Drivers}}
+              {{template "pct-cell" (pct (index $row.Drivers $drv) $total)}}
+              {{end}}
+          </tr>
+          {{end}}
+      </tbody>
+  </table>
+</div>
diff --git a/public/properties.html b/public/properties.html
index da86499..8768e75 100644
--- a/public/properties.html
+++ b/public/properties.html
@@ -1,38 +1,40 @@
 {{template "head" "Properties"}}
 
-<h1>DRM database properties</h1>
+<div style="margin: 0">
+  <h1>DRM database properties</h1>
 
-<p><a href="/">Back to index</a></p>
+  <p><a href="/">Back to index</a></p>
 
-<table>
-    <thead>
-        <tr>
-            <th>Property</th>
-            <th>Type</th>
-            <th>Attached to</th>
-            {{range $name, $_ := .Drivers}}
-            <th>{{$name}}</th>
-            {{end}}
-        </tr>
-    </thead>
-    <tbody>
-        {{range $name, $prop := .Properties}}
-        <tr>
-            <td class="pre">
-                <a href="/properties/{{printf "%d" ($prop.ObjectType)}}/{{$name}}">{{$name}}</a>
-            </td>
-            <td>{{$prop.Type}}</td>
-            <td>{{$prop.ObjectType}}</td>
-            {{range $drv, $_ := $.Drivers}}
-            {{if index $prop.Drivers $drv}}
-            <td class="status-supported">✓</td>
-            {{else}}
-            <td class="status-unsupported">✗</td>
-            {{end}}
-            {{end}}
-        </tr>
-        {{end}}
-    </tbody>
-</table>
+  <table>
+      <thead>
+          <tr>
+              <th>Property</th>
+              <th>Type</th>
+              <th>Attached to</th>
+              {{range $name, $_ := .Drivers}}
+              <th>{{$name}}</th>
+              {{end}}
+          </tr>
+      </thead>
+      <tbody>
+          {{range $name, $prop := .Properties}}
+          <tr>
+              <td class="pre">
+                  <a href="/properties/{{printf "%d" ($prop.ObjectType)}}/{{$name}}">{{$name}}</a>
+              </td>
+              <td>{{$prop.Type}}</td>
+              <td>{{$prop.ObjectType}}</td>
+              {{range $drv, $_ := $.Drivers}}
+              {{if index $prop.Drivers $drv}}
+              <td class="status-supported">✓</td>
+              {{else}}
+              <td class="status-unsupported">✗</td>
+              {{end}}
+              {{end}}
+          </tr>
+          {{end}}
+      </tbody>
+  </table>
+</div>
 
 {{template "foot"}}
diff --git a/public/property.html b/public/property.html
index 154fde3..45a943a 100644
--- a/public/property.html
+++ b/public/property.html
@@ -33,25 +33,17 @@
 
 <h2>Driver support</h2>
 
-<table>
-    <thead>
-        <tr>
-            {{range $name, $_ := .Drivers}}
-            <th>{{$name}}</th>
-            {{end}}
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            {{range $name, $ok := .Drivers}}
-            {{if $ok}}
-            <td class="status-supported">✓</td>
-            {{else}}
-            <td class="status-unsupported">✗</td>
-            {{end}}
-            {{end}}
-        </tr>
-    </tbody>
-</table>
+<div class="driver-support">
+{{range $name, $ok := .Drivers}}
+  <div>
+    {{if $ok}}
+    <span class="status-supported">✓</span>
+    {{else}}
+    <span class="status-unsupported">✗</span>
+    {{end}}
+    {{$name}}
+  </div>
+{{end}}
+</div>
 
 {{template "foot"}}
-- 
2.23.0
Pushed, thanks!

To git.sr.ht:~emersion/drmdb
   23cd002cfad8..971340a0d0b7  master -> master
View this thread in the archives