From e57fd498aec44d7e0b0fd52e7d4e302264665830 Mon Sep 17 00:00:00 2001
From: shockrah <alejandros714@protonmail.com>
Date: Mon, 18 Jan 2021 16:35:01 -0800
Subject: [PATCH] Working collapsing navbar

---
 freechat-client/pages/index.html | 71 +++++++++++++++++++++++---------
 freechat-client/sass/style.scss  | 69 +++++++++++++++++++++++++++++--
 2 files changed, 117 insertions(+), 23 deletions(-)
diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index e058dd8..0b89085 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -12,27 +12,20 @@
 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-	<div class="container-fluid">
-		<a class="navbar-brand">
-			<img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy">
-			Freechat
-		</a>
+	<a class="navbar-brand">
+		<img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy">
+		Freechat
+	</a>
+	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-opts" aria-controls="navbar-opts" aria-expanded="false" aria-label="Toggle navigation">
+		<span class="navbar-toggler-icon"></span>
+	</button>
+	<div class="collapse navbar-collapse" id="navbar-opts">
 		<ul class="navbar-nav mr-auto" style="display: inline-block;">
 			<button class="btn btn-outline-secondary btn-nav-settings me-2" type="button" id="settings-btn">Settings</button>
 			<button class="btn btn-outline-secondary btn-nav-settings" type="button" id="join-btn" data-toggle="modal", data-target="#joinform">Join</button>
 		</ul>
-		<!-- Basically a container for the "hamburger-collapse-button-thing" to target when it does have to collapse -->
-		<!-- 
-			Alternatively we could simply make the list of items scrollable or something but like that would be kinda aids 
-			Though to be fair no one should be in 9999  instances cuz that's degeneracy(also this is what configs are literally made for)
-		-->
-		<div class="collapse navbar-collapse", id="nav-collapse">
-			<ul class="navbav-nav mr-auto", id="server-list"></ul>
-		</div>
-		<!-- Button used for the collapsing thingy - the ((hamburger menu)) -->
-		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-collapse">
-      		<span class="navbar-toggler-icon"></span>
-    	</button>
+		<!-- SERVER LIST -->
+		<ul class="navbav-nav mr-auto", id="server-list" style="display: inline-block;"></ul>
 	</div>
 </nav>
 
@@ -47,7 +40,47 @@
 			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
 		</ul>
 	</nav>
-	<div class="container" id="messages-container" style="background-color: blue">more bs content</div>
+	<!-- Sample data so we know what things should look like -->
+	<div class="container" id="messages-container" style="max-width: 100%;">
+		<div class="channel-list-header"><h4>#Channel name here</h4></div>
+		<div class="channel-list-header"><p>Channel description here</p></div>
+		<ul class="list-unstyled components" id="messages-list">
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
+		</ul>
+		<div class="container" id="send-container">
+			<form class="form-inline">
+				<div class="form-group">
+					<input type="text" class="form-control" id="message-box" placehold="Message">
+					<button class="btn btn-primary" type="button">Send</button>
+				</div>
+			</form>
+		</div>
+	</div>
+	<!-- Message box -->
 </div>
 
 <div id="joinform" class="modal fade" tabindex="-1">
@@ -68,7 +101,7 @@
 
 </body>
 <!-- JQuery doesn't load so our squishy boi of the the collapsable menu literally doesn't work-->
-<!-- <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script> -->
+<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script>window.jQuery = window.$ = require('jquery')</script>
 <script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper.js"></script>
 <script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper-utils.js"></script>
diff --git a/freechat-client/sass/style.scss b/freechat-client/sass/style.scss
index 4ee0500..e64f0d1 100644
--- a/freechat-client/sass/style.scss
+++ b/freechat-client/sass/style.scss
@@ -2,6 +2,14 @@
 
 body {
     color: $text;
+	max-height: 1080px;
+	max-width: 1920px;
+
+	min-width: 640px;
+	min-height: 480px;
+
+	overflow-y: hidden;
+	overflow-x: hidden;
 }
 
 
@@ -27,7 +35,6 @@ input {
 }
 
 // Menu bar stuff
-
 .btn-nav-settings {
 	color: $text;
     border-color: $text;
@@ -54,8 +61,8 @@ input {
 
 // CHANNEL SIDEBAR Things
 #channels-container {
-    min-width: 200px;
-    max-width: 200px;
+    min-width: 150px;
+    max-width: 150px;
     min-height: 100vh;
 }
 
@@ -79,4 +86,58 @@ ul ul a {
 
 #channels-container ul li a:hover {
     background-color: $bar-grey;
-}
\ No newline at end of file
+}
+
+.author-name {
+    color: white;
+}
+
+.message {
+    padding: 10px;
+    display: block;
+    text-decoration: none;
+    color: $text;
+}
+
+.message:hover {
+    background-color: $top-grey;
+}
+
+.message a:hover {
+    background-color: $bar-grey;
+    color: $text;
+    text-decoration: none;
+}
+
+.message a:focus {
+    background-color: $bar-grey;
+    color: $text;
+    text-decoration: none;
+}
+
+
+#messages-container {
+	padding-bottom: 50px;
+	overflow-y: scroll;
+	min-height: 480;
+	max-height: 1080px;
+	//max-height: 100%;
+}
+
+// Now the message box which must be pinned at the bottom
+#send-container {
+	position: absolute;
+	bottom: 0;
+	height: 50px;
+	width: 100vw;
+}
+
+#message-box {
+	padding-right: 25px;
+}
+
+#message-submit {
+	padding-left: 25px;
+	width: 25px;
+}
+
