diff options
| -rw-r--r-- | static/style.css | 77 | ||||
| -rw-r--r-- | templates/repo_commit.tmpl | 63 | ||||
| -rw-r--r-- | templates/repo_index.tmpl | 42 |
3 files changed, 124 insertions, 58 deletions
diff --git a/static/style.css b/static/style.css index 6645af4..1e09df3 100644 --- a/static/style.css +++ b/static/style.css @@ -448,3 +448,80 @@ td > ul { border: 0; border-bottom: 1px dashed; } + + + + + + +.key-val-grid { + display: grid; + grid-template-columns: auto 1fr; + gap: 0; + border: var(--lighter-border-color) 1px solid; + border-radius: var(--radius-1); + overflow: auto; + font-size: 0.96rem; +} + +.key-val-grid > .title-row { + grid-column: 1 / -1; + background-color: var(--lighter-box-background-color); + font-weight: bold; + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; +} + +.key-val-grid > .row-label { + background-color: var(--lighter-box-background-color); + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; + border-right: var(--lighter-border-color) 1px solid; + text-align: left; + font-weight: normal; +} + +.key-val-grid > .row-value { + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; + word-break: break-word; +} + +.key-val-grid code { + font-family: monospace; +} + +.key-val-grid ul { + margin: 0; + padding-left: 1.5rem; +} + +.key-val-grid > .row-label:nth-last-of-type(2), +.key-val-grid > .row-value:last-of-type { + border-bottom: none; +} + +@media (max-width: 37.5rem) { + .key-val-grid { + grid-template-columns: 1fr; + } + + .key-val-grid > .row-label { + border-right: none; + } +} +.key-val-grid > .title-row { + grid-column: 1 / -1; + background-color: var(--lighter-box-background-color); + font-weight: bold; + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; + font-size: 1rem; + margin: 0; + text-align: center; +} + +.key-val-grid-wrapper { + max-width: 100%; + width: fit-content; +} diff --git a/templates/repo_commit.tmpl b/templates/repo_commit.tmpl index 8cf106b..46f5478 100644 --- a/templates/repo_commit.tmpl +++ b/templates/repo_commit.tmpl @@ -12,40 +12,37 @@ <body class="repo-commit"> {{- template "header" . -}} <div class="padding-wrapper scroll"> - <table id="commit-info-table" class="rounded"> - <thead> - <tr class="title-row"> - <th colspan="2">Commit info</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">ID</th> - <td>{{- .commit_id -}}</td> - </tr> - <tr> - <th scope="row">Author</th> - <td>{{- .commit_object.Author.Name -}} <<a href="mailto:{{- .commit_object.Author.Email -}}">{{- .commit_object.Author.Email -}}</a>></td> - </tr> - <tr> - <th scope="row">Author date</th> - <td>{{- .commit_object.Author.When.Format "Mon, 02 Jan 2006 15:04:05 -0700" -}}</td> - </tr> - <tr> - <th scope="row">Committer</th> - <td>{{- .commit_object.Committer.Name -}} <<a href="mailto:{{- .commit_object.Committer.Email -}}">{{- .commit_object.Committer.Email -}}</a>></td> - </tr> - <tr> - <th scope="row">Committer date</th> - <td>{{- .commit_object.Committer.When.Format "Mon, 02 Jan 2006 15:04:05 -0700" -}}</td> - </tr> - <tr> - <th scope="row">Actions</th> - <td><pre><a href="{{- .commit_object.Hash -}}.patch">Get patch</a></pre></td> - </tr> - </tbody> - </table> +<div class="key-val-grid-wrapper"> + <section id="commit-info" class="key-val-grid"> + <div class="title-row">Commit info</div> + + <div class="row-label">ID</div> + <div class="row-value">{{- .commit_id -}}</div> + + <div class="row-label">Author</div> + <div class="row-value"> + <span>{{- .commit_object.Author.Name -}}</span> <span><<a href="mailto:{{- .commit_object.Author.Email -}}">{{- .commit_object.Author.Email -}}</a>></span> </div> + + <div class="row-label">Author date</div> + <div class="row-value">{{- .commit_object.Author.When.Format "Mon, 02 Jan 2006 15:04:05 -0700" -}}</div> + + <div class="row-label">Committer</div> + <div class="row-value"> + <span>{{- .commit_object.Committer.Name -}}</span> <span><<a href="mailto:{{- .commit_object.Committer.Email -}}">{{- .commit_object.Committer.Email -}}</a>></span> + </div> + + <div class="row-label">Committer date</div> + <div class="row-value">{{- .commit_object.Committer.When.Format "Mon, 02 Jan 2006 15:04:05 -0700" -}}</div> + + <div class="row-label">Actions</div> + <div class="row-value"> + <a href="{{- .commit_object.Hash -}}.patch">Get patch</a> + </div> + </section> +</div> + </div> + <div class="padding-wrapper scroll" id="this-commit-message"> <pre>{{- .commit_object.Message -}}</pre> </div> diff --git a/templates/repo_index.tmpl b/templates/repo_index.tmpl index 39e55cf..cf5d1cd 100644 --- a/templates/repo_index.tmpl +++ b/templates/repo_index.tmpl @@ -12,35 +12,27 @@ <body class="repo-index"> {{- template "header" . -}} <div class="padding-wrapper"> - <table id="repo-info-table" class="rounded"> - <thead> - <tr class="title-row"> - <th colspan="2">Repo info</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Name</th> - <td>{{- .repo_name -}}</td> - </tr> + <div class="key-val-grid-wrapper"> + <section id="repo-info" class="key-val-grid"> + <div class="title-row">Repo info</div> + <div class="row-label">Name</div> + <div class="row-value">{{- .repo_name -}}</div> {{- if .repo_description -}} - <tr> - <th scope="row">Description</th> - <td>{{- .repo_description -}}</td> - </tr> + <div class="row-label">Description</div> + <div class="row-value">{{- .repo_description -}}</div> {{- end -}} - <tr> - <th scope="row">SSH remote</th> - <td><code>{{- .ssh_clone_url -}}</code></td> - </tr> + <div class="row-label">SSH remote</div> + <div class="row-value"><code>{{- .ssh_clone_url -}}</code></div> {{- if .notes -}} - <tr> - <th scope="row">Notes</th> - <td><ul>{{- range .notes -}}<li>{{- . -}}</li>{{- end -}}</ul></td> - </tr> + <div class="row-label">Notes</div> + <div class="row-value"> + <ul> + {{- range .notes -}}<li>{{- . -}}</li>{{- end -}} + </ul> + </div> {{- end -}} - </tbody> - </table> + </section> + </div> </div> <div class="padding-wrapper"> <table id="branches" class="rounded"> |