Side bar now has proper scrolling

This commit is contained in:
PMKuipers 2024-05-31 22:32:43 +02:00
parent ee0a9c3d3a
commit de8e8199ca
13 changed files with 282 additions and 23878 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11912
amd/build/vue/vue.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -134,7 +134,6 @@ export default {
badgeissuedstats: "badgeissuedstats",
completion_incomplete: "completion_incomplete_badge",
completion_completed: "completion_completed_badge",
completioninfo: "completioninfo",
badgedisabled: "badgedisabled"
},
course: {

View File

@ -290,7 +290,7 @@ export default {
badges: 'badges',
relatedbages: 'relatedbages@badges',
filter: 'filter@core',
sitebadges: 'sitebadges@core',
sitebadges: 'sitebadges@badges',
}
});
@ -4350,6 +4350,10 @@ export default {
},
loadingcourses: false,
loadingcategories: [],
badgelistshown: {
relatedbadges: true,
systembadges: false,
}
};
},
watch: {
@ -4359,7 +4363,12 @@ export default {
}
},
mounted() {
const self = this;
this.initialize();
this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
self.badgelistshown[collapseId] = !!isJustShown;
});
},
computed: {
filterComponentType(){
@ -4484,6 +4493,7 @@ export default {
template: `
<div class="t-toolbox">
<p-sidebar
class="t-toolbox-sidebar"
:right='toolboxright'
shadow
v-model="value"
@ -4493,20 +4503,24 @@ export default {
<div class='t-toolbox-preface'>
<b-form-checkbox v-model="toolboxright" switch>{{text.toolbarRight}}</b-form-checkbox>
</div>
<b-tabs content-class='mt-3'>
<b-tab :title="text.courses">
<b-tabs content-class='mt-3' class="t-toolbox-tabs">
<b-tab :title="text.courses" class="t-toolbox-tab">
<div v-if="loadingcourses"
><div class="spinner-border text-primary" role="status"></div
></div>
<div v-else class="ml-4">
<div v-else class="ml-2 t-toolbox-courses">
<div class="flex-grow-0">
<input v-model="filters.courses" :placeholder="text.filter"></input>
&nbsp; <a @click="filters.courses = ''" v-if="filters.courses" href='#'
><i class='fa fa-times'></i></a
><b-spinner small v-if="loadingcategories.length > 0" variant="primary"></b-spinner>
</div>
<div class="t-toolbox-courselist">
<t-coursecat-list v-model="filteredCourses"></t-coursecat-list>
</div>
</div>
</b-tab>
<b-tab :title="text.flow">
<b-tab :title="text.flow" class="t-toolbox-tab">
<ul class="t-toolbox">
<li><drag
:type="filterComponentType"
@ -4531,20 +4545,16 @@ export default {
</drag></li>
</ul>
</b-tab>
<b-tab :title="text.badges">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.relatedbadges variant="light">
<span class='float-left'>{{ text.relatedbages }}</span>
<span class="when-open float-right"><i class='fa fa-caret-down'></i></span>
<span class="when-closed float-right"><i class='fa fa-caret-right'></i></span>
</b-button>
</b-card-header>
<b-collapse id="relatedbadges" visible accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-tab :title="text.badges" class="t-toolbox-tab">
<b-tabs content-class='mt-2 ml-2' class="t-toolbox-badges">
<b-tab :title="text.relatedbages">
<div class="t-toolbox-badges-filter">
<input v-model="filters.relatedbadges" @input="filter_relatedbadges" :placeholder="text.filter"></input>
&nbsp;<a @click="reset_relatedbadges" v-if="filters.relatedbadges" href='#'
><i class='fa fa-times'></i></a>
</div>
<div class="t-toolbox-badges-list">
<ul class="t-badges">
<li v-for="b in relatedbadges"><drag
class="t-badge-drag"
@ -4558,22 +4568,15 @@ export default {
></template>
</drag></li>
</ul>
</b-card-body>
</b-collapse>
</b-card>
<b-card v-if="!coaching" no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.systembadges variant="light">
<span class='float-left'>{{ text.sitebadges }}</span>
<span class="when-open float-right"><i class='fa fa-caret-down'></i></span>
<span class="when-closed float-right"><i class='fa fa-caret-right'></i></span>
</b-button>
</b-card-header>
<b-collapse d="systembadges" accordion="my-accordion" role="tabpanel">
<b-card-body>
</div>
</b-tab>
<b-tab :title="text.sitebadges" v-if="!coaching">
<div class="t-toolbox-badges-filter">
<input v-model="filters.systembadges" @input="filter_systembadges" :placeholder="text.filter"></input>
&nbsp; <a @click="reset_systembadges" v-if="filters.systembadges" href='#'
><i class='fa fa-times'></i></a>
</div>
<div class="t-toolbox-badges-list">
<ul class="t-badges">
<li v-for="b in systembadges"><drag
class="t-badge-drag"
@ -4587,9 +4590,9 @@ export default {
></template>
</drag></li>
</ul>
</b-card-body>
</b-collapse>
</b-card>
</div>
</b-tab>
</b-tabs>
</b-tab>
</b-tabs>
</p-sidebar>

File diff suppressed because one or more lines are too long

View File

@ -283,7 +283,8 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-course-list,
.features-treestudyplan ul.t-coursecat-list,
.features-treestudyplan ul.t-course-list {
padding-left: 1em;
margin-top: 0.5rem;
padding-left: 0;
}
.path-local-treestudyplan ul.t-coursecat-list ul.t-coursecat-list,
.path-local-treestudyplan ul.t-coursecat-list ul.t-course-list,
@ -293,7 +294,7 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan ul.t-coursecat-list ul.t-course-list,
.features-treestudyplan ul.t-course-list ul.t-coursecat-list,
.features-treestudyplan ul.t-course-list ul.t-course-list {
padding-left: 1.5em;
padding-left: 1rem;
}
.path-local-treestudyplan ul.t-item-module-children,
.path-local-treestudyplan ul.t-coursecat-list li,
@ -695,8 +696,55 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan .t-item-contextview .close-button {
float: right;
}
.path-local-treestudyplan ul.t-toolbox li,
.features-treestudyplan ul.t-toolbox li {
.path-local-treestudyplan #p-sidebar-wrapper .p-sidebar.shown,
.features-treestudyplan #p-sidebar-wrapper .p-sidebar.shown {
display: flex;
flex-direction: column;
}
.path-local-treestudyplan #p-sidebar-wrapper .p-sidebar.shown .t-toolbox-tabs,
.features-treestudyplan #p-sidebar-wrapper .p-sidebar.shown .t-toolbox-tabs {
flex-grow: 4;
}
.path-local-treestudyplan .t-toolbox-tabs,
.features-treestudyplan .t-toolbox-tabs {
display: flex;
flex-direction: column;
}
.path-local-treestudyplan .t-toolbox-tabs .tab-content,
.features-treestudyplan .t-toolbox-tabs .tab-content {
flex: 1 0 0;
min-height: 0;
}
.path-local-treestudyplan .t-toolbox-tabs .tab-pane,
.features-treestudyplan .t-toolbox-tabs .tab-pane {
height: 100%;
}
.path-local-treestudyplan .t-toolbox-courses,
.features-treestudyplan .t-toolbox-courses {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
}
.path-local-treestudyplan .t-toolbox-courses > *,
.features-treestudyplan .t-toolbox-courses > * {
min-width: 0;
min-height: 0;
}
.path-local-treestudyplan .t-toolbox-courses .t-toolbox-courselist,
.features-treestudyplan .t-toolbox-courses .t-toolbox-courselist {
flex: 1 1 0;
min-width: 0;
min-height: 0;
overflow-y: auto;
}
.path-local-treestudyplan ul.t-flow,
.features-treestudyplan ul.t-flow {
padding-left: 1rem;
}
.path-local-treestudyplan ul.t-flow li,
.features-treestudyplan ul.t-flow li {
list-style: none;
}
.path-local-treestudyplan .t-item-filter,
@ -788,7 +836,31 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-badges,
.features-treestudyplan ul.t-badges {
padding-left: 0;
margin-top: 1rem;
}
.path-local-treestudyplan .t-toolbox-badges,
.features-treestudyplan .t-toolbox-badges {
height: 100%;
display: flex;
flex-direction: column;
}
.path-local-treestudyplan .t-toolbox-badges .tab-content,
.features-treestudyplan .t-toolbox-badges .tab-content {
flex: 1 0 0;
min-height: 0;
height: 100%;
}
.path-local-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active,
.features-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.path-local-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active .t-toolbox-badges-list,
.features-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active .t-toolbox-badges-list {
height: 100%;
min-height: 0;
flex: 1 1 0;
overflow-y: auto;
}
.path-local-treestudyplan .t-badges li,
.features-treestudyplan .t-badges li {
@ -1958,6 +2030,7 @@ body.path-local-treestudyplan .editmode-switch-form > * {
#p-sidebar-wrapper #p-sidebar-contentwrapper {
flex: 1 1 auto;
transition: all 0.3s ease-in-out;
overflow-y: auto;
}
#p-sidebar-wrapper .p-sidebar {
position: relative;

View File

@ -7,6 +7,7 @@
#p-sidebar-contentwrapper {
flex: 1 1 auto;
transition: all 0.3s ease-in-out;
overflow-y: auto;
}
.p-sidebar {
@ -26,6 +27,7 @@
transition: all 0.3s ease-in-out;
z-index: 100;
--p-sidebar-hideoffset: -320px;
//overflow-y: auto;
&.p-sidebar-shadow {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);

View File

@ -181,11 +181,12 @@
ul.t-coursecat-list,
ul.t-course-list {
padding-left: 1em;
margin-top: 0.5rem;
padding-left: 0;
ul.t-coursecat-list,
ul.t-course-list {
padding-left: 1.5em;
padding-left: 1rem;
}
}
@ -571,10 +572,50 @@
float: right;
}
#p-sidebar-wrapper .p-sidebar.shown {
display: flex;
flex-direction: column;
.t-toolbox-tabs {
flex-grow: 4;
}
}
ul.t-toolbox li {
.t-toolbox-tabs {
display:flex;
flex-direction: column;
.tab-content {
flex: 1 0 0;
min-height: 0;
}
.tab-pane {
height: 100%;
}
}
.t-toolbox-courses {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
> * {
min-width: 0;
min-height: 0;
}
.t-toolbox-courselist {
flex: 1 1 0;
min-width: 0;
min-height: 0;
overflow-y: auto;
}
}
ul.t-flow {
padding-left: 1rem;
li {
list-style: none;
}
}
.t-item-filter {
display: inline-block;
@ -667,7 +708,30 @@
ul.t-badges {
padding-left: 0;
margin-top: 1rem;
}
.t-toolbox-badges {
height: 100%;
display: flex;
flex-direction: column;
.tab-content {
flex: 1 0 0;
min-height:0;
height: 100%;
.tab-pane.active {
display: flex;
flex-direction: column;
gap: 0.5rem;
.t-toolbox-badges-list {
height: 100%;
min-height: 0;
flex: 1 1 0;
overflow-y: auto;
}
}
}
}
.t-badges li {

View File

@ -283,7 +283,8 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-course-list,
.features-treestudyplan ul.t-coursecat-list,
.features-treestudyplan ul.t-course-list {
padding-left: 1em;
margin-top: 0.5rem;
padding-left: 0;
}
.path-local-treestudyplan ul.t-coursecat-list ul.t-coursecat-list,
.path-local-treestudyplan ul.t-coursecat-list ul.t-course-list,
@ -293,7 +294,7 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan ul.t-coursecat-list ul.t-course-list,
.features-treestudyplan ul.t-course-list ul.t-coursecat-list,
.features-treestudyplan ul.t-course-list ul.t-course-list {
padding-left: 1.5em;
padding-left: 1rem;
}
.path-local-treestudyplan ul.t-item-module-children,
.path-local-treestudyplan ul.t-coursecat-list li,
@ -695,8 +696,55 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan .t-item-contextview .close-button {
float: right;
}
.path-local-treestudyplan ul.t-toolbox li,
.features-treestudyplan ul.t-toolbox li {
.path-local-treestudyplan #p-sidebar-wrapper .p-sidebar.shown,
.features-treestudyplan #p-sidebar-wrapper .p-sidebar.shown {
display: flex;
flex-direction: column;
}
.path-local-treestudyplan #p-sidebar-wrapper .p-sidebar.shown .t-toolbox-tabs,
.features-treestudyplan #p-sidebar-wrapper .p-sidebar.shown .t-toolbox-tabs {
flex-grow: 4;
}
.path-local-treestudyplan .t-toolbox-tabs,
.features-treestudyplan .t-toolbox-tabs {
display: flex;
flex-direction: column;
}
.path-local-treestudyplan .t-toolbox-tabs .tab-content,
.features-treestudyplan .t-toolbox-tabs .tab-content {
flex: 1 0 0;
min-height: 0;
}
.path-local-treestudyplan .t-toolbox-tabs .tab-pane,
.features-treestudyplan .t-toolbox-tabs .tab-pane {
height: 100%;
}
.path-local-treestudyplan .t-toolbox-courses,
.features-treestudyplan .t-toolbox-courses {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
}
.path-local-treestudyplan .t-toolbox-courses > *,
.features-treestudyplan .t-toolbox-courses > * {
min-width: 0;
min-height: 0;
}
.path-local-treestudyplan .t-toolbox-courses .t-toolbox-courselist,
.features-treestudyplan .t-toolbox-courses .t-toolbox-courselist {
flex: 1 1 0;
min-width: 0;
min-height: 0;
overflow-y: auto;
}
.path-local-treestudyplan ul.t-flow,
.features-treestudyplan ul.t-flow {
padding-left: 1rem;
}
.path-local-treestudyplan ul.t-flow li,
.features-treestudyplan ul.t-flow li {
list-style: none;
}
.path-local-treestudyplan .t-item-filter,
@ -788,7 +836,31 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-badges,
.features-treestudyplan ul.t-badges {
padding-left: 0;
margin-top: 1rem;
}
.path-local-treestudyplan .t-toolbox-badges,
.features-treestudyplan .t-toolbox-badges {
height: 100%;
display: flex;
flex-direction: column;
}
.path-local-treestudyplan .t-toolbox-badges .tab-content,
.features-treestudyplan .t-toolbox-badges .tab-content {
flex: 1 0 0;
min-height: 0;
height: 100%;
}
.path-local-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active,
.features-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.path-local-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active .t-toolbox-badges-list,
.features-treestudyplan .t-toolbox-badges .tab-content .tab-pane.active .t-toolbox-badges-list {
height: 100%;
min-height: 0;
flex: 1 1 0;
overflow-y: auto;
}
.path-local-treestudyplan .t-badges li,
.features-treestudyplan .t-badges li {
@ -1958,6 +2030,7 @@ body.path-local-treestudyplan .editmode-switch-form > * {
#p-sidebar-wrapper #p-sidebar-contentwrapper {
flex: 1 1 auto;
transition: all 0.3s ease-in-out;
overflow-y: auto;
}
#p-sidebar-wrapper .p-sidebar {
position: relative;