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

Skylar Ittner 4 years ago
parent c164cd99e4
commit 861c669772

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

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

@ -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>
@ -62,4 +64,6 @@
</ul>
</div>
</div>
</div>
</div>
</div>

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

@ -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>
@ -47,4 +49,6 @@
Scan Barcode feature.
</div>
</div>
</div>
</div>
</div>

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

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

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

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

@ -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}}", {

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

Loading…
Cancel
Save