fix toolbars on mobile

pull/11/head
Dan Gowans 2025-04-01 15:20:01 -04:00
parent 54867f1cbc
commit ed96a35c94
12 changed files with 181 additions and 219 deletions

View File

@ -83,18 +83,23 @@ span.button.is-static {
* Fixed Level
*/
.columns.is-fixed-bottom,
.level.is-fixed-bottom {
z-index: 1100;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
margin: 0;
&.has-shadow {
box-shadow: 0 -2px 0 0 #f5f5f5;
}
.level.is-fixed-bottom {
padding: 15px;
}
.columns.is-fixed-bottom.has-shadow,
.level.is-fixed-bottom.has-shadow {
box-shadow: 0 -2px 0 0 #f5f5f5;
}
/*

View File

@ -36,23 +36,21 @@
<% } %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<% if (!isCreate) { %>
<span class="level-item has-text-weight-bold">
<span class="has-text-weight-bold">
<%= burialSite.burialSiteName %>
</span>
<% } %>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (isCreate) { %>
<div class="level-item">
<a class="button is-danger is-light" href="<%= urlPrefix %>/burialSites">
Cancel
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
@ -71,14 +69,12 @@
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-light is-primary" type="submit" form="form--burialSite">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
Burial Site
<span class="is-hidden-mobile">Burial Site</span>
</span>
</button>
</div>
@ -339,7 +335,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>
@ -380,7 +376,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Image</h2>

View File

@ -21,14 +21,14 @@
<%= burialSite.burialSiteName %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<span class="level-item has-text-weight-bold">
<div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<span class="has-text-weight-bold">
<%= burialSite.burialSiteName %>
</span>
</div>
<div class="level-right">
<div class="level-item">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<a class="button is-link is-outlined has-tooltip-left"
data-tooltip="Previous Burial Site"
href="<%= urlPrefix %>/burialSites/<%= burialSite.burialSiteId %>/previous"
@ -36,8 +36,6 @@
<span class="icon m-0"><i class="fas fa-arrow-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous Burial Site</span>
</a>
</div>
<div class="level-item">
<a class="button is-link has-tooltip-left"
data-tooltip="Next Burial Site"
href="<%= urlPrefix %>/burialSites/<%= burialSite.burialSiteId %>/next"
@ -45,9 +43,7 @@
<span>Next</span>
<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</a>
</div>
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<a class="button is-primary"
href="<%= urlPrefix %>/burialSites/<%= burialSite.burialSiteId %>/edit"
accesskey="e">
@ -55,10 +51,10 @@
<span class="is-hidden-mobile">Switch to Edit Mode</span>
<span class="is-hidden-tablet">Edit</span>
</a>
</div>
<% } %>
</div>
</div>
</div>
<div class="panel">
<div class="panel-block is-block">
@ -101,7 +97,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>
@ -131,7 +127,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Image</h2>

View File

@ -36,23 +36,21 @@
<% } %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<% if (!isCreate) { %>
<span class="level-item has-text-weight-bold">
<span class="has-text-weight-bold">
<%= cemetery.cemeteryName || "(No Name)" %>
</span>
<% } %>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (isCreate) { %>
<div class="level-item">
<a class="button is-danger is-light" href="<%= urlPrefix %>/cemeteries">
Cancel
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
@ -71,14 +69,12 @@
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-primary is-light" type="submit" form="form--cemetery">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create": "Update") %>
Cemetery
<span class="is-hidden-mobile">Cemetery</span>
</span>
</button>
</div>
@ -126,7 +122,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Address</h2>
@ -195,7 +191,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>

View File

@ -25,14 +25,14 @@
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<span class="level-item has-text-weight-bold">
<div class="columns is-vcentered p-0 is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<span class="has-text-weight-bold">
<%= cemetery.cemeteryName || "(No Name)" %>
</span>
</div>
<div class="level-right">
<div class="level-item">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<a class="button is-link is-outlined has-tooltip-left"
data-tooltip="Previous Cemetery"
href="<%= urlPrefix %>/cemeteries/<%= cemetery.cemeteryId %>/previous"
@ -40,8 +40,6 @@
<span class="icon m-0"><i class="fas fa-arrow-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous Cemetery</span>
</a>
</div>
<div class="level-item">
<a class="button is-link has-tooltip-left"
data-tooltip="Next Cemetery"
href="<%= urlPrefix %>/cemeteries/<%= cemetery.cemeteryId %>/next"
@ -49,7 +47,6 @@
<span>Next</span>
<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</a>
</div>
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<a class="button is-primary"
@ -63,6 +60,8 @@
<% } %>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-block is-block">
@ -98,7 +97,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>
@ -127,7 +126,7 @@
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Image</h2>

View File

@ -43,26 +43,24 @@
</h1>
<% } %>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<div class="columns is-vecentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<% if (!isCreate) { %>
<span class="level-item has-text-weight-bold">
<span class="has-text-weight-bold">
Contract #<%= contract.contractId %>:
<%= contract.burialSiteName || ("(No Burial Site)") %>
</span>
<% } %>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (!isCreate && contractTypePrints.length > 0) { %>
<% if (contractTypePrints.length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= contractTypePrints[0] %>/?contractId=<%= contract.contractId %>" target="_blank" aria-label="Print">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span class="is-hidden-touch">Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button" aria-label="Print">
@ -85,17 +83,13 @@
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% if (isCreate) { %>
<div class="level-item">
<a class="button is-danger is-light" href="<%= urlPrefix %>/contracts">
Cancel
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
@ -121,14 +115,12 @@
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-primary is-light" type="submit" form="form--contract">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
<span class="is-hidden-touch">
<span class="is-hidden-mobile">
Contract
</span>
</span>

View File

@ -28,24 +28,22 @@
<%= contract.burialSiteName || "(No Burial Site)" %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<span class="level-item has-text-weight-bold">
<div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<span class="has-text-weight-bold">
Contract #<%= contract.contractId %>:
<%= contract.burialSiteName ?? "(No Burial Site)" %>
</span>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (contractTypePrints.length > 0) { %>
<% if (contractTypePrints.length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= contractTypePrints[0] %>/?contractId=<%= contract.contractId %>" target="_blank" aria-label="Print">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span class="is-hidden-touch">Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button" aria-label="Print">
@ -68,11 +66,9 @@
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<a class="button <%= (contract.contractEndDate ? "is-warning" : "is-primary") %>"
href="<%= urlPrefix %>/contracts/<%= contract.contractId %>/edit"
accesskey="e">
@ -80,10 +76,10 @@
<span class="is-hidden-mobile">Switch to Edit Mode</span>
<span class="is-hidden-tablet">Edit</span>
</a>
</div>
<% } %>
</div>
</div>
</div>
<div class="panel">
<div class="panel-block is-block">

View File

@ -5,7 +5,7 @@
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li>
<a href="<%= urlPrefix %>/funeralHomes">
<span class="icon is-small"><i class="far fa-map" aria-hidden="true"></i></span>
<span class="icon is-small"><i class="fas fa-place-of-worship" aria-hidden="true"></i></span>
<span>Funeral Homes</span>
</a>
</li>
@ -36,23 +36,21 @@
<% } %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<div class="columns is-vcentered p-0 is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<% if (!isCreate) { %>
<span class="level-item has-text-weight-bold">
<span class="has-text-weight-bold">
<%= funeralHome.funeralHomeName || "(No Name)" %>
</span>
<% } %>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (isCreate) { %>
<div class="level-item">
<a class="button is-danger is-light" href="<%= urlPrefix %>/funeralHomes">
Cancel
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
@ -71,14 +69,12 @@
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-primary is-light" type="submit" form="form--funeralHome">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create": "Update") %>
Funeral Home
<span class="is-hidden-mobile">Funeral Home</span>
</span>
</button>
</div>

View File

@ -21,15 +21,14 @@
<%= funeralHome.funeralHomeName || "(No Name)" %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<span class="level-item has-text-weight-bold">
<div class="columns is-vcentered p-0 is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<span class="has-text-weight-bold">
<%= funeralHome.funeralHomeName || "(No Name)" %>
</span>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<a class="button is-primary"
href="<%= urlPrefix %>/funeralHomes/<%= funeralHome.funeralHomeId %>/edit"
accesskey="e">
@ -37,7 +36,6 @@
<span class="is-hidden-mobile">Switch to Edit Mode</span>
<span class="is-hidden-tablet">Edit</span>
</a>
</div>
<% } %>
</div>
</div>

View File

@ -40,26 +40,24 @@
</h1>
<% } %>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<% if (!isCreate) { %>
<span class="level-item has-text-weight-bold">
<span class="has-text-weight-bold">
Work Order
#<%= workOrder.workOrderNumber || "(No Number)" %>
</span>
<% } %>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (!isCreate && configFunctions.getConfigProperty("settings.workOrders.prints").length > 0) { %>
<% if (configFunctions.getConfigProperty("settings.workOrders.prints").length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= configFunctions.getConfigProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button" aria-label="Print">
@ -82,17 +80,13 @@
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% if (isCreate) { %>
<div class="level-item">
<a class="button is-danger is-light" href="<%= urlPrefix %>/workOrders">
Cancel
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
@ -114,14 +108,12 @@
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-primary is-light" type="submit" form="form--workOrderEdit">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
<span class="is-hidden-touch">Work Order</span>
<span class="is-hidden-mobile">Work Order</span>
</span>
</button>
</div>
@ -219,7 +211,7 @@
<% if (!isCreate) { %>
<div class="panel mt-4">
<div class="panel-heading">
<div class="level">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Related Burial Sites</h2>

View File

@ -22,24 +22,22 @@
#<%= workOrder.workOrderNumber || "(No Number)" %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<span class="level-item has-text-weight-bold">
<div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
<div class="column">
<span class="has-text-weight-bold">
Work Order
#<%= workOrder.workOrderNumber || "(No Number)" %>
</span>
</div>
<div class="level-right">
<div class="column is-narrow has-text-right">
<div class="buttons is-right">
<% if (configFunctions.getConfigProperty("settings.workOrders.prints").length > 0) { %>
<% if (configFunctions.getConfigProperty("settings.workOrders.prints").length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= configFunctions.getConfigProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank" aria-label="Print">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span class="is-hidden-touch">Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button" aria-label="Print">
@ -62,11 +60,9 @@
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<% if (workOrder.workOrderCloseDate) { %>
<button class="button is-warning" id="button--reopenWorkOrder" data-work-order-id="<%= workOrder.workOrderId %>" type="button">
Reopen Work Order
@ -80,10 +76,10 @@
<span class="is-hidden-tablet">Edit</span>
</a>
<% } %>
</div>
<% } %>
</div>
</div>
</div>
<div class="columns is-desktop">
<div class="column">