Collapsible query settings and better mobile support.

Also use a larger list of test clusters, for testing.

src/app.css

@@ -38,6 +38,11 @@ select, input {
 	padding: 0.3em;
 	background-color: white;
 	border-radius: 4px;
+	max-width: 90%;
+}
+
+main {
+	height: calc(100% - 4em);
 }
 
 select option {
@@ -230,13 +235,12 @@ button {
 	border-style: solid;
 	border-width: 1px;
 	border-color: #95c1d3;
-	flex-grow: 2;
+	flex-grow: 1;
 	padding: 1em;
 	background-color: #e2eaff;
-	height: 84vh;
-	max-width: 65vw;
 	min-width: 65vw;
 	overflow-y: scroll;
+	margin-bottom: 1em;
 }
 
 .settings-option {
@@ -254,8 +258,57 @@ button:focus:not(:focus-visible) {
 	outline: none;
 }
 
+.query-settings-hider {
+	color: rgba(0,0,0, 0.5)
+}
+.query-settings-shower {
+	color: rgba(0,0,0, 0.5)
+}
+
+.query-settings-hider:before {
+	content: "«";
+}
+.query-settings-shower:before {
+	content: "»";
+}
+
+section {
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+	justify-content: space-between;
+	overflow: hidden;
+}
+
+.query-settings {
+	margin-right: 1rem;
+	display: flex;
+	flex-direction: column;
+	padding: 1em;
+}
+
 @media (min-width: 720px) {
 	h1 {
 		font-size: 2.4rem;
 	}
+	.query-settings {
+		overflow: scroll;
+	}
+}
+
+@media (max-width: 719px) {
+	section {
+		flex-direction: column;
+		overflow: scroll;
+	}
+	.query-settings {
+		flex-grow: 1;
+		overflow: visible;
+	}
+	.query-settings-hider:before {
+		content: '▲';
+	}
+	.query-settings-shower:before {
+		content: '▼';
+	}
 }

src/routes/+page.svelte

@@ -16,6 +16,7 @@
 	} from './+page.js';
 	export let errors, data
 
+	let showQuerySettings = true
 	let showQueryModal = false
 	let queryRunning = ''
 
@@ -90,6 +91,7 @@
 </svelte:head>
 
 <section>
+	{#if showQuerySettings}
 		<div class="query-settings">
 			<!--
 			<Header />
@@ -155,31 +157,6 @@
 				{/if}
 			</div>
 
-		<!-- Previous 'Start' style
-		<div class="settings-option query-type">
-			<span>Query Type:</span>
-			<span>
-				<label title="Consume and display new events as they are produced.">
-					<input type=radio bind:group={querySettings.mode} name="mode" value={queryMode.REAL_TIME}>
-					Real Time
-				</label>
-
-				<label title="Query all messages that currently exist, then stop.">
-					<input type=radio bind:group={querySettings.mode} name="mode" value={queryMode.ONE_SHOT}>
-					One Shot
-				</label>
-			</span>
-		</div>
-
-		<div class="query-button">
-			{#if queryRunning}
-				<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>Stop Query</button>
-			{:else}
-				<button class="colored" on:click={() => queryRunning = startQuery(querySettings)}>Start Query</button>
-			{/if}
-		</div>
-		-->
-
 			<div class="query-button">
 				{#if queryRunning && $state.queryState !== queryState.DONE}
 					<div transition:slide|local class="stop-button">
@@ -200,10 +177,13 @@
 				{/if}
 			</div>
 		</div>
+	{/if}
 
 	<div class="data-view-container">
 		<div class="data-view-bar">
 			<div class="border-between">
+				<button class={showQuerySettings ? "query-settings-hider" : "query-settings-shower"}
+					on:click={() => showQuerySettings = !showQuerySettings}></button>
 				<button class={jsonDisplay.expandAll ? 'selected' : ''}
 						on:click={() => jsonDisplay.expandAll = !jsonDisplay.expandAll}>
 				Expand All Objects
@@ -252,6 +232,7 @@
 	.data-view-container {
 		display: flex;
 		flex-direction: column;
+		flex-grow: 1;
 	}
 	.data-view-bar {
 		background-color: #d7dbf3;
@@ -299,14 +280,6 @@
 		margin-right: 1em;
 	}
 
-	section {
-		display: flex;
-		flex-direction: row;
-		flex: 1;
-		justify-content: space-between;
-		overflow: hidden;
-	}
-
 	h1 {
 		width: 100%;
 	}
@@ -321,16 +294,6 @@
 		background-color: #575757;
 	}
 
-	.query-settings {
-		margin-right: 1rem;
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-		overflow: auto;
-		padding: 1em;
-		height: 84.5vh;
-	}
-
 	.query-type {
 		display: flex;
 		flex-direction: row;

src/routes/settings/+page.svelte

@@ -159,6 +159,9 @@
 </section>
 
 <style>
+    .data-view {
+        min-height: 40%;
+    }
     .cluster-listing {
         display: flex;
         flex-direction: row;
@@ -183,13 +186,6 @@
 
     }
 
-    section {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-        justify-content: space-between;
-    }
-
     h1 {
         width: 100%;
     }
@@ -210,14 +206,6 @@
         min-width: 20vw;
     }
 
-    .query-settings {
-        margin-right: 1rem;
-        padding: 1em;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-    }
-
     .settings-sub-option {
         margin-top: 0.2em;
         display: flex;

src/utils.js

@@ -29,9 +29,7 @@ const jsonRequest = type => async (path, object) => fetch(backendUrl + path, {
 export const postJson = (path, object) => jsonRequest('POST')(path, object)
 export const putJson = (path, object) => jsonRequest('PUT')(path, object)
 
-const mockApi = {
-    '/clusters': {
-        'TestCluster': {
+const mockCluster = {
     clientId: 'TestClient',
     brokers: ['testbroker.com:5000'],
     ssl: true,
@@ -40,7 +38,19 @@ const mockApi = {
         username: 'testuser',
         password: 'XXXXXXXXXXXXXXXXXXXXXX'
     }
-        }
+}
+const mockApi = {
+    '/clusters': {
+        'TestCluster1': mockCluster,
+        'TestCluster2': mockCluster,
+        'TestCluster3': mockCluster,
+        'TestCluster4': mockCluster,
+        'TestCluster5': mockCluster,
+        'TestCluster6': mockCluster,
+        'TestCluster7': mockCluster,
+        'TestCluster8': mockCluster,
+        'TestCluster9': mockCluster,
+        'TestCluster10': mockCluster,
     },
     '/topics/TestCluster': ['NewReleases']
 }