Resolve "Polishing für die neue HTML-Stuktur" Teil 1

Closes #1886 and #1888

Merge request studip/studip!1231

13 files changed, 115 insertions, 133 deletions

diff --git a/lib/classes/TwoFactorAuth.php b/lib/classes/TwoFactorAuth.php
index 7fd9f45..3582b6f 100644
--- a/lib/classes/TwoFactorAuth.php
+++ b/lib/classes/TwoFactorAuth.php
@@ -215,6 +215,7 @@ final class TwoFactorAuth
                 )
             );
         }
+        PageLayout::setBodyElementId('tfa-confirmation-screen');
 
         echo $GLOBALS['template_factory']->render(
             'tfa-validate.php',
diff --git a/resources/assets/javascripts/lib/skip_links.js b/resources/assets/javascripts/lib/skip_links.js
index c237a54..4f5bd88 100644
--- a/resources/assets/javascripts/lib/skip_links.js
+++ b/resources/assets/javascripts/lib/skip_links.js
@@ -101,7 +101,7 @@ const SkipLinks = {
     insertHeadLines: function() {
         var target = null;
         jQuery('#skip_link_navigation a').each(function() {
-            target = jQuery(this).attr('href');
+            target = jQuery(this);
             if (jQuery(target).is('li,td')) {
                 jQuery(target).prepend(
                     '<h2 id="' +
diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss
index f773e76..e9be158 100644
--- a/resources/assets/stylesheets/scss/article.scss
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -1,7 +1,11 @@
 article.studip {
-    border-color: $content-color-40;
-    border-style: solid;
-    border-width: 1px;
+
+    &:not(.wiki) {
+        border-color: $content-color-40;
+        border-style: solid;
+        border-width: 1px;
+    }
+
     margin-bottom: 10px;
     transition: all 300ms ease 0s;
     padding: 10px;
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 1ddd3bd..36ae554 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -42,7 +42,6 @@ html {
     scroll-padding-top: calc($bar-bottom-container-height + 1em);
 }
 
-#main-footer,
 #header-links {
     > ul > li > a {
         color: $white;
@@ -54,22 +53,6 @@ html {
     }
 }
 
-#main-footer {
-    > ul {
-        display: flex;
-        flex: 1;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        list-style-type: none;
-        min-height: 30px;
-        padding: 0;
-        > li {
-            margin-left: 2px;
-            margin-right: 2px;
-        }
-    }
-}
-
 #header-links {
     flex: 0 1 auto;
     justify-self: flex-end;
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index f38518b..4248cb4 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -152,8 +152,7 @@ body {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
     justify-content: flex-start;
-    margin: 15px 15px 15px 2px;
-    padding: 0 $content-margin 47px $content-margin;
+    margin: $page-margin;
     position: relative;
     vertical-align: top;
 
@@ -215,12 +214,37 @@ body {
     padding: 2px 0;
     grid-column: 1 / 3;
     grid-row: 3 / 4;
+    justify-content: space-between;
+    line-height: $footer-height - 4px;
 }
 
 #main-footer-info {
     margin-left: 8px;
-    margin-top: 2px;
-    line-height: 28px;
+}
+
+#main-footer-navigation {
+    ul {
+        display: flex;
+        flex: 1;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        list-style-type: none;
+        padding: 0;
+
+        li {
+            margin-left: 2px;
+            margin-right: 2px;
+
+            a {
+                color: $white;
+                margin: 0 6px;
+                text-decoration: none;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
 }
 
 #navigation-level-1 {
diff --git a/resources/assets/stylesheets/scss/mobile.scss b/resources/assets/stylesheets/scss/mobile.scss
deleted file mode 100644
index d339d19..0000000
--- a/resources/assets/stylesheets/scss/mobile.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@include media-breakpoint-small-down(){
-  body > header { min-width: 0 !important; }
-  #login div.index_container .messagebox,
-  #index div.index_container .messagebox,
-  #request_new_password div.index_container .messagebox,
-  #web_migrate div.index_container .messagebox {
-    margin-top: 110px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@include media-breakpoint-tiny-down(){
-    #top-logo img {
-        height: 33px;
-        margin-top: 5px;
-        width: 153px;
-    }
-    #index,
-    #login,
-    #request_new_password,
-    #web_migrate {
-        div.index_container {
-            display: flex;
-            flex-direction: column;
-            position: static;
-            top: 40px;
-
-            .messagebox {
-                margin-bottom: 0;
-                margin-top: 0;
-                width: calc(100% - 74px);
-            }
-
-            #background-desktop {
-                display: none;
-            }
-
-            #background-mobile {
-                display: inherit;
-                width: 100%;
-                height: calc(100% - 34px);
-            }
-
-            div.index_main {
-                margin-top: 0;
-                padding-left: 20px;
-                padding-right: 20px;
-                position: relative;
-                width: calc(100% - 40px);
-
-                nav {
-                    display: inline;
-                }
-            }
-        }
-    }
-}
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index c397c1b..74e6084 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -8,7 +8,7 @@
     font-size: 0.8em;
     color: $base-color;
     text-align: center;
-    line-height: 28px;
+    line-height: 24px;
     background-color: $dark-gray-color-10;
     border: 1px solid $dark-gray-color-40;
 
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 95b97f3..0848334 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -284,16 +284,14 @@ $sidebarOut: -330px;
 
     #header-links {
         > ul {
-            margin-right: 10px;
-
-            li {
-                padding: 0;
+            > li:not(#responsive-toggle-fullscreen):not(.helpbar-container) {
+                display: none;
+            }
 
-                &.helpbar-container {
-                    float: unset;
-                    margin-top: 5px;
-                    right: 5px;
-                }
+            > li.helpbar-container {
+                float: unset;
+                margin-top: 5px;
+                right: 30px;
             }
         }
 
@@ -505,7 +503,7 @@ $sidebarOut: -330px;
 
         #responsive-toggle-fullscreen {
             display: block;
-            margin-right: 5px;
+            right: 15px;
         }
 
         .contentbar:not(#responsive-contentbar) {
@@ -704,27 +702,18 @@ html:not(.responsive-display):not(.fullscreen-mode) {
             margin-right: 0;
         }
 
-        #current-page-structure, #top-bar, #navigation-level-1, #layout_content {
+        #current-page-structure,
+        #top-bar,
+        #navigation-level-1 {
             min-width: inherit !important;
         }
 
-        #layout_content {
-            margin: 0px 4px;
-        }
-
         #index,
         #login,
         #request_new_password,
         #web_migrate {
-            div.index_container {
-                height: calc(100% - 74px);
-                position: static;
-                top: 0;
-
-                div.messagebox,
-                div.index_main {
-                    margin: 1em auto;
-                }
+            .messagebox {
+                margin: 0;
             }
 
             #background-desktop,
@@ -739,10 +728,47 @@ html:not(.responsive-display):not(.fullscreen-mode) {
         #login,
         #request_new_password,
         #web_migrate {
-            div.index_container {
-                div.messagebox,
-                div.index_main {
-                    margin: 0 auto;
+
+            #responsive-contentbar {
+                display: none;
+            }
+
+            main {
+                margin: 0;
+                padding: 0;
+                width: calc(100% - 10px);
+            }
+
+        }
+
+        #header-links {
+            display: none;
+        }
+
+        #background-desktop {
+            display: none;
+        }
+
+        #background-mobile {
+            display: inherit;
+            width: 100vw;
+            height: 100vh;
+            top:0;
+            left: 0;
+        }
+
+        #loginbox {
+            box-shadow: unset;
+            margin: 0;
+            width: calc(100vw - 40px);
+
+            nav ul {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+
+                .login_link {
+                    width: unset;
                 }
             }
         }
@@ -794,3 +820,5 @@ html:not(.responsive-display):not(.fullscreen-mode) {
         max-width: 100vw;
     }
 }
+
+
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 0cf922d..8e8734e 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -57,7 +57,6 @@
 @import "scss/links";
 @import "scss/lists";
 @import "scss/messages";
-@import "scss/mobile";
 @import "scss/my_courses";
 @import "scss/mvv";
 @import "scss/navigation";
diff --git a/resources/vue/components/responsive/ResponsiveContentBar.vue b/resources/vue/components/responsive/ResponsiveContentBar.vue
index 9e499b3..fa5e5c9 100644
--- a/resources/vue/components/responsive/ResponsiveContentBar.vue
+++ b/resources/vue/components/responsive/ResponsiveContentBar.vue
@@ -153,7 +153,7 @@ export default {
             const realContentbar = document.querySelector('.contentbar:not(#responsive-contentbar)');
             if (realContentbar) {
                 this.realContentbar = realContentbar;
-                this.realContentbarSource = '#layout_content';
+                this.realContentbarSource = '#content';
                 this.realContentbarIconContainer = '.contentbar-nav';
                 this.realContentbarType = 'wiki';
                 this.adjustExistingContentbar(true);
diff --git a/templates/contentbar/contentbar.php b/templates/contentbar/contentbar.php
index 851c77e..dcdeeb8 100644
--- a/templates/contentbar/contentbar.php
+++ b/templates/contentbar/contentbar.php
@@ -1,4 +1,4 @@
-<header>
+<section>
     <header class="contentbar">
         <nav class="contentbar-nav"></nav>
         <div class="contentbar-wrapper-left">
@@ -34,4 +34,4 @@
             <? endif ?>
         </div>
     </header>
-</div>
+</section>
diff --git a/templates/footer.php b/templates/footer.php
index 57fe54c..d652cb2 100644
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -35,22 +35,24 @@
 <? endif; ?>
 
 <? if (Navigation::hasItem('/footer')) : ?>
-    <ul>
-    <? foreach (Navigation::getItem('/footer') as $nav): ?>
-        <? if ($nav->isVisible()): ?>
-            <li>
-            <a
-            <? if (is_internal_url($url = $nav->getURL())) : ?>
-                href="<?= URLHelper::getLink($url, $link_params ?? null) ?>"
-            <? else: ?>
-                href="<?= htmlReady($url) ?>" target="_blank" rel="noopener noreferrer"
-            <? endif ?>
-                <?= arrayToHtmlAttributes($nav->getLinkAttributes()) ?>
-            ><?= htmlReady($nav->getTitle()) ?></a>
-            </li>
-        <? endif; ?>
-    <? endforeach; ?>
-    </ul>
+    <nav id="main-footer-navigation" aria-label="<?= _('Fußzeilennavigation') ?>">
+        <ul>
+        <? foreach (Navigation::getItem('/footer') as $nav): ?>
+            <? if ($nav->isVisible()): ?>
+                <li>
+                <a
+                <? if (is_internal_url($url = $nav->getURL())) : ?>
+                    href="<?= URLHelper::getLink($url, $link_params ?? null) ?>"
+                <? else: ?>
+                    href="<?= htmlReady($url) ?>" target="_blank" rel="noopener noreferrer"
+                <? endif ?>
+                    <?= arrayToHtmlAttributes($nav->getLinkAttributes()) ?>
+                ><?= htmlReady($nav->getTitle()) ?></a>
+                </li>
+            <? endif; ?>
+        <? endforeach; ?>
+        </ul>
+    </nav>
 <? endif; ?>
 </footer>
 <?= $this->render_partial('debug/db-log.php') ?>
diff --git a/templates/header.php b/templates/header.php
index 408b5b8..5e4ed10 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -203,7 +203,6 @@ if ($navigation) {
                 </li>
             <? endif; ?>
 
-                <li id="responsive-toggle-desktop"></li>
                 <li id="responsive-toggle-fullscreen"></li>
             </ul>
         </div>