shockrah/freechat
shockrah/freechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working collapsing navbar

Browse Source
This commit is contained in:
shockrah 2021-01-18 16:35:01 -08:00
parent 8a4cac65ff
commit e57fd498ae
2 changed files with 117 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
freechat-client/pages/index.html
View File

@ -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>

69
freechat-client/sass/style.scss
View File

@ -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;
}
}
.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;
}