Skip to content

Commit

Permalink
refactor: Update UI consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@hepplerj
hepplerj committed Dec 5, 2024
1 parent 787e192 commit 3b82092
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 45 deletions.
20 changes: 6 additions & 14 deletions bom-website/themes/dbn/layouts/partials/tables/christenings_filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2 id="accordion-flush-heading-1">
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
<div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
<div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
<div class="filter__header__content__item" style="height: 200px;">
<template x-for="christening_parish in all_christenings" :key="christening_parish.id">
<div>
<input type="checkbox" :id="christening_parish.canonical_name" :value="christening_parish.id"
Expand All @@ -34,7 +34,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
</div>
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
<div>
<div class="pb-4">
<label for="start-year">Start Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
Expand All @@ -56,25 +56,17 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
</div>
<div>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
@click="resetFilters">
Reset Filters
</button>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
@click="applyFilters">
Apply Filters
</button>

<div
class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
@click="instructionsOpen = true"
>
How to use this table
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
17 changes: 5 additions & 12 deletions bom-website/themes/dbn/layouts/partials/tables/cod_filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2 id="accordion-flush-heading-1">
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Causes of Death</h3>
<div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
<div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
<div class="filter__header__content__item" style="height: 200px;">
<template x-for="cause in all_causes" :key="cause.id">
<div>
<input type="checkbox" :id="cause.name" :value="cause.name"
Expand All @@ -34,7 +34,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Causes of Death</h3>
</div>
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
<div>
<div class="pb-4">
<label for="start-year">Start Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
Expand All @@ -56,23 +56,16 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
</div>
<div>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
@click="resetFilters">
Reset Filters
</button>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
@click="applyFilters">
Apply Filters
</button>

<div
class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
@click="instructionsOpen = true"
>
How to use this table
</div>

</div>
</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion bom-website/themes/dbn/layouts/partials/tables/deaths.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,5 @@ <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text=
</div>

</div>
</div>
{{/* end: deaths table */}}

20 changes: 6 additions & 14 deletions bom-website/themes/dbn/layouts/partials/tables/filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2 id="accordion-flush-heading-1">
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
<div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
<div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
<div class="filter__header__content__item" style="height: 200px;">
<template x-for="parish in parishes" :key="parish.id">
<div>
<input type="checkbox" :id="parish.canonical_name" :value="parish.id"
Expand All @@ -34,7 +34,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
</div>
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
<div>
<div class="pb-4">
<label for="start-year">Start Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
Expand All @@ -53,7 +53,7 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
<div class="w-1/2 inline-block relative">
<h3 class="text-base font-medium leading-6 text-gray-900">Count Type</h3>
<select
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
class="w-full bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@change="setCountType()" x-model="filters.selectedCountType">
<option value="All">All</option>
<option x-show="openTab === 1" value="Buried">Buried</option>
Expand All @@ -64,24 +64,16 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Count Type</h3>
</div>
<div>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
@click="resetFilters">
Reset Filters
</button>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
class="rounded border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-dbn-blue hover:text-black focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700"
@click="applyFilters">
Apply Filters
</button>

<div
class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
@click="instructionsOpen = true"
>
How to use this table
</div>

</div>
</div>
</div>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions bom-website/themes/dbn/layouts/partials/tables/general.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,11 @@
</tbody>
</table>

{{ partial "tables/instructions.html" }}

<modal x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0">
<div x-cloak @click="modalOpen = false" x-show="modalOpen"
<div x-cloak x-show="modalOpen" @click.stop
x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
Expand Down
2 changes: 0 additions & 2 deletions bom-website/themes/dbn/layouts/partials/tables/weekly.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,6 @@
</tbody>
</table>

{{ partial "tables/instructions.html" }}

<modal x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0">
Expand Down

0 comments on commit 3b82092

Please sign in to comment.