From efb19ff81288e1f3368c5c468140e565f3303c63 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Thu, 14 Nov 2024 07:35:19 +0000
Subject: [PATCH] fix responsive logout, fixes #4744
Closes #4744
Merge request studip/studip!3542
---
lib/classes/ResponsiveHelper.php | 6 ++++--
lib/navigation/Navigation.php | 2 ++
.../assets/stylesheets/highcontrast.scss | 3 ++-
.../assets/stylesheets/scss/responsive.scss | 3 ++-
.../components/responsive/NavigationItem.vue | 20 ++++++++++++++++---
5 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/lib/classes/ResponsiveHelper.php b/lib/classes/ResponsiveHelper.php
index afa5005e5d0..d4d0651be47 100644
--- a/lib/classes/ResponsiveHelper.php
+++ b/lib/classes/ResponsiveHelper.php
@@ -53,7 +53,8 @@ class ResponsiveHelper
'parent' => '/',
'path' => $path,
'visible' => $forceVisibility ? true : $nav->isVisible(true),
- 'active' => $nav->isActive()
+ 'active' => $nav->isActive(),
+ 'button' => $nav->getRenderAsButton(),
];
if ($nav->isActive()) {
@@ -130,7 +131,8 @@ class ResponsiveHelper
'parent' => $path,
'path' => $subpath,
'visible' => $subnav->isVisible(),
- 'active' => $subnav->isActive()
+ 'active' => $subnav->isActive(),
+ 'button' => $subnav->getRenderAsButton(),
];
if ($subnav->isActive()) {
diff --git a/lib/navigation/Navigation.php b/lib/navigation/Navigation.php
index c8fde82f930..9f26ab6e672 100644
--- a/lib/navigation/Navigation.php
+++ b/lib/navigation/Navigation.php
@@ -554,6 +554,8 @@ class Navigation implements IteratorAggregate
/**
* Return the list of subnavigation items of this object.
+ *
+ * @return Navigation[]
*/
public function getSubNavigation()
{
diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss
index aba822354ea..fe4c654f49c 100644
--- a/resources/assets/stylesheets/highcontrast.scss
+++ b/resources/assets/stylesheets/highcontrast.scss
@@ -1049,7 +1049,8 @@ button.skiplink {
}
// list elements when hovering
- a {
+ a,
+ button {
&:hover {
background-color: $lightgray;
color: $black;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 7892d30daeb..5c2121430d3 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -216,7 +216,8 @@ $sidebarOut: -330px;
color: var(--white);
flex: 1;
- > a {
+ > a,
+ button {
display: inline-block;
padding: 10px 10px 10px 5px;
text-align: left;
diff --git a/resources/vue/components/responsive/NavigationItem.vue b/resources/vue/components/responsive/NavigationItem.vue
index 50ab5a8cac0..d65bda39917 100644
--- a/resources/vue/components/responsive/NavigationItem.vue
+++ b/resources/vue/components/responsive/NavigationItem.vue
@@ -10,7 +10,7 @@
>
<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="" :class="{avatar: item.avatar}"/>
+ <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
</span>
<span class="navigation-text">
{{ item.title }}
@@ -29,14 +29,28 @@
</button>
</template>
<div v-else class="navigation-title">
- <a
+ <form v-if="item.button"
+ :action="item.url"
+ method="post"
+ >
+ <button class="as-link"
+ 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-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+ {{ item.title }}
+ </button>
+ </form>
+ <a v-else
: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="" :class="{avatar: item.avatar}"/>
+ <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
{{ item.title }}
</a>
</div>
--
GitLab