From e5e9bd58b60f8fb24f27be0f79dfa1c7eedcdb22 Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Tue, 13 Dec 2022 15:46:28 +0000
Subject: [PATCH] =?UTF-8?q?Resolve=20"Polishing=20f=C3=BCr=20die=20neue=20?=
=?UTF-8?q?HTML-Stuktur"=20Teil=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes #1886 and #1888
Merge request studip/studip!1231
---
lib/classes/TwoFactorAuth.php | 1 +
.../assets/javascripts/lib/skip_links.js | 2 +-
.../assets/stylesheets/scss/article.scss | 10 ++-
resources/assets/stylesheets/scss/header.scss | 17 ----
.../assets/stylesheets/scss/layouts.scss | 32 ++++++-
resources/assets/stylesheets/scss/mobile.scss | 58 -------------
.../scss/personal-notifications.scss | 2 +-
.../assets/stylesheets/scss/responsive.scss | 84 ++++++++++++-------
resources/assets/stylesheets/studip.scss | 1 -
.../responsive/ResponsiveContentBar.vue | 2 +-
templates/contentbar/contentbar.php | 4 +-
templates/footer.php | 34 ++++----
templates/header.php | 1 -
13 files changed, 115 insertions(+), 133 deletions(-)
delete mode 100644 resources/assets/stylesheets/scss/mobile.scss
diff --git a/lib/classes/TwoFactorAuth.php b/lib/classes/TwoFactorAuth.php
index 7fd9f45edb9..3582b6fdb7a 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 c237a54bd51..4f5bd886e38 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 f773e769ba4..e9be1580293 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 1ddd3bdec56..36ae554cff0 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 f38518b5373..4248cb4c02a 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 d339d1980cf..00000000000
--- 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 c397c1b1fa0..74e60848690 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 95b97f3a0d6..08483343209 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 0cf922df9bc..8e8734ec982 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 9e499b3fbf1..fa5e5c9589c 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 851c77e3988..dcdeeb8bc0f 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 57fe54cf050..d652cb2a060 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 408b5b84ded..5e4ed1029ee 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>
--
GitLab