Add Bootstrap 4 support

Framework7
Skylar Ittner 6 years ago
parent 266e5ffd02
commit 7bf1536ee8

@ -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;
}

@ -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;

@ -30,9 +30,9 @@ function openscreen(screenname, effect) {
}
/**
* Fetch user info (name, email, etc) from the server and save to the global
* Fetch user info (name, email, etc) from the server and save to the global
* variable `userinfo`.
* @param function callback An optional function to run if/when the request
* @param function callback An optional function to run if/when the request
* succeeds.
*/
function getuserinfo(callback) {
@ -90,7 +90,7 @@ function addnavbarbtn(screenid, icon, title) {
/**
* Set the navbar options.
*
*
* @param String title Text to display
* @param boolean showarrow True if the back arrow should be visible
* @param Stringn backscreen The screen to open when the title is pressed, false or null for none
@ -110,8 +110,8 @@ function setnavbartitle(title, showarrow, backscreen) {
/**
* Set the navbar.
* @param String,boolean type false if no navbar, "home" for the home screen,
* "settings" for settings, "app" for a custom title, or anything else for
* @param String,boolean type false if no navbar, "home" for the home screen,
* "settings" for settings, "app" for a custom title, or anything else for
* a simple one.
* @param String screentitle The title to show if type == "app"
* @param String returnscreen Where to go back to. Defaults to "home".
@ -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…
Cancel
Save