Resolve ""Zweistufiger" Vollbildmodus"

Closes #2037, #1759, and #2097 Merge request studip/studip!1326
author: Thomas Hackl <hackl@data-quest.de> 2023-02-06 08:36:42 +0000
committer: Thomas Hackl <hackl@data-quest.de> 2023-02-06 08:36:42 +0000
commit: cff48047b00b890600356fad29064b6a28532c2b (patch)
tree: 668cde85ac93a7197249722e74ebac778ace7248
parent: bf7a4a8eb3606b2447335325c29a86c3cfd90bf0 (diff)
66 files changed, 415 insertions, 392 deletions
diff --git a/app/views/oer/market/details.php b/app/views/oer/market/details.php
index e764d90..60468bb 100644
--- a/app/views/oer/market/details.php
+++ b/app/views/oer/market/details.php
@@ -336,7 +336,7 @@ if ($material['player_url'] || $material->isVideo() || $material->isPDF()) {
     $actions->addLink(
         _('Vollbild aktivieren'),
         "#",
-        Icon::create("fullscreen-on", Icon::ROLE_CLICKABLE),
+        Icon::create('screen-full'),
         ['onclick' => "STUDIP.OER.requestFullscreen('.lernmarktplatz_player');"]
     );
 }
diff --git a/lib/wiki.inc.php b/lib/wiki.inc.php
index 6d37e54..f7caafe 100644
--- a/lib/wiki.inc.php
+++ b/lib/wiki.inc.php
@@ -1028,6 +1028,12 @@ function wikiEdit($keyword, $wikiData, $user_id, $backpage=NULL, $ancestor=NULL)
                 ['data-confirm' => showDeleteDialog($page->keyword, $page->version)]
             );
         }
+        $actionMenu->addLink(
+            '#',
+            _('Als Vollbild anzeigen'),
+            Icon::create('screen-compact'),
+            ['class' => 'fullscreen-trigger']
+        );
     }
 
     // Create content bar.
@@ -1593,6 +1599,12 @@ function showWikiPage($keyword, $version, $special="", $show_comments="icon", $h
                 ['data-confirm' => showDeleteDialog($page->keyword, $page->version)]
             );
         }
+        $actionMenu->addLink(
+            '#',
+            _('Als Vollbild anzeigen'),
+            Icon::create('screen-full'),
+            ['class' => 'fullscreen-trigger']
+        );
     }
 
     // Create content bar.
diff --git a/public/assets/images/icons/black/focusmode-off.svg b/public/assets/images/icons/black/focusmode-off.svg
deleted file mode 100644
index d7fe2e4..0000000
--- a/public/assets/images/icons/black/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#000000"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/black/fullscreen-off.svg b/public/assets/images/icons/black/fullscreen-off.svg
deleted file mode 100644
index d7fe2e4..0000000
--- a/public/assets/images/icons/black/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#000000"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/black/fullscreen-on.svg b/public/assets/images/icons/black/fullscreen-on.svg
deleted file mode 100644
index 9f42af5..0000000
--- a/public/assets/images/icons/black/fullscreen-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#000000"><g id="zoom-in-3"><polygon points="51 20.12 47.57 20.12 47.57 6.42 33.86 6.42 33.86 2.99 51 2.99 51 20.12"/><polygon points="20.15 50.97 3.02 50.97 3.02 33.83 6.44 33.83 6.44 47.54 20.15 47.54 20.15 50.97"/><polygon points="33.86 50.97 33.86 47.54 47.57 47.54 47.57 33.83 51 33.83 51 50.97 33.86 50.97"/><polygon points="3.02 20.12 3.02 2.99 20.15 2.99 20.15 6.42 6.44 6.42 6.44 20.12 3.02 20.12"/></g></svg>
diff --git a/public/assets/images/icons/blue/focusmode-off.svg b/public/assets/images/icons/blue/focusmode-off.svg
deleted file mode 100644
index b7e965a..0000000
--- a/public/assets/images/icons/blue/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><polygon class="e" points="56 20 36 20 36 0 40 0 40 16 56 16 56 20"/><polygon class="e" points="20 56 16 56 16 40 0 40 0 36 20 36 20 56"/><polygon class="e" points="36 56 36 36 56 36 56 40 40 40 40 56 36 56"/><polygon class="e" points="0 20 0 16 16 16 16 0 20 0 20 20 0 20"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-off.svg b/public/assets/images/icons/blue/fullscreen-off.svg
deleted file mode 100644
index b7e965a..0000000
--- a/public/assets/images/icons/blue/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><polygon class="e" points="56 20 36 20 36 0 40 0 40 16 56 16 56 20"/><polygon class="e" points="20 56 16 56 16 40 0 40 0 36 20 36 20 56"/><polygon class="e" points="36 56 36 36 56 36 56 40 40 40 40 56 36 56"/><polygon class="e" points="0 20 0 16 16 16 16 0 20 0 20 20 0 20"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-off2.svg b/public/assets/images/icons/blue/fullscreen-off2.svg
deleted file mode 100644
index c10c1d1..0000000
--- a/public/assets/images/icons/blue/fullscreen-off2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.83 52.83"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><polygon class="e" points="50.45 22.45 30.45 22.45 30.45 2.45 34.45 2.45 34.45 18.45 50.45 18.45 50.45 22.45"/><polygon class="e" points="22.45 50.45 18.45 50.45 18.45 34.45 2.45 34.45 2.45 30.45 22.45 30.45 22.45 50.45"/><polygon class="e" points="30.45 50.45 30.45 30.45 50.45 30.45 50.45 34.45 34.45 34.45 34.45 50.45 30.45 50.45"/><polygon class="e" points="2.45 22.45 2.45 18.45 18.45 18.45 18.45 2.45 22.45 2.45 22.45 22.45 2.45 22.45"/><rect class="e" x="8.95" y="-2.49" width="4" height="26.87" transform="translate(-4.54 10.95) rotate(-45)"/><rect class="e" x="39.66" y="28.53" width="4" height="26.26" transform="translate(-17.26 41.66) rotate(-45)"/><rect class="e" x="39.9" y="-2.53" width="4" height="26.92" transform="translate(20 -26.42) rotate(45)"/><rect class="e" x="8.93" y="28.44" width="4" height="26.92" transform="translate(32.83 4.54) rotate(45)"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-off3.svg b/public/assets/images/icons/blue/fullscreen-off3.svg
deleted file mode 100644
index 6830b2e..0000000
--- a/public/assets/images/icons/blue/fullscreen-off3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><polygon class="e" points="44.01 20.01 36.01 20.01 36.01 12.01 32.06 8.06 32.01 8.02 32.01 24.01 48 24.01 47.96 23.96 44.01 20.01"/><rect class="e" x="13" y="5.1" width="4" height="19.8" transform="translate(-6.21 15) rotate(-45)"/><rect class="e" x="39.5" y="30.89" width="4" height="21.21" transform="translate(-17.19 41.5) rotate(-45)"/><rect class="e" x="38.96" y="5.06" width="4" height="19.8" transform="translate(22.58 -24.58) rotate(45)"/><rect class="e" x="12.71" y="30.96" width="4" height="20.51" transform="translate(33.45 1.67) rotate(45)"/><path class="e" d="M52,4V52H4V4H52M56,0H0V56H56V0h0Z"/><polygon class="e" points="11.99 36.02 20 36.02 20 44.03 23.95 47.98 24 48.01 24 32.02 8.01 32.02 8.05 32.07 11.99 36.02"/><polygon class="e" points="36.01 44.03 36.01 36.02 44.01 36.02 47.96 32.07 48 32.02 32.01 32.02 32.01 48.01 32.06 47.98 36.01 44.03"/><polygon class="e" points="20 12.01 20 20.01 11.99 20.01 8.05 23.96 8.01 24.01 24 24.01 24 8.02 23.95 8.06 20 12.01"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-on.svg b/public/assets/images/icons/blue/fullscreen-on.svg
deleted file mode 100644
index 08c249c..0000000
--- a/public/assets/images/icons/blue/fullscreen-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-on2.svg b/public/assets/images/icons/blue/fullscreen-on2.svg
deleted file mode 100644
index 16ba091..0000000
--- a/public/assets/images/icons/blue/fullscreen-on2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g><rect class="e" x="9.44" y="-2.04" width="4" height="26.97" transform="translate(-4.74 11.44) rotate(-45)"/><rect class="e" x="42.48" y="31.04" width="4" height="26.87" transform="translate(-18.42 44.48) rotate(-45)"/><rect class="e" x="42.46" y="-2.03" width="4" height="26.92" transform="translate(21.1 -28.09) rotate(45)"/><rect class="e" x="9.43" y="31" width="4" height="26.92" transform="translate(34.79 4.94) rotate(45)"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-on3.svg b/public/assets/images/icons/blue/fullscreen-on3.svg
deleted file mode 100644
index bdaad6d..0000000
--- a/public/assets/images/icons/blue/fullscreen-on3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 12.02 44 12.02 44 20.03 47.95 23.98 48 24.01 48 8.02 32.01 8.02 32.05 8.07 35.99 12.02"/><polygon class="e" points="20.01 44.01 12.01 44.01 12.01 36.01 8.06 32.06 8.01 32.02 8.01 48.01 24 48.01 23.96 47.96 20.01 44.01"/><polygon class="e" points="44 36.01 44 44.01 35.99 44.01 32.05 47.96 32.01 48.01 48 48.01 48 32.02 47.95 32.06 44 36.01"/><polygon class="e" points="12.01 20.03 12.01 12.02 20.01 12.02 23.96 8.07 24 8.02 8.01 8.02 8.01 24.01 8.06 23.98 12.01 20.03"/></g><rect class="e" x="16" y="8.1" width="4" height="19.8" transform="translate(-7.46 18) rotate(-45)"/><rect class="e" x="36.5" y="27.89" width="4" height="21.21" transform="translate(-15.95 38.5) rotate(-45)"/><rect class="e" x="35.96" y="8.06" width="4" height="19.8" transform="translate(23.82 -21.58) rotate(45)"/><rect class="e" x="15.71" y="27.96" width="4" height="20.51" transform="translate(32.21 -1.33) rotate(45)"/><path class="e" d="M52,4V52H4V4H52M56,0H0V56H56V0h0Z"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-on4.svg b/public/assets/images/icons/blue/fullscreen-on4.svg
deleted file mode 100644
index da6502e..0000000
--- a/public/assets/images/icons/blue/fullscreen-on4.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g><rect class="e" x="7.98" y="11.98" width="40" height="8"/><path class="e" d="M43.98,15.98v24H11.98V15.98H43.98m4-4H7.98V43.98H47.98V11.98h0Z"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/fullscreen-on5.svg b/public/assets/images/icons/blue/fullscreen-on5.svg
deleted file mode 100644
index 8566dec..0000000
--- a/public/assets/images/icons/blue/fullscreen-on5.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#28497c;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 49.99 55.98 49.99 55.98 0 35.99 0"/><polygon class="e" points="4 5.99 0 5.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 5.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 5.99 51.98 5.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="49.99 4 49.99 0 0 0 0 19.99 4 19.99 4 4 49.99 4"/></g><rect class="e" x="7.98" y="19.98" width="32" height="8"/><path class="e" d="M35.98,23.98v20H11.98V23.98h24m4-4H7.98v28H39.98V19.98h0Z"/></g></g></svg>
diff --git a/public/assets/images/icons/blue/screen-compact.svg b/public/assets/images/icons/blue/screen-compact.svg
new file mode 100644
index 0000000..24a3618
--- /dev/null
+++ b/public/assets/images/icons/blue/screen-compact.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><g><polygon class="g" points="40.01 4.02 40.01 8.02 56 8.02 56 24.01 60 24.01 60 4.02 40.01 4.02"/><polygon class="g" points="8.02 40.01 4.02 40.01 4.02 60 24.01 60 24.01 56 8.02 56 8.02 40.01"/></g><g><polygon class="g" points="60 40.01 56 40.01 56 56 40.01 56 40.01 60 60 60 60 40.01"/><polygon class="g" points="24.01 8.02 24.01 4.02 4.02 4.02 4.02 24.01 8.02 24.01 8.02 8.02 24.01 8.02"/></g></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/blue/screen-full.svg b/public/assets/images/icons/blue/screen-full.svg
new file mode 100644
index 0000000..23d2d61
--- /dev/null
+++ b/public/assets/images/icons/blue/screen-full.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><polygon class="g" points="60 40.01 56 40.01 56 56 40.01 56 40.01 60 60 60 60 40.01"/><polygon class="g" points="24.01 8.02 24.01 4.02 4.02 4.02 4.02 24.01 8.02 24.01 8.02 8.02 24.01 8.02"/><polygon class="g" points="8.02 56 8.02 40.01 4.02 40.01 4.02 60 24.01 60 24.01 56 8.02 56"/><polygon class="g" points="56 8.02 56 24.01 60 24.01 60 4.02 40.01 4.02 40.01 8.02 56 8.02"/><polygon class="g" points="34.01 14 34.05 14.05 38 18 43.19 18 34.12 27.08 36.95 29.9 46.01 20.84 46.01 26.01 49.96 29.96 50 30 50 14 34.01 14"/><polygon class="g" points="26.01 46.01 20.84 46.01 29.87 36.98 27.05 34.15 18 43.19 18 38 14.05 34.05 14 34.01 14 50 30 50 29.96 49.96 26.01 46.01"/></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/blue/screen-standard.svg b/public/assets/images/icons/blue/screen-standard.svg
new file mode 100644
index 0000000..05a5dee
--- /dev/null
+++ b/public/assets/images/icons/blue/screen-standard.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#28497c;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><polygon class="g" points="60 24 40 24 40 4 44 4 44 20 60 20 60 24"/><polygon class="g" points="24 60 20 60 20 44 4 44 4 40 24 40 24 60"/><polygon class="g" points="40 60 40 40 60 40 60 44 44 44 44 60 40 60"/><polygon class="g" points="4 24 4 20 20 20 20 4 24 4 24 24 4 24"/></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/green/focusmode-off.svg b/public/assets/images/icons/green/focusmode-off.svg
deleted file mode 100644
index b5aa406..0000000
--- a/public/assets/images/icons/green/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#00962d"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/green/fullscreen-off.svg b/public/assets/images/icons/green/fullscreen-off.svg
deleted file mode 100644
index b5aa406..0000000
--- a/public/assets/images/icons/green/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#00962d"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/green/fullscreen-on.svg b/public/assets/images/icons/green/fullscreen-on.svg
deleted file mode 100644
index 38c011b..0000000
--- a/public/assets/images/icons/green/fullscreen-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#00962d"><g id="zoom-in-3"><polygon points="51 20.12 47.57 20.12 47.57 6.42 33.86 6.42 33.86 2.99 51 2.99 51 20.12"/><polygon points="20.15 50.97 3.02 50.97 3.02 33.83 6.44 33.83 6.44 47.54 20.15 47.54 20.15 50.97"/><polygon points="33.86 50.97 33.86 47.54 47.57 47.54 47.57 33.83 51 33.83 51 50.97 33.86 50.97"/><polygon points="3.02 20.12 3.02 2.99 20.15 2.99 20.15 6.42 6.44 6.42 6.44 20.12 3.02 20.12"/></g></svg>
diff --git a/public/assets/images/icons/grey/focusmode-off.svg b/public/assets/images/icons/grey/focusmode-off.svg
deleted file mode 100644
index 6509d79..0000000
--- a/public/assets/images/icons/grey/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#6e6e6e"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/grey/fullscreen-off.svg b/public/assets/images/icons/grey/fullscreen-off.svg
deleted file mode 100644
index 6509d79..0000000
--- a/public/assets/images/icons/grey/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#6e6e6e"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/grey/fullscreen-on.svg b/public/assets/images/icons/grey/fullscreen-on.svg
index d2e63bc..4ce992f 100644
--- a/public/assets/images/icons/grey/fullscreen-on.svg
+++ b/public/assets/images/icons/grey/fullscreen-on.svg
@@ -1 +1 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#6e6e6e"><g id="zoom-in-3"><polygon points="51 20.12 47.57 20.12 47.57 6.42 33.86 6.42 33.86 2.99 51 2.99 51 20.12"/><polygon points="20.15 50.97 3.02 50.97 3.02 33.83 6.44 33.83 6.44 47.54 20.15 47.54 20.15 50.97"/><polygon points="33.86 50.97 33.86 47.54 47.57 47.54 47.57 33.83 51 33.83 51 50.97 33.86 50.97"/><polygon points="3.02 20.12 3.02 2.99 20.15 2.99 20.15 6.42 6.44 6.42 6.44 20.12 3.02 20.12"/></g></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#6e6e6e;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/red/focusmode-off.svg b/public/assets/images/icons/red/focusmode-off.svg
deleted file mode 100644
index 9767595..0000000
--- a/public/assets/images/icons/red/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#cb1800"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/red/fullscreen-off.svg b/public/assets/images/icons/red/fullscreen-off.svg
deleted file mode 100644
index 9767595..0000000
--- a/public/assets/images/icons/red/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#cb1800"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/red/fullscreen-on.svg b/public/assets/images/icons/red/fullscreen-on.svg
deleted file mode 100644
index b592812..0000000
--- a/public/assets/images/icons/red/fullscreen-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#cb1800"><g id="zoom-in-3"><polygon points="51 20.12 47.57 20.12 47.57 6.42 33.86 6.42 33.86 2.99 51 2.99 51 20.12"/><polygon points="20.15 50.97 3.02 50.97 3.02 33.83 6.44 33.83 6.44 47.54 20.15 47.54 20.15 50.97"/><polygon points="33.86 50.97 33.86 47.54 47.57 47.54 47.57 33.83 51 33.83 51 50.97 33.86 50.97"/><polygon points="3.02 20.12 3.02 2.99 20.15 2.99 20.15 6.42 6.44 6.42 6.44 20.12 3.02 20.12"/></g></svg>
diff --git a/public/assets/images/icons/white/focusmode-off.svg b/public/assets/images/icons/white/focusmode-off.svg
deleted file mode 100644
index f852c7f..0000000
--- a/public/assets/images/icons/white/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><polygon class="e" points="56 20 36 20 36 0 40 0 40 16 56 16 56 20"/><polygon class="e" points="20 56 16 56 16 40 0 40 0 36 20 36 20 56"/><polygon class="e" points="36 56 36 36 56 36 56 40 40 40 40 56 36 56"/><polygon class="e" points="0 20 0 16 16 16 16 0 20 0 20 20 0 20"/></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-off.svg b/public/assets/images/icons/white/fullscreen-off.svg
deleted file mode 100644
index f852c7f..0000000
--- a/public/assets/images/icons/white/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><polygon class="e" points="56 20 36 20 36 0 40 0 40 16 56 16 56 20"/><polygon class="e" points="20 56 16 56 16 40 0 40 0 36 20 36 20 56"/><polygon class="e" points="36 56 36 36 56 36 56 40 40 40 40 56 36 56"/><polygon class="e" points="0 20 0 16 16 16 16 0 20 0 20 20 0 20"/></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-off2.svg b/public/assets/images/icons/white/fullscreen-off2.svg
deleted file mode 100644
index 5c7b0c6..0000000
--- a/public/assets/images/icons/white/fullscreen-off2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.83 52.83"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><polygon class="e" points="50.45 22.45 30.45 22.45 30.45 2.45 34.45 2.45 34.45 18.45 50.45 18.45 50.45 22.45"/><polygon class="e" points="22.45 50.45 18.45 50.45 18.45 34.45 2.45 34.45 2.45 30.45 22.45 30.45 22.45 50.45"/><polygon class="e" points="30.45 50.45 30.45 30.45 50.45 30.45 50.45 34.45 34.45 34.45 34.45 50.45 30.45 50.45"/><polygon class="e" points="2.45 22.45 2.45 18.45 18.45 18.45 18.45 2.45 22.45 2.45 22.45 22.45 2.45 22.45"/><rect class="e" x="8.95" y="-2.49" width="4" height="26.87" transform="translate(-4.54 10.95) rotate(-45)"/><rect class="e" x="39.66" y="28.53" width="4" height="26.26" transform="translate(-17.26 41.66) rotate(-45)"/><rect class="e" x="39.9" y="-2.53" width="4" height="26.92" transform="translate(20 -26.42) rotate(45)"/><rect class="e" x="8.93" y="28.44" width="4" height="26.92" transform="translate(32.83 4.54) rotate(45)"/></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-off3.svg b/public/assets/images/icons/white/fullscreen-off3.svg
deleted file mode 100644
index d51bf9d..0000000
--- a/public/assets/images/icons/white/fullscreen-off3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><polygon class="e" points="44.01 20.01 36.01 20.01 36.01 12.01 32.06 8.06 32.01 8.02 32.01 24.01 48 24.01 47.96 23.96 44.01 20.01"/><rect class="e" x="13" y="5.1" width="4" height="19.8" transform="translate(-6.21 15) rotate(-45)"/><rect class="e" x="39.5" y="30.89" width="4" height="21.21" transform="translate(-17.19 41.5) rotate(-45)"/><rect class="e" x="38.96" y="5.06" width="4" height="19.8" transform="translate(22.58 -24.58) rotate(45)"/><rect class="e" x="12.71" y="30.96" width="4" height="20.51" transform="translate(33.45 1.67) rotate(45)"/><path class="e" d="M52,4V52H4V4H52M56,0H0V56H56V0h0Z"/><polygon class="e" points="11.99 36.02 20 36.02 20 44.03 23.95 47.98 24 48.01 24 32.02 8.01 32.02 8.05 32.07 11.99 36.02"/><polygon class="e" points="36.01 44.03 36.01 36.02 44.01 36.02 47.96 32.07 48 32.02 32.01 32.02 32.01 48.01 32.06 47.98 36.01 44.03"/><polygon class="e" points="20 12.01 20 20.01 11.99 20.01 8.05 23.96 8.01 24.01 24 24.01 24 8.02 23.95 8.06 20 12.01"/></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-on.svg b/public/assets/images/icons/white/fullscreen-on.svg
deleted file mode 100644
index 6c10665..0000000
--- a/public/assets/images/icons/white/fullscreen-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-on2.svg b/public/assets/images/icons/white/fullscreen-on2.svg
deleted file mode 100644
index bc25ed8..0000000
--- a/public/assets/images/icons/white/fullscreen-on2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g><rect class="e" x="9.44" y="-2.04" width="4" height="26.97" transform="translate(-4.74 11.44) rotate(-45)"/><rect class="e" x="42.48" y="31.04" width="4" height="26.87" transform="translate(-18.42 44.48) rotate(-45)"/><rect class="e" x="42.46" y="-2.03" width="4" height="26.92" transform="translate(21.1 -28.09) rotate(45)"/><rect class="e" x="9.43" y="31" width="4" height="26.92" transform="translate(34.79 4.94) rotate(45)"/></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-on3.svg b/public/assets/images/icons/white/fullscreen-on3.svg
deleted file mode 100644
index 0492439..0000000
--- a/public/assets/images/icons/white/fullscreen-on3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 12.02 44 12.02 44 20.03 47.95 23.98 48 24.01 48 8.02 32.01 8.02 32.05 8.07 35.99 12.02"/><polygon class="e" points="20.01 44.01 12.01 44.01 12.01 36.01 8.06 32.06 8.01 32.02 8.01 48.01 24 48.01 23.96 47.96 20.01 44.01"/><polygon class="e" points="44 36.01 44 44.01 35.99 44.01 32.05 47.96 32.01 48.01 48 48.01 48 32.02 47.95 32.06 44 36.01"/><polygon class="e" points="12.01 20.03 12.01 12.02 20.01 12.02 23.96 8.07 24 8.02 8.01 8.02 8.01 24.01 8.06 23.98 12.01 20.03"/></g><rect class="e" x="16" y="8.1" width="4" height="19.8" transform="translate(-7.46 18) rotate(-45)"/><rect class="e" x="36.5" y="27.89" width="4" height="21.21" transform="translate(-15.95 38.5) rotate(-45)"/><rect class="e" x="35.96" y="8.06" width="4" height="19.8" transform="translate(23.82 -21.58) rotate(45)"/><rect class="e" x="15.71" y="27.96" width="4" height="20.51" transform="translate(32.21 -1.33) rotate(45)"/><path class="e" d="M52,4V52H4V4H52M56,0H0V56H56V0h0Z"/></g></g></svg>
diff --git a/public/assets/images/icons/white/fullscreen-on4.svg b/public/assets/images/icons/white/fullscreen-on4.svg
deleted file mode 100644
index 0e406ef..0000000
--- a/public/assets/images/icons/white/fullscreen-on4.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.98 55.98"><defs><style>.e{fill:#fff;}</style></defs><g id="c"><g id="d"><g><polygon class="e" points="35.99 0 35.99 4 51.98 4 51.98 19.99 55.98 19.99 55.98 0 35.99 0"/><polygon class="e" points="4 35.99 0 35.99 0 55.98 19.99 55.98 19.99 51.98 4 51.98 4 35.99"/></g><g><polygon class="e" points="55.98 35.99 51.98 35.99 51.98 51.98 35.99 51.98 35.99 55.98 55.98 55.98 55.98 35.99"/><polygon class="e" points="19.99 4 19.99 0 0 0 0 19.99 4 19.99 4 4 19.99 4"/></g><rect class="e" x="7.98" y="11.98" width="40" height="8"/><path class="e" d="M43.98,15.98v24H11.98V15.98H43.98m4-4H7.98V43.98H47.98V11.98h0Z"/></g></g></svg>
diff --git a/public/assets/images/icons/white/screen-compact.svg b/public/assets/images/icons/white/screen-compact.svg
new file mode 100644
index 0000000..6c9415b
--- /dev/null
+++ b/public/assets/images/icons/white/screen-compact.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#ffffff;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><g><polygon class="g" points="40.01 4.02 40.01 8.02 56 8.02 56 24.01 60 24.01 60 4.02 40.01 4.02"/><polygon class="g" points="8.02 40.01 4.02 40.01 4.02 60 24.01 60 24.01 56 8.02 56 8.02 40.01"/></g><g><polygon class="g" points="60 40.01 56 40.01 56 56 40.01 56 40.01 60 60 60 60 40.01"/><polygon class="g" points="24.01 8.02 24.01 4.02 4.02 4.02 4.02 24.01 8.02 24.01 8.02 8.02 24.01 8.02"/></g></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/white/screen-full.svg b/public/assets/images/icons/white/screen-full.svg
new file mode 100644
index 0000000..e721e14
--- /dev/null
+++ b/public/assets/images/icons/white/screen-full.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#ffffff;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><polygon class="g" points="60 40.01 56 40.01 56 56 40.01 56 40.01 60 60 60 60 40.01"/><polygon class="g" points="24.01 8.02 24.01 4.02 4.02 4.02 4.02 24.01 8.02 24.01 8.02 8.02 24.01 8.02"/><polygon class="g" points="8.02 56 8.02 40.01 4.02 40.01 4.02 60 24.01 60 24.01 56 8.02 56"/><polygon class="g" points="56 8.02 56 24.01 60 24.01 60 4.02 40.01 4.02 40.01 8.02 56 8.02"/><polygon class="g" points="34.01 14 34.05 14.05 38 18 43.19 18 34.12 27.08 36.95 29.9 46.01 20.84 46.01 26.01 49.96 29.96 50 30 50 14 34.01 14"/><polygon class="g" points="26.01 46.01 20.84 46.01 29.87 36.98 27.05 34.15 18 43.19 18 38 14.05 34.05 14 34.01 14 50 30 50 29.96 49.96 26.01 46.01"/></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/white/screen-standard.svg b/public/assets/images/icons/white/screen-standard.svg
new file mode 100644
index 0000000..24ff02b
--- /dev/null
+++ b/public/assets/images/icons/white/screen-standard.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.f{fill:none;}.g{fill:#ffffff;}</style></defs><g id="c"><rect class="f" width="64" height="64"/></g><g id="d"><g id="e"><polygon class="g" points="60 24 40 24 40 4 44 4 44 20 60 20 60 24"/><polygon class="g" points="24 60 20 60 20 44 4 44 4 40 24 40 24 60"/><polygon class="g" points="40 60 40 40 60 40 60 44 44 44 44 60 40 60"/><polygon class="g" points="4 24 4 20 20 20 20 4 24 4 24 24 4 24"/></g></g></svg>
+\ No newline at end of file
diff --git a/public/assets/images/icons/yellow/focusmode-off.svg b/public/assets/images/icons/yellow/focusmode-off.svg
deleted file mode 100644
index a98b0e0..0000000
--- a/public/assets/images/icons/yellow/focusmode-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#ffad00"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/yellow/fullscreen-off.svg b/public/assets/images/icons/yellow/fullscreen-off.svg
deleted file mode 100644
index a98b0e0..0000000
--- a/public/assets/images/icons/yellow/fullscreen-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#ffad00"><g id="fullscreen-off"><polygon points="51 20.13 33.87 20.13 33.87 2.99 37.29 2.99 37.29 16.7 51 16.7 51 20.13"/><polygon points="33.86 50.87 33.86 33.73 51 33.73 51 37.16 37.29 37.16 37.29 50.87 33.86 50.87"/><polygon points="20.16 50.97 16.73 50.97 16.73 37.26 3.02 37.26 3.02 33.84 20.16 33.84 20.16 50.97"/><polygon points="3.02 20.02 3.02 16.6 16.73 16.6 16.73 2.89 20.16 2.89 20.16 20.02 3.02 20.02"/></g></svg>
diff --git a/public/assets/images/icons/yellow/fullscreen-on.svg b/public/assets/images/icons/yellow/fullscreen-on.svg
deleted file mode 100644
index 3a3d01b..0000000
--- a/public/assets/images/icons/yellow/fullscreen-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#ffad00"><g id="zoom-in-3"><polygon points="51 20.12 47.57 20.12 47.57 6.42 33.86 6.42 33.86 2.99 51 2.99 51 20.12"/><polygon points="20.15 50.97 3.02 50.97 3.02 33.83 6.44 33.83 6.44 47.54 20.15 47.54 20.15 50.97"/><polygon points="33.86 50.97 33.86 47.54 47.57 47.54 47.57 33.83 51 33.83 51 50.97 33.86 50.97"/><polygon points="3.02 20.12 3.02 2.99 20.15 2.99 20.15 6.42 6.44 6.42 6.44 20.12 3.02 20.12"/></g></svg>
diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index a7101fa..d9175d3 100644
--- a/resources/assets/javascripts/bootstrap/application.js
+++ b/resources/assets/javascripts/bootstrap/application.js
@@ -365,11 +365,3 @@ jQuery(document).on('click', 'a[data-behaviour~="ajax-toggle"]', function (event
         $('#open_variable').attr('value', $(this).parent('fieldset').data('open'));
     });
 }(jQuery));
-
-// Trigger consuming mode on contentbar
-STUDIP.domReady(function () {
-    $(document).on("click", ".consuming_mode_trigger", function () {
-        $("body").toggleClass("consuming_mode");
-        return false;
-    });
-});
diff --git a/resources/assets/javascripts/bootstrap/fullscreen.js b/resources/assets/javascripts/bootstrap/fullscreen.js
index 2a72173..990eae7 100644
--- a/resources/assets/javascripts/bootstrap/fullscreen.js
+++ b/resources/assets/javascripts/bootstrap/fullscreen.js
@@ -1,7 +1,26 @@
-STUDIP.domReady(function () {
-    $('.fullscreen-toggle').click(() => STUDIP.Fullscreen.toggle());
-
-    if (sessionStorage.getItem('studip-fullscreen') == 'on' && $('.fullscreen-toggle').length > 0) {
-        STUDIP.Fullscreen.enter(true);
-    }
-}, true);
+STUDIP.ready(() => {
+    $('#fullscreen-on').on('click', event => {
+        event.preventDefault();
+        STUDIP.Vue.emit('toggle-compact-navigation', true);
+    });
+    $('#fullscreen-off').on('click', event => {
+        event.preventDefault();
+        STUDIP.Vue.emit('toggle-compact-navigation', false);
+    });
+    $('#focusmode-on, .fullscreen-trigger').on('click', event => {
+        event.preventDefault();
+        STUDIP.Fullscreen.activate();
+    });
+    // Listen for fullscreen exit, ending focus mode with it.
+    document.addEventListener('fullscreenchange', event => {
+        if (!document.fullscreenElement) {
+            STUDIP.Fullscreen.deactivate();
+        }
+    });
+    // Fullscreen exit on Safari
+    document.addEventListener('webkitfullscreenchange', event => {
+        if (!document.webkitFullscreenElement) {
+            STUDIP.Fullscreen.deactivate();
+        }
+    });
+});
diff --git a/resources/assets/javascripts/bootstrap/responsive.js b/resources/assets/javascripts/bootstrap/responsive.js
index 0dd7149..af06f28 100644
--- a/resources/assets/javascripts/bootstrap/responsive.js
+++ b/resources/assets/javascripts/bootstrap/responsive.js
@@ -2,8 +2,12 @@
 STUDIP.domReady(() => {
     STUDIP.Responsive.engage();
 
-    if (STUDIP.Responsive.isFullscreen()) {
-        document.querySelector('html').classList.add('fullscreen-mode');
+    if (STUDIP.Responsive.isCompactNavigation()) {
+        document.documentElement.classList.add('fullscreen-mode');
+        const sidebar = document.getElementById('sidebar');
+        if (sidebar) {
+            sidebar.style.display = 'none';
+        }
     }
 
 }, true);
diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js
index 01e9d96..92b37d6 100644
--- a/resources/assets/javascripts/bootstrap/sidebar.js
+++ b/resources/assets/javascripts/bootstrap/sidebar.js
@@ -1,58 +1,4 @@
-function heightChangeHandler() {
-    var curr_height = $(document).height();
-    if (doc_height !== curr_height) {
-        doc_height = curr_height;
-        $(document.body).trigger('sticky_kit:recalc');
-    }
-}
-
-// Handle dynamic content
-if (window.MutationObserver !== undefined) {
-    // Attach mutation observer to #content and trigger it on
-    // changes to class and style attributes (which affect the height
-    // of the content). Trigger a recalculation of the sticky kit when
-    // a mutation occurs so the sidebar will
-    $(document).ready(function() {
-        if ($('#content').length === 0) {
-            return;
-        }
-        var target = $('#content').get(0),
-            stickyObserver = new window.MutationObserver(function() {
-                window.requestAnimationFrame(function() {
-                    $(document.body).trigger('sticky_kit:recalc');
-                });
-            });
-        stickyObserver.observe(target, {
-            attributes: true,
-            attributeFilter: ['style', 'class'],
-            characterData: true,
-            childList: true,
-            subtree: true
-        });
-    });
-} else {
-    // Stores document height (we will need this to check for changes)
-    var doc_height;
-
-    STUDIP.domReady(() => {
-        doc_height = $(document).height();
-    });
-
-    // Recalculcate positions on ajax and img load events.
-    // Inside the handlers the current document height is compared
-    // to the previous height before the event occured so recalculation
-    // only happens on actual changes
-    $(document).on('ajaxComplete', heightChangeHandler);
-    $(document).on('load', '#content img', heightChangeHandler);
-
-    // Specialized handler to trigger recalculation when wysiwyg
-    // instances are created.
-    $(document).on('load.wysiwyg', 'textarea', function() {
-        $(document.body).trigger('sticky_kit:recalc');
-    });
-}
-
-// Engage
+// Set correct sidebar height for stickyness
 STUDIP.domReady(() => {
-    STUDIP.Sidebar.checkActiveLineHeight();
+    STUDIP.Sidebar.adjustHeight();
 });
diff --git a/resources/assets/javascripts/lib/fullscreen.js b/resources/assets/javascripts/lib/fullscreen.js
index 5d91eb9..16001da 100644
--- a/resources/assets/javascripts/lib/fullscreen.js
+++ b/resources/assets/javascripts/lib/fullscreen.js
@@ -1,51 +1,27 @@
 const Fullscreen = {
-    toggle () {
-        if (sessionStorage.getItem('studip-fullscreen') === 'on') {
-            STUDIP.Fullscreen.leave();
-        } else {
-            STUDIP.Fullscreen.enter();
+    activate() {
+        STUDIP.ActionMenu.closeAll();
+        if (document.documentElement.classList.contains('fullscreen-mode')) {
+            const cache = STUDIP.Cache.getInstance('responsive.');
+            cache.set('was-compact-navigation', true);
+        }
+        STUDIP.Vue.emit('switch-focus-mode', true);
+        document.documentElement.classList.remove('fullscreen-mode');
+        document.body.classList.add('consuming_mode');
+        if (document.body.requestFullscreen) {
+            document.body.requestFullscreen({ hide: true });
+        } else if (document.body.webkitRequestFullscreen) { /* Safari */
+            document.body.webkitRequestFullscreen({ hide: true });
         }
     },
-
-    enter (immediate = false) {
-        // Set appropriate class on html element to trigger fullscreen mode and
-        // transisitions
-        $('html').addClass('is-fullscreen').toggleClass('is-fullscreen-immediately', immediate);
-
-        // Attach key handler that allows keypress on escape to leave fullscreen
-        $(document).on('keydown.key27', (event) => {
-            if (event.key === 'Escape') {
-                STUDIP.Fullscreen.leave();
-            }
-        });
-
-        // Store indicator in session
-        sessionStorage.setItem('studip-fullscreen', 'on');
-    },
-
-    leave () {
-        // Remove indicator from session
-        sessionStorage.removeItem('studip-fullscreen');
-
-        // Deactivate key handler
-        $(document).off('keydown.key27');
-
-        (new Promise((resolve, reject) => {
-            var timeout = setTimeout(() => {
-                $('#sidebar').off('transitionend');
-                resolve();
-            }, 500);
-            $('#sidebar').one('transitionend', () => {
-                clearTimeout(timeout);
-                resolve();
-            });
-        })).then(() => {
-            $(document.body).trigger('sticky_kit:recalc');
-        });
-
-
-        // Remove classes on html element
-        $('html').removeClass('is-fullscreen is-fullscreen-immediately');
+    deactivate() {
+        STUDIP.Vue.emit('switch-focus-mode', false);
+        document.body.classList.remove('consuming_mode');
+        const cache = STUDIP.Cache.getInstance('responsive.');
+        if (cache.get('was-compact-navigation')) {
+            STUDIP.Vue.emit('toggle-compact-navigation', true);
+        }
+        cache.remove('was-compact-navigation');
     }
 };
 
diff --git a/resources/assets/javascripts/lib/responsive.js b/resources/assets/javascripts/lib/responsive.js
index a493e8d..ee851fc 100644
--- a/resources/assets/javascripts/lib/responsive.js
+++ b/resources/assets/javascripts/lib/responsive.js
@@ -26,10 +26,15 @@ const Responsive = {
         return Responsive.media_query.matches;
     },
 
-    isFullscreen() {
+    isCompactNavigation() {
         const cache = STUDIP.Cache.getInstance('responsive.');
-
-        return cache.get('fullscreen-mode') ?? false;
+        let result = false;
+        if (STUDIP.USER_ID) {
+            result = cache.get('fullscreen-mode') ?? false;
+        } else {
+            cache.remove('fullscreen-mode');
+        }
+        return result;
     }
 };
 
diff --git a/resources/assets/javascripts/lib/sidebar.js b/resources/assets/javascripts/lib/sidebar.js
index 8f01d79..d3d67d5 100644
--- a/resources/assets/javascripts/lib/sidebar.js
+++ b/resources/assets/javascripts/lib/sidebar.js
@@ -18,17 +18,19 @@ const Sidebar = {
     }
 };
 
-Sidebar.checkActiveLineHeight = () => {
-    $('#sidebar .sidebar-widget-content .widget-links li.active a.active').each(function() {
-        var link = $(this);
-        var actual_text = link.text();
-        link.text('tmp');
-        var default_height = link.outerHeight();
-        link.text(actual_text);
-        var actual_height = link.outerHeight();
-        if (actual_height > default_height) { //it is rendered in more lines
-            link.css('line-height', '20px');
-        }
-    });
+Sidebar.adjustHeight = () => {
+    const display = $('#sidebar').css('display');
+
+    if (display === 'none') {
+        $('#sidebar').css('display', 'block');
+    }
+    const lastWidget = $('.sidebar-widget:last-child');
+    if (lastWidget.length > 0) {
+        const height = lastWidget.offset().top + lastWidget.height();
+        $('#sidebar').css('height', height + 'px');
+    }
+    if (display === 'none') {
+        $('#sidebar').css('display', 'none');
+    }
 }
 export default Sidebar;
diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss
index a4e24af..b85fdf9 100644
--- a/resources/assets/stylesheets/scss/contentbar.scss
+++ b/resources/assets/stylesheets/scss/contentbar.scss
@@ -119,26 +119,3 @@
     }
 
 }
-
-body:not(.consuming_mode) {
-    .consuming_mode_trigger {
-        @include icon(before, fullscreen-on, clickable, 24px, 0);
-        margin-top: -2px;
-        margin-left: 0
-    }
-}
-
-body.consuming_mode {
-    .contentbar {
-        margin-left: 10px;
-        margin-right: 0;
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-
-    .consuming_mode_trigger {
-        @include icon(before, focusmode-off, clickable, 24px, 0);
-        margin-top: -2px;
-        margin-left: 0
-    }
-}
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 1eb349a..ccc11bf 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -400,14 +400,6 @@ $consum_ribbon_width: calc(100% - 58px);
             @include background-icon(table-of-contents, clickable, 24);
         }
 
-        &.cw-ribbon-button-zoom {
-            @include background-icon(fullscreen-on, clickable, 24);
-        }
-
-        &.cw-ribbon-button-zoom-out {
-            @include background-icon(focusmode-off, clickable, 24);
-        }
-
         &.cw-ribbon-button-prev {
             @include background-icon(arr_1left, clickable, 24);
             margin: 0 0.5em 0 0;
@@ -654,7 +646,7 @@ ribbon end
     }
 
     .cw-container-wrapper {
-        max-width: 1095px;
+        max-width: $max-content-width;
         margin: 0;
         padding: 0;
         display: flex;
@@ -816,7 +808,7 @@ ribbon end
     margin-bottom: 1em;
 
     &.cw-container-colspan-full {
-        max-width: 1095px;
+        max-width: $max-content-width;
         width: 100%;
     }
     &.cw-container-colspan-half {
@@ -824,7 +816,7 @@ ribbon end
         width: 100%;
     }
     &.cw-container-colspan-half-center {
-        width: 1095px;
+        width: $max-content-width;
         .cw-container-content {
             max-width: 540px;
             margin: auto;
@@ -974,7 +966,7 @@ form.cw-container-dialog-edit-form {
 .cw-container-wrapper-discuss {
     .cw-container-colspan-full {
         .cw-content-wrapper {
-            max-width: 1095px;
+            max-width: $max-content-width;
         }
     }
     .cw-container-colspan-half,
@@ -1064,7 +1056,7 @@ form.cw-container-dialog-edit-form {
 
 @media only screen and (max-width: 1820px) {
     .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss {
-        max-width: 1095px;
+        max-width: $max-content-width;
         .cw-container.cw-container-list.cw-container-item.cw-container-colspan-full {
             .cw-default-block {
                 flex-flow: column;
@@ -1079,7 +1071,7 @@ form.cw-container-dialog-edit-form {
 
 @media only screen and (max-width: 1200px) {
     .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss {
-        max-width: 1095px;
+        max-width: $max-content-width;
         .cw-container.cw-container-list.cw-container-item.cw-container-colspan-half,
         .cw-container.cw-container-list.cw-container-item.cw-container-colspan-half-center {
             .cw-default-block {
@@ -2034,7 +2026,7 @@ c o m p a n i o n  o v e r l a y
 
 .cw-companion-box-wrapper {
         width: 100%;
-        max-width: 1095px;
+        max-width: $max-content-width;
 }
 
 /* * * * * * * * * * * * * * * * * *
@@ -2048,9 +2040,6 @@ v i e w  w i d g e t
     .cw-action-widget-show-toc {
         @include background-icon(table-of-contents, clickable);
     }
-    .cw-action-widget-show-consume-mode {
-        @include background-icon(fullscreen-on, clickable);
-    }
     .cw-action-widget-edit{
         @include background-icon(edit, clickable);
     }
@@ -2249,7 +2238,7 @@ d a s h b o a r d
         margin-right: 1em;
 
         &.cw-dashboard-box-full {
-            max-width: 1095px;
+            max-width: $max-content-width;
             width: calc(100% - 16px);
         }
         &.cw-dashboard-box-half {
@@ -2301,7 +2290,7 @@ d a s h b o a r d
 }
 
 .cw-activities-wrapper {
-    max-width: 1095px;
+    max-width: $max-content-width;
 
     .cw-companion-box {
         margin: 10px;
@@ -4381,7 +4370,7 @@ headline block
         min-height: 600px;
         overflow: hidden;
         background-position: center;
-        background-size: 1095px;
+        background-size: $max-content-width;
         background-repeat: no-repeat;
 
         &.half {
@@ -5394,5 +5383,5 @@ w i z a r d  e l e m e n t s
     }
 }
 /* * * * * * * * * * * * * * * * * *
-w i z a r d  e l e m e n t s  e n d 
+w i z a r d  e l e m e n t s  e n d
 * * * * * * * * * * * * * * * * * */
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 1f146cf..48cb571 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -21,7 +21,7 @@
     transform: translate(0, 0) !important; // We need !important due to the horizontal scroll handler
     position: fixed;
     top: 0;
-    z-index: 1000;
+    z-index: 1001;
 
 }
 
diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss
index 47d21cb..c5e0059 100644
--- a/resources/assets/stylesheets/scss/index.scss
+++ b/resources/assets/stylesheets/scss/index.scss
@@ -1,3 +1,7 @@
+body {
+    min-height: 100%;
+}
+
 #main-header {
     grid-column: 1 / 3;
     grid-row: 1 / 1;
@@ -117,6 +121,11 @@
 
 #index,
 #login {
+
+    #current-page-structure {
+        display: none;
+    }
+
     .messagebox {
         margin: 50px 0 -25px 50px;
         width: 418px;
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 27be3c4..46689d5 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -2,12 +2,13 @@
 
 $page-margin: 15px;
 
-$content-width: 400px;
-$content-margin: 12px;
-
 $sidebar-padding: 12px;
 $sidebar-width: 270px;
 
+$content-width: 400px;
+$content-margin: 12px;
+$max-content-width: 4 * $sidebar-width + $page-margin;
+
 $footer-height: 32px;
 
 $site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
@@ -15,6 +16,11 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
 
 $grid-gap: 0;
 
+html {
+    height: 100vh;
+    overflow-y: auto;
+}
+
 body {
     background-color: $white;
     display: grid;
@@ -22,6 +28,10 @@ body {
     grid-row-gap: $grid-gap;
     grid-template-columns: ($sidebar-width + $sidebar-padding) 1fr;
     grid-template-rows: auto 1fr $footer-height;
+
+    &::backdrop {
+        background: $white;
+    }
 }
 
 #main-header {
@@ -214,6 +224,7 @@ body {
     grid-row: 3 / 4;
     justify-content: space-between;
     line-height: $footer-height - 4px;
+    z-index: 1000;
 }
 
 #main-footer-info {
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 7610f96..a1e09d4 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -11,14 +11,13 @@ $sidebarIn: -15px;
 $sidebarOut: -330px;
 
 #responsive-toggle-desktop,
-#responsive-toggle-fullscreen {
+#responsive-toggle-fullscreen,
+#responsive-toggle-focusmode {
     display: none;
 }
 
-#responsive-toggle-fullscreen {
-    position: relative;
-    top: 4px;
-
+#responsive-toggle-fullscreen,
+#responsive-toggle-focusmode {
     img {
         cursor: pointer;
     }
@@ -35,6 +34,7 @@ $sidebarOut: -330px;
     }
 }
 
+
 #responsive-menu {
     font-size: $font-size-base;
     margin-top: 4px;
@@ -261,6 +261,10 @@ $sidebarOut: -330px;
     }
 }
 
+.cw-ribbon-button-zoom {
+    display: none;
+}
+
 .responsive-display,
 .fullscreen-mode body:not(.consuming_mode) {
 
@@ -272,7 +276,12 @@ $sidebarOut: -330px;
         flex: 0;
     }
 
-    #site-title,
+    #site-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     #quicksearch_item,
     #avatar-menu-container,
     #current-page-structure {
@@ -281,7 +290,7 @@ $sidebarOut: -330px;
 
     #header-links {
         > ul {
-            > li:not(#responsive-toggle-fullscreen):not(.helpbar-container) {
+            > li:not(#responsive-toggle-fullscreen):not(#responsive-toggle-focusmode):not(.helpbar-container) {
                 display: none;
             }
 
@@ -365,6 +374,7 @@ $sidebarOut: -330px;
     }
 
     #responsive-contentbar {
+        justify-content: stretch;
         margin-bottom: 15px;
         padding-bottom: 0.5em;
         padding-left: 5px;
@@ -395,7 +405,7 @@ $sidebarOut: -330px;
 
         .contentbar-wrapper-left {
             flex: 1;
-            max-width: unset;
+            min-width: 0;
 
             & > .contentbar-icon {
                 margin-right: 15px;
@@ -403,12 +413,20 @@ $sidebarOut: -330px;
 
             .contentbar-breadcrumb {
                 font-size: $font-size-large;
-                width: calc(100% - 75px);
 
                 > img {
                     margin-left: 15px;
                     width: 24px;
                 }
+
+                > span {
+                    display: inline;
+                    flex-shrink: 10000;
+                    min-width: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
             }
         }
 
@@ -508,27 +526,49 @@ $sidebarOut: -330px;
             max-height: unset;
             opacity: 1;
             overflow: unset;
-        }
-
-        #responsive-menu {
-            max-width: calc(100% - 100px);
-            min-width: calc(100% - 100px);
-            width: calc(100% - 100px);
+            width: calc(100% - 20px);
         }
 
         #main-header {
             flex-basis: 100%;
         }
 
+        #header-links {
+            margin-left: auto;
+
+            ul {
+                li {
+                    &:not(#responsive-toggle-fullscreen):not(#responsive-toggle-focusmode) {
+                        padding: 0;
+                    }
+
+                    .helpbar-container {
+                        right: 0;
+                    }
+                }
+            }
+        }
+
+        #responsive-toggle-fullscreen,
+        #responsive-toggle-focusmode {
+            margin-top: 4px;
+            padding: 4px 0 0;
+        }
+
         #responsive-toggle-fullscreen {
             display: block;
-            right: 30px;
         }
 
         .contentbar:not(#responsive-contentbar) {
             display: none;
         }
 
+        #responsive-contentbar-container {
+            position: fixed;
+            width: 100vw;
+            z-index: 1000;
+        }
+
         #responsive-contentbar {
             padding-left: 15px;
 
@@ -544,14 +584,17 @@ $sidebarOut: -330px;
 
         #content-wrapper {
             flex: 1;
-            height: 100%;
+            margin-top: 75px;
+            min-height: calc(100vh - 150px);
         }
     }
 }
 
 .consuming_mode {
     display: unset;
+    overflow-y: auto;
 
+    #skip_link_navigation,
     #main-header,
     #sidebar,
     #main-footer,
@@ -559,13 +602,29 @@ $sidebarOut: -330px;
         display: none;
     }
 
-    #content {
-        height: 100vh;
-        position: fixed;
-        width: 100vw;
+    #content-wrapper {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: $max-content-width;
+        min-height: 100vh;
+        padding-top: 10px;
+    }
 
+    #content {
         .contentbar {
-            margin-right: 30px;
+            margin: 10px;
+            padding-left: 20px;
+            padding-right: 20px;
+            width: calc(100% - 60px);
+
+            .action-menu {
+                display: none;
+            }
+        }
+
+        .cw-companion-box-wrapper {
+            padding-top: 120px;
         }
     }
 
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index e44196c..a0118e8 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -4,11 +4,13 @@
     display: inline-block;
     margin-top: 15px;
     padding: 0 5px 7px 15px;
+    position: sticky;
     text-align: left;
+    top: 50px;
     z-index: 2;
 
     .sidebar-image {
-        width: $sidebar-width;
+        width: calc($sidebar-width - 2px);
         height: 60px;
         max-height: 60px;
 
@@ -66,7 +68,7 @@
         background: $white;
         border: 1px solid $content-color-40;
         margin: 15px 0 0;
-        width: $sidebar-width - 2px;
+        width: $sidebar-width - 5px;
     }
     .sidebar-widget-header {
         @include clearfix();
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index 97eb904..1cb3da3 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -19,9 +19,6 @@
 
 /* --- Standardvorgaben ----------------------------------------------------- */
 //TODO: the Body-Background color should be similar to A:link.toolbar and A:visited.toolbar for best effect!!
-html, body {
-    height: 100%;
-}
 body {
     background-color: #d8dadc;
     background-repeat: repeat-x;
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 3e476e6..fb38beb 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -7,6 +7,7 @@
 @import "scss/variables";
 @import "scss/breakpoints";
 @import "scss/visibility";
+@import "scss/layouts";
 
 @import "scss/actionmenu";
 @import "scss/activityfeed";
@@ -46,7 +47,6 @@
 @import "scss/forum";
 @import "scss/gradebook";
 @import "scss/grid";
-@import "scss/layouts";
 @import "scss/header";
 @import "scss/headings";
 @import "scss/helpbar";
diff --git a/resources/vue/components/courseware/CoursewareRibbon.vue b/resources/vue/components/courseware/CoursewareRibbon.vue
index 7450bf6..ddf5c9b 100644
--- a/resources/vue/components/courseware/CoursewareRibbon.vue
+++ b/resources/vue/components/courseware/CoursewareRibbon.vue
@@ -21,15 +21,6 @@
                     @click.prevent="activeToolbar"
                 >
                 </button>
-                <button
-                    v-if="showModeSwitchButton"
-                    ref="consumeModeSwitch"
-                    class="cw-ribbon-button"
-                    :class="[consumeMode ? 'cw-ribbon-button-zoom-out' : 'cw-ribbon-button-zoom']"
-                    :title="consumeMode ? textRibbon.fullscreen_off : textRibbon.fullscreen_on"
-                     @click="toggleConsumeMode"
-                >
-                </button>
                 <slot name="menu" />
             </div>
             <div v-if="consumeMode" class="cw-ribbon-consume-bottom"></div>
@@ -112,13 +103,15 @@ export default {
 
         }),
         toggleConsumeMode() {
-            STUDIP.Vue.emit('toggle-focus-mode', !this.consumeMode);
+            STUDIP.eventBus.emit('toggle-focus-mode', !this.consumeMode);
             if (!this.consumeMode) {
+                document.body.classList.add('consuming_mode');
                 this.coursewareConsumeMode(true);
                 this.coursewareSelectedToolbarItem('contents');
                 this.coursewareViewMode('read');
             } else {
                 this.coursewareConsumeMode(false);
+                document.body.classList.remove('consuming_mode');
             }
         },
         activeToolbar() {
@@ -138,8 +131,17 @@ export default {
     mounted() {
         window.addEventListener('scroll', this.handleScroll);
         if (this.isContentBar) {
-            STUDIP.Vue.emit('courseware-contentbar-mounted', this);
+            STUDIP.eventBus.emit('courseware-contentbar-mounted', this);
         }
+
+        this.globalOn('switch-focus-mode', (state) => {
+            if (state !== this.consumeMode) {
+                this.toggleConsumeMode();
+            }
+        });
+    },
+    beforeDestroy() {
+        STUDIP.eventBus.off('switch-focus-mode');
     },
     watch: {
         toolsActive(newState, oldState) {
@@ -157,7 +159,6 @@ export default {
             }
         },
         consumeMode(newState) {
-            this.$refs.consumeModeSwitch?.focus();
             if (newState) {
                 document.body.classList.add('consuming_mode');
             } else {
diff --git a/resources/vue/components/courseware/CoursewareStructuralElement.vue b/resources/vue/components/courseware/CoursewareStructuralElement.vue
index 5332226..e396bcf 100644
--- a/resources/vue/components/courseware/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/CoursewareStructuralElement.vue
@@ -63,10 +63,11 @@
                                 @showSuggest="menuAction('showSuggest')"
                                 @linkElement="menuAction('linkElement')"
                                 @removeLock="menuAction('removeLock')"
+                                @activateFullscreen="menuAction('activateFullscreen')"
                             />
                         </template>
                     </courseware-ribbon>
-                    
+
                     <div v-if="structuralElementLoaded && !isLink" class="cw-companion-box-wrapper">
                         <courseware-companion-box
                             v-if="!canVisit"
@@ -1033,6 +1034,7 @@ export default {
                 { id: 4, label: this.$gettext('Informationen anzeigen'), icon: 'info', emit: 'showInfo' },
                 { id: 5, label: this.$gettext('Lesezeichen setzen'), icon: 'star', emit: 'setBookmark' },
                 { id: 6, label: this.$gettext('Lerninhalt für OER Campus vorschlagen'), icon: 'oer-campus', emit: 'showSuggest' },
+                { id: 7, label: this.$gettext('Als Vollbild anzeigen'), icon: 'screen-full', emit: 'activateFullscreen'},
 
             ];
             if (this.canEdit) {
@@ -1319,6 +1321,9 @@ export default {
                 case 'linkElement':
                     this.showElementPublicLinkDialog(true);
                     break;
+                case 'activateFullscreen':
+                    STUDIP.Fullscreen.activate();
+                    break;
             }
         },
         async closeEditDialog() {
@@ -1541,7 +1546,7 @@ export default {
                 this.companionSuccess({
                     info:
                         this.$gettextInterpolate(
-                            this.$gettext('Die Seite %{ pageTitle } wurde erfolgreich angelegt.'), 
+                            this.$gettext('Die Seite %{ pageTitle } wurde erfolgreich angelegt.'),
                             { pageTitle: newElement.attributes.title }
                         )
                 });
@@ -1639,7 +1644,7 @@ export default {
                         this.keyboardSelected = containerId;
                         const container = this.containerById({id: containerId});
                         const index = this.containerList.findIndex(c => c.id === container.id);
-                        this.assistiveLive = 
+                        this.assistiveLive =
                             this.$gettextInterpolate(
                                 this.$gettext('%{containerTitle} Abschnitt ausgewählt. Aktuelle Position in der Liste: %{pos} von %{listLength}. Drücken Sie die Aufwärts- und Abwärtspfeiltasten, um die Position zu ändern, die Leertaste zum Ablegen, die Escape-Taste zum Abbrechen.')
                                 , {containerTitle: container.attributes.title, pos: index + 1, listLength: this.containerList.length}
@@ -1669,7 +1674,7 @@ export default {
                 const container = this.containerById({id: containerId});
                 const newPos = currentIndex - 1;
                 this.containerList.splice(newPos, 0, this.containerList.splice(currentIndex, 1)[0]);
-                this.assistiveLive = 
+                this.assistiveLive =
                     this.$gettextInterpolate(
                         this.$gettext('%{containerTitle} Abschnitt. Aktuelle Position in der Liste: %{pos} von %{listLength}.')
                         , {containerTitle: container.attributes.title, pos: newPos + 1, listLength: this.containerList.length}
@@ -1682,7 +1687,7 @@ export default {
                 const container = this.containerById({id: containerId});
                 const newPos = currentIndex + 1;
                 this.containerList.splice(newPos, 0, this.containerList.splice(currentIndex, 1)[0]);
-                this.assistiveLive = 
+                this.assistiveLive =
                     this.$gettextInterpolate(
                         this.$gettext('%{containerTitle} Abschnitt. Aktuelle Position in der Liste: %{pos} von %{listLength}.')
                         , {containerTitle: container.attributes.title, pos: newPos + 1, listLength: this.containerList.length}
@@ -1692,7 +1697,7 @@ export default {
         abortKeyboardSorting(containerId) {
             const container = this.containerById({id: containerId});
             this.keyboardSelected = null;
-            this.assistiveLive = 
+            this.assistiveLive =
                 this.$gettextInterpolate(
                     this.$gettext('%{containerTitle} Abschnitt, Neuordnung abgebrochen.')
                     , {containerTitle: container.attributes.title}
@@ -1703,7 +1708,7 @@ export default {
             const container = this.containerById({id: containerId});
             const currentIndex = this.containerList.findIndex(container => container.id === containerId);
             this.keyboardSelected = null;
-            this.assistiveLive = 
+            this.assistiveLive =
                 this.$gettextInterpolate(
                     this.$gettext('%{containerTitle} Abschnitt, abgelegt. Entgültige Position in der Liste: %{pos} von %{listLength}.')
                     , {containerTitle: container.attributes.title, pos: currentIndex + 1, listLength: this.containerList.length}
diff --git a/resources/vue/components/responsive/NavigationItem.vue b/resources/vue/components/responsive/NavigationItem.vue
index 0bfd6d2..c227771 100644
--- a/resources/vue/components/responsive/NavigationItem.vue
+++ b/resources/vue/components/responsive/NavigationItem.vue
@@ -2,7 +2,8 @@
     <li v-if="item.visible" class="navigation-item" :class="{'navigation-item-active': active}">
         <template v-if="hasChildren()">
             <div class="navigation-title">
-                <a :href="item.url" :title="navigateToText(item.title)" tabindex="0">
+                <a :href="item.url" :title="navigateToText(item.title)"
+                   :aria-label="navigateToText(item.title)" tabindex="0">
                     <span class="navigation-icon">
                         <studip-icon v-if="isCourse" shape="seminar" role="info_alt" size="24" alt=""></studip-icon>
                         <img v-if="item.icon" :src="iconUrl" width="24" alt="">
@@ -12,14 +13,16 @@
                     </span>
                 </a>
             </div>
-            <button class="styleless navigation-in" tabindex="0"
+            <button class="styleless navigation-in"
                     :title="openNavigationText(item.title)"
+                    :aria-label="openNavigationText(item.title)"
                     @click="moveTo(item.path)" @keydown.prevent.enter="moveTo(item.path)" @keydown.prevent.space="moveTo(item.path)">
                 <studip-icon shape="arr_1right" role="info_alt" size="20" alt=""></studip-icon>
             </button>
         </template>
         <div v-else class="navigation-title">
-            <a :href="item.url" tabindex="0" :title="navigateToText(item.title)">
+            <a :href="item.url" tabindex="0" :title="navigateToText(item.title)"
+               :aria-label="navigateToText(item.title)">
                 <studip-icon v-if="isCourse" shape="seminar" role="info_alt" size="24" alt=""></studip-icon>
                 <img v-if="item.icon" :src="iconUrl" width="24" alt="">
                 {{ item.title }}
@@ -61,7 +64,7 @@ export default {
             return STUDIP.URLHelper.getURL(url);
         },
         moveTo(path) {
-            STUDIP.Vue.emit('responsive-navigation-move-to', path);
+            STUDIP.eventBus.emit('responsive-navigation-move-to', path);
         },
         hasChildren() {
             return this.item.children && Object.keys(this.item.children).length > 0;
@@ -74,7 +77,7 @@ export default {
         },
         openNavigationText(itemTitle) {
             return this.$gettextInterpolate(
-                this.$gettext('Öffne Navigation %{ title }'),
+                this.$gettext('Unternavigation zu %{ title } öffnen'),
                 { title: itemTitle }
             );
         }
diff --git a/resources/vue/components/responsive/ResponsiveContentBar.vue b/resources/vue/components/responsive/ResponsiveContentBar.vue
index efcb160..6899c3b 100644
--- a/resources/vue/components/responsive/ResponsiveContentBar.vue
+++ b/resources/vue/components/responsive/ResponsiveContentBar.vue
@@ -14,7 +14,9 @@
                 </div>
                 <div class="contentbar-wrapper-left">
                     <studip-icon :shape="icon" size="24" role="info" class="text-bottom contentbar-icon"></studip-icon>
-                    <nav class="contentbar-breadcrumb" ref="breadcrumbs">{{ title }}</nav>
+                    <nav class="contentbar-breadcrumb" ref="breadcrumbs">
+                        <span>{{ title }}</span>
+                    </nav>
                 </div>
                 <div class="contentbar-wrapper-right" ref="wrapperRight"></div>
             </div>
@@ -66,27 +68,44 @@ export default {
             const sidebar = document.getElementById('sidebar');
             const content = document.getElementById('content-wrapper');
             const pageTitle = document.getElementById('page-title-container');
-            const html = document.querySelector('html');
             if (this.sidebarOpen) {
                 sidebar.classList.add('responsive-hide');
                 sidebar.classList.remove('responsive-show');
 
-                if (html.classList.contains('responsive-display') && !html.classList.contains('fullscreen-mode')) {
+                if (document.documentElement.classList.contains('responsive-display')
+                        && !document.documentElement.classList.contains('fullscreen-mode')) {
                     content.style.display = null;
                     pageTitle.style.display = null;
                 }
 
+                if (!document.documentElement.classList.contains('responsive-display')) {
+                    document.body.style.display = 'flex';
+                }
+
+                // Hide sidebar after slide-out animation has ended so that it isn't focusable anymore.
+                setTimeout(() => {
+                    sidebar.style.display = 'none';
+                }, 301);
+
                 this.sidebarOpen = false;
             } else {
+                sidebar.style.display = '';
+
                 sidebar.classList.add('responsive-show');
                 sidebar.classList.remove('responsive-hide');
-                if (html.classList.contains('responsive-display') && !html.classList.contains('fullscreen-mode')) {
+                if (document.documentElement.classList.contains('responsive-display')
+                        && !document.documentElement.classList.contains('fullscreen-mode')) {
                     // Set a timeout here so that the content "disappears" after slide-in aninmation is finished.
                     setTimeout(() => {
                         content.style.display = 'none';
                         pageTitle.style.display = 'none';
                     }, 300);
                 }
+
+                if (!document.documentElement.classList.contains('responsive-display')) {
+                    document.body.style.display = 'grid';
+                }
+
                 this.sidebarOpen = true;
             }
 
@@ -155,6 +174,8 @@ export default {
         this.$nextTick(() => {
             const realContentbar = document.querySelector('.contentbar:not(#responsive-contentbar)');
             if (realContentbar) {
+                STUDIP.eventBus.emit('has-contentbar', true);
+
                 this.realContentbar = realContentbar;
                 this.realContentbarSource = '#content';
                 this.realContentbarIconContainer = '.contentbar-nav';
@@ -165,6 +186,8 @@ export default {
 
                 const cwContentbar = document.querySelector('#contentbar header');
                 if (cwContentbar) {
+                    STUDIP.eventBus.emit('has-contentbar', true);
+
                     this.realContentbar = cwContentbar;
                     this.realContentbarSource = '.cw-structural-element-content > div';
                     this.realContentbarIconContainer = '.cw-ribbon-nav';
@@ -180,7 +203,9 @@ export default {
         })
 
         // Use courseware contentbar instead of this Vue component.
-        STUDIP.Vue.on('courseware-contentbar-mounted', element => {
+        this.globalOn('courseware-contentbar-mounted', element => {
+            STUDIP.eventBus.emit('has-contentbar', true);
+
             this.realContentbar = element.$el.querySelector('header');
             this.realContentbarSource = '.cw-structural-element-content > div';
             this.realContentbarIconContainer = '.cw-ribbon-nav';
@@ -192,18 +217,21 @@ export default {
             });
         })
 
-        STUDIP.Vue.on('toggle-focus-mode', (state) => {
+        this.globalOn('toggle-focus-mode', (state) => {
             const html = document.querySelector('html');
             if (html.classList.contains('responsive-display') || html.classList.contains('fullscreen-mode')) {
                 this.adjustExistingContentbar(!state);
             }
-        })
+        });
 
     },
     beforeDestroy() {
         if (this.realContentbar) {
             this.adjustExistingContentbar(false);
         }
+
+        STUDIP.eventBus.off('toggle-focus-mode');
+        STUDIP.eventBus.off('courseware-contentbar-mounted');
     }
 }
 </script>
diff --git a/resources/vue/components/responsive/ResponsiveNavigation.vue b/resources/vue/components/responsive/ResponsiveNavigation.vue
index 0942021..3f4d163 100644
--- a/resources/vue/components/responsive/ResponsiveNavigation.vue
+++ b/resources/vue/components/responsive/ResponsiveNavigation.vue
@@ -3,8 +3,9 @@
         <div class="responsive-navigation-header">
             <transition name="slide" appear>
                 <button id="responsive-navigation-button" class="styleless"
-                        :title="showMenu ? $gettext('Navigation schließen') : $gettext('Navigation öffnen')"
-                        aria-owns="responsive-navigation-items"
+                        :aria-label="showMenu
+                            ? $gettext('Navigation schließen')
+                            : $gettext('Navigation öffnen')"
                         @click.prevent="toggleMenu"
                         @keydown.prevent.space="toggleMenu"
                         @keydown.prevent.enter="toggleMenu">
@@ -14,8 +15,6 @@
                     </studip-icon>
                 </button>
             </transition>
-            <toggle-fullscreen v-if="!isResponsive && !isFocusMode && me.username != 'nobody'"
-                               :is-fullscreen="isFullscreen"></toggle-fullscreen>
         </div>
         <transition name="appear" appear>
             <nav v-show="showMenu" id="responsive-navigation-items" class="responsive" ref="navigation"
@@ -26,7 +25,8 @@
                             <div class="profile-pic">
                                 <img :src="me.avatar"
                                      @click.prevent="toggleAvatarMenu"
-                                     :title="$gettext('Profilnavigation öffnen')">
+                                     :title="$gettext('Profilnavigation öffnen')"
+                                     :aria-label="$gettext('Profilnavigation öffnen')">
                             </div>
                             <div class="profile-data">
                                 <div>{{ me.fullname }}</div>
@@ -34,11 +34,12 @@
                             </div>
                         </section>
                         <section class="open-avatarmenu">
-                            <button class="styleless" tabindex="0" ref="openAvatarmenu"
+                            <button class="styleless" ref="openAvatarmenu"
                                     @keydown.prevent.enter="toggleAvatarMenu"
                                     @keydown.prevent.space="toggleAvatarMenu"
                                     @click.prevent="toggleAvatarMenu"
-                                    :title="$gettext('Profilnavigation öffnen')">
+                                    :title="$gettext('Profilnavigation öffnen')"
+                                    :aria-label="$gettext('Profilnavigation öffnen')">
                                 <studip-icon shape="arr_1right" role="info_alt" :size="iconSize" alt=""></studip-icon>
                             </button>
                         </section>
@@ -48,10 +49,12 @@
                                     :click-outside-deactivates="true">
                             <div>
                                 <div class="close-avatarmenu">
-                                    <button class="styleless" ref="closeAvatarmenu"  tabindex="0"
+                                    <button class="styleless" ref="closeAvatarmenu"
                                             @keydown.prevent.enter="toggleAvatarMenu"
                                             @keydown.prevent.space="toggleAvatarMenu"
-                                            @click="toggleAvatarMenu">
+                                            @click="toggleAvatarMenu"
+                                            :title="$gettext('Profilnavigation schließen')"
+                                            :aria-label="$gettext('Profilnavigation schließen')">
                                         <studip-icon shape="arr_1left" role="info_alt" :size="iconSize"></studip-icon>
                                     </button>
                                 </div>
@@ -65,9 +68,10 @@
                 </header>
                 <ul class="main-navigation">
                     <li v-if="currentParent != null" class="navigation-item navigation-up">
-                        <div class="navigation-title" :title="$gettext('Zum Start')" @click="moveTo('/')">
+                        <div class="navigation-title" :title="$gettext('Zum Start')"
+                             :aria-label="$gettext('Zum Start')">
                             <button class="styleless" @click="moveTo('/')" @keydown.prevent.enter="moveTo('/')"
-                                    @keydown.prevent.space="moveTo('/')" tabindex="0">
+                                    @keydown.prevent.space="moveTo('/')">
                                 <div class="navigation-icon">
                                     <studip-icon shape="arr_2up" role="info_alt" :size="iconSize - 4"></studip-icon>
                                 </div>
@@ -79,11 +83,12 @@
                     </li>
                     <li v-if="currentParent != null" class="navigation-item navigation-current">
                         <div class="navigation-title">
-                            <button class="styleless" tabindex="0"
+                            <button class="styleless"
                                     @click="moveTo(currentParent.path)"
                                     @keydown.prevent.enter="moveTo(currentParent.path)"
                                     @keydown.prevent.space="moveTo(currentParent.path)"
-                                    :title="$gettext('Eine Ebene höher')">
+                                    :title="$gettext('Eine Ebene höher')"
+                                    :aria-label="$gettext('Eine Ebene höher')">
                                 <div class="navigation-icon">
                                     <studip-icon shape="arr_1left" role="info_alt" :size="iconSize - 4"></studip-icon>
                                 </div>
@@ -99,9 +104,9 @@
             </nav>
         </transition>
         <responsive-content-bar v-if="(isResponsive || isFullscreen) && !isFocusMode"
-                                :has-sidebar="hasSidebar" :title="initialTitle"
+                                :has-sidebar="hasSidebar" :title="contentbarTitle" :aria-label="contentbarTitle"
                                 ref="contentbar"></responsive-content-bar>
-        <responsive-skip-links v-if="isFullscreen && hasSkiplinks" :links="skipLinks"></responsive-skip-links>
+        <responsive-skip-links v-if="(isResponsive || isFullscreen) && hasSkiplinks" :links="skipLinks"></responsive-skip-links>
     </div>
 </template>
 
@@ -109,13 +114,12 @@
 import NavigationItem from './NavigationItem.vue';
 import StudipIcon from '../StudipIcon.vue';
 import ResponsiveContentBar from './ResponsiveContentBar.vue';
-import ToggleFullscreen from './ToggleFullscreen.vue';
 import ResponsiveSkipLinks from './ResponsiveSkipLinks.vue';
 import { FocusTrap } from 'focus-trap-vue';
 
 export default {
     name: 'ResponsiveNavigation',
-    components: { ResponsiveContentBar, StudipIcon, NavigationItem, ToggleFullscreen, ResponsiveSkipLinks, FocusTrap },
+    components: { ResponsiveContentBar, StudipIcon, NavigationItem, ResponsiveSkipLinks, FocusTrap },
     props: {
         me: {
             type: Object,
@@ -154,7 +158,9 @@ export default {
             avatarNavigation: studipNavigation.avatar,
             avatarMenuOpen: false,
             observer: null,
-            hasSkiplinks: document.querySelector('#skiplink_list') !== null
+            hasSkiplinks: document.querySelector('#skiplink_list') !== null,
+            hasContentbar: false,
+            contentbarTitle: ''
         }
     },
     computed: {
@@ -183,10 +189,6 @@ export default {
             ];
 
             if (this.isFullscreen) {
-                links.push(
-                    { url: '#toggle-fullscreen', label: this.$gettext('Vollbildmodus verlassen') },
-                );
-
                 if (this.hasSidebar) {
                     let name = '';
                     if (document.getElementById('sidebar').classList.contains('responsive-show')) {
@@ -272,6 +274,10 @@ export default {
 
             this.showMenu = !this.showMenu;
 
+            if (!this.showMenu && this.avatarMenuOpen) {
+                this.toggleAvatarMenu();
+            }
+
             this.$nextTick(() => {
                 if (this.showMenu && !this.headerMagic) {
                     this.currentNavigation = this.initialNavigation;
@@ -286,22 +292,41 @@ export default {
             })
         },
         /**
-         * Turn fullscreen mode on or off
+         * Turn compact navigation mode on or off
          * @param state
          */
-        setFullscreen(state) {
-            const html = document.querySelector('html');
+        setCompactNavigation(state) {
             const sidebar = document.getElementById('sidebar');
             const cache = STUDIP.Cache.getInstance('responsive.');
 
             if (state) {
-                html.classList.add('fullscreen-mode');
+                if (this.hasContentbar) {
+                    document.getElementById('responsive-toggle-focusmode').style.display = 'block';
+                }
+                document.documentElement.classList.add('fullscreen-mode');
                 cache.set('fullscreen-mode', true);
+
+                const siteTitle = document.getElementById('site-title');
+                siteTitle.dataset.originalTitle = siteTitle.textContent.trim();
+                siteTitle.textContent = this.initialTitle;
+
+                sidebar.style.display = 'none';
+
             } else {
-                html.classList.remove('fullscreen-mode');
-                sidebar.classList.remove('responsive-show', 'fullscreen-mode');
+                document.documentElement.classList.remove('fullscreen-mode');
+                sidebar?.classList.remove('responsive-show', 'fullscreen-mode');
                 this.showMenu = false;
                 cache.remove('fullscreen-mode');
+                document.getElementById('responsive-toggle-focusmode').style.display = 'none';
+                document.body.style.display = null;
+
+                const siteTitle = document.getElementById('site-title');
+                if (siteTitle.dataset.originalTitle) {
+                    siteTitle.textContent = siteTitle.dataset.originalTitle.trim();
+                }
+
+                sidebar.style.display = '';
+
             }
 
             this.isFullscreen = state;
@@ -321,10 +346,10 @@ export default {
             this.avatarMenuOpen = false;
             this.currentNavigation = this.findItem(path ? path : '/', this.studipNavigation);
             this.$nextTick(() => {
-                const current = document.querySelector('.navigation-current') ?? document.querySelector('.navigation-item');
-                if (current) {
-                    current.focus();
-                }
+                const current = document.querySelector('.navigation-current')
+                    ? document.querySelector('.navigation-current .navigation-title button')
+                    : document.querySelector('.navigation-item .navigation-title a');
+                current.focus();
             })
         },
         /**
@@ -364,6 +389,13 @@ export default {
          */
         toggleAvatarMenu() {
             this.avatarMenuOpen = !this.avatarMenuOpen;
+
+            // Focus first menu entry.
+            if (this.avatarMenuOpen) {
+                this.$nextTick(() => {
+                    document.querySelector('.avatar-navigation .navigation-item .navigation-title a').focus();
+                });
+            }
         },
         onChangeViewMode(tagName, classes) {
             const classList = classes.split(' ');
@@ -373,19 +405,19 @@ export default {
                 case 'BODY':
                     if (classList.includes('consuming_mode')) {
                         this.isFocusMode = true;
-                        STUDIP.Vue.emit('consuming-mode-enabled');
-                        this.setFullscreen(false);
+                        STUDIP.eventBus.emit('consuming-mode-enabled');
+                        this.setCompactNavigation(false);
                     } else {
                         this.isFocusMode = false;
-                        STUDIP.Vue.emit('consuming-mode-disabled');
+                        STUDIP.eventBus.emit('consuming-mode-disabled');
                     }
                     if (classList.includes('fixed')) {
                         this.headerMagic = true;
-                        STUDIP.Vue.emit('header-magic-enabled');
+                        STUDIP.eventBus.emit('header-magic-enabled');
                     } else {
                         this.headerMagic = false;
                         this.showMenu = false;
-                        STUDIP.Vue.emit('header-magic-disabled');
+                        STUDIP.eventBus.emit('header-magic-disabled');
                     }
                     break;
                 // Watch for "responsive-display" and "fullscreen-mode" class changes
@@ -394,16 +426,16 @@ export default {
                         this.isResponsive = true;
 
                         if (classList.includes('fullscreen-mode')) {
-                            this.setFullscreen(false);
+                            this.setCompactNavigation(false);
                         }
 
-                        STUDIP.Vue.emit('responsive-display-enabled');
+                        STUDIP.eventBus.emit('responsive-display-enabled');
                         this.$nextTick(() => {
                             this.moveHelpbar();
                         })
                     } else {
                         this.isResponsive = false;
-                        STUDIP.Vue.emit('responsive-display-disabled');
+                        STUDIP.eventBus.emit('responsive-display-disabled');
                         this.$nextTick(() => {
                             this.moveHelpbar();
                         })
@@ -412,10 +444,12 @@ export default {
                     if (classList.includes('fullscreen-mode')) {
                         this.isFullscreen = true;
 
-                        STUDIP.Vue.emit('fullscreen-enabled');
+                        STUDIP.eventBus.emit('fullscreen-enabled');
+                        document.getElementById('sidebar').style.display = 'none';
                     } else {
                         this.isFullscreen = false;
-                        STUDIP.Vue.emit('fullscreen-disabled');
+                        STUDIP.eventBus.emit('fullscreen-disabled');
+                        document.getElementById('sidebar').style.display = '';
                     }
                     break;
                 case 'HEADER':
@@ -437,7 +471,7 @@ export default {
             return navigation.navigation;
         },
         captureOutsideClick(target) {
-            if (target !== null) {
+            if (this.showMenu && target !== null) {
                 if (!this.$refs.container.contains(target)) {
                     this.toggleMenu();
                 }
@@ -458,26 +492,27 @@ export default {
     },
     mounted() {
         const cache = STUDIP.Cache.getInstance('responsive.');
-        const html = document.querySelector('html');
-        const body = document.querySelector('body');
         const fullscreen = cache.get('fullscreen-mode') ?? false;
-        const fullscreenDocument = html.classList.contains('fullscreen-mode');
-
-        this.isFullscreen = fullscreenDocument || fullscreen;
-        if (this.isFullscreen && !fullscreenDocument) {
-            html.classList.add('fullscreen-mode');
-        }
+        const fullscreenDocument = document.documentElement.classList.contains('fullscreen-mode');
 
-        if (html.classList.contains('responsive-display')) {
+        if (document.documentElement.classList.contains('responsive-display')) {
             this.isResponsive = true;
         }
 
+        this.isFullscreen = !this.isResponsive && (fullscreenDocument || fullscreen);
+        if (this.isFullscreen && !fullscreenDocument) {
+            this.setCompactNavigation(true);
+        }
         // Re-structure some DOM elements
         this.$nextTick(() => {
             if (this.isResponsive || (this.isFullscreen && !this.isFocusMode)) {
                 this.moveHelpbar();
-            }
 
+                this.contentbarTitle = document.querySelector('.sidebar-image .sidebar-title').textContent;
+                const siteTitle = document.getElementById('site-title');
+                siteTitle.dataset.originalTitle = siteTitle.textContent.trim();
+                siteTitle.textContent = this.initialTitle;
+            }
         });
 
         // Pressing escape should close an open navigation.
@@ -490,13 +525,13 @@ export default {
         this.initialNavigation = this.currentNavigation;
         this.initialTitle = this.initialNavigation.title;
 
-        STUDIP.Vue.on('responsive-navigation-move-to', path => {
+        this.globalOn('responsive-navigation-move-to', path => {
             this.moveTo(path);
         });
 
         // Listen to changes in fullscreen setting
-        STUDIP.Vue.on('toggle-fullscreen', value => {
-            this.setFullscreen(value);
+        this.globalOn('toggle-compact-navigation', value => {
+            this.setCompactNavigation(value);
         });
 
         /*
@@ -511,21 +546,31 @@ export default {
         });
 
         // Observe <html> for class changes.
-        this.observer.observe(html, {
+        this.observer.observe(document.documentElement, {
             attributes: true,
             attributeOldValue : false,
             attributeFilter: ['class']
         });
 
         // Observe <body> for class changes.
-        this.observer.observe(body, {
+        this.observer.observe(document.body, {
             attributes: true,
             attributeOldValue : false,
             attributeFilter: ['class']
         });
 
+        this.globalOn('has-contentbar', value => {
+            this.hasContentbar = value;
+            if (value && this.isFullscreen) {
+                document.getElementById('responsive-toggle-focusmode').style.display = 'block';
+            }
+        });
+
         // Observe courseware contentbar for consuming mode.
-        STUDIP.Vue.on('courseware-ribbon-mounted', element => {
+        this.globalOn('courseware-contentbar-mounted', element => {
+            if (this.isFullscreen) {
+                document.getElementById('responsive-toggle-focusmode').style.display = 'block';
+            }
             this.observer.observe(element.$el.querySelector('header.cw-ribbon'), {
                 attributes: true,
                 attributeOldValue : false,
@@ -536,6 +581,10 @@ export default {
     beforeDestroy() {
         this.observer.disconnect();
         document.getElementById('header-links').style.display = null;
+        STUDIP.eventBus.off('responsive-navigation-move-to');
+        STUDIP.eventBus.off('toggle-compact-navigation');
+        STUDIP.eventBus.off('has-contentbar');
+        STUDIP.eventBus.off('courseware-contentbar-mounted');
     }
 }
 </script>
diff --git a/resources/vue/components/responsive/ResponsiveSkipLinks.vue b/resources/vue/components/responsive/ResponsiveSkipLinks.vue
index 52f0bfc..7668191 100644
--- a/resources/vue/components/responsive/ResponsiveSkipLinks.vue
+++ b/resources/vue/components/responsive/ResponsiveSkipLinks.vue
@@ -37,7 +37,7 @@ export default {
             allButtons.forEach(button => {
                 document.getElementById('skiplink_list').appendChild(button.parentNode);
             });
-        })
+        });
     },
     beforeDestroy() {
         const buttons = document.querySelectorAll('button.skiplink:not([data-in-fullscreen="1"])');
diff --git a/resources/vue/components/responsive/ToggleFullscreen.vue b/resources/vue/components/responsive/ToggleFullscreen.vue
deleted file mode 100644
index 77ce8fb..0000000
--- a/resources/vue/components/responsive/ToggleFullscreen.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-    <div>
-        <MountingPortal mount-to="#responsive-toggle-fullscreen" append>
-            <portal-target name="toggle-fullscreen-off"></portal-target>
-        </MountingPortal>
-        <MountingPortal mount-to="#non-responsive-toggle-fullscreen" append>
-            <portal-target name="toggle-fullscreen-on"></portal-target>
-        </MountingPortal>
-        <portal :to="isFullscreen ? 'toggle-fullscreen-off' : 'toggle-fullscreen-on'">
-            <button class="styleless" id="toggle-fullscreen"
-                    :title="isFullscreen ? $gettext('Vollbildmodus verlassen') : $gettext('Vollbildmodus aktivieren')"
-                    @click.prevent="toggleFullscreen"
-                    @keydown.prevent.enter="toggleFullscreen"
-                    @keydown.prevent.space="toggleFullscreen">
-                <studip-icon :shape="isFullscreen ? 'fullscreen-off' : 'fullscreen-on4'"
-                             :role="isFullscreen ? 'info_alt' : 'clickable'" :size="iconSize" alt=""></studip-icon>
-            </button>
-        </portal>
-    </div>
-</template>
-
-<script>
-import StudipIcon from '../StudipIcon.vue';
-
-export default {
-    name: 'ToggleFullscreen',
-    components: { StudipIcon },
-    props: {
-        isFullscreen: {
-            type: Boolean,
-            default: false
-        },
-        iconSize: {
-            type: Number,
-            default: 24
-        }
-    },
-    methods: {
-        toggleFullscreen() {
-            STUDIP.Vue.emit('toggle-fullscreen', !this.isFullscreen);
-        }
-    },
-    created() {
-        window.addEventListener('keydown', e => {
-            if (e.key === 'Escape' && this.isFullscreen) {
-                this.toggleFullscreen();
-            }
-        });
-    }
-}
-</script>
diff --git a/templates/contentbar/contentbar.php b/templates/contentbar/contentbar.php
index 9183516..a6e51a3 100644
--- a/templates/contentbar/contentbar.php
+++ b/templates/contentbar/contentbar.php
@@ -23,11 +23,6 @@
                 </div>
             <? endif ?>
 
-            <div class="contentbar-button-wrapper contentbar-consuming-mode-wrapper">
-                <button class="contentbar-button contentbar-button-zoom consuming_mode_trigger"
-                        title="<?= _('Fokusmodus ein-/ausschalten') ?>"></button>
-            </div>
-
             <? if ($actionMenu) : ?>
                 <div class="contentbar-button-wrapper contentbar-action-menu-wrapper">
                     <?= $actionMenu->render() ?>
diff --git a/templates/header.php b/templates/header.php
index d49b8ef..51620ce 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -203,7 +203,18 @@ if ($navigation) {
                 </li>
             <? endif; ?>
 
-                <li id="responsive-toggle-fullscreen"></li>
+                <li id="responsive-toggle-fullscreen">
+                    <button class="styleless" id="fullscreen-off"
+                            title="<?= _('Kompakte Navigation ausschalten') ?>">
+                        <?= Icon::create('screen-standard', ICON::ROLE_INFO_ALT)->asImg(24) ?>
+                    </button>
+                </li>
+                <li id="responsive-toggle-focusmode">
+                    <button class="styleless consuming_mode_trigger" id="focusmode-on"
+                            title="<?= _('Vollbild aktivieren') ?>">
+                        <?= Icon::create('screen-full', ICON::ROLE_INFO_ALT)->asImg(24) ?>
+                    </button>
+                </li>
             </ul>
         </div>
     </div>
diff --git a/templates/tabs.php b/templates/tabs.php
index 0072705..e5b00a4 100644
--- a/templates/tabs.php
+++ b/templates/tabs.php
@@ -43,5 +43,12 @@ foreach (Navigation::getItem("/")->getSubNavigation() as $path => $nav) {
     <? if (is_object($GLOBALS['perm']) && $GLOBALS['perm']->have_perm('autor')) : ?>
         <?= Helpbar::get()->render() ?>
     <? endif; ?>
-    <div id="non-responsive-toggle-fullscreen"></div>
+    <? if (User::findCurrent()) : ?>
+    <div id="non-responsive-toggle-fullscreen">
+        <button class="styleless" id="fullscreen-on"
+                title="<?= _('Kompakte Navigation aktivieren') ?>">
+            <?= Icon::create('screen-compact')->asImg(24) ?>
+        </button>
+    </div>
+    <? endif ?>
 </div>
author	Thomas Hackl <hackl@data-quest.de>	2023-02-06 08:36:42 +0000
committer	Thomas Hackl <hackl@data-quest.de>	2023-02-06 08:36:42 +0000
commit	cff48047b00b890600356fad29064b6a28532c2b (patch)
tree	668cde85ac93a7197249722e74ebac778ace7248
parent	bf7a4a8eb3606b2447335325c29a86c3cfd90bf0 (diff)