fix small screen alignment

pull/11/head
Dan Gowans 2025-04-29 13:44:33 -04:00
parent ba0c9f3287
commit 0dcdfaaa8a
1 changed files with 60 additions and 80 deletions

View File

@ -35,23 +35,19 @@
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<div class="level is-mobile"> <div class="columns is-vcentered is-mobile">
<div class="level-left"> <div class="column is-narrow">
<div class="level-item"> <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Types" type="button" aria-label="Toggle Work Order Types">
<button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Types" type="button" aria-label="Toggle Work Order Types"> <span class="icon">
<span class="icon"> <i class="fas fa-plus" aria-hidden="true"></i>
<i class="fas fa-plus" aria-hidden="true"></i> </span>
</span> </button>
</button>
</div>
<div class="level-item">
<h2 class="title is-5 has-text-white">Work Order Types</h2>
</div>
</div> </div>
<div class="level-right"> <div class="column">
<div class="level-item"> <h2 class="title is-5 has-text-white">Work Order Types</h2>
<i class="fas fa-hard-hat" aria-hidden="true"></i> </div>
</div> <div class="column is-narrow">
<i class="fas fa-hard-hat" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
@ -88,23 +84,19 @@
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<div class="level is-mobile"> <div class="columns is-vcentered is-mobile">
<div class="level-left"> <div class="column is-narrow">
<div class="level-item"> <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Milestone Types" type="button" aria-label="Toggle Work Order Milestone Types">
<button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Milestone Types" type="button" aria-label="Toggle Work Order Milestone Types"> <span class="icon">
<span class="icon"> <i class="fas fa-plus" aria-hidden="true"></i>
<i class="fas fa-plus" aria-hidden="true"></i> </span>
</span> </button>
</button>
</div>
<div class="level-item">
<h2 class="title is-5 has-text-white">Work Order Milestone Types</h2>
</div>
</div> </div>
<div class="level-right"> <div class="column">
<div class="level-item"> <h2 class="title is-5 has-text-white">Work Order Milestone Types</h2>
<i class="fas fa-hard-hat" aria-hidden="true"></i> </div>
</div> <div class="column is-narrow">
<i class="fas fa-hard-hat" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
@ -141,23 +133,19 @@
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<div class="level is-mobile"> <div class="columns is-vcentered is-mobile">
<div class="level-left"> <div class="column is-narrow">
<div class="level-item"> <button class="button is-small is-toggle-button" data-tooltip="Toggle Committal Types" type="button" aria-label="Toggle Committal Types">
<button class="button is-small is-toggle-button" data-tooltip="Toggle Committal Types" type="button" aria-label="Toggle Committal Types"> <span class="icon">
<span class="icon"> <i class="fas fa-plus" aria-hidden="true"></i>
<i class="fas fa-plus" aria-hidden="true"></i> </span>
</span> </button>
</button>
</div>
<div class="level-item">
<h2 class="title is-5 has-text-white">Committal Types</h2>
</div>
</div> </div>
<div class="level-right"> <div class="column">
<div class="level-item"> <h2 class="title is-5 has-text-white">Committal Types</h2>
<i class="fas fa-file-contract" aria-hidden="true"></i> </div>
</div> <div class="column is-narrow">
<i class="fas fa-file-contract" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
@ -194,23 +182,19 @@
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<div class="level is-mobile"> <div class="columns is-vcentered is-mobile">
<div class="level-left"> <div class="column is-narrow">
<div class="level-item"> <button class="button is-small is-toggle-button" data-tooltip="Toggle Interment Container Types" type="button" aria-label="Toggle Interment Container Types">
<button class="button is-small is-toggle-button" data-tooltip="Toggle Interment Container Types" type="button" aria-label="Toggle Interment Container Types"> <span class="icon">
<span class="icon"> <i class="fas fa-plus" aria-hidden="true"></i>
<i class="fas fa-plus" aria-hidden="true"></i> </span>
</span> </button>
</button>
</div>
<div class="level-item">
<h2 class="title is-5 has-text-white">Interment Container Types</h2>
</div>
</div> </div>
<div class="level-right"> <div class="column">
<div class="level-item"> <h2 class="title is-5 has-text-white">Interment Container Types</h2>
<i class="fas fa-file-contract" aria-hidden="true"></i> </div>
</div> <div class="column is-narrow">
<i class="fas fa-file-contract" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
@ -256,23 +240,19 @@
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<div class="level is-mobile"> <div class="columns is-vcentered is-mobile">
<div class="level-left"> <div class="column is-narrow">
<div class="level-item"> <button class="button is-small is-toggle-button" data-tooltip="Toggle Burial Site Statuses" type="button" aria-label="Toggle Burial Site Statuses">
<button class="button is-small is-toggle-button" data-tooltip="Toggle Burial Site Statuses" type="button" aria-label="Toggle Burial Site Statuses"> <span class="icon">
<span class="icon"> <i class="fas fa-plus" aria-hidden="true"></i>
<i class="fas fa-plus" aria-hidden="true"></i> </span>
</span> </button>
</button>
</div>
<div class="level-item">
<h2 class="title is-5 has-text-white">Burial Site Statuses</h2>
</div>
</div> </div>
<div class="level-right"> <div class="column">
<div class="level-item"> <h2 class="title is-5 has-text-white">Burial Site Statuses</h2>
<i class="fas fa-vector-square" aria-hidden="true"></i> </div>
</div> <div class="column is-narrow">
<i class="fas fa-vector-square" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>