_content: make "Press Esc to move out of the editor" message stop flickering
It's distracting to have this "Press Esc to move out of the editor"
message flicker on and off as focus shifts around the pages, especially
since it moves everything else up and down.
Make the message permanent and unobtrusive instead.
Change-Id: Iabe7a723f01ff2b54c49b3ef1214a1787b2751cd
Reviewed-on: https://go-review.googlesource.com/c/website/+/517695
Run-TryBot: Russ Cox <rsc@golang.org>
Reviewed-by: Prudhvi Krishna Chintala <prudhvikrishna@google.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
diff --git a/_content/css/styles.css b/_content/css/styles.css
index b6f80f0..921c8b0 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -4591,7 +4591,7 @@
height: 100%;
border: none;
outline: none;
- padding: 0.625rem 0.625rem 0 0.625rem;
+ padding: 0 0.625rem 0 0.625rem;
min-height: 13rem;
resize: none;
}
@@ -4625,8 +4625,7 @@
background-color: var(--color-background-playground-input) !important;
}
.Playground-outputContainer,
-.Playground-output,
-.Playground-preContainer {
+.Playground-output {
background: var(--color-background-code);
}
.Playground-inputContainer,
@@ -4641,13 +4640,9 @@
resize: vertical;
}
.Playground-preContainer {
- border-bottom: var(--border-code);
-}
-.Playground-preContainer {
- display: none;
-}
-.Playground-input:focus + .Playground-preContainer {
- display: block;
+ font-size: 0.8em;
+ font-style: italic;
+ padding: 0.3rem 0 0.3rem 0.625rem;
}
.Playground-controls {
display: flex;
diff --git a/_content/index.md b/_content/index.md
index ae48daf..e4b6101 100644
--- a/_content/index.md
+++ b/_content/index.md
@@ -155,7 +155,7 @@
</div>
<div class="Playground-inputContainer">
<div class="Playground-preContainer">
- <div style="font-family:Menlo, monospace; font-size: 0.875rem"> Press Esc to move out of the Editor. </div>
+ Press Esc to move out of the editor.
</div>
<textarea class="Playground-input js-playgroundCodeEl" spellcheck="false" aria-label="Try Go" aria-describedby="editor-description" id="code">
// You can edit this code!
@@ -167,7 +167,7 @@
}</textarea>
</div>
<div class="screen-reader-only" id="editor-description" hidden>
- Press Esc to move out of the Editor.
+ Press Esc to move out of the editor.
</div>
<div class="Playground-outputContainer js-playgroundOutputEl">
<pre class="Playground-output"><noscript>Hello, 世界</noscript></pre>
diff --git a/_content/js/site.js b/_content/js/site.js
index 511ac5d..3f397ed 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -222,14 +222,6 @@
textarea.blur();
}
});
-
- textarea?.addEventListener('blur', () => {
- preContainer.style.display = 'none';
- });
-
- textarea?.addEventListener('focus', () => {
- preContainer.style.display = 'block';
- });
}
/**
diff --git a/_content/play.tmpl b/_content/play.tmpl
index 46f88de..16318ef 100644
--- a/_content/play.tmpl
+++ b/_content/play.tmpl
@@ -41,10 +41,10 @@
</div>
</div>
<div class="Playground-inputContainer">
- <div id="wrap">
- <div class="Playground-preContainer">
- <div style="font-family:Menlo, monospace; font-size: 0.875rem"> Press Esc to move out of the Editor. </div>
+ <div class="Playground-preContainer" id="editor-description">
+ Press Esc to move out of the editor.
</div>
+ <div id="wrap">
<textarea id="code" name="code" class="Playground-input js-playgroundCodeEl" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Try Go" aria-describedby="editor-description">{{if strings.Contains .URL "/play/p/"}}Loading share...
{{else}}
// You can edit this code!
@@ -56,9 +56,6 @@
func main() {
fmt.Println("Hello, 世界")
}{{end}}</textarea>
- <div class="screen-reader-only" id="editor-description" hidden>
- Press Esc to move out of the Editor.
- </div>
</div>
</div>
<div class="Playground-outputContainer js-playgroundOutputEl">
