diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss index af592d07904b38a026f40cda0b131b38408f1103..b371bd530c1450bfcf4c49572f45c506a9f69bd3 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 0000000000000000000000000000000000000000..72404d8bb3d0dbd0abdff015facc09cd09ac51cc --- /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 c21d128ffddac15c0dc43cd0e3f53d6b81d227ff..38408c3f3b1313fdc49069692cf475916cccc190 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 1d10374d3bdb894f38d4ad241eeb6eae145e5fee..0d205220051ed91a04dc2775de0efc0bcd10f1ad 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 -->