Start trying to fix up layout

...with admittedly not much success...
author: oldmud0 <oldmud0@users.noreply.github.com> 2018-05-13 22:44:29 -0500
committer: oldmud0 <oldmud0@users.noreply.github.com> 2018-05-13 22:44:29 -0500
commit: 09f3d0170b3cc1ee74a2266b595c81402ed4314c (patch)
tree: 498aaeeff8c93247c62d1ded2a43d57d70004260
parent: 26c12c9461be9c52057983f1240ac3bad57b68c1 (diff)
3 files changed, 141 insertions, 99 deletions
diff --git a/client.css b/client.css
index bb592f1..6ffd8b4 100644
--- a/client.css
+++ b/client.css
@@ -53,9 +53,9 @@ img {
 
 #client_gamewindow {
 	position: relative;
-	top: 0;
-	left: 0;
-  width: 100%;
+	/*! top: 0; */
+	/*! left: 0; */
+  /*! width: 100%; */
   padding-bottom: 75%;
 }
 
@@ -91,19 +91,27 @@ img {
 }
 
 #client_wrapper {
-	position: absolute;
-	top: 0;
-	left: 0;
+	/*! position: absolute; */
+	/*! top: 0; */
+	/*! left: 0; */
 	background-color: #888888;
-	height: 99%;
-	width: 512px;
-	margin: 0;
-	padding: 0;
-	float: left;
-	resize: horizontal;
+	/*! height: 99%; */
+	/*! width: 512px; */
+	/*! margin: 0; */
+	/*! padding: 0; */
+	/*! float: left; */
+	/*! resize: horizontal; */
 	overflow: auto;
 	overflow-y:hidden;
-	border: 1px solid;
+	/*! border: 1px solid; */
+	min-width: 256px;
+	resize: horizontal;
+}
+
+@media (max-width: 360px) {
+	#kek {
+		width: fit-content;
+	}
 }
 
 #client_emo {
@@ -113,9 +121,11 @@ img {
 }
 
 #client_settings {
-	position: absolute;
-	top: 100%;
-	width: 60%;
+	/*! position: absolute; */
+	/*! top: 100%; */
+	width: 100%;
+	/*! grid-column: 1; */
+	/*! grid-row: 2; */
 }
 
 .area_btn {
@@ -195,67 +205,94 @@ img {
 	margin: 4px;
 	color: white;
 }
-.long {	
-	width: 98%;
+.long {
+	width: 100%;
 	background-color: #dddddd;
 	border: 1px solid #555555;
+	border-style: solid;
+	box-sizing: border-box;
 }
 
 #client_chatlog {
-	width: 244px;
-	height: 100%;
-	background: #dbdbdb url("misc/chat2.png") no-repeat;
-	padding: 0;
-	position: absolute;
+	/*! width: 244px; */
+	/*! height: 100%; */
+	/*! background: #dbdbdb url("misc/chat2.png") no-repeat; */
+	/*! padding: 0; */
+	/*! position: absolute; */
 	top: 0;
 	right: 0;
+	/* grid-column: 2; */
+	flex: 1;
 }
 
 #client_log {
 	position: relative;
-	top: 3px;
-	left: 10px;
-	height: 310px;
-	width: 225px;
+	/* top: 3px; */
+	/*! left: 10px; */
+	/* height: 315px; */
+	/*! width: 99%; */
 	color: white;
 	word-break: keep-all;
 	word-wrap:break-word;
 	overflow-wrap: break-word;
-	overflow-y: hidden;
-	font-size: 12px;
-	margin-bottom: 40px;
+	overflow-y: scroll;
+	font-size: medium;
+	/* margin-bottom: 10px; */
+	background-color: #242424;
+	border: black;
+	border-style: solid;
+	/* max-width: 50em; */
+	/* min-height: 30em; */
 }
 
 #client_ooclog {
-	width: 220px;
-	margin-top: 30px;
-	height: 50%;
+	/*! width: 99%; */
+	/* margin-top: 25px; */
+	/* height: 50%; */
 	position: relative;
-	background-color: #8b8b8b; 
+	background-color: #242424;
+	color: white;
+	font-family: "Source Code Pro", "Consolas", monospace;
+	font-size: small;
+	overflow-wrap: break-word;
+	overflow-y: scroll;
+	text-rendering: optimizelegibility;
+	resize: none;
+	flex: 1 1 auto;
 }
 
 #client_musiclist {
-	width: 244px;
-	margin-top: 30px;
-	height: 50%;
+	width: 99%;
+	/* margin-top: 20px; */
+	/*! height: 50%; */
 	position: relative;
-	background-color: #ff0000; 
+	background-color: #ff0000;
+	/* resize: vertical; */
+	width: auto;
 }
 
 #client_bars {
 	position: relative;
-	margin-bottom: 30px;
+	/*! margin-bottom: 30px; */
 	text-align: center;
+	/* display: flex; */
+	/* flex-direction: row; */
+	height: 20px;
+}
+
+.slider {
+	padding-right: 4px;
 }
 
 .client_defense {
-	position: absolute;
-	left: 30px;
+	/* position: absolute; */
+	/* left: 30px; */
+	width: 90px;
+	height: 20px;
 }
 
 .client_prosecutor {
-	position: absolute;
-	left: 130px;
+	/* left: 130px; */
 }
 
 .client_button {
diff --git a/client.html b/client.html
index 85a9f06..a9cec08 100644
--- a/client.html
+++ b/client.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
+<html lang="en"><head>
     <title>Attorney Online session</title>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="client.css">
@@ -10,65 +9,71 @@
 <body>
     <span id="sound"></span>
     <div id="client_loading">
-    <h1 id="client_loadingtext">Loading</h1>
-    <button onclick='RetryButton()'>RETRY</button>
+        <h1 id="client_loadingtext">Loading</h1>
+        <button onclick="RetryButton()">RETRY</button>
     </div>
-	<div id="client_charselect">
-	<button onclick="pickchar(1001)">SPECTATE</button>
-	<table id="client_chartable">
-	</table>
-	</div>
-    <div id="client_wrapper">
-        <div id="client_gamewindow">
-            <img id="client_court" alt="Courtroom background" onerror="imgError(this);">
-            <img id="client_char" alt="Character sprite" onerror="imgError(this);">
-            <img id="client_bench" alt="Bench overlay">
-            <img id="client_fg" alt="Various overlay" onerror="imgError(this);">
-            <div id="client_name">
-                <p>Dolan</p>
+        <div id="client_charselect">
+        <button onclick="pickchar(1001)">SPECTATE</button>
+        <table id="client_chartable"></table>
+    </div>
+    <div style="display: flex; flex-wrap: wrap; flex-shrink: 1;">
+        <div>
+        <div id="client_wrapper">
+            <div id="client_gamewindow">
+                <img id="client_court" alt="Courtroom background" onerror="imgError(this);">
+                <img id="client_char" alt="Character sprite" onerror="imgError(this);">
+                <img id="client_bench" alt="Bench overlay">
+                <img id="client_fg" alt="Various overlay" onerror="imgError(this);">
+                <div id="client_name">
+                    <p>Dolan</p>
+                </div>
+                <div id="client_chat">
+                    <p id="client_inner_chat"></p>
+                </div>
             </div>
-            <div id="client_chat">
-                <p id="client_inner_chat"></p>
+            <input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;">
+            <div id="client_emo">
             </div>
-        </div>
-		<input id="client_inputbox" class="long" type="text" onKeyPress="onEnter(event)">
-        <div id="client_emo">
-        </div>
-        <br>
-        <div id="client_buttons">
-            <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)">
-            <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)">
-            <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)">
             <br>
-            <input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx">
-            <label for="sendsfx">SFX</label>
+            <div id="client_buttons">
+                <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)">
+                <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)">
+                <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)">
+                <br>
+                <input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx">
+                <label for="sendsfx">SFX</label>
+            </div>
         </div>	
-    </div>
-	<div id="client_settings">
-			Music <input id="client_mvolume" class="long" type="range"  min="0" max="100" value="80" onChange="changeMusicVolume()">
-			SFX <input id="client_svolume" class="long" type="range"  min="0" max="100" value="70" onChange="changeSFXVolume()">
-			Blip <input id="client_bvolume" class="long" type="range"  min="0" max="100" value="60" onChange="changeBlipVolume()">
-			<input id="change_character" type="button" onClick="changeCharacter()" value="Change character">
+        <div id="client_settings">
+            <div class="slider">Music<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()"></div>
+            <div class="slider">SFX <input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()"></div>
+            <div class="slider">Blip <input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()"></div>
+            <input id="change_character" type="button" onclick="changeCharacter()" value="Change character">
         </div>
-
-    <div id="client_chatlog">
-        <div id="client_log">
         </div>
-        <div id="client_bars">
-            <img class="client_defense" alt="Defense health background" id="client_defense_bg" src="misc/zdoh.png">
-            <img class="client_defense" alt="Defense health" id="client_defense_hp" src="misc/advocat.png">
-
-            <img class="client_prosecutor" alt="Prosecution health background" id="client_prosecutor_bg" src="misc/zdoh.png">
-            <img class="client_prosecutor" alt="Prosecution health" id="client_prosecutor_hp" src="misc/procuror.png">
+        <div id="client_chatlog" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));grid-template-rows: repeat(auto-fit, minmax(10em, 40em));">
+        <div style="display: flex; flex-direction: column;">
+            <div id="client_log" style="flex: 1"></div>
+            <div id="client_bars">
+                <span style="background-image: url(&quot;misc/zdoh.png&quot;); width: 90px; height: 20px;">
+                    <img class="client_defense" alt="Defense health" id="client_defense_hp" src="misc/advocat.png" style="clip-path: polygon(0px 0px, 90px 0px, 90px 20px, 0px 20px, 0px 0px); clip: rect(0px, 90px, 20px, 0px);">
+                </span>
+                <span style="background-image: url(&quot;misc/zdoh.png&quot;); width: 90px; height: 20px;" misc="">
+                    <img class="client_prosecutor" alt="Prosecution health" id="client_prosecutor_hp" src="misc/procuror.png" style="clip-path: polygon(0px 0px, 90px 0px, 90px 20px, 0px 20px, 0px 0px); clip: rect(0px, 90px, 20px, 0px);" misc="">
+                </span>
+            </div>
+        </div>
+        <div style="display: flex; flex-direction: column; /* grid-column: 2; */ /* grid-row: 1; */">
+            <textarea id="client_ooclog" style="/* margin: 25px 0px 0px; *//* height: 563px; *//* width: 615px; *//* min-width: 100%; */min-height: 20em;">
+            </textarea>
+            <input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)">
+        </div>
+            <select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="/* margin-top: 20px; *//* margin-bottom: 0px; *//* height: 361px; */">
+            </select>
+        </div>
+        <div id="client_error" class="error" style="display: none">
+            <p>CONNECTION ERROR</p><br>
+            <button onclick="ReconnectButton()">RECONNECT</button>
         </div>
-        <textarea id="client_ooclog"></textarea>
-        <input id="client_oocinputbox" class="long" type="text" onKeyPress="onOOCEnter(event)">
-		<select id="client_musiclist" size="25" onclick="musiclist_click(event)"></select>
-    </div>
-    <div id="client_error" class="error" style="display: none">
-        <p>CONNECTION ERROR</p><br>
-        <button onclick='ReconnectButton()'>RECONNECT</button>
     </div>
-</body>
-
-</html>
-\ No newline at end of file
+</body></html>
+\ No newline at end of file
diff --git a/client.js b/client.js
index e67fa23..f2bba28 100644
--- a/client.js
+++ b/client.js
@@ -492,7 +492,7 @@ function onMessage(e) {
 			break;
 		case "DONE":
 			document.getElementById("client_loading").style.display = "none";
-			document.getElementById("client_chatlog").style.display = "block";
+			document.getElementById("client_chatlog").style.display = "grid";
 			document.getElementById("client_wrapper").style.display = "block";
 			document.getElementById("client_charselect").style.display = "block";
 			break;
author	oldmud0 <oldmud0@users.noreply.github.com>	2018-05-13 22:44:29 -0500
committer	oldmud0 <oldmud0@users.noreply.github.com>	2018-05-13 22:44:29 -0500
commit	09f3d0170b3cc1ee74a2266b595c81402ed4314c (patch)
tree	498aaeeff8c93247c62d1ded2a43d57d70004260
parent	26c12c9461be9c52057983f1240ac3bad57b68c1 (diff)