simplify CSS for fullscreen-toggle and don't move the button around via JS, fixes #1356

Closes #1356

Merge request studip/studip!838

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);

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');

resources/assets/stylesheets/scss/fullscreen.scss

 $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;
     }
 }

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>

templates/shared/fullscreen-toggle.php

-<button class="fullscreen-toggle" title="<?= _('Vollbildmodus') ?>">
-    <?= _('Vollbildmodus') ?>
-</button>

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; ?>