NeilBrommer/NewTabPage
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add a background color to the navbar toggler, better button colors

Browse source
This commit is contained in:
Neil Brommer 2017-12-13 19:50:55 -08:00
parent e5c65068ad
commit 4a4befa2c5
3 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -24,16 +24,16 @@
<nav class="navbar navbar-dark bg-dark"> <nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand"></span> <span class="navbar-brand"></span>
<button class="btn btn-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" <button class="btn btn-light navbar-toggler toggler-bg-light" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<form class="form-inline"> <form class="form-inline">
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal"><span class="fas fa-question-circle"></span> About</button> <button id="btnAbout" class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal"><span class="fas fa-question-circle"></span> About</button>
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal"><span class="fas fa-exchange-alt" data-fa-transform="rotate-90"></span> Import/Export</button> <button id="btnImport" class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal"><span class="fas fa-exchange-alt" data-fa-transform="rotate-90"></span> Import/Export</button>
<button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button> <button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-pencil-alt"></span> Edit</button>
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fas fa-plus-circle"></span> Add</button> <button id="btnAdd" class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fas fa-plus-circle"></span> Add</button>
</form> </form>
</div> </div>
</nav> </nav>

10
js/main.js
View file

@ -35,12 +35,14 @@ function calcBackground() {
function setBackground(num, dark) { function setBackground(num, dark) {
$("body").css("background-image", "url(img/" + num + ".png)"); $("body").css("background-image", "url(img/" + num + ".png)");
// dark is a boolean that indicates the brightness of the background
if (dark) { if (dark) {
$(".btn-light").removeClass("btn-light").addClass("btn-dark");
$(".navbar").removeClass("navbar-light").addClass("navbar-dark");
} else {
$(".btn-dark").removeClass("btn-dark").addClass("btn-light");
$(".navbar").removeClass("navbar-dark").addClass("navbar-light"); $(".navbar").removeClass("navbar-dark").addClass("navbar-light");
$(".navbar-toggler").removeClass("toggler-bg-dark btn-dark").addClass("toggler-bg-light btn-light");
} else {
$(".navbar").removeClass("navbar-light").addClass("navbar-dark");
$(".navbar-toggler").removeClass("toggler-bg-light btn-light").addClass("toggler-bg-dark btn-dark");
} }
} }

8
main.css
View file

@ -50,6 +50,14 @@ pre {
margin-right: 50px; margin-right: 50px;
} }
.toggler-bg-dark {
background: rgba(0, 0, 0, 0.24);
}
.toggler-bg-light {
background: rgba(255, 255, 255, 0.24);
}
/* set the width of the main container based on element width */ /* set the width of the main container based on element width */
@media (max-width: 34em) { @media (max-width: 34em) {
#wrapper { #wrapper {