Adjust app bar to material design specs, add more animations,
add background to app icons while loading from server
This commit is contained in:
parent
4b869c9c4d
commit
104fade463
@ -38,7 +38,11 @@ html, body {
|
||||
|
||||
.app-dock-item p img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: block;
|
||||
background: url(../img/app-icon-bg.svg) no-repeat;
|
||||
background-size: 90%;
|
||||
background-position: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -49,20 +53,29 @@ html, body {
|
||||
|
||||
span.navbar-brand {
|
||||
color: white;
|
||||
margin-right: 0px;
|
||||
height: 30px;
|
||||
margin-top: -4px;
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.navbar-brand.pull-left img {
|
||||
margin-right: -10px;
|
||||
height: 30px;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.navbar-brand.pull-right img {
|
||||
margin-right: 6px;
|
||||
height: 30px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#manual_setup {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
min-height: 56px;
|
||||
}
|
||||
@ -21,6 +21,22 @@
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#navbar-collapse {
|
||||
display: none;
|
||||
|
||||
108
www/img/app-icon-bg.svg
Normal file
108
www/img/app-icon-bg.svg
Normal file
@ -0,0 +1,108 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 512.00001 512.00001"
|
||||
id="svg2"
|
||||
version="1.1">
|
||||
<defs
|
||||
id="defs4">
|
||||
<pattern
|
||||
height="8.15625"
|
||||
patternTransform="translate(201.25 133.47)"
|
||||
patternUnits="userSpaceOnUse"
|
||||
width="8.6875"
|
||||
id="pattern6179">
|
||||
<path
|
||||
d="m1.9375 0.5c-0.8781 0.7454-1.4375 1.8526-1.4375 3.0938 0 2.2424 1.82 4.0624 4.0625 4.0624 1.5819 0 2.9541-0.9292 3.625-2.25-0.7084 0.6014-1.6237 1-2.625 1-2.2425 0-4.0625-1.82-4.0625-4.0624 0-0.6607 0.1573-1.2922 0.4375-1.8438z"
|
||||
style="opacity:.32394;stroke-opacity:0;fill:#eeeeec"
|
||||
id="path6174" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(0,-540.36216)">
|
||||
<rect
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.74509804"
|
||||
id="rect4726"
|
||||
width="512"
|
||||
height="512"
|
||||
x="0"
|
||||
y="540.36218"
|
||||
rx="50"
|
||||
ry="50" />
|
||||
<g
|
||||
transform="translate(0,-2.2617187e-5)"
|
||||
id="layer1-9">
|
||||
<g
|
||||
transform="translate(0.61384869,9.1476514)"
|
||||
id="g4610">
|
||||
<g
|
||||
style="fill:#dcdcdc;fill-opacity:1"
|
||||
id="g4528">
|
||||
<rect
|
||||
y="726.60608"
|
||||
x="145.6884"
|
||||
height="296.34189"
|
||||
width="100.27342"
|
||||
id="rect4194-3"
|
||||
style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
|
||||
rx="15"
|
||||
ry="15" />
|
||||
<rect
|
||||
y="797.948"
|
||||
x="263.57608"
|
||||
height="225"
|
||||
width="100.27342"
|
||||
id="rect4194-6"
|
||||
style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
|
||||
rx="15"
|
||||
ry="15" />
|
||||
<rect
|
||||
y="858.0174"
|
||||
x="30.26951"
|
||||
height="164.93059"
|
||||
width="100.27342"
|
||||
id="rect4194-6-7"
|
||||
style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
|
||||
rx="15"
|
||||
ry="15" />
|
||||
<rect
|
||||
y="551.48108"
|
||||
x="380.22937"
|
||||
height="471.46692"
|
||||
width="100.27342"
|
||||
id="rect4194"
|
||||
style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
|
||||
rx="15"
|
||||
ry="15" />
|
||||
</g>
|
||||
<g
|
||||
id="g4568">
|
||||
<path
|
||||
style="fill:#bce0fc;fill-opacity:1;stroke:#ffffff;stroke-width:7;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="m 195.89258,55.101562 a 24.748737,24.748737 0 0 0 -24.81641,24.681641 24.748737,24.748737 0 0 0 3.02344,11.867188 L 76.679688,335.07617 a 24.748737,24.748737 0 0 0 -21.021485,24.38281 24.748737,24.748737 0 0 0 24.679688,24.81641 24.748737,24.748737 0 0 0 24.816409,-24.68164 24.748737,24.748737 0 0 0 -5.242191,-15.28711 l 94.437501,-235.9707 100.24609,303.2539 a 24.748737,24.748737 0 0 0 -5.63086,15.625 24.748737,24.748737 0 0 0 24.67969,24.81641 24.748737,24.748737 0 0 0 24.81641,-24.67969 24.748737,24.748737 0 0 0 -7.86328,-18.11914 L 432.16602,180.64453 a 24.748737,24.748737 0 0 0 22.94921,-24.60937 24.748737,24.748737 0 0 0 -24.68164,-24.81641 24.748737,24.748737 0 0 0 -24.8164,24.67969 24.748737,24.748737 0 0 0 4.10547,13.68945 L 312.93359,387.41602 215.99609,94.166016 a 24.748737,24.748737 0 0 0 4.57813,-14.248047 24.748737,24.748737 0 0 0 -24.68164,-24.816407 z"
|
||||
transform="translate(0,540.36219)"
|
||||
id="circle4572" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
@ -123,19 +123,22 @@ function setnavbar(type, title, returnscreen) {
|
||||
} else {
|
||||
_returnscreen = returnscreen;
|
||||
}
|
||||
switch (type) {
|
||||
case "home":
|
||||
navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right" onclick="openscreen(\'settings\', \'FADE\')"><img src="icons/ic_settings.svg" alt="" /></span>');
|
||||
break;
|
||||
case "settings":
|
||||
navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand" style="color: white;" onclick="openscreen(\'home\')">Settings</span>');
|
||||
break;
|
||||
case "app":
|
||||
navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand" style="color: white;" onclick="openscreen(\'' + returnscreen + '\')">' + title + '</span>');
|
||||
break;
|
||||
default:
|
||||
navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
|
||||
}
|
||||
navbar.fadeOut(150, function () {
|
||||
switch (type) {
|
||||
case "home":
|
||||
navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right" onclick="openscreen(\'settings\', \'FADE\')"><img src="icons/ic_settings.svg" alt="" /></span>');
|
||||
break;
|
||||
case "settings":
|
||||
navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'home\', \'FADE\')">Settings</span>');
|
||||
break;
|
||||
case "app":
|
||||
navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'' + returnscreen + '\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'' + returnscreen + '\', \'FADE\')">' + title + '</span>');
|
||||
break;
|
||||
default:
|
||||
navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
|
||||
}
|
||||
navbar.fadeIn(150);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
if (!app.icon.startsWith("http")) {
|
||||
iconurl = app.url + app.icon;
|
||||
}
|
||||
$('#app-dock').append("<div class=\"app-dock-item\" onclick=\"openapp('" + k + "', '" + app.mobileapi + "', '" + app.url + "', '" + iconurl + "', '" + app.title + "')\"><p><img src=\"" + iconurl + "\" class=\"img-responsive app-icon\" /><span>" + app.title + "</span></p></div>");
|
||||
$("<div class=\"app-dock-item\" onclick=\"openapp('" + k + "', '" + app.mobileapi + "', '" + app.url + "', '" + iconurl + "', '" + app.title + "')\"><p><img src=\"" + iconurl + "\" class=\"img-responsive app-icon\" /><span>" + app.title + "</span></p></div>").hide().appendTo("#app-dock").fadeIn(200);
|
||||
});
|
||||
} else {
|
||||
navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user