Add Bootstrap 4 support
This commit is contained in:
parent
266e5ffd02
commit
7bf1536ee8
76
www/css/sidemenu-bs3.css
Normal file
76
www/css/sidemenu-bs3.css
Normal file
@ -0,0 +1,76 @@
|
||||
/*
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
@media screen and (max-width: 767px) {
|
||||
.navbar, .navbar-brand {
|
||||
min-height: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 20px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
border: 0px solid white;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
#navbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.navbar-toggle[data-toggle="collapse"] {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-header .navbar-brand {
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.navbar-header .navbar-brand img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#swipe-nav ul {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 2px;
|
||||
list-style-type: none;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li {
|
||||
color: #424242;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li a:focus,a:active {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#swipe-nav ul li i.fa {
|
||||
font-size: 120%;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li a {
|
||||
display: inline-block;
|
||||
color: #424242;
|
||||
font-size: 110%;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
48
www/css/sidemenu-bs4.css
Normal file
48
www/css/sidemenu-bs4.css
Normal file
@ -0,0 +1,48 @@
|
||||
/*
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
@media screen and (max-width: 767px) {
|
||||
#navbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#swipe-nav .swipe-list {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 0px;
|
||||
list-style-type: none;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#swipe-nav .swipe-list .nav-item {
|
||||
color: #424242;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#swipe-nav .swipe-list .nav-item a:focus,a:active {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#swipe-nav .swipe-list .nav-item i.fa {
|
||||
font-size: 120%;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#swipe-nav .swipe-list .nav-item a {
|
||||
display: inline-block;
|
||||
color: #424242;
|
||||
font-size: 110%;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#swipe-nav .swipe-list .nav-item a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -15,41 +15,6 @@
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.navbar, .navbar-brand {
|
||||
min-height: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 20px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
border: 0px solid white;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
#navbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.navbar-toggle[data-toggle="collapse"] {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-header .navbar-brand {
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.navbar-header .navbar-brand img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#swipe-nav {
|
||||
display: none;
|
||||
visibility: visible;
|
||||
@ -92,43 +57,6 @@
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
#swipe-nav ul {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 2px;
|
||||
list-style-type: none;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li {
|
||||
color: #424242;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li a:focus,a:active {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#swipe-nav ul li i.fa {
|
||||
font-size: 120%;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li a {
|
||||
display: inline-block;
|
||||
color: #424242;
|
||||
font-size: 110%;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#swipe-nav ul li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#swipe-nav #swipe-pages {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
|
||||
@ -168,6 +168,17 @@ function setnavbar(type, screentitle, returnscreen) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Thanks to https://stackoverflow.com/a/13542669
|
||||
* @param {type} color
|
||||
* @param {type} percent
|
||||
* @returns {String}
|
||||
*/
|
||||
function shadeColor2(color, percent) {
|
||||
var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00FF, B = f & 0x0000FF;
|
||||
return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the app.html view and open an app with native Android UI elements
|
||||
* @param String id Application ID
|
||||
|
||||
@ -52,20 +52,34 @@ function togglemenu() {
|
||||
|
||||
$(document).ready(function () {
|
||||
$.fx.off = __JQUERYFXOFF__;
|
||||
var bootstrap_version = $.fn.tooltip.Constructor.VERSION;
|
||||
if (typeof navbar_breakpoint != "undefined") {
|
||||
var nav_breakpoint = navbar_breakpoint;
|
||||
} else {
|
||||
var nav_breakpoint = "sm";
|
||||
}
|
||||
var pages = $('#navbar-collapse .navbar-nav').html();
|
||||
var body = $('body');
|
||||
var username = "__USERNAME__";
|
||||
var menucolor = $('.navbar').css('backgroundColor');
|
||||
var textcolor = $('.navbar .navbar-nav > li > a').css('color');
|
||||
var textcolor = $('.navbar .navbar-brand').css('color');
|
||||
var logo = "__LOGO__";
|
||||
body.append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<ul id='swipe-pages'>" + pages + "</ul><ul><li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li></ul></div>");
|
||||
|
||||
parent.postMessage("setcolor " + menucolor, "*");
|
||||
parent.postMessage('load_bs_version ' + bootstrap_version + ' ' + nav_breakpoint, '*');
|
||||
|
||||
if (bootstrap_version.startsWith("4")) {
|
||||
$('#navbar-right').html("<span class='nav-item py-" + nav_breakpoint + "-0'><a class='nav-link py-" + nav_breakpoint + "-0' onclick='quitapp()'><i class='fas fa-sign-out-alt fa-fw'></i> Back to Menu</a></span>");
|
||||
body.append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<div id='swipe-pages' class='swipe-list'>" + pages + "</div><div class='swipe-list'><span class='nav-item'><a class='nav-link' onclick='quitapp()'><i class='fas fa-sign-out-alt fa-fw'></i> Back to Menu</a></span></div></div>");
|
||||
} else {
|
||||
body.append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<ul id='swipe-pages'>" + pages + "</ul><ul><li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li></ul></div>");
|
||||
}
|
||||
body.append("<div id='swipe-shader'></div>");
|
||||
|
||||
$(".navbar-brand").attr("href", "#");
|
||||
|
||||
parent.postMessage("setcolor " + menucolor, "*");
|
||||
|
||||
$('button.navbar-toggle[data-toggle="collapse"]').click(togglemenu);
|
||||
$('button.navbar-toggler[data-toggle="collapse"]').click(togglemenu);
|
||||
|
||||
$('#swipe-shader').click(togglemenu);
|
||||
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
historyctr++;
|
||||
// Do this right away so it's a bit harder to glitch
|
||||
$('#appframe').contents().find('.navbar-right').html("<li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li>");
|
||||
// Moved BS4 code to sidemenu.js
|
||||
$.get("css/sidemenu.css", function (style) {
|
||||
$('#appframe').contents().find('head').append("<style>" + style + "</style>");
|
||||
$.get("js/jquery-ui.min.js", function (script) {
|
||||
@ -75,20 +76,48 @@
|
||||
}
|
||||
|
||||
var scanningactive = false;
|
||||
var dedup = false;
|
||||
var dedup = [];
|
||||
window.addEventListener('message', function (event) {
|
||||
console.log("app event: " + event.data);
|
||||
setTimeout(function () {
|
||||
dedup = false;
|
||||
dedup = [];
|
||||
}, 500);
|
||||
if (dedup) {
|
||||
if (dedup.includes(event.data)) {
|
||||
return;
|
||||
}
|
||||
dedup = true;
|
||||
dedup.push(event.data);
|
||||
if (event.data == "quit") {
|
||||
openscreen("home");
|
||||
} else if (event.data == "goneback") {
|
||||
historyctr -= 1;
|
||||
} else if (event.data.startsWith("load_bs_version ")) {
|
||||
var bootstrap_version = event.data.split(" ")[1];
|
||||
var nav_breakpoint = event.data.split(" ")[2];
|
||||
var bs_file = "bs3";
|
||||
if (bootstrap_version.startsWith("4")) {
|
||||
bs_file = "bs4";
|
||||
}
|
||||
$.get("css/sidemenu-" + bs_file + ".css", function (style) {
|
||||
if (bs_file == "bs4") {
|
||||
var break_px = "767";
|
||||
switch (nav_breakpoint) {
|
||||
case "sm":
|
||||
break_px = "575";
|
||||
break;
|
||||
case "md":
|
||||
break_px = "767";
|
||||
break;
|
||||
case "lg":
|
||||
break_px = "991";
|
||||
break;
|
||||
case "xl":
|
||||
break_px = "1199";
|
||||
break;
|
||||
}
|
||||
style = style.replace("max-width: 767px", "max-width: " + break_px + "px");
|
||||
}
|
||||
$('#appframe').contents().find('head').append("<style>" + style + "</style>");
|
||||
});
|
||||
} else if (event.data.startsWith("setcolor ")) {
|
||||
var color = event.data.split(" ", 2)[1];
|
||||
if (cordova.platformId == 'android') {
|
||||
@ -99,6 +128,7 @@
|
||||
return;
|
||||
}
|
||||
}
|
||||
StatusBar.backgroundColorByHexString(shadeColor2(color, -0.1));
|
||||
} else {
|
||||
StatusBar.backgroundColorByHexString(color);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user