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

Closes #1886 and #1888

Merge request studip/studip!1231

lib/classes/TwoFactorAuth.php

@@ -215,6 +215,7 @@ final class TwoFactorAuth
                 )
             );
         }
+        PageLayout::setBodyElementId('tfa-confirmation-screen');
 
         echo $GLOBALS['template_factory']->render(
             'tfa-validate.php',

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="' +

resources/assets/stylesheets/scss/article.scss

 article.studip {
+
+    &:not(.wiki) {
         border-color: $content-color-40;
         border-style: solid;
         border-width: 1px;
+    }
+
     margin-bottom: 10px;
     transition: all 300ms ease 0s;
     padding: 10px;

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;

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 {

resources/assets/stylesheets/scss/mobile.scss

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

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;
 

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 {
+            > li.helpbar-container {
                 float: unset;
                 margin-top: 5px;
-                    right: 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;
     }
 }
+
+

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

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

templates/contentbar/contentbar.php

-<header>
+<section>
     <header class="contentbar">
         <nav class="contentbar-nav"></nav>
         <div class="contentbar-wrapper-left">
@@ -34,4 +34,4 @@
             <? endif ?>
         </div>
     </header>
-</div>
+</section>

templates/footer.php

@@ -35,6 +35,7 @@
 <? endif; ?>
 
 <? if (Navigation::hasItem('/footer')) : ?>
+    <nav id="main-footer-navigation" aria-label="<?= _('Fußzeilennavigation') ?>">
         <ul>
         <? foreach (Navigation::getItem('/footer') as $nav): ?>
             <? if ($nav->isVisible()): ?>
@@ -51,6 +52,7 @@
             <? endif; ?>
         <? endforeach; ?>
         </ul>
+    </nav>
 <? endif; ?>
 </footer>
 <?= $this->render_partial('debug/db-log.php') ?>

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>