Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

Toolbox: Center UIs in middle of screen with max width (#36)

Browse Source
This commit is contained in:
Skylar Ittner 2020-04-03 13:44:52 -06:00
parent c164cd99e4
commit 861c669772
11 changed files with 384 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/assets/css/tablet.css
View File

@ -47,7 +47,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
padding-bottom: 0;
}
.page[data-name="add"] #add-tab .list {
.elevation-tablet {
/* .elevation-3 */
box-shadow: var(--f7-elevation-3)!important;
}
@ -63,7 +63,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
}
@media all and (min-width: 768px) and (min-height: 700px) {
.page[data-name="add"] #add-tab .page-content {
.margin-top-tablet {
margin-top: 1rem;
}
}

4
www/pages/add.html
View File

@ -61,8 +61,8 @@
</div>
</div>
</div>
<div class="page-content row justify-content-center">
<div class="list no-margin-top col-100 medium-80 large-50">
<div class="page-content row justify-content-center margin-top-tablet">
<div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
<ul>
<li class="item-divider">Address</li>
<li>

4
www/pages/toolbox.html
View File

@ -17,6 +17,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
@ -63,3 +65,5 @@
</div>
</div>
</div>
</div>
</div>

4
www/pages/toolbox/addrlookup.html
View File

@ -18,6 +18,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list no-margin-top">
<ul>
<li>
@ -114,6 +116,8 @@
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/toolbox_addresslookup.js"></script>

4
www/pages/toolbox/scanner.html
View File

@ -17,6 +17,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
@ -48,3 +50,5 @@
</div>
</div>
</div>
</div>
</div>

4
www/pages/toolbox/scanner/entries.html
View File

@ -22,6 +22,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
{{#if entries}}
<div class="list media-list no-margin-top no-hairlines">
<ul>
@ -55,6 +57,8 @@
</div>
{{/if}}
</div>
</div>
</div>
<script src="assets/js/toolbox_scannerentries.js"></script>
</div>

4
www/pages/toolbox/scanner/scanner.html
View File

@ -95,12 +95,16 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
<div class="list no-hairlines tablet-inset">
<ul id="codelist">
</ul>
</div>
<div style="height: 3rem;"></div>
</div>
</div>
</div>
<script src="assets/js/toolbox_scanner.js"></script>

4
www/pages/toolbox/sharelist.html
View File

@ -17,6 +17,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list media-list no-hairlines tablet-inset no-margin-top">
<ul>
<li class="item-divider">Send List</li>
@ -63,6 +65,8 @@
type in the code beneath the barcode.
</div>
</div>
</div>
</div>
<script src="assets/js/toolbox_sharelist.js"></script>
</div>

8
www/pages/toolbox/track.html
View File

@ -23,7 +23,9 @@
</div>
<div class="page-content">
<div class="list no-hairlines tablet-inset">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="list no-hairlines tablet-inset elevation-tablet">
<ul>
<li class="item-content item-input">
<div class="item-inner">
@ -49,7 +51,7 @@
</div>
{{#if trackingcodehistory}}
<div class="list no-hairlines tablet-inset">
<div class="list no-hairlines tablet-inset elevation-tablet">
<ul>
<li class="item-divider">
History
@ -67,6 +69,8 @@
</div>
{{/if}}
</div>
</div>
</div>
<script src="assets/js/toolbox_track.js"></script>
</div>

4
www/pages/toolbox/trackinginfo.html
View File

@ -22,6 +22,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list media-list no-hairlines tablet-inset no-margin-top">
<ul>
<li class="item-divider">Information</li>
@ -77,6 +79,8 @@
</ul>
</div>
</div>
</div>
</div>
<script>
JsBarcode("#trackingbarcode", "{{#if barcode}}{{escape barcode}}{{else}}{{escape code}}{{/if}}", {

5
www/pages/toolbox/weather.html
View File

@ -22,7 +22,8 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
<div class="block text-align-center">
<img id="weathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
@ -48,6 +49,8 @@
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/toolbox_weather.js"></script>
</div>