Tweaking layout

avoidwork · May 16, 2017 · 7185072 · 7185072
1 parent 5b65f4a
commit 7185072
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 41 deletions.
diff --git a/www/assets/css/style.css b/www/assets/css/style.css
diff --git a/www/assets/css/style.css.map b/www/assets/css/style.css.map
diff --git a/www/assets/css/style.scss b/www/assets/css/style.scss
@@ -52,8 +52,16 @@ pre {
   font-size: 1em;
 }
 
+.spaced {
+  margin-bottom: $ten * 2.5;
+}
+
 .footer {
   .logo {
     width: $ten * 16;
   }
+
+  a {
+    color: $blue !important;
+  }
 }
diff --git a/www/assets/js/app.es6 b/www/assets/js/app.es6
@@ -31,7 +31,7 @@
 	window.requestAnimationFrame(() => {
 		// Hiding the request tab if read-only
 		if (!(/(PATCH|PUT|POST)/).test(document.querySelector("#allow").innerText)) {
-			//document.querySelector("li.request").classList.add("dr-hidden");
+			document.querySelector("li.request").classList.add("dr-hidden");
 		}
 
 		// Resetting format selection (back button)
@@ -42,4 +42,17 @@
 	document.querySelector("#formats").onchange = function (ev) {
 		window.location = window.location.pathname + "?format=" + ev.target.options[ev.target.selectedIndex].value;
 	};
+
+	// Wiring up JSON validation
+	document.querySelector("textarea").onchange = function (ev) {
+		try {
+			JSON.parse(JSON.stringify(ev.target.value));
+			ev.target.classList.remove("is-danger");
+			document.querySelector(".button.is-primary").classList.remove("is-disabled");
+		} catch (e) {
+			ev.target.classList.add("is-danger");
+			document.querySelector(".button.is-primary").classList.add("is-disabled");
+			console.log(e);
+		}
+	}
 })();
diff --git a/www/assets/js/app.js b/www/assets/js/app.js
diff --git a/www/assets/js/app.js.map b/www/assets/js/app.js.map
diff --git a/www/index.html b/www/index.html
@@ -20,7 +20,7 @@ <h1 class="title">
 </section>
 
 <section class="section">
-	<div class="container">
+	<div class="container spaced">
 		<div class="tabs">
 			<ul>
 				<li class="response">
@@ -33,12 +33,11 @@ <h1 class="title">
 		</div>
 	</div>
 	<div class="content">
-		<section class="section">
 			<div class="container">
 				<div id="response" class="dr-hidden">
 					<div class="field">
 						<label class="label">Formats</label>
-						<p class="control">
+						<p class="control spaced">
 							<span class="select">
 								<select id="formats">
 									{{formats}}
@@ -48,50 +47,58 @@ <h1 class="title">
 					</div>
 					<div class="columns">
 						<div class="column">
-							<div class="panel">
-								<div class="panel-block">
-									<table class="table">
-										<thead>
-										<tr>
-											<th>Header</th>
-											<th>Value</th>
-										</tr>
-										</thead>
-										<tbody>
-										{{headers}}
-										</tbody>
-									</table>
-								</div>
+							<div class="box">
+								<table class="table">
+									<thead>
+									<tr>
+										<th>Header</th>
+										<th>Value</th>
+									</tr>
+									</thead>
+									<tbody>
+									{{headers}}
+									</tbody>
+								</table>
 							</div>
 						</div>
 						<div class="column">
-							<code class="is-marginless is-paddingless">
-								<pre>{{body}}</pre>
-							</code>
+							<div class="box">
+								<code class="is-marginless is-paddingless">
+									<pre>{{body}}</pre>
+								</code>
+							</div>
 						</div>
 					</div>
 				</div>
 				<div id="request" class="dr-hidden">
 					<div class="container">
-						<div class="field">
-							<label class="label">Body</label>
-							<p class="control">
-								<textarea class="textarea" placeholder="Enter JSON request body here"></textarea>
-							</p>
-						</div>
+						<form>
+							<div class="field">
+								<label class="label">Method</label>
+								<p class="control spaced">
+									<span class="select">
+										<select id="methods">
+											{{methods}}
+										</select>
+									</span>
+								</p>
+							</div>
+							<div class="field">
+								<label class="label">Body</label>
+								<p class="control">
+									<textarea class="textarea" placeholder="Enter JSON request body here"></textarea>
+								</p>
+							</div>
 
-						<div class="field is-grouped">
-							<p class="control">
-								<button class="button is-primary">Submit</button>
-							</p>
-							<p class="control">
-								<button class="button is-link">Cancel</button>
-							</p>
-						</div>
+							<div class="field is-grouped">
+								<p class="control">
+									<button type="submit" class="button is-primary is-disabled">Submit</button>
+								</p>
+							</div>
+						</form>
 					</div>
 				</div>
 			</div>
-		</section>
 	</div>
 </section>