From c6b297e53f24bbeddb01e91555877b3e62c2e25a Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Mon, 13 Mar 2023 11:08:21 +0000
Subject: [PATCH] Offene Tickets der responsiven Ansicht
Closes #2038, #2039, #2040, #2098, #2124, #2150, #2151, #2152, #2319, #2321, #2324, #2329, #2331, and #2357
Merge request studip/studip!1527
---
lib/classes/ResponsiveHelper.php | 22 +++++-
lib/wiki.inc.php | 8 +-
.../assets/javascripts/bootstrap/sidebar.js | 4 +-
.../assets/stylesheets/scss/contentbar.scss | 15 ++--
.../assets/stylesheets/scss/layouts.scss | 4 +-
.../assets/stylesheets/scss/responsive.scss | 73 ++++++++++++++-----
.../CoursewareStructuralElement.vue | 15 +++-
.../responsive/ResponsiveNavigation.vue | 16 ++--
8 files changed, 108 insertions(+), 49 deletions(-)
diff --git a/lib/classes/ResponsiveHelper.php b/lib/classes/ResponsiveHelper.php
index bb07add4ce6..ad0f90d68aa 100644
--- a/lib/classes/ResponsiveHelper.php
+++ b/lib/classes/ResponsiveHelper.php
@@ -238,19 +238,22 @@ class ResponsiveHelper
'children' => []
];
+ $path = 'browse/my_courses/' . $course->id;
+
foreach ($course->tools as $tool) {
if (Seminar_Perm::get()->have_studip_perm($tool->getVisibilityPermission(), $course->id)) {
- $path = 'browse/my_courses/' . $course->id;
-
$studip_module = $tool->getStudipModule();
if ($studip_module instanceof StudipModule) {
$tool_nav = $studip_module->getTabNavigation($course->id) ?: [];
foreach ($tool_nav as $nav_name => $navigation) {
+ if (!empty($tool->metadata['displayname'])) {
+ $navigation->setTitle($tool->getDisplayname());
+ }
if ($nav_name && is_a($navigation, 'Navigation')) {
$cnav['children'][$path . '/' . $nav_name] = [
'icon' => $navigation->getImage() ? $navigation->getImage()->asImagePath() : '',
- 'title' => $tool->getDisplayname(),
+ 'title' => $navigation->getTitle(),
'url' => URLHelper::getURL($navigation->getURL(), ['cid' => $course->id]),
'parent' => 'browse/my_courses/' . $course->id,
'path' => 'browse/my_courses/' . $course->id . '/' . $nav_name,
@@ -269,6 +272,19 @@ class ResponsiveHelper
}
}
+ if ($GLOBALS['perm']->have_studip_perm('tutor', $course->id)) {
+ $cnav['children'][$path . '/plus'] = [
+ 'icon' => Icon::create('add', Icon::ROLE_INFO_ALT)->asImagePath(),
+ 'title' => _('Mehr...'),
+ 'url' => URLHelper::getURL('dispatch.php/course/plus/index', ['cid' => $course->id]),
+ 'parent' => 'browse/my_courses/' . $course->id,
+ 'path' => 'browse/my_courses/' . $course->id . '/plus/index',
+ 'visible' => true,
+ 'active' => false,
+ 'children' => [],
+ ];
+ }
+
$items['browse/my_courses/' . $course->id] = $cnav;
}
diff --git a/lib/wiki.inc.php b/lib/wiki.inc.php
index f7caafe643e..33a9b0a3d0f 100644
--- a/lib/wiki.inc.php
+++ b/lib/wiki.inc.php
@@ -1028,12 +1028,6 @@ 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.
@@ -1603,7 +1597,7 @@ function showWikiPage($keyword, $version, $special="", $show_comments="icon", $h
'#',
_('Als Vollbild anzeigen'),
Icon::create('screen-full'),
- ['class' => 'fullscreen-trigger']
+ ['class' => 'fullscreen-trigger hidden-medium-down']
);
}
diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js
index 92b37d6dec3..04630c09e67 100644
--- a/resources/assets/javascripts/bootstrap/sidebar.js
+++ b/resources/assets/javascripts/bootstrap/sidebar.js
@@ -1,4 +1,6 @@
// Set correct sidebar height for stickyness
STUDIP.domReady(() => {
- STUDIP.Sidebar.adjustHeight();
+ if (!STUDIP.Responsive.isResponsive()) {
+ STUDIP.Sidebar.adjustHeight();
+ }
});
diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss
index b85fdf9c169..e371be295ec 100644
--- a/resources/assets/stylesheets/scss/contentbar.scss
+++ b/resources/assets/stylesheets/scss/contentbar.scss
@@ -4,20 +4,19 @@
display: flex;
flex-wrap: wrap;
height: auto;
- justify-content: space-between;
+ justify-content: flex-start;
margin-bottom: 15px;
min-height: 30px;
- padding: 1em;
+ padding: 1em 2em;
+
+ .contentbar-nav {
+ display: flex;
+ width: auto;
+ }
.contentbar-wrapper-left {
display: flex;
flex: auto;
- /* Taken from courseware.scss line 323 */
- max-width: calc(100% - 106px);
-
- .contentbar-nav {
- display: flex;
- }
.contentbar-breadcrumb {
display: flex;
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 94b26fb9239..c11727057e0 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -27,7 +27,7 @@ body {
grid-column-gap: 5px;
grid-row-gap: $grid-gap;
grid-template-columns: ($sidebar-width + $sidebar-padding) minmax(auto, calc(100vw - $sidebar-width - $sidebar-padding));
- grid-template-rows: auto 1fr $footer-height;
+ grid-template-rows: auto 1fr auto;
&::backdrop {
background: $white;
@@ -161,7 +161,6 @@ body {
grid-row: 2 / 3;
justify-content: flex-start;
margin: $page-margin;
- overflow-x: auto;
position: relative;
vertical-align: top;
@@ -172,6 +171,7 @@ body {
#content {
flex: 1;
+ max-width: 100%;
}
// for old pages without template layout
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index f52c1d6be09..6dc068ddddf 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -182,7 +182,7 @@ $sidebarOut: -330px;
}
- &.navigation-current {
+ &.navigation-item-active {
background-color: $base-color-80;
}
@@ -314,7 +314,6 @@ $sidebarOut: -330px;
#sidebar {
background-color: $white;
max-height: calc(100vh - 100px);
- overflow-y: auto;
position: absolute;
transform: translateX($sidebarOut);
z-index: 100;
@@ -332,6 +331,7 @@ $sidebarOut: -330px;
left: 15px;
position: relative;
+ top: 60px;
}
.sidebar-image {
@@ -373,6 +373,16 @@ $sidebarOut: -330px;
}
}
+ #content-wrapper {
+ width: calc(100vw - 2 * $page-margin);
+ }
+
+ .cw-ribbon-sticky-bottom,
+ .cw-ribbon-sticky-spacer,
+ .cw-ribbon-sticky-top {
+ display: none;
+ }
+
#responsive-contentbar {
justify-content: stretch;
margin-bottom: 15px;
@@ -381,8 +391,6 @@ $sidebarOut: -330px;
.contentbar-nav,
.cw-ribbon-nav {
- width: auto;
-
.contentbar-button {
&.contentbar-button-sidebar {
@@ -407,6 +415,7 @@ $sidebarOut: -330px;
flex: 1;
max-width: calc(100% - 70px);
min-width: 0;
+ width:100%;
& > .contentbar-icon {
margin-right: 15px;
@@ -432,8 +441,9 @@ $sidebarOut: -330px;
}
> .contentbar-wrapper-right {
- position: relative;
+ flex: 1;
left: 5px;
+ position: relative;
.contentbar-button,
nav {
@@ -442,11 +452,8 @@ $sidebarOut: -330px;
}
&.cw-ribbon {
- margin-top: 4px;
-
.cw-ribbon-tools {
- right: 0;
- top: 4px;
+ width: 540px;
.cw-tabs-nav {
height: 52px;
@@ -459,6 +466,26 @@ $sidebarOut: -330px;
}
}
}
+
+ &.cw-ribbon-sticky {
+ position: unset;
+ width: calc(100vw - 30px);
+ }
+ }
+
+ .blubber_threads_widget {
+ .sidebar-widget-content {
+ ol {
+ li.active {
+ &::before {
+ right: 23px;
+ }
+ &::after {
+ right: 24px;
+ }
+ }
+ }
+ }
}
#toc {
@@ -486,6 +513,10 @@ $sidebarOut: -330px;
#top-bar {
padding: 0 20px;
}
+
+ #responsive-contentbar-container {
+ display: none;
+ }
}
#responsive-menu {
@@ -499,9 +530,17 @@ $sidebarOut: -330px;
width: 100%;
}
- .contentbar-nav,
- .cw-ribbon-nav {
- margin-left: 3px;
+ #responsive-contentbar {
+ &.cw-ribbon {
+ .cw-ribbon-tools {
+ top: 40px;
+ }
+ }
+
+ &.cw-ribbon-sticky {
+ position: unset;
+ width: calc(100vw - 30px);
+ }
}
#toggle-sidebar {
@@ -634,13 +673,13 @@ $sidebarOut: -330px;
}
}
- .cw-companion-box-wrapper {
- padding-top: 120px;
- }
-
.cw-structural-element-consumemode {
position: unset;
+ .cw-container-wrapper-consume {
+ padding-top: 15px;
+ }
+
.cw-ribbon-wrapper-consume {
position: unset;
@@ -685,11 +724,9 @@ html:not(.responsive-display):not(.fullscreen-mode) {
.responsive-display {
@include media-breakpoint-small-down() {
#navigation-level-1,
- #site-title,
#navigation-level1-items,
.current_page,
#tabs,
- #site-title,
#footer,
.tabs_wrapper .colorblock {
display: none !important;
diff --git a/resources/vue/components/courseware/CoursewareStructuralElement.vue b/resources/vue/components/courseware/CoursewareStructuralElement.vue
index 7c61b6548c3..bdd01692ba7 100644
--- a/resources/vue/components/courseware/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/CoursewareStructuralElement.vue
@@ -1033,10 +1033,17 @@ export default {
let menu = [
{ 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'},
-
+ { id: 6, label: this.$gettext('Lerninhalt für OER Campus vorschlagen'), icon: 'oer-campus',
+ emit: 'showSuggest' }
];
+
+ if (!document.documentElement.classList.contains('responsive-display')) {
+ menu.push(
+ { id: 7, label: this.$gettext('Als Vollbild anzeigen'), icon: 'screen-full',
+ emit: 'activateFullscreen'},
+ );
+ }
+
if (this.canEdit) {
if (!this.blockedByAnotherUser) {
menu.push({
@@ -1057,7 +1064,7 @@ export default {
menu.push({ id: 3, label: this.$gettext('Seite hinzufügen'), icon: 'add', emit: 'addElement' });
}
if (this.context.type === 'users') {
- menu.push({ id: 7, label: this.$gettext('Öffentlichen Link erzeugen'), icon: 'group', emit: 'linkElement' });
+ menu.push({ id: 8, label: this.$gettext('Öffentlichen Link erzeugen'), icon: 'group', emit: 'linkElement' });
}
if (!this.isRoot && this.canEdit && !this.isTask && !this.blocked) {
menu.push({
diff --git a/resources/vue/components/responsive/ResponsiveNavigation.vue b/resources/vue/components/responsive/ResponsiveNavigation.vue
index 3f4d1633097..500c0304203 100644
--- a/resources/vue/components/responsive/ResponsiveNavigation.vue
+++ b/resources/vue/components/responsive/ResponsiveNavigation.vue
@@ -99,7 +99,7 @@
</div>
</li>
<navigation-item v-for="(item, index) in currentNavigation.children" :key="index"
- :item="item"></navigation-item>
+ :item="item" :active="item.active"></navigation-item>
</ul>
</nav>
</transition>
@@ -307,8 +307,10 @@ export default {
cache.set('fullscreen-mode', true);
const siteTitle = document.getElementById('site-title');
- siteTitle.dataset.originalTitle = siteTitle.textContent.trim();
- siteTitle.textContent = this.initialTitle;
+ if (siteTitle) {
+ siteTitle.dataset.originalTitle = siteTitle.textContent.trim();
+ siteTitle.textContent = this.initialTitle;
+ }
sidebar.style.display = 'none';
@@ -508,10 +510,12 @@ export default {
if (this.isResponsive || (this.isFullscreen && !this.isFocusMode)) {
this.moveHelpbar();
- this.contentbarTitle = document.querySelector('.sidebar-image .sidebar-title').textContent;
+ 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;
+ if (siteTitle) {
+ siteTitle.dataset.originalTitle = siteTitle.textContent.trim();
+ siteTitle.textContent = this.initialTitle;
+ }
}
});
--
GitLab