From d57a3da49f842db0a38b2970864c60ea73963fb8 Mon Sep 17 00:00:00 2001
From: Shulhan <ms@kilabit.info>
Date: Mon, 22 Mar 2021 00:34:37 +0700
Subject: _www: make the layout to be responsive

The minimize screen size is 740px when the layout become one column,
from top to bottom, instead of two-columns, left and right.
---
 _www/index.css | 48 +++++++++++++++++++++++++++++++++++++++++++++++-
 _www/index.js  | 35 ++++++++++++++++++-----------------
 2 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/_www/index.css b/_www/index.css
index ce0eb27..18f5855 100644
--- a/_www/index.css
+++ b/_www/index.css
@@ -38,6 +38,7 @@ body {
 }
 .nav .footer {
 	bottom: 0;
+	font-size: 9pt;
 	margin-bottom: 1em;
 	position: fixed;
 }
@@ -83,6 +84,51 @@ body {
 	padding: 0.5em;
 }
 
-.results > .result-name {
+.results > .resultName {
 	margin-bottom: 1em;
 }
+
+@media screen and (max-width: 740px) {
+	.nav {
+		border-right: unset;
+		height: unset;
+		padding: 1em;
+		position: unset;
+		width: calc(100% - 2em);
+		border-bottom: 1px solid lightgrey;
+	}
+
+	.nav .footer {
+		position: unset;
+	}
+
+	.main {
+		left: 0;
+		position: unset;
+		width: calc(100% - 2em);
+		height: unset;
+	}
+
+	.input label {
+		display: inline-block;
+		width: auto;
+	}
+
+	.input input {
+		display: block;
+		width: calc(100% - 2em);
+	}
+
+	.HttpTargetActions {
+		margin-top: 10px;
+		display: block;
+	}
+
+	.results > .resultName {
+		word-break: break-word;
+	}
+	.results > .resultName .actions {
+		display: block;
+		margin: 0.5em 0px;
+	}
+}
diff --git a/_www/index.js b/_www/index.js
index e8a5e37..2bd9162 100644
--- a/_www/index.js
+++ b/_www/index.js
@@ -148,12 +148,14 @@ function renderTarget(targetID) {
 			<div id="${http.ID}" class="HttpTarget">
 				<h3>
 					${http.Name}
-					<button onclick="run('${target.ID}', '${http.ID}')">
-						Run
-					</button>
-					<button onclick="attack('${target.ID}', '${http.ID}')">
-						Attack
-					</button>
+					<span class="HttpTargetActions">
+						<button onclick="run('${target.ID}', '${http.ID}')">
+							Run
+						</button>
+						<button onclick="attack('${target.ID}', '${http.ID}')">
+							Attack
+						</button>
+					</span>
 				</h3>
 
 				<div id="${http.ID}_preview" class="preview mono">
@@ -233,19 +235,18 @@ function renderHttpAttackResults(target, http) {
 	for (let x = 0; x < http.Results.length; x++) {
 		let result = http.Results[x]
 		w += `
-			<div class="result-name">
-				<button onclick="attackResultGet(this, '${result.Name}')">
-					Show
-				</button>
-				&nbsp;
-				--
-				&nbsp;
+			<div class="resultName">
 				${result.Name}
-				&nbsp;
-				<button onclick="attackResultDelete('${result.Name}')">
-					Delete
-				</button>
 
+				<span class="actions">
+					<button onclick="attackResultGet(this, '${result.Name}')">
+						Show
+					</button>
+
+					<button onclick="attackResultDelete('${result.Name}')">
+						Delete
+					</button>
+				</span>
 			</div>
 			<div class="result" id="${result.Name}" style="display: none;">
 			</div>
-- 
cgit v1.3