Sidebar now has scaffolding so we can begin hooking it to things
This commit is contained in:
shockrah
parent
47098dc2fc
commit
4dd168303b
@ -3,10 +3,10 @@
|
||||
"servers": [
|
||||
{
|
||||
"name": "cool1",
|
||||
"domain": "freechat.shockrah.io/",
|
||||
"domain": "freechat.shockrah.io",
|
||||
"ip": "0.0.0.0",
|
||||
"description": "really good",
|
||||
"key": "given by server don't worry fow now",
|
||||
"key": "this right here is the secret for that user",
|
||||
"username": "this is optional per server"
|
||||
},
|
||||
{
|
||||
@ -17,9 +17,7 @@
|
||||
}
|
||||
],
|
||||
|
||||
"ignore-me": "global's like this are mainly for default configuration things",
|
||||
"global-username": "shockrah",
|
||||
"bs-key": "ignore everthing past this point for now",
|
||||
"proxy": "one day this will be a thing",
|
||||
"private-key": "user key goes here",
|
||||
"public-key": "user public key also goes here"
|
||||
"proxy": "one day this will be a thing"
|
||||
}
|
||||
|
||||
@ -20,35 +20,46 @@
|
||||
<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>
|
||||
<!-- Now comes the list of serves that we're a part of -->
|
||||
</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">
|
||||
<ul class="navbav-nav mr-auto" style="display: inline-block;", id="server-list"></ul>
|
||||
<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-collapse">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="wrapper" id="content-container">
|
||||
<nav id="channels-container">
|
||||
<div class="channels-list-header"><h3>server name here</h3></div>
|
||||
<ul class="list-unstyled components">
|
||||
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
|
||||
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
|
||||
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
|
||||
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="joinform" class="modal fade" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content join-style">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Paste an invite link below</h5>
|
||||
</div>
|
||||
<div class="modal-header"> <h5 class="modal-title">Paste an invite link below</h5> </div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<input type="text" class="form-text">
|
||||
<label for="submit-invite-link" class="form-label" style="color:darkslategrey">Example: sample-domain.io/invite/42069</label>
|
||||
<label for="submit-invite-link" class="form-label" style="color:darkslategrey">Degen note: Freechat ONLY does HTTPS, so the prefix isn't needed. If anyone says otherwise they're full of shit</label>
|
||||
<button class="btn btn-outline-success" type="button" id="submit-invite-link">Join</button>
|
||||
<input type="text" class="form-text join-form-label" id="invite-link-text">
|
||||
<label for="submit-invite-link" class="form-label">Example: sample-domain.io/invite/42069</label>
|
||||
<label for="submit-invite-link" class="form-label">Degen note: Freechat ONLY does HTTPS, so the prefix isn't needed. If anyone says otherwise they're full of shit</label>
|
||||
<button class="btn btn-outline-success" type="button" id="invite-link-button">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,7 +67,11 @@
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
|
||||
<!-- 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>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>
|
||||
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron')
|
||||
@ -69,6 +84,7 @@
|
||||
node.classList.add('btn', 'btn-outline-secondary', 'btn-nav-settings')
|
||||
node.type = 'button'
|
||||
node.textContent = server['name']
|
||||
node.id = server['ip'] || server['url'] // perfer the ip to avoid dns
|
||||
parent.appendChild(node)
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
$top-grey: #424242;
|
||||
$back-grey: #303030;
|
||||
$bar-grey: #212121;
|
||||
$text: whitesmoke;
|
||||
|
||||
body {
|
||||
background: $back-grey;
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
@import 'general';
|
||||
|
||||
$text-color: white;
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
color: $text-color;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $text-color;
|
||||
color: $text;
|
||||
display: block;
|
||||
}
|
||||
.center {
|
||||
@ -31,7 +29,54 @@ input {
|
||||
// Menu bar stuff
|
||||
|
||||
.btn-nav-settings {
|
||||
color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
color: $text;
|
||||
border-color: $text;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
// Join modal meme
|
||||
.join-style {
|
||||
color: $text;
|
||||
background: $top-grey;
|
||||
}
|
||||
|
||||
.join-form-label {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
// mostly used to let the sidebar be of a correct height
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
// CHANNEL SIDEBAR Things
|
||||
#channels-container {
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.channels-list-header {
|
||||
color: $text;
|
||||
background-color: $back-grey;
|
||||
}
|
||||
|
||||
ul ul a {
|
||||
font-size: 0.9em !important;
|
||||
padding-left: 30px !important;
|
||||
background: #6d7fcc;
|
||||
}
|
||||
|
||||
#channels-container ul li a {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
#channels-container ul li a:hover {
|
||||
background-color: $bar-grey;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user