971340a0d0b7c094f9566da99a46cadcbc762c2f — Drew DeVault a month ago 23cd002 master 
Improve layout on tabular pages
patch browse 
5 files changed, 152 insertions(+), 145 deletions(-)

M public/assets/style.css
M public/capabilities.html
M public/formats.html
M public/properties.html
M public/property.html

M public/assets/style.css => public/assets/style.css +11 -2
@@ 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%;
+}


M public/capabilities.html => public/capabilities.html +54 -52
@@ 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"}}


M public/formats.html => public/formats.html +41 -39
@@ 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>


M public/properties.html => public/properties.html +34 -32
@@ 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"}}


M public/property.html => public/property.html +12 -20
@@ 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"}}