content/static: fix jump to dialog positioning

The jump to dialog stopped rendering as expected
in FireFox and Safari. Adjusts position and styles
so the dialog elements appear above the main content
on the page.

Fixes golang/go#44077

Change-Id: I9f5776c3d1ac4a042a9a0d3b7ba8b16fee5acc82
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/290191
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
This commit is contained in:
Jamal Carvalho 2021-02-08 11:27:49 -05:00
Родитель 12cbd43747
Коммит d6e3fd9139
3 изменённых файлов: 33 добавлений и 31 удалений

Просмотреть файл

@ -1580,6 +1580,8 @@ table.Directories {
border: 0.0625rem solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.5);
top: 50%;
transform: translate(0, -50%);
}
.Dialog-title {
font-size: 1.125rem;

Просмотреть файл

@ -16,6 +16,37 @@
{{block "unit_fixed_header" .}}{{end}}
{{block "unit_content" .}}{{end}}
</div>
<dialog class="JumpDialog Dialog">
<h2 class="Dialog-title">Jump to</h2>
<form method="dialog">
<div class="JumpDialog-filter">
<input class="JumpDialog-input" autocomplete="off" type="text">
</div>
<div class="JumpDialog-body">
<div class="JumpDialog-list"></div>
</div>
<div class="Dialog-actions">
<button class="Dialog-button">Close</button>
</div>
</form>
</dialog>
<dialog class="ShortcutsDialog Dialog">
<h2 class="Dialog-title">Keyboard shortcuts</h2>
<table>
<tbody>
<tr><td class="ShortcutsDialog-key"><b>?</b></td><td> : This menu</td></tr>
<tr><td class="ShortcutsDialog-key"><b>/</b></td><td> : Search site</td></tr>
<tr><td class="ShortcutsDialog-key"><b>f</b> or <b>F</b></td><td> : Jump to</td></tr>
</tbody>
</table>
<form method="dialog">
<div class="Dialog-actions">
<button class="Dialog-button">Close</button>
</div>
</form>
</dialog>
{{end}}
{{define "post_content"}}

Просмотреть файл

@ -50,37 +50,6 @@
{{block "unit_meta" .}}{{end}}
</div>
</div>
<dialog class="JumpDialog Dialog">
<h2 class="Dialog-title">Jump to</h2>
<form method="dialog">
<div class="JumpDialog-filter">
<input class="JumpDialog-input" autocomplete="off" type="text">
</div>
<div class="JumpDialog-body">
<div class="JumpDialog-list"></div>
</div>
<div class="Dialog-actions">
<button class="Dialog-button">Close</button>
</div>
</form>
</dialog>
<dialog class="ShortcutsDialog Dialog">
<h2 class="Dialog-title">Keyboard shortcuts</h2>
<table>
<tbody>
<tr><td class="ShortcutsDialog-key"><b>?</b></td><td> : This menu</td></tr>
<tr><td class="ShortcutsDialog-key"><b>/</b></td><td> : Search site</td></tr>
<tr><td class="ShortcutsDialog-key"><b>f</b> or <b>F</b></td><td> : Jump to</td></tr>
</tbody>
</table>
<form method="dialog">
<div class="Dialog-actions">
<button class="Dialog-button">Close</button>
</div>
</form>
</dialog>
{{end}}
{{define "unit_post_content"}}