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>
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index b671e37..0abf174 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -1580,6 +1580,8 @@
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;
diff --git a/content/static/html/pages/unit.tmpl b/content/static/html/pages/unit.tmpl
index 065d9b0..89b57d1 100644
--- a/content/static/html/pages/unit.tmpl
+++ b/content/static/html/pages/unit.tmpl
@@ -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"}}
diff --git a/content/static/html/pages/unit_details.tmpl b/content/static/html/pages/unit_details.tmpl
index 9e6ac67..ac20c18 100644
--- a/content/static/html/pages/unit_details.tmpl
+++ b/content/static/html/pages/unit_details.tmpl
@@ -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"}}
