playground: use flexbox for navbar layout

Previously, resizing the viewport until the width of the logo and
control elements is greater would cause all of the control elements to
disappear. This behavior became exacerbated with the addition of more
control elements.

Additionally, the alignment and styling of buttons would vary between
browsers, particuarly between desktop and mobile.

This change uses flexbox for layout in the navbar, instead of floats.
Wrapping is now done per-element, instead of the whole control
container. All buttons are adjusted to have a unified alignment, and
styling is made more consistent across browsers.

Fixes golang/go#38482.

Change-Id: I1946c4a44da9de9b206b17d4d155ff8422e9ad80
Reviewed-on: https://go-review.googlesource.com/c/playground/+/229419
Reviewed-by: Andrew Bonventre <andybons@golang.org>
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: Gobot Gobot <gobot@golang.org>

Author: smasher164

edit.html

@@ -104,35 +104,31 @@
 		<input type="button" value="Run" id="embedRun">
 		<div id="banner">
 			<div id="head" itemprop="name">The Go Playground</div>
-			<div id="controls">
-				<input type="button" value="Run" id="run">
-				<input type="button" value="Format" id="fmt">
-				<div id="importsBox">
-					<label title="Rewrite imports on Format">
-						<input type="checkbox" id="imports">
-						Imports
-					</label>
-				</div>
-				{{if $.Share}}
-				<input type="button" value="Share" id="share">
-				<input type="text" id="shareURL">
-				<label id="embedLabel">
-					<input type="checkbox" id="embed">
-					embed
+			<input type="button" value="Run" id="run">
+			<input type="button" value="Format" id="fmt">
+			<div id="importsBox">
+				<label title="Rewrite imports on Format">
+					<input type="checkbox" id="imports">
+					Imports
 				</label>
-				{{end}}
-				<select class="js-playgroundToysEl">
-					<option value="hello.txt">Hello, playground</option>
-					<option value="test.txt">Tests</option>
-					<option value="multi.txt">Multiple files</option>
-					<option value="image.txt">Display image</option>
-					<option value="sleep.txt">Sleep</option>
-					<option value="clear.txt">Clear</option>
-				</select>
-			</div>
-			<div id="aboutControls">
-				<input type="button" value="About" id="aboutButton">
 			</div>
+			{{if $.Share}}
+			<input type="button" value="Share" id="share">
+			<input type="text" id="shareURL">
+			<label id="embedLabel">
+				<input type="checkbox" id="embed">
+				embed
+			</label>
+			{{end}}
+			<select class="js-playgroundToysEl">
+				<option value="hello.txt">Hello, playground</option>
+				<option value="test.txt">Tests</option>
+				<option value="multi.txt">Multiple files</option>
+				<option value="image.txt">Display image</option>
+				<option value="sleep.txt">Sleep</option>
+				<option value="clear.txt">Clear</option>
+			</select>
+			<input type="button" value="About" id="aboutButton">
 		</div>
 		<div id="wrap">
 			<textarea itemprop="description" id="code" name="code" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">{{printf "%s" .Snippet.Body}}</textarea>

static/style.css

@@ -79,31 +79,34 @@ a {
 	margin: 0;
 }
 #banner {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
 	position: absolute;
 	left: 0;
 	right: 0;
 	top: 0;
 	height: 50px;
 	background-color: #E0EBF5;
 }
+#banner > * {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	margin-right: 5px;
+	border-radius: 5px;
+	box-sizing: border-box;
+	height: 30px;
+}
 #head {
-	float: left;
-	padding: 15px 10px;
-
+	padding-left: 10px;
+	padding-right: 20px;
+	padding-top: 5px;
 	font-size: 20px;
 	font-family: sans-serif;
 }
-#controls {
-	float: left;
-	padding: 10px 15px;
-	min-width: 245px;
-}
-#controls > input {
-	border-radius: 5px;
-}
-#aboutControls {
-	float: right;
-	padding: 10px 15px;
+#aboutButton {
+	margin-left: auto;
+	margin-right: 15px;
 }
 input[type=button],
 #importsBox {
@@ -116,30 +119,33 @@ input[type=button],
 	position: static;
 	top: 1px;
 	border-radius: 5px;
+	-webkit-appearance: none;
 }
 #importsBox {
-	position: relative;
-	display: inline;
-	padding: 5px 0;
-	margin-right: 5px;
+	padding: 0.25em 7px;
 }
 #importsBox input {
 	position: relative;
 	top: -2px;
 	left: 1px;
 	height: 10px;
 	width: 10px;
+	margin-left: 0;
 }
 #shareURL {
 	width: 280px;
 	font-size: 16px;
 	border: 1px solid #ccc;
 	background: #eee;
 	color: black;
-	height: 23px;
 }
 #embedLabel {
 	font-family: sans-serif;
+	padding-top: 5px;
+}
+#banner > select {
+	font-size: 0.875rem;
+	border: 0.0625rem solid #375EAB;
 }
 .lines {
 	float: left;
@@ -173,10 +179,4 @@ input[type=button],
 	z-index: 1;
 	top: 10px;
 	right: 10px;
-}
-
-#controls select {
-	font-size: 0.875rem;
-	border: 0.0625rem solid #375EAB;
-	margin: 0;
 }