From b320b896fb21af1de7d573ceaf7d49ab79b2c879 Mon Sep 17 00:00:00 2001
From: Elmar Ludwig <elmar.ludwig@uni-osnabrueck.de>
Date: Fri, 22 Jul 2022 07:15:31 +0000
Subject: simplify CSS for fullscreen-toggle and don't move the button around
 via JS, fixes #1356

Closes #1356

Merge request studip/studip!838
---
 .../assets/javascripts/bootstrap/fullscreen.js     |  2 -
 resources/assets/javascripts/lib/fullscreen.js     |  7 ----
 resources/assets/stylesheets/scss/fullscreen.scss  | 45 +++++-----------------
 templates/layouts/base.php                         |  8 ++--
 templates/shared/fullscreen-toggle.php             |  3 --
 templates/tabs.php                                 |  7 ++++
 6 files changed, 22 insertions(+), 50 deletions(-)
 delete mode 100644 templates/shared/fullscreen-toggle.php

diff --git a/resources/assets/javascripts/bootstrap/fullscreen.js b/resources/assets/javascripts/bootstrap/fullscreen.js
index 1fa9b72..2a72173 100644
--- a/resources/assets/javascripts/bootstrap/fullscreen.js
+++ b/resources/assets/javascripts/bootstrap/fullscreen.js
@@ -3,7 +3,5 @@ STUDIP.domReady(function () {
 
     if (sessionStorage.getItem('studip-fullscreen') == 'on' && $('.fullscreen-toggle').length > 0) {
         STUDIP.Fullscreen.enter(true);
-    } else {
-        $('.fullscreen-toggle').insertBefore('.helpbar-container');
     }
 }, true);
diff --git a/resources/assets/javascripts/lib/fullscreen.js b/resources/assets/javascripts/lib/fullscreen.js
index 1f10090..d39036b 100644
--- a/resources/assets/javascripts/lib/fullscreen.js
+++ b/resources/assets/javascripts/lib/fullscreen.js
@@ -12,9 +12,6 @@ const Fullscreen = {
         // transisitions
         $('html').addClass('is-fullscreen').toggleClass('is-fullscreen-immediately', immediate);
 
-        // Move toggle element into viewport
-        $('.fullscreen-toggle').prependTo('#layout_content');
-
         // Attach key handler that allows keypress on escape to leave fullscreen
         $(document).on('keydown.key27', (event) => {
             if (event.key === 'Escape') {
@@ -33,10 +30,6 @@ const Fullscreen = {
         // Deactivate key handler
         $(document).off('keydown.key27');
 
-        // Move toggle element into secondary navigation
-        $('.fullscreen-toggle').insertBefore('.helpbar-container');
-
-        //
         (new Promise((resolve, reject) => {
             var timeout = setTimeout(() => {
                 $('#layout-sidebar').off('transitionend');
diff --git a/resources/assets/stylesheets/scss/fullscreen.scss b/resources/assets/stylesheets/scss/fullscreen.scss
index 8ff20eb..3c4e0c2 100644
--- a/resources/assets/stylesheets/scss/fullscreen.scss
+++ b/resources/assets/stylesheets/scss/fullscreen.scss
@@ -1,39 +1,16 @@
 $transition-duration: 300ms;
 
+.fullscreen-container {
+    flex-grow: 1;
+    margin-right: 12px;
+}
+
 .fullscreen-toggle {
     background: none;
-    border: 0px;
-    width: 28px;
-    height: 28px;
-
-    @include background-icon(zoom-in2, clickable, 20);
-    background-position: center;
-    background-repeat: no-repeat;
-
-    text-indent: 200%;
-    overflow: hidden;
-
-    clear: both;
-    float: right;
-
-    position: relative;
-    top: 1px;
-    right: 12px;
-
+    border: none;
     cursor: pointer;
-
-    z-index: 100;
-}
-
-#barBottomContainer,
-#flex-header,
-.secondary-navigation {
-    top: 0px;
-    margin-bottom: 0px;
-}
-#layout_footer {
-    max-height: 40px;
-    overflow: hidden;
+    float: right;
+    height: 28px;
 }
 
 html:not(.is-fullscreen-immediately) {
@@ -71,9 +48,7 @@ html.is-fullscreen {
         padding: 0px;
     }
 
-    .fullscreen-toggle {
-        @include background-icon(zoom-out2, clickable, 20);
-        margin-bottom: 16px;
-        right: 0px;
+    .fullscreen-toggle.unfullscreen {
+        display: block;
     }
 }
diff --git a/templates/layouts/base.php b/templates/layouts/base.php
index f3da95a..5960448 100644
--- a/templates/layouts/base.php
+++ b/templates/layouts/base.php
@@ -185,9 +185,11 @@ $lang_attr = str_replace('_', '-', $_SESSION['_language']);
         <div id="layout_container">
             <?= Sidebar::get()->render() ?>
             <div id="layout_content">
-            <? if (PageLayout::isFullscreenModeAllowed()): ?>
-                <?= $this->render_partial('shared/fullscreen-toggle.php') ?>
-            <? endif; ?>
+                <? if (PageLayout::isFullscreenModeAllowed()): ?>
+                    <button hidden class="fullscreen-toggle unfullscreen" aria-label="<?= _('Vollbildmodus verlassen') ?>" title="<?= _('Vollbildmodus verlassen') ?>">
+                        <?= Icon::create('zoom-out2')->asImg(24) ?>
+                    </button>
+                <? endif; ?>
                 <?= implode(PageLayout::getMessages()) ?>
                 <?= $content_for_layout ?>
             </div>
diff --git a/templates/shared/fullscreen-toggle.php b/templates/shared/fullscreen-toggle.php
deleted file mode 100644
index 9745627..0000000
--- a/templates/shared/fullscreen-toggle.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<button class="fullscreen-toggle" title="<?= _('Vollbildmodus') ?>">
-    <?= _('Vollbildmodus') ?>
-</button>
diff --git a/templates/tabs.php b/templates/tabs.php
index eaf3876..3efab21 100644
--- a/templates/tabs.php
+++ b/templates/tabs.php
@@ -60,6 +60,13 @@ $ebene3 = [];
         <? endforeach ?>
        <? endif; ?>
     </ul>
+    <? if (PageLayout::isFullscreenModeAllowed()): ?>
+        <div class="fullscreen-container">
+            <button class="fullscreen-toggle" aria-label="<?= _('Vollbildmodus') ?>" title="<?= _('Vollbildmodus') ?>">
+                <?= Icon::create('zoom-in2')->asImg(24) ?>
+            </button>
+        </div>
+    <? endif ?>
     <? if (is_object($GLOBALS['perm']) && $GLOBALS['perm']->have_perm('autor')) : ?>
         <?= Helpbar::get()->render() ?>
     <? endif; ?>
-- 
cgit v1.0