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", badgeissuedstats: "badgeissuedstats",
completion_incomplete: "completion_incomplete_badge", completion_incomplete: "completion_incomplete_badge",
completion_completed: "completion_completed_badge", completion_completed: "completion_completed_badge",
completioninfo: "completioninfo",
badgedisabled: "badgedisabled" badgedisabled: "badgedisabled"
}, },
course: { course: {

View File

@ -290,7 +290,7 @@ export default {
badges: 'badges', badges: 'badges',
relatedbages: 'relatedbages@badges', relatedbages: 'relatedbages@badges',
filter: 'filter@core', filter: 'filter@core',
sitebadges: 'sitebadges@core', sitebadges: 'sitebadges@badges',
} }
}); });
@ -4350,6 +4350,10 @@ export default {
}, },
loadingcourses: false, loadingcourses: false,
loadingcategories: [], loadingcategories: [],
badgelistshown: {
relatedbadges: true,
systembadges: false,
}
}; };
}, },
watch: { watch: {
@ -4359,7 +4363,12 @@ export default {
} }
}, },
mounted() { mounted() {
const self = this;
this.initialize(); this.initialize();
this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
self.badgelistshown[collapseId] = !!isJustShown;
});
}, },
computed: { computed: {
filterComponentType(){ filterComponentType(){
@ -4484,6 +4493,7 @@ export default {
template: ` template: `
<div class="t-toolbox"> <div class="t-toolbox">
<p-sidebar <p-sidebar
class="t-toolbox-sidebar"
:right='toolboxright' :right='toolboxright'
shadow shadow
v-model="value" v-model="value"
@ -4493,20 +4503,24 @@ export default {
<div class='t-toolbox-preface'> <div class='t-toolbox-preface'>
<b-form-checkbox v-model="toolboxright" switch>{{text.toolbarRight}}</b-form-checkbox> <b-form-checkbox v-model="toolboxright" switch>{{text.toolbarRight}}</b-form-checkbox>
</div> </div>
<b-tabs content-class='mt-3'> <b-tabs content-class='mt-3' class="t-toolbox-tabs">
<b-tab :title="text.courses"> <b-tab :title="text.courses" class="t-toolbox-tab">
<div v-if="loadingcourses" <div v-if="loadingcourses"
><div class="spinner-border text-primary" role="status"></div ><div class="spinner-border text-primary" role="status"></div
></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> <input v-model="filters.courses" :placeholder="text.filter"></input>
&nbsp; <a @click="filters.courses = ''" v-if="filters.courses" href='#' &nbsp; <a @click="filters.courses = ''" v-if="filters.courses" href='#'
><i class='fa fa-times'></i></a ><i class='fa fa-times'></i></a
><b-spinner small v-if="loadingcategories.length > 0" variant="primary"></b-spinner> ><b-spinner small v-if="loadingcategories.length > 0" variant="primary"></b-spinner>
</div> </div>
<div class="t-toolbox-courselist">
<t-coursecat-list v-model="filteredCourses"></t-coursecat-list> <t-coursecat-list v-model="filteredCourses"></t-coursecat-list>
</div>
</div>
</b-tab> </b-tab>
<b-tab :title="text.flow"> <b-tab :title="text.flow" class="t-toolbox-tab">
<ul class="t-toolbox"> <ul class="t-toolbox">
<li><drag <li><drag
:type="filterComponentType" :type="filterComponentType"
@ -4531,20 +4545,16 @@ export default {
</drag></li> </drag></li>
</ul> </ul>
</b-tab> </b-tab>
<b-tab :title="text.badges"> <b-tab :title="text.badges" class="t-toolbox-tab">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab"> <b-tabs content-class='mt-2 ml-2' class="t-toolbox-badges">
<b-button block v-b-toggle.relatedbadges variant="light"> <b-tab :title="text.relatedbages">
<span class='float-left'>{{ text.relatedbages }}</span> <div class="t-toolbox-badges-filter">
<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>
<input v-model="filters.relatedbadges" @input="filter_relatedbadges" :placeholder="text.filter"></input> <input v-model="filters.relatedbadges" @input="filter_relatedbadges" :placeholder="text.filter"></input>
&nbsp;<a @click="reset_relatedbadges" v-if="filters.relatedbadges" href='#' &nbsp;<a @click="reset_relatedbadges" v-if="filters.relatedbadges" href='#'
><i class='fa fa-times'></i></a> ><i class='fa fa-times'></i></a>
</div>
<div class="t-toolbox-badges-list">
<ul class="t-badges"> <ul class="t-badges">
<li v-for="b in relatedbadges"><drag <li v-for="b in relatedbadges"><drag
class="t-badge-drag" class="t-badge-drag"
@ -4558,22 +4568,15 @@ export default {
></template> ></template>
</drag></li> </drag></li>
</ul> </ul>
</b-card-body> </div>
</b-collapse> </b-tab>
</b-card> <b-tab :title="text.sitebadges" v-if="!coaching">
<b-card v-if="!coaching" no-body class="mb-1"> <div class="t-toolbox-badges-filter">
<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>
<input v-model="filters.systembadges" @input="filter_systembadges" :placeholder="text.filter"></input> <input v-model="filters.systembadges" @input="filter_systembadges" :placeholder="text.filter"></input>
&nbsp; <a @click="reset_systembadges" v-if="filters.systembadges" href='#' &nbsp; <a @click="reset_systembadges" v-if="filters.systembadges" href='#'
><i class='fa fa-times'></i></a> ><i class='fa fa-times'></i></a>
</div>
<div class="t-toolbox-badges-list">
<ul class="t-badges"> <ul class="t-badges">
<li v-for="b in systembadges"><drag <li v-for="b in systembadges"><drag
class="t-badge-drag" class="t-badge-drag"
@ -4587,9 +4590,9 @@ export default {
></template> ></template>
</drag></li> </drag></li>
</ul> </ul>
</b-card-body> </div>
</b-collapse> </b-tab>
</b-card> </b-tabs>
</b-tab> </b-tab>
</b-tabs> </b-tabs>
</p-sidebar> </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, .path-local-treestudyplan ul.t-course-list,
.features-treestudyplan ul.t-coursecat-list, .features-treestudyplan ul.t-coursecat-list,
.features-treestudyplan ul.t-course-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-coursecat-list,
.path-local-treestudyplan ul.t-coursecat-list ul.t-course-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-coursecat-list ul.t-course-list,
.features-treestudyplan ul.t-course-list ul.t-coursecat-list, .features-treestudyplan ul.t-course-list ul.t-coursecat-list,
.features-treestudyplan ul.t-course-list ul.t-course-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-item-module-children,
.path-local-treestudyplan ul.t-coursecat-list li, .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 { .features-treestudyplan .t-item-contextview .close-button {
float: right; float: right;
} }
.path-local-treestudyplan ul.t-toolbox li, .path-local-treestudyplan #p-sidebar-wrapper .p-sidebar.shown,
.features-treestudyplan ul.t-toolbox li { .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; list-style: none;
} }
.path-local-treestudyplan .t-item-filter, .path-local-treestudyplan .t-item-filter,
@ -788,7 +836,31 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-badges, .path-local-treestudyplan ul.t-badges,
.features-treestudyplan ul.t-badges { .features-treestudyplan ul.t-badges {
padding-left: 0; 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, .path-local-treestudyplan .t-badges li,
.features-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 { #p-sidebar-wrapper #p-sidebar-contentwrapper {
flex: 1 1 auto; flex: 1 1 auto;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
overflow-y: auto;
} }
#p-sidebar-wrapper .p-sidebar { #p-sidebar-wrapper .p-sidebar {
position: relative; position: relative;

View File

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

View File

@ -181,11 +181,12 @@
ul.t-coursecat-list, ul.t-coursecat-list,
ul.t-course-list { ul.t-course-list {
padding-left: 1em; margin-top: 0.5rem;
padding-left: 0;
ul.t-coursecat-list, ul.t-coursecat-list,
ul.t-course-list { ul.t-course-list {
padding-left: 1.5em; padding-left: 1rem;
} }
} }
@ -571,10 +572,50 @@
float: right; 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; list-style: none;
} }
}
.t-item-filter { .t-item-filter {
display: inline-block; display: inline-block;
@ -667,7 +708,30 @@
ul.t-badges { ul.t-badges {
padding-left: 0; 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 { .t-badges li {

View File

@ -283,7 +283,8 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-course-list, .path-local-treestudyplan ul.t-course-list,
.features-treestudyplan ul.t-coursecat-list, .features-treestudyplan ul.t-coursecat-list,
.features-treestudyplan ul.t-course-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-coursecat-list,
.path-local-treestudyplan ul.t-coursecat-list ul.t-course-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-coursecat-list ul.t-course-list,
.features-treestudyplan ul.t-course-list ul.t-coursecat-list, .features-treestudyplan ul.t-course-list ul.t-coursecat-list,
.features-treestudyplan ul.t-course-list ul.t-course-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-item-module-children,
.path-local-treestudyplan ul.t-coursecat-list li, .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 { .features-treestudyplan .t-item-contextview .close-button {
float: right; float: right;
} }
.path-local-treestudyplan ul.t-toolbox li, .path-local-treestudyplan #p-sidebar-wrapper .p-sidebar.shown,
.features-treestudyplan ul.t-toolbox li { .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; list-style: none;
} }
.path-local-treestudyplan .t-item-filter, .path-local-treestudyplan .t-item-filter,
@ -788,7 +836,31 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan ul.t-badges, .path-local-treestudyplan ul.t-badges,
.features-treestudyplan ul.t-badges { .features-treestudyplan ul.t-badges {
padding-left: 0; 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, .path-local-treestudyplan .t-badges li,
.features-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 { #p-sidebar-wrapper #p-sidebar-contentwrapper {
flex: 1 1 auto; flex: 1 1 auto;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
overflow-y: auto;
} }
#p-sidebar-wrapper .p-sidebar { #p-sidebar-wrapper .p-sidebar {
position: relative; position: relative;