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

Making the navbar more responsive to screen changes

Browse Source 
! Bootstrap doesn't behave so dropdowns are borked but they'r theoretically there

LMAO at this example config update btw its gonna keep changing so I'm not updating its patch notes from here out until its a proper looking example
This commit is contained in:
shockrah 2021-01-01 20:04:11 -08:00
parent 6e0919e32c
commit e37d51f549
4 changed files with 63 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
freechat-client/example-dev-config.json
View File

@ -8,6 +8,12 @@
"description": "really good", "description": "really good",
"key": "given by server don't worry fow now", "key": "given by server don't worry fow now",
"username": "this is optional per server" "username": "this is optional per server"
},
{
"name": "another one"
},
{
"name": "shockrah's lair"
} }
], ],

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

@ -1,24 +1,69 @@
<!-- Keep in mind basically all the major components of the app are held together here --> <!-- Keep in mind basically all the major components of the app are held together here -->
<!-- The reason for this is because I want to keep the electron app as simple as I can get it --> <!-- The reason for this is because ~~~~~ I'm actually just lazy -->
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- required bs for bootstrap -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"/> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
<title>Freechat</title> <title>Freechat</title>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand"> <a class="navbar-brand">
<img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy"> <img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy">
Freechat Freechat
</a> </a>
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto" style="display: inline-block;">
<li class="nav-item"><a class="btn btn-outline-secondary btn-nav-settings">Settings</a></li> <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> </ul>
<div class="collapse navbar-collapse">
<ul class="navbav-nav mr-auto" style="display: inline-block;", id="server-list"></ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav> </nav>
<!--NOTE: for some reason this isn't popping up like it should/would on a browser -->
<div id="joinform" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<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"> </form>
</div>
</div>
</div>
</div>
</body> </body>
<script src="./js/loader.js"></script> <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
<script type="text/javascript" src="../libs/js/popper.min.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
const dom = require('./js/dom-helpers.js')
const { ipcRenderer } = require('electron')
const config = ipcRenderer.sendSync('config-request', 'benis')
// only put things like the server list up if theres anythng to put in there
if(config['servers']) {
let parent = document.getElementById('server-list')
for(const server of config['servers']) {
let node = document.createElement('button')
node.classList.add('btn', 'btn-outline-secondary', 'btn-nav-settings')
node.type = 'button'
node.textContent = server['name']
parent.appendChild(node)
console.log(node)
}
}
</script>
</html> </html>

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

@ -33,4 +33,5 @@ input {
.btn-nav-settings { .btn-nav-settings {
color: whitesmoke; color: whitesmoke;
border-color: whitesmoke; border-color: whitesmoke;
margin-right: 1em;
} }

2
freechat-client/src/config.js
View File

@ -16,7 +16,7 @@ function get_config(parser) {
// now we'll just blindly construct the config object from here on out // now we'll just blindly construct the config object from here on out
let ret = { path: path } let ret = { path: path }
for(const key in file_json.keys) { for(const key of Object.keys(file_json)) {
if(key == 'path') { continue } // don't overwrite the old path if(key == 'path') { continue } // don't overwrite the old path
else { else {
ret[key] = file_json[key] ret[key] = file_json[key]