~emersion/public-inbox

Improve layout on tabular pages v1 APPLIED

Drew DeVault: 1
 Improve layout on tabular pages

 5 files changed, 152 insertions(+), 145 deletions(-)
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
View this thread in the archives

[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