Last styling tweaks
This commit is contained in:
parent
aaaf0b8c36
commit
3b78951f88
4 changed files with 93 additions and 15 deletions
|
|
@ -32,7 +32,11 @@ export default class FilterView extends VariableUiElement {
|
|||
super(
|
||||
filteredLayer.map((filteredLayers) => {
|
||||
// Create the views which toggle layers (and filters them) ...
|
||||
let elements = filteredLayers?.map(l => FilterView.createOneFilteredLayerElement(l))
|
||||
let elements = filteredLayers
|
||||
?.map(l => FilterView.createOneFilteredLayerElement(l)?.SetClass("filter-panel"))
|
||||
?.filter(l => l !== undefined)
|
||||
elements[0].SetClass("first-filter-panel")
|
||||
|
||||
// ... create views for non-interactive layers ...
|
||||
elements = elements.concat(tileLayers.map(tl => FilterView.createOverlayToggle(tl)))
|
||||
// ... and add the dropdown to select a different background
|
||||
|
|
@ -115,7 +119,7 @@ export default class FilterView extends VariableUiElement {
|
|||
)
|
||||
|
||||
|
||||
const toggleClasses = "layer-toggle flex flex-wrap items-center pt-2 pb-1 px-0";
|
||||
const toggleClasses = "layer-toggle flex flex-wrap items-center pt-2 pb-2 px-0";
|
||||
const layerIcon = layer.defaultIcon()?.SetClass("flex-shrink-0 w-8 h-8 ml-2")
|
||||
const layerIconUnchecked = layer.defaultIcon()?.SetClass("flex-shrink-0 opacity-50 w-8 h-8 ml-2")
|
||||
|
||||
|
|
@ -164,7 +168,7 @@ export default class FilterView extends VariableUiElement {
|
|||
}
|
||||
|
||||
return new Combine(toShow)
|
||||
.SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 border-b-2 border-detail mb-4")
|
||||
.SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 layer-filters")
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,19 @@ h1, h2, h3, h4 {
|
|||
stroke: white !important;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--unsubtle-detail-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--catch-detail-color);
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
border-top: 2px solid var(--foreground-color);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-xl {
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
|
@ -71,4 +84,27 @@ h1, h2, h3, h4 {
|
|||
|
||||
.rounded-3xl {
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
/* The checkbox that toggles a single layer */
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
/* The panel for a single layer, containing both the toggle and the filters (if any) */
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-top: 2px solid var(--foreground-color);
|
||||
display: block;
|
||||
border-bottom: unset;
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.layer-filters {
|
||||
/* If needed, the panel which contains the extra filters for a layer */
|
||||
}
|
||||
|
||||
.first-filter-panel {
|
||||
/* Additional class on the first layer filter */
|
||||
border-top: unset !important;
|
||||
}
|
||||
|
|
@ -1394,10 +1394,6 @@ video {
|
|||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-b-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.border-gray-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(107, 114, 128, var(--tw-border-opacity));
|
||||
|
|
@ -1550,6 +1546,10 @@ video {
|
|||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
|
@ -1578,10 +1578,6 @@ video {
|
|||
padding-top: 0.125rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
|
@ -1930,7 +1926,8 @@ a {
|
|||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--unsubtle-detail-color);
|
||||
background-color: var(--catch-detail-color);
|
||||
filter: saturate(0.8);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
|
|
@ -2354,6 +2351,25 @@ input {
|
|||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
/* The checkbox that toggles a single layer */
|
||||
}
|
||||
|
||||
.layer-filters {
|
||||
/* If needed, the panel which contains the extra filters for a layer */
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
/* The panel for a single layer, containing both the toggle and the filters (if any) */
|
||||
border-bottom: 2px solid lightgrey;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.first-filter-panel {
|
||||
/* Additional class on the first layer filter */
|
||||
}
|
||||
|
||||
.hover\:bg-indigo-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(199, 210, 254, var(--tw-bg-opacity));
|
||||
|
|
@ -2644,4 +2660,5 @@ input {
|
|||
.xl\:inline {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
25
index.css
25
index.css
|
|
@ -163,7 +163,8 @@ a {
|
|||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--unsubtle-detail-color);
|
||||
background-color: var(--catch-detail-color);
|
||||
filter: saturate(0.8);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
|
|
@ -539,4 +540,24 @@ input {
|
|||
|
||||
.zebra-table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
/* The checkbox that toggles a single layer */
|
||||
}
|
||||
|
||||
.layer-filters {
|
||||
/* If needed, the panel which contains the extra filters for a layer */
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
/* The panel for a single layer, containing both the toggle and the filters (if any) */
|
||||
border-bottom: 2px solid lightgrey;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.first-filter-panel {
|
||||
/* Additional class on the first layer filter */
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue