consolidate map size css (fisharebest#4808)

* consolidate map size css into one file (/resources/css/_maps.css) * Remove use of wt-global for sidebar background * Adjust class names and use ::backdrop pseudo class for all themes
ddrury · Jul 16, 2023 · c265768 · c265768
1 parent 72aa5b6
commit c265768
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 65 deletions.
diff --git a/resources/css/_base.css b/resources/css/_base.css
@@ -20,9 +20,9 @@
 @import "_blocks.css";
 @import "_charts.css";
 @import "_colorbox.css";
-@import "_leaflet.css";
 @import "_lists.css";
 @import "_markdown.css";
+@import "_maps.css";
 @import "_mime-type-icons.css";
 @import "_on-screen-keyboard.css";
 @import "_pages.css";

diff --git a/resources/css/_chart-pedigree-map.css b/resources/css/_chart-pedigree-map.css
@@ -31,7 +31,6 @@
     --wt-pedigree-map-gen-9: pink;
     --wt-pedigree-map-gen-10: magenta;
     --wt-pedigree-map-gen-11: maroon;
-    --wt-pedigree-map-height: 70vh;
 }
 
 .wt-pedigree-map-gen-0 {
@@ -81,12 +80,3 @@
 .wt-pedigree-map-gen-11 {
     color: var(--wt-pedigree-map-gen-11);
 }
-
-.wt-pedigree-map-map {
-    height: var(--wt-pedigree-map-height);
-}
-
-.wt-pedigree-map-sidebar {
-    height: var(--wt-pedigree-map-height);
-    overflow-y: auto;
-}
diff --git a/resources/css/_list-places.css b/resources/css/_list-places.css
@@ -18,16 +18,3 @@
  *
  * wt-route-place-list
  */
-
- :root {
-    --wt-place-hierarchy-map-height: 70vh;
-}
-
-.wt-place-hierarchy-map {
-    height: var(--wt-place-hierarchy-map-height);
-}
-
-.wt-place-hierarchy-sidebar {
-    height: var(--wt-place-hierarchy-map-height);
-    overflow-y: auto;
-}
diff --git a/resources/css/_leaflet.css → resources/css/_maps.css b/resources/css/_leaflet.css → resources/css/_maps.css
@@ -13,6 +13,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+ :root {
+    --wt-map-height: 70vh;
+ }
+
 /*
  * Formatting for LeafletJS based maps.
  */
@@ -34,3 +38,20 @@
 .leaflet-layerstree-node .leaflet-layerstree-node .leaflet-layerstree-header-name {
     font-weight: normal;
 }
+
+.wt-map {
+    height: var(--wt-map-height);
+}
+
+:fullscreen .wt-map {
+    height: 100%;
+}
+
+.wt-map-sidebar {
+    height: var(--wt-map-height);
+    overflow-y: auto;
+}
+
+:fullscreen .wt-map-sidebar {
+    height: 100%;
+}
diff --git a/resources/css/_tab-places.css b/resources/css/_tab-places.css
@@ -19,15 +19,3 @@
  * wt-tabs-individual
  * +--- wt-tab-places
  */
-
-:root {
-    --wt-places-tab-map-height: 70vh;
-}
-.wt-places-tab-map {
-    height: var(--wt-places-tab-map-height);
-}
-
-.wt-places-tab-sidebar {
-    height: var(--wt-places-tab-map-height);
-    overflow-y: auto;
-}
diff --git a/resources/css/administration.css b/resources/css/administration.css
@@ -39,7 +39,7 @@ h4 {
     font-size: 1.25rem;
 }
 
-.wt-global {
+::backdrop, .wt-global {
     background: url(administration/paper_fibers.png); /* http://www.subtlepatterns.com */
 }
 
@@ -51,20 +51,11 @@ h4 {
 }
 
 @media (min-device-pixel-ratio: 2) {
-    .wt-global {
+    ::backdrop, .wt-global {
         background: url(administration/paper_fibers_@2X.png);
     }
 }
 
-/* Location edit maps */
-.wt-location-edit-map {
-    height: 55vh;
-}
-
-:fullscreen .wt-location-edit-map {
-    height: 100%;
-}
-
 /* Raw GEDCOM data */
 .gedcom-data {
     white-space: pre-wrap;

diff --git a/resources/css/clouds.css b/resources/css/clouds.css
@@ -85,7 +85,7 @@ table {
  *     +---wt-footer wt-footer-xxxxx
  */
 
-.wt-global {
+::backdrop, .wt-global {
     background: #c8e7ff url(clouds/images/background.png) repeat-x fixed top left;
     color: #006;
 }

diff --git a/resources/css/colors.css b/resources/css/colors.css
@@ -90,7 +90,7 @@
  *     +---wt-footer wt-footer-xxxxx
  */
 
-.wt-global {
+::backdrop, .wt-global {
     background: #fff;
     color: #333;
 }

diff --git a/resources/css/fab.css b/resources/css/fab.css
@@ -83,7 +83,7 @@ table {
  *     +---wt-footer wt-footer-xxxxx
  */
 
-.wt-global {
+::backdrop, .wt-global {
     color: #555;
 }
 

diff --git a/resources/css/minimal.css b/resources/css/minimal.css
@@ -81,7 +81,7 @@ table {
  *     +---wt-footer wt-footer-xxxxx
  */
 
-.wt-global {
+::backdrop, .wt-global {
     /* Avoid extremes of black and white.  It is better for users with dyslexia. */
     color: #0a0a0a;
     background-color: #f9f9f9;

diff --git a/resources/css/webtrees.css b/resources/css/webtrees.css
@@ -81,7 +81,7 @@ table {
  *     +---wt-footer wt-footer-xxxxx
  */
 
-.wt-global {
+::backdrop, .wt-global {
     color: #555;
 }
 

diff --git a/resources/css/xenea.css b/resources/css/xenea.css
@@ -81,7 +81,7 @@ table {
  *     +---wt-footer wt-footer-xxxxx
  */
 
-.wt-global {
+::backdrop, .wt-global {
     color: #006;
 }
 

diff --git a/resources/views/admin/location-edit.phtml b/resources/views/admin/location-edit.phtml
@@ -27,9 +27,9 @@ use Fisharebest\Webtrees\View;
 <h1><?= $title ?></h1>
 
 <div class="row wt-location-edit-wrapper wt-fullscreen-container">
-    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-location-edit-map" dir="ltr"></div>
+    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
 
-    <div class="col-sm-3">
+    <div class="col-sm-3 wt-map-sidebar">
         <form method="post" action="<?= e(route(MapDataSave::class)) ?>">
             <input type="hidden" name="parent_id" value="<?= $parent->id() ?>">
             <input type="hidden" name="place_id" value="<?= $location->id() ?>">

diff --git a/resources/views/individual-page-sidebars.phtml b/resources/views/individual-page-sidebars.phtml
@@ -12,7 +12,7 @@ use Illuminate\Support\Collection;
  */
 ?>
 
-<div class="accordion" id="sidebar">
+<div class="accordion wt-sidebar" id="sidebar">
     <?php foreach ($sidebars as $sidebar) : ?>
         <div class="accordion-item">
             <div class="accordion-header" id="sidebar-header-<?= $sidebar->name() ?>">

diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml
@@ -12,8 +12,8 @@ use Fisharebest\Webtrees\View;
 ?>
 
 <div class="row my-4 gchart wt-pedigree-map-wrapper wt-fullscreen-container">
-    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-pedigree-map-map" dir="ltr"></div>
-    <ul class="col-sm-3 wt-pedigree-map-sidebar wt-page-options-value list-unstyled px-1 mb-0"></ul>
+    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
+    <ul class="col-sm-3 wt-map-sidebar wt-page-options-value list-unstyled px-1 mb-0"></ul>
 </div>
 
 <?php View::push('javascript') ?>
@@ -22,7 +22,7 @@ use Fisharebest\Webtrees\View;
 
   (function () {
     const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
-    const sidebar = document.querySelector('.wt-pedigree-map-sidebar');
+    const sidebar = document.querySelector('.wt-map-sidebar');
 
     const scrollOptions = {
       behavior: "smooth",

diff --git a/resources/views/modules/place-hierarchy/map.phtml b/resources/views/modules/place-hierarchy/map.phtml
@@ -12,8 +12,8 @@ use Fisharebest\Webtrees\View;
 ?>
 
 <div class="row gchart wt-place-hierarchy-wrapper wt-fullscreen-container">
-    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-place-hierarchy-map" dir="ltr"></div>
-    <ul class="col-sm-3 wt-place-hierarchy-sidebar wt-page-options-value list-unstyled px-md-1 mb-0"></ul>
+    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
+    <ul class="col-sm-3 wt-map-sidebar wt-page-options-value list-unstyled px-md-1 mb-0"></ul>
 </div>
 
 <?php View::push('javascript') ?>
@@ -24,7 +24,7 @@ use Fisharebest\Webtrees\View;
     const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
 
     let map = null;
-    const sidebar = document.querySelector('.wt-place-hierarchy-sidebar');
+    const sidebar = document.querySelector('.wt-map-sidebar');
 
     const scrollOptions = {
       behavior: "smooth",

diff --git a/resources/views/modules/places/tab.phtml b/resources/views/modules/places/tab.phtml
@@ -13,8 +13,8 @@ use Fisharebest\Webtrees\I18N;
 
 <div class="py-4">
     <div class="row gchart wt-places-tab-wrapper wt-fullscreen-container">
-        <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-places-tab-map" dir="ltr"></div>
-        <ul class="col-sm-3 wt-places-tab-sidebar wt-page-options-value list-unstyled px-md-1"></ul>
+        <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map" dir="ltr"></div>
+        <ul class="col-sm-3 wt-map-sidebar wt-page-options-value list-unstyled px-md-1"></ul>
     </div>
 </div>
 
@@ -25,7 +25,7 @@ use Fisharebest\Webtrees\I18N;
     const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
 
     let map = null;
-    const sidebar = document.querySelector('.wt-places-tab-sidebar');
+    const sidebar = document.querySelector('.wt-map-sidebar');
 
     const scrollOptions = {
       behavior: "smooth",