diff options
| author |  Abhinav Gupta <mail@abhinavg.net>
| 2023-01-23 09:41:20 -0800 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-01-23 09:41:20 -0800 |
| commit | cb4081162b75508710f625b5b8dac0c48c813355 (patch) | |
| tree | 2360a835652caa2b1cd0db8b73b7524e55c2b3f8 /templates | |
| parent | 24b0c32c0a0aeabc2131361f9bacaeaec8988ada (diff) | |
| download | sally-cb4081162b75508710f625b5b8dac0c48c813355.tar.gz sally-cb4081162b75508710f625b5b8dac0c48c813355.tar.zst sally-cb4081162b75508710f625b5b8dac0c48c813355.zip | |
template: Use a more fluid layout (#67)
Instead of using a table, take advantage of the grid layout.
We still print a table of sorts,
but it's more fluid in appearance based on width of the screen.
On narrower screens, we'll show a listing
where each item has a description label next to it
rather than at the top.
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 68 |
1 files changed, 39 insertions, 29 deletions
diff --git a/templates/index.html b/templates/index.html index 317d403..3fc210c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,38 +3,48 @@ <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" /> </head> + <style> + .separator { + margin: 0.25em 0; + } + + /* On narrow screens, switch to inline headers. */ + .table-header { display: none; } + .inline-header { font-weight: bold; } + @media (min-width: 550px) { + .table-header { display: block; } + .inline-header { display: none; } + } + </style> <body> <div class="container"> - <div class="row"> - <table class="u-full-width"> - <thead> - <tr> - <th>Package</th> - <th>Source</th> - <th>Documentation</th> - </tr> - </thead> - <tbody> - {{ range $key, $value := .Packages }} - {{ $importPath := printf "%v/%v" $.URL $key }} - {{ if ne $value.URL "" }} - {{ $importPath = printf "%v/%v" $value.URL $key }} - {{ end }} - <tr> - <td>{{ $importPath }}</td> - <td> - <a href="//{{ $value.Repo }}">{{ $value.Repo }}</a> - </td> - <td> - <a href="//{{ $.Godoc.Host }}/{{ $importPath }}"> - <img src="//pkg.go.dev/badge/{{ $importPath }}.svg" alt="Go Reference" /> - </a> - </td> - </tr> - {{ end }} - </tbody> - </table> + <div class="row table-header"> + <div class="five columns"><strong>Package</strong></div> + <div class="five columns"><strong>Source</strong></div> + <div class="two columns"><strong>Documentation</strong></div> </div> + {{ range $key, $value := .Packages }} + {{ $importPath := printf "%v/%v" $.URL $key }} + {{ if ne $value.URL "" }} + {{ $importPath = printf "%v/%v" $value.URL $key }} + {{ end }} + <hr class="separator"> + <div class="row"> + <div class="five columns"> + <span class="inline-header">Package:</span> + {{ $importPath }} + </div> + <div class="five columns"> + <span class="inline-header">Source:</span> + <a href="//{{ $value.Repo }}">{{ $value.Repo }}</a> + </div> + <div class="two columns"> + <a href="//{{ $.Godoc.Host }}/{{ $importPath }}"> + <img src="//pkg.go.dev/badge/{{ $importPath }}.svg" alt="Go Reference" /> + </a> + </div> + </div> + {{ end }} </div> </body> </html> |