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: [PATCH] simplify CSS for fullscreen-toggle and don't move the button
around via JS, fixes #1356
Closes #1356
Merge request studip/studip!838
---
.../javascripts/bootstrap/fullscreen.js | 2 -
.../assets/javascripts/lib/fullscreen.js | 7 ---
.../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 1fa9b72b105..2a72173be02 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 1f10090ad62..d39036bdda0 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 8ff20eb9acb..3c4e0c20bd3 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 f3da95a58f6..59604482735 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 97456271b9e..00000000000
--- 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 eaf3876131e..3efab21bbfd 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; ?>
--
GitLab