Merge pull request #14 from openjavaformat/playground-strips

Stack the playground's boxes as strips, in a smaller font

Author: abashev

docs/javascripts/playground.js

@@ -1,4 +1,4 @@
-// The Playground page, docs/playground/index.md: formats the code on the left into the pane on the right, in the
+// The Playground page, docs/playground/index.md: formats the code of the upper box into the lower one, in the
 // browser. The formatter is a WebAssembly module, open-java-format.js and open-java-format.js.wasm, which the build
 // puts next to the page; it is the one the release named by ojf_version carries.
 //

docs/playground/index.md

@@ -8,7 +8,7 @@ hide:
 
 # Playground
 
-Paste Java code on the left and press **Format**. The formatter runs in your browser, compiled to
+Paste Java code into the upper box and press **Format**. The formatter runs in your browser, compiled to
 WebAssembly from the same release that [the other pages](../get-started/index.md) install: the code is
 not sent anywhere, and the result is what the command line would write.
 
@@ -41,12 +41,6 @@ class Example {
 </textarea>
 </div>
 
-<div class="ojf-playground__pane">
-<label for="ojf-output">open-java-format {{ ojf_version }}</label>
-<textarea id="ojf-output" spellcheck="false" wrap="off" readonly></textarea>
-<button id="ojf-copy" class="ojf-playground__copy" type="button" hidden>Copy</button>
-</div>
-
 <div class="ojf-playground__bar" markdown>
 
 <button id="ojf-format" class="md-button md-button--primary" type="button" disabled>Format</button>
@@ -81,6 +75,12 @@ The formatter did not load. Reload the page to try again, or use the
 
 </div>
 
+<div class="ojf-playground__pane">
+<label for="ojf-output">open-java-format {{ ojf_version }}</label>
+<textarea id="ojf-output" spellcheck="false" wrap="off" readonly></textarea>
+<button id="ojf-copy" class="ojf-playground__copy" type="button" hidden>Copy</button>
+</div>
+
 </div>
 
 Thank you to Denis Pavlyuchenko ([@pavlyuchenko_denis](https://t.me/pavlyuchenko_denis) on Telegram),

docs/stylesheets/playground.css

@@ -1,5 +1,5 @@
-/* The Playground page, docs/playground/index.md: the code and the result side by side, stacked on a narrow screen.
-   Colours and fonts are the theme's, so both palettes work. */
+/* The Playground page, docs/playground/index.md: the code, the Format bar and the result, one under another, each the
+   width of the page. Colours and fonts are the theme's, so both palettes work. */
 
 /* The Playground tab in the header stands out on every page: white on the theme's blue, like the Format button.
    Its href is relative, ./playground/ or ../playground/, so the selector matches the end. */
@@ -23,13 +23,6 @@
   gap: 1rem;
 }
 
-/* The theme's own breakpoint for a wide screen. */
-@media screen and (min-width: 60em) {
-  .ojf-playground {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
 .ojf-playground__pane {
   position: relative;
   display: flex;
@@ -45,27 +38,22 @@
 .ojf-playground textarea {
   box-sizing: border-box;
   width: 100%;
-  height: 45vh;
-  min-height: 16rem;
+  /* A strip, low and as wide as the page, which a long line of the formatter's 120 columns fits. Either box can be
+     pulled taller. */
+  height: min(30vh, 20rem);
+  min-height: 10rem;
   padding: 0.8em 1.2em;
   border: 1px solid var(--md-default-fg-color--lightest);
   border-radius: 0.1rem;
   background-color: var(--md-code-bg-color);
   color: var(--md-code-fg-color);
   font-family: var(--md-code-font-family);
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   line-height: 1.4;
   tab-size: 4;
   white-space: pre;
   overflow: auto;
-  resize: none;
-}
-
-/* Side by side, the panes can take most of the window; stacked, two of them have to fit. */
-@media screen and (min-width: 60em) {
-  .ojf-playground textarea {
-    height: min(70vh, 40rem);
-  }
+  resize: vertical;
 }
 
 .ojf-playground textarea:focus {
@@ -91,7 +79,6 @@
 }
 
 .ojf-playground__bar {
-  grid-column: 1 / -1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;