From 616fd07c89cb09cf2e8733c356d7f403d7cef42c Mon Sep 17 00:00:00 2001
From: Alexander Purr <purr@ub.uni-leipzig.de>
Date: Wed, 15 Feb 2023 15:47:20 +0100
Subject: [PATCH] refs #23266 [finc] BS3 Debugbar for screen breakpoints and
 sizes

* add scss plugin
* default: disabled
* add background opacity
* add comments

co-authored by: Robert Lange <robert.lange@uni-leipzig.de>
---
 themes/finc/scss/_customVariables.scss        |  2 +
 .../scss/activate-on-demand/_debug-bar.scss   | 78 +++++++++++++++++++
 themes/finc/scss/finc.scss                    |  7 +-
 themes/finc/templates/footer.phtml            |  5 ++
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 themes/finc/scss/activate-on-demand/_debug-bar.scss

diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index af592d07904..b371bd530c1 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -1478,3 +1478,5 @@ $amsl-sources-list-panel-body-span-margin: 10px 15px 10px 0 !default;
 $activate-on-demand-bulkaction-visible-xs: false !default;
 $activate-on-demand-visited-links: false !default;
 $activate-on-demand-sidebar-filter-hide-checkbox: true !default;
+// TODO: automatic detection by environment var
+$activate-on-demand-debug-bar: false !default;
diff --git a/themes/finc/scss/activate-on-demand/_debug-bar.scss b/themes/finc/scss/activate-on-demand/_debug-bar.scss
new file mode 100644
index 00000000000..72404d8bb3d
--- /dev/null
+++ b/themes/finc/scss/activate-on-demand/_debug-bar.scss
@@ -0,0 +1,78 @@
+// ONLY FOR DEVELEOPMENT
+// put following container somewhere in your templates to apply styles (e.g. layout.phtml, footer.phtml)
+// <div class="debug-bar"></div>
+
+@mixin plugin-debug-bar {
+  $bg-opacity: .8;
+
+  .debug-bar {
+    background: rgba(#000, $bg-opacity);
+    bottom: 0;
+    color: $white;
+    left: 0;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 10000;
+
+    &::before {
+      content: 'undefined';
+    }
+
+    &::after {
+      font-size: 12px;
+    }
+
+    @media (min-width: $screen-xs-min){
+      background-color: rgba(#6eacff, $bg-opacity);
+
+      &::before {
+        content: 'XS (Phone/Mobile): ' + $screen-xs-min + ' – ' + ($screen-xs-max);
+      }
+
+      &::after {
+        content: '\A $screen-xs / $screen-xs-min – $screen-xs-max';
+        white-space: pre;
+      }
+    }
+
+    @media (min-width: $screen-sm-min){
+      background-color: rgba(#d5008f, $bg-opacity);
+
+      &::before {
+        content: 'SM (Tablet): ' + $screen-sm-min + ' – ' + ($screen-sm-max);
+      }
+
+      &::after {
+        content: '\A $screen-sm / $screen-sm-min – $screen-sm-max';
+        white-space: pre;
+      }
+    }
+
+    @media (min-width: $screen-md-min){
+      background-color: rgba(#20b2aa, $bg-opacity);
+
+      &::before {
+        content: 'MD (Desktop): ' + $screen-md-min + ' – ' + ($screen-md-max);
+      }
+
+      &::after {
+        content: '\A $screen-md / $screen-md-min – $screen-md-max';
+        white-space: pre;
+      }
+    }
+
+    @media (min-width: $screen-lg-min){
+      background-color: rgba(#f4a460, $bg-opacity);
+
+      &::before {
+        content: 'LG (Wide desktop): from ' + $screen-lg-min;
+      }
+
+      &::after {
+        content: '\A from $screen-lg / $screen-lg-min';
+        white-space: pre;
+      }
+    }
+  }
+}
diff --git a/themes/finc/scss/finc.scss b/themes/finc/scss/finc.scss
index c21d128ffdd..38408c3f3b1 100644
--- a/themes/finc/scss/finc.scss
+++ b/themes/finc/scss/finc.scss
@@ -65,7 +65,12 @@
 @if $activate-on-demand-sidebar-filter-hide-checkbox {
   @include plugin-sidebar-filter-hide-checkbox;
 }
-// 4. .............
+// 4. Show BS3 breakepoint debug bar
+@import 'activate-on-demand/debug-bar';
+@if $activate-on-demand-debug-bar {
+  @include plugin-debug-bar;
+}
+// 5. .............
 
 // *****************************************************************
 // ********** HTML basics ******************************************
diff --git a/themes/finc/templates/footer.phtml b/themes/finc/templates/footer.phtml
index 1d10374d3bd..0d205220051 100644
--- a/themes/finc/templates/footer.phtml
+++ b/themes/finc/templates/footer.phtml
@@ -42,5 +42,10 @@
         <?= $this->externalLink("https://finc.info", '<img src="' . $this->imageLink('finc_logo.png') . '" alt="' . $this->translate('finc-logo_alt') . '" aria-hidden="true"/>', ['title' => $this->translate('finc-logo_title')], true) ?>
       </div>
     </div>
+    <?php /* finc #23266: bs3 breakpoint degub bar */ ?>
+    <?php if (APPLICATION_ENV == 'development'): ?>
+      <div class="debug-bar"></div>
+    <?php endif;?>
+    <?php /* finc #23266: bs3 breakpoint degub bar - END */ ?>
 </footer>
 <!-- finc: Footer - END -->
-- 
GitLab