diff --git a/resources/assets/javascripts/bootstrap/fullscreen.js b/resources/assets/javascripts/bootstrap/fullscreen.js index 1fa9b72b10519a498bd313d102e3ace3a43e432c..2a72173be023951269133a24cc1b33a62014e818 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 1f10090ad6230deddbb00f203779fb9b5a2929fc..d39036bdda0137dbebf893095766cc8715d18590 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 8ff20eb9acbf87bb22c8aa032879329441aed14c..3c4e0c20bd3691f9317f6aa09acc7395b51c59a9 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 f3da95a58f6a39706035a8c921f31616cac6983e..596044827359d815bec5fc00e362b14849755088 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 97456271b9e23996842f3a2621f9f6eb80ff54c1..0000000000000000000000000000000000000000 --- 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 eaf3876131e0d066cdb7ba2b24ed744a2280e105..3efab21bbfdf14c269a8ebc63c6669704b26ae1a 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; ?>