rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-02-09 00:08:53 +01:00
Code Issues Projects Releases Wiki Activity

Menu bar will now collapse to expandable button when screen size is too thin.

Browse Source
This commit is contained in:
KoboldAI Dev 2021-05-17 00:42:47 -04:00
parent 95cb94e979
commit 643e0105d8
2 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/custom.css
View File

@ -391,6 +391,45 @@ chunk {
background-color: #98bcdb; background-color: #98bcdb;
} }
.navbar-toggler {
background-color: #337ab7;
border: 1px solid #98bcdb;
height: 45px;
width: 60px;
border-radius: 6px;
}
.navbar-toggler:hover {
background-color: #98bcdb;
}
@media (min-width: 768px) {
.navbar-toggler {
display: none;
}
}
@media (max-width: 768px) {
.nav-item {
margin-bottom: 3px;
}
}
.navbar-button-bar {
display: block;
height: 2px;
width: 42px;
border: 1px solid #fff;
}
.navbar-button-bar + .navbar-button-bar {
margin-top: 4px;
}
.navcontainer {
}
.popupcontainer { .popupcontainer {
position: absolute; position: absolute;
top: 0px; top: 0px;

13
templates/index.html
View File

@ -6,20 +6,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="static/socket.io.min.js"></script> <script src="static/socket.io.min.js"></script>
<script src="static/application.js?ver=0.14.1"></script> <script src="static/application.js?ver=0.14.2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="static/bootstrap-toggle.min.js"></script> <script src="static/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="static/bootstrap-toggle.min.css"> <link rel="stylesheet" href="static/bootstrap-toggle.min.css">
<link rel="stylesheet" href="static/custom.css?ver=0.14.1"> <link rel="stylesheet" href="static/custom.css?ver=0.14.2">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="row" id="topmenu"> <div class="row" id="topmenu">
<div id="menuitems"> <div id="menuitems">
<div> <div class="navcontainer">
<nav class="navbar default" id="navbar"> <nav class="navbar" id="navbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-button-bar"></span>
<span class="navbar-button-bar"></span>
<span class="navbar-button-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item"> <li class="nav-item">