~emersion/drmdb

971340a0d0b7c094f9566da99a46cadcbc762c2f — Drew DeVault 2 years ago 23cd002 
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"}}