From b592657f7dbba82e33db3761efae27e68bbf101f Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Thu, 12 Dec 2019 13:20:07 +0200
Subject: [PATCH] Style connect window without bootstrap

---
 client/components/NetworkForm.vue | 311 +++++++++++++-----------------
 client/css/style.css              |  77 ++++++--
 2 files changed, 196 insertions(+), 192 deletions(-)

diff --git a/client/components/NetworkForm.vue b/client/components/NetworkForm.vue
index a6735fdf..5af77354 100644
--- a/client/components/NetworkForm.vue
+++ b/client/components/NetworkForm.vue
@@ -4,193 +4,160 @@
 			<SidebarToggle />
 		</div>
 		<form class="container" method="post" action="" @submit.prevent="onSubmit">
-			<div class="row">
-				<div class="col-sm-12">
-					<h1 class="title">
-						<template v-if="defaults.uuid">
-							<input type="hidden" name="uuid" :value="defaults.uuid" />
-							Edit {{ defaults.name }}
-						</template>
-						<template v-else>
-							<template v-if="config.public">The Lounge - </template>
-							Connect
-							<template v-if="!config.displayNetwork">
-								<template v-if="config.lockNetwork">
-									to {{ defaults.name }}
-								</template>
-							</template>
-						</template>
-					</h1>
-				</div>
-				<template v-if="config.displayNetwork">
-					<div>
-						<div class="col-sm-12">
-							<h2>Network settings</h2>
-						</div>
-						<div class="col-sm-3">
-							<label for="connect:name">Name</label>
-						</div>
-						<div class="col-sm-9">
-							<input
-								id="connect:name"
-								class="input"
-								name="name"
-								:value="defaults.name"
-								maxlength="100"
-							/>
-						</div>
-						<div class="col-sm-3">
-							<label for="connect:host">Server</label>
-						</div>
-						<div class="col-sm-6 col-xs-8">
-							<input
-								id="connect:host"
-								class="input"
-								name="host"
-								:value="defaults.host"
-								aria-label="Server address"
-								maxlength="255"
-								required
-								:disabled="config.lockNetwork ? true : false"
-							/>
-						</div>
-						<div class="col-sm-3 col-xs-4">
-							<div class="port">
-								<input
-									class="input"
-									type="number"
-									min="1"
-									max="65535"
-									name="port"
-									:value="defaults.port"
-									aria-label="Server port"
-									:disabled="config.lockNetwork ? true : false"
-								/>
-							</div>
-						</div>
-						<div class="clearfix" />
-						<div class="col-sm-9 col-sm-offset-3">
-							<label class="tls">
-								<input
-									type="checkbox"
-									name="tls"
-									:checked="defaults.tls ? true : false"
-									:disabled="config.lockNetwork ? true : false"
-								/>
-								Use secure connection (TLS)
-							</label>
-						</div>
-						<div class="col-sm-9 col-sm-offset-3">
-							<label class="tls">
-								<input
-									type="checkbox"
-									name="rejectUnauthorized"
-									:checked="defaults.rejectUnauthorized ? true : false"
-									:disabled="config.lockNetwork ? true : false"
-								/>
-								Only allow trusted certificates
-							</label>
-						</div>
-						<div class="clearfix" />
-					</div>
+			<h1 class="title">
+				<template v-if="defaults.uuid">
+					<input type="hidden" name="uuid" :value="defaults.uuid" />
+					Edit {{ defaults.name }}
 				</template>
-				<div class="col-sm-12">
-					<h2>User preferences</h2>
-				</div>
-				<div class="col-sm-3">
-					<label for="connect:nick">Nick</label>
-				</div>
-				<div class="col-sm-9">
+				<template v-else>
+					<template v-if="config.public">The Lounge - </template>
+					Connect
+					<template v-if="!config.displayNetwork">
+						<template v-if="config.lockNetwork"> to {{ defaults.name }} </template>
+					</template>
+				</template>
+			</h1>
+			<template v-if="config.displayNetwork">
+				<h2>Network settings</h2>
+				<div class="connect-row">
+					<label for="connect:name">Name</label>
 					<input
-						id="connect:nick"
-						class="input nick"
-						name="nick"
-						:value="defaults.nick"
+						id="connect:name"
+						class="input"
+						name="name"
+						:value="defaults.name"
 						maxlength="100"
-						required
-						@input="onNickChanged"
 					/>
 				</div>
-				<template v-if="!config.useHexIp">
-					<div class="col-sm-3">
-						<label for="connect:username">Username</label>
-					</div>
-					<div class="col-sm-9">
+				<div class="connect-row">
+					<label for="connect:host">Server</label>
+					<div class="input-wrap">
 						<input
-							id="connect:username"
-							ref="usernameInput"
-							class="input username"
-							name="username"
-							:value="defaults.username"
-							maxlength="512"
-						/>
-					</div>
-				</template>
-				<div class="col-sm-3">
-					<label for="connect:password">Password</label>
-				</div>
-				<div class="col-sm-9 password-container">
-					<RevealPassword v-slot:default="slotProps">
-						<input
-							id="connect:password"
-							v-model="defaults.password"
+							id="connect:host"
 							class="input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							name="password"
-							maxlength="512"
+							name="host"
+							:value="defaults.host"
+							aria-label="Server address"
+							maxlength="255"
+							required
+							:disabled="config.lockNetwork ? true : false"
 						/>
-					</RevealPassword>
+						<span id="connect:portseparator">:</span>
+						<input
+							id="connect:port"
+							class="input"
+							type="number"
+							min="1"
+							max="65535"
+							name="port"
+							:value="defaults.port"
+							aria-label="Server port"
+							:disabled="config.lockNetwork ? true : false"
+						/>
+					</div>
 				</div>
-				<div class="col-sm-3">
-					<label for="connect:realname">Real name</label>
+				<div class="connect-row">
+					<label></label>
+					<div class="input-wrap">
+						<label class="tls">
+							<input
+								type="checkbox"
+								name="tls"
+								:checked="defaults.tls ? true : false"
+								:disabled="config.lockNetwork ? true : false"
+							/>
+							Use secure connection (TLS)
+						</label>
+						<label class="tls">
+							<input
+								type="checkbox"
+								name="rejectUnauthorized"
+								:checked="defaults.rejectUnauthorized ? true : false"
+								:disabled="config.lockNetwork ? true : false"
+							/>
+							Only allow trusted certificates
+						</label>
+					</div>
 				</div>
-				<div class="col-sm-9">
+			</template>
+
+			<h2>User preferences</h2>
+			<div class="connect-row">
+				<label for="connect:nick">Nick</label>
+				<input
+					id="connect:nick"
+					class="input nick"
+					name="nick"
+					:value="defaults.nick"
+					maxlength="100"
+					required
+					@input="onNickChanged"
+				/>
+			</div>
+			<template v-if="!config.useHexIp">
+				<div class="connect-row">
+					<label for="connect:username">Username</label>
 					<input
-						id="connect:realname"
-						class="input"
-						name="realname"
-						:value="defaults.realname"
+						id="connect:username"
+						ref="usernameInput"
+						class="input username"
+						name="username"
+						:value="defaults.username"
 						maxlength="512"
 					/>
 				</div>
-				<template v-if="defaults.uuid">
-					<div class="col-sm-3">
-						<label for="connect:commands">Commands</label>
-					</div>
-					<div class="col-sm-9">
-						<textarea
-							id="connect:commands"
-							class="input"
-							name="commands"
-							placeholder="One raw command per line, each command will be executed on new connection"
-							:value="defaults.commands ? defaults.commands.join('\n') : ''"
-						/>
-					</div>
-					<div class="col-sm-9 col-sm-offset-3">
-						<button type="submit" class="btn" :disabled="disabled ? true : false">
-							Save
-						</button>
-					</div>
-				</template>
-				<template v-else>
-					<div class="col-sm-3">
-						<label for="connect:channels">Channels</label>
-					</div>
-					<div class="col-sm-9">
-						<input
-							id="connect:channels"
-							class="input"
-							name="join"
-							:value="defaults.join"
-						/>
-					</div>
-					<div class="col-sm-9 col-sm-offset-3">
-						<button type="submit" class="btn" :disabled="disabled ? true : false">
-							Connect
-						</button>
-					</div>
-				</template>
+			</template>
+			<div class="connect-row">
+				<label for="connect:password">Password</label>
+				<RevealPassword class="input-wrap password-container" v-slot:default="slotProps">
+					<input
+						id="connect:password"
+						v-model="defaults.password"
+						class="input"
+						:type="slotProps.isVisible ? 'text' : 'password'"
+						name="password"
+						maxlength="512"
+					/>
+				</RevealPassword>
 			</div>
+			<div class="connect-row">
+				<label for="connect:realname">Real name</label>
+				<input
+					id="connect:realname"
+					class="input"
+					name="realname"
+					:value="defaults.realname"
+					maxlength="512"
+				/>
+			</div>
+			<template v-if="defaults.uuid">
+				<div class="connect-row">
+					<label for="connect:commands">Commands</label>
+					<textarea
+						id="connect:commands"
+						class="input"
+						name="commands"
+						placeholder="One raw command per line, each command will be executed on new connection"
+						:value="defaults.commands ? defaults.commands.join('\n') : ''"
+					/>
+				</div>
+				<div>
+					<button type="submit" class="btn" :disabled="disabled ? true : false">
+						Save
+					</button>
+				</div>
+			</template>
+			<template v-else>
+				<div class="connect-row">
+					<label for="connect:channels">Channels</label>
+					<input id="connect:channels" class="input" name="join" :value="defaults.join" />
+				</div>
+				<div>
+					<button type="submit" class="btn" :disabled="disabled ? true : false">
+						Connect
+					</button>
+				</div>
+			</template>
 		</form>
 	</div>
 </template>
diff --git a/client/css/style.css b/client/css/style.css
index be9b9189..a07dc0e5 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -142,6 +142,7 @@ button {
 	outline: none;
 	padding: 0;
 	user-select: inherit;
+	cursor: pointer;
 }
 
 code,
@@ -191,6 +192,10 @@ kbd {
 	box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
 }
 
+p {
+	margin: 0 0 10px;
+}
+
 .btn {
 	border: 2px solid var(--button-color);
 	border-radius: 3px;
@@ -243,8 +248,10 @@ kbd {
 }
 
 .container {
+	padding: 0 15px;
 	margin-bottom: 20px;
-	max-width: 480px;
+	width: 480px;
+	align-self: center;
 	touch-action: pan-y;
 }
 
@@ -917,9 +924,10 @@ background on hover (unless active) */
 	border-color: #84ce88;
 }
 
-#user-specified-css-input {
+textarea.input {
 	resize: vertical;
-	height: 10em;
+	height: 100px;
+	min-height: 35px;
 	padding: 6px 10px;
 	line-height: 1.5;
 }
@@ -1769,30 +1777,48 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	width: 100%;
 }
 
+#connect .connect-row {
+	display: flex;
+}
+
+#connect .connect-row > .input,
+#connect .connect-row > .input-wrap {
+	flex-grow: 1;
+}
+
 #connect label {
-	display: block;
+	width: 25%;
+	flex-shrink: 0;
 	margin-top: 11px;
 }
 
-#connect .port::before {
-	content: ":";
-	margin: 9px 0 0 -17px;
-	position: absolute;
-}
-
 #connect .tls {
-	float: left;
+	width: 100%;
+	display: block;
 	margin-top: 6px;
 }
 
 #connect .tls input {
-	float: left;
 	margin: 3px 10px 0 0;
 }
 
+#connect\:host {
+	width: 70%;
+}
+
+#connect\:port {
+	width: 25%;
+}
+
+#connect\:portseparator {
+	width: 5%;
+	text-align: center;
+	display: inline-block;
+}
+
 #connect .btn {
-	float: left;
-	margin-top: 30px;
+	margin-left: 25%;
+	margin-top: 15px;
 }
 
 #settings .settings-sync-panel {
@@ -1889,13 +1915,13 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #sign-in .password-container .reveal-password {
 	top: 31px;
-	right: 0;
 }
 
 .password-container .reveal-password {
 	position: absolute;
 	top: 2px;
-	right: 15px;
+	right: 0;
+	appearance: none;
 }
 
 .password-container .reveal-password span {
@@ -2558,6 +2584,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 @media (max-width: 479px) {
 	.container {
+		max-width: 100%;
 		margin: 0;
 	}
 
@@ -2565,14 +2592,24 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		width: 100%;
 	}
 
-	#connect .tls {
-		margin: 20px 0;
-	}
-
 	.input {
 		margin-bottom: 2px;
 	}
 
+	#connect .connect-row {
+		flex-direction: column;
+	}
+
+	#connect .connect-row > .input,
+	#connect .connect-row > .input-wrap {
+		flex-grow: 1;
+	}
+
+	#connect .btn {
+		margin-left: 0;
+		width: 100%;
+	}
+
 	#chat .messages {
 		display: block;
 		padding: 5px 0;