Scrolling fixes (arrows,etc)

This commit is contained in:
PMKuipers 2023-07-08 07:51:48 +02:00
parent 1932883880
commit a4f4503faf
2 changed files with 25 additions and 8 deletions

View File

@ -1348,7 +1348,8 @@ export default {
></t-studyline-heading>
</div>
<!-- Next, paint all the cells in the scrollable -->
<div class="t-studyplan-scrollable" :style="columns_stylerule">
<div class="t-studyplan-scrollable" >
<div class="t-studyplan-timeline" :style="columns_stylerule">
<!-- Line by line add the items -->
<!-- The grid layout handles putting it in rows and columns -->
<template v-for="(line,lineindex) in value.studylines"
@ -1372,12 +1373,9 @@ export default {
>
</t-studyline-slot
></template
></template>
></template
></div><div :id="'studyplan-linewrapper-'+value.id" class='l-leaderline-linewrapper'></div>
</div>
<div class='t-studyplan-content-timeline'>
</div>
<div :id="'studyplan-linewrapper-'+value.id" class='l-leaderline-linewrapper'></div>
</div>
<div v-if="edit.studyline.editmode" class='t-studyline-add'>
<a href="#" v-b-modal="'modal-add-studyline-'+value.id" @click="false;"

View File

@ -25,15 +25,34 @@
display: block;
}
.t-studyplan-scrollable {
.t-studyplan-timeline {
display: grid;
overflow-x: scroll;
/* grid-template-columns will be set in the style attribute */
/* Use the variables below to specify width for filter spots and course spots */
--studyplan-filter-width: auto; /* better leave this at auto for now*/
--studyplan-course-width: auto; /* better leave this at auto for now*/
}
.t-studyplan-scrollable {
overflow-x: scroll;
scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
scrollbar-width: thin;
}
.t-studyplan-scrollable::-webkit-scrollbar {
width: 8px;
}
/* Track */
.t-studyplan-scrollable::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--primary) 20%, white);
}
/* Handle */
.t-studyplan-scrollable::-webkit-scrollbar-thumb {
background:var(--primary);
}
.t-studyplan-column-heading {
color: inherit; /* placeholder */
}