freechat/freechat-client/pages/index.html
shockrah e37d51f549 Making the navbar more responsive to screen changes
! 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
2021-01-01 20:04:11 -08:00

70 lines
2.8 KiB
HTML

<!-- Keep in mind basically all the major components of the app are held together here -->
<!-- The reason for this is because ~~~~~ I'm actually just lazy -->
<html>
<head>
<meta charset="utf-8"/>
<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="css/style.css"/>
<title>Freechat</title>
</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>
<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>
<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>
<!--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>
<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>