Add Items: Put add and history tabs side by side on wide screens (#36)
This commit is contained in:
parent
0ff2eec985
commit
02a1dfa2a1
52
www/assets/css/tablet.css
Normal file
52
www/assets/css/tablet.css
Normal file
@ -0,0 +1,52 @@
|
||||
/*
|
||||
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/.
|
||||
*/
|
||||
/*
|
||||
Created on : Apr 3, 2020, 11:55:50 AM
|
||||
Author : Skylar Ittner
|
||||
*/
|
||||
|
||||
.only-tablet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 768px) {
|
||||
.only-tablet {
|
||||
display: inherit;
|
||||
}
|
||||
.no-tablet {
|
||||
display: none;
|
||||
}
|
||||
.page[data-name="add"] .tabbar {
|
||||
/* Remove tab switcher at bottom of page */
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
.page[data-name="add"] .tabs {
|
||||
/* Put tabs next to each other */
|
||||
display: flex;
|
||||
}
|
||||
.page[data-name="add"] .tabs .tab {
|
||||
/* un-hide "non-active" tabs */
|
||||
display: block;
|
||||
}
|
||||
.page[data-name="add"] .tabs #add-tab {
|
||||
width: 66.67% !important;
|
||||
}
|
||||
.page[data-name="add"] .tabs #history-tab {
|
||||
width: 33.33% !important;
|
||||
}
|
||||
.page[data-name="add"] #history-empty-swipe-prompt {
|
||||
display: none;
|
||||
}
|
||||
.page[data-name="add"] .page-content {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.page[data-name="add"] .fab {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -78,6 +78,7 @@ $("#addpackagebtn").click(function () {
|
||||
+ ' </div>'
|
||||
+ ' </div>'
|
||||
+ '</li>');
|
||||
$("#tap-to-remove-history-prompt").removeClass("display-none");
|
||||
});
|
||||
});
|
||||
|
||||
@ -93,6 +94,7 @@ $(".view-main").on("click", "#historylist .history-list-item", function () {
|
||||
$('#historylist .history-list-item[data-package="' + id + '"]').remove();
|
||||
if ($('#historylist .history-list-item').length == 0) {
|
||||
$("#no-history").removeClass("display-none");
|
||||
$("#tap-to-remove-history-prompt").addClass("display-none");
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -130,3 +132,17 @@ function toggleLettersInAddressNumber() {
|
||||
$("#housenumberinput").attr("placeholder", "1A2B3");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setTabSwipable() {
|
||||
var page = $(".page[data-name=add]");
|
||||
|
||||
// If the page has grown larger, refresh to disable swiping tabs
|
||||
if (page.width() >= 768 && $(".tabs-swipeable-wrap")[0]) {
|
||||
router.refreshPage();
|
||||
}
|
||||
}
|
||||
|
||||
$(window).on('resize', setTabSwipable);
|
||||
|
||||
setTabSwipable();
|
||||
@ -20,6 +20,7 @@
|
||||
<link rel="stylesheet" href="assets/css/oled.css" />
|
||||
<link rel="stylesheet" href="assets/css/web-barcode.css" />
|
||||
<link rel="stylesheet" href="assets/fonts/roboto/Roboto.css" />
|
||||
<link rel="stylesheet" href="assets/css/tablet.css" />
|
||||
|
||||
<script src="cordova.js"></script>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<div class="page" data-name="add">
|
||||
|
||||
<div class="navbar">
|
||||
<div class="navbar no-tablet">
|
||||
<div class="navbar-bg"></div>
|
||||
<div class="navbar-inner">
|
||||
<div class="left">
|
||||
@ -39,9 +39,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if nottablet}}
|
||||
<div class="tabs-swipeable-wrap">
|
||||
{{/if}}
|
||||
<div class="tabs">
|
||||
<div id="add-tab" class="tab tab-active">
|
||||
<div class="navbar only-tablet">
|
||||
<div class="navbar-bg"></div>
|
||||
<div class="navbar-inner">
|
||||
<div class="left">
|
||||
<a class="link" onclick="router.back({force: true, ignoreCache: true})">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="if-not-md">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Add Items</div>
|
||||
<div class="right">
|
||||
<a class="link popover-open" data-popover="#popover-add-options">
|
||||
<i class="icon material-icons">more_vert</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="list no-margin-top">
|
||||
<ul>
|
||||
@ -119,16 +138,27 @@
|
||||
</div>
|
||||
|
||||
<div id="history-tab" class="page-content tab">
|
||||
<div class="navbar only-tablet">
|
||||
<div class="navbar-bg"></div>
|
||||
<div class="navbar-inner">
|
||||
<div class="title">Recent Items</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block text-align-center" id="no-history">
|
||||
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
|
||||
<div class="margin-top">No recently added items! Swipe <i class="fas fa-arrow-left"></i> to add some.</div>
|
||||
<div class="margin-top">No recently added items! <span id="history-empty-swipe-prompt">Swipe <i class="fas fa-arrow-left"></i> to add some.</span></div>
|
||||
</div>
|
||||
<ul class="list no-hairlines tablet-inset no-margin-top" id="historylist">
|
||||
<!-- Packages go here -->
|
||||
</ul>
|
||||
<div class="block text-align-center display-none" id="tap-to-remove-history-prompt">
|
||||
<span class="block-header"><span class="taptext">Tap</span><span class="clicktext">Click</span> a recently added item to delete it.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if nottablet}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<script src="assets/js/add.js"></script>
|
||||
|
||||
|
||||
@ -71,12 +71,17 @@ var routes = [
|
||||
{
|
||||
path: '/add',
|
||||
name: 'add',
|
||||
templateUrl: './pages/add.html',
|
||||
options: {
|
||||
context: {
|
||||
show_help: show_help,
|
||||
itemtypes: SETTINGS.itemtypes
|
||||
}
|
||||
async: function (routeTo, routeFrom, resolve, reject) {
|
||||
let tablet = $(window).width() >= 768;
|
||||
resolve({
|
||||
templateUrl: './pages/add.html',
|
||||
}, {
|
||||
context: {
|
||||
show_help: show_help,
|
||||
itemtypes: SETTINGS.itemtypes,
|
||||
nottablet: !tablet
|
||||
}
|
||||
})
|
||||
},
|
||||
on: {
|
||||
pageAfterIn: function () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user