Merge pull request #8000 from jrjohnson/calendar-scroll

Fix Dashboard Scrolling When the Calendar is Opened
ilios · Jul 25, 2024 · f40b4ea · f40b4ea
2 parents a2425ad + 1904184
commit f40b4ea
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 12 deletions.
diff --git a/packages/ilios-common/.lint-todo b/packages/ilios-common/.lint-todo
@@ -2,9 +2,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb439ee6b510cea24e2
 add|ember-template-lint|no-at-ember-render-modifiers|25|6|25|6|242be4337ef58ba487a9168fe2944bd6919a1397|1720137600000|1722729600000|1725321600000|addon/components/choose-material-type.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|26|6|26|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1720137600000|1722729600000|1725321600000|addon/components/choose-material-type.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|7|2|7|2|83ed72f478af76221bd23683c194bca4058827a2|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar-event.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|23|4|23|4|88f10de94f95126fa1fd673667ca2aaab7982129|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|24|4|24|4|43d899f1e425cbd1d9905289c03c76010e2b8e28|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|28|65|28|65|f1c93cd73ccbba59ba7ff98fc6aa7e5155dbd5cb|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb8a149d14413d4dfc84ffd31349ef3f2ac6d17b|1720137600000|1722729600000|1725321600000|addon/components/date-picker.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|993f1e23f796f19a221eae6e24872755e0436cb4|1720137600000|1722729600000|1725321600000|addon/components/date-picker.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|5ba74b4fd722ca99a9891d9368168c13b9f87f4c|1720137600000|1722729600000|1725321600000|addon/components/detail-cohort-list.hbs
@@ -49,9 +46,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|7491f1d2f4e83f2c87f
 add|ember-template-lint|no-at-ember-render-modifiers|13|6|13|6|83ed72f478af76221bd23683c194bca4058827a2|1720137600000|1722729600000|1725321600000|addon/components/user-name-info.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|8|57|8|57|5ee728ed47908f031dd90bb0e2f64787a1c4998f|1720137600000|1722729600000|1725321600000|addon/components/wait-saving.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|7|2|7|2|83ed72f478af76221bd23683c194bca4058827a2|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar-event.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|24|4|24|4|88f10de94f95126fa1fd673667ca2aaab7982129|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|25|4|25|4|43d899f1e425cbd1d9905289c03c76010e2b8e28|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|29|65|29|65|f1c93cd73ccbba59ba7ff98fc6aa7e5155dbd5cb|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1720137600000|1722729600000|1725321600000|addon/components/course/collapsed-objectives.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|164f37088962494b6b2c13759308b890f0edce17|1720137600000|1722729600000|1725321600000|addon/components/course/collapsed-objectives.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|8495b8aa25ddd6757ec2b7d347f6e0f366cb5beb|1720137600000|1722729600000|1725321600000|addon/components/course/details.hbs

diff --git a/packages/ilios-common/addon/components/daily-calendar.hbs b/packages/ilios-common/addon/components/daily-calendar.hbs
@@ -1,3 +1,4 @@
+{{!-- template-lint-disable no-at-ember-render-modifiers --}}
 <section
   class="daily-calendar"
   aria-busy={{if @isLoadingEvents "true" "false"}}
@@ -20,7 +21,6 @@
   <div
     class="day"
     tabindex="0"
-    {{did-insert (perform this.scrollView) this.earliestHour}}
     {{did-update (perform this.scrollView) this.earliestHour}}
   >
     <div class="hours">

diff --git a/packages/ilios-common/addon/components/daily-calendar.js b/packages/ilios-common/addon/components/daily-calendar.js
@@ -4,7 +4,6 @@ import { restartableTask, timeout } from 'ember-concurrency';
 import { action, set } from '@ember/object';
 import { sortBy } from 'ilios-common/utils/array-helpers';
 import { DateTime } from 'luxon';
-import scrollIntoView from 'scroll-into-view';
 
 export default class DailyCalendarComponent extends Component {
   @service intl;
@@ -18,7 +17,11 @@ export default class DailyCalendarComponent extends Component {
     if (earliestHour < 24 && earliestHour > 2) {
       hourElement = this[`hour${earliestHour}`];
     }
-    scrollIntoView(hourElement, { align: { top: 0 } });
+    const { offsetTop } = hourElement;
+    calendarElement.scrollTo({
+      top: offsetTop,
+      behavior: 'instant',
+    });
   });
 
   get earliestHour() {

diff --git a/packages/ilios-common/addon/components/weekly-calendar.hbs b/packages/ilios-common/addon/components/weekly-calendar.hbs
@@ -1,3 +1,4 @@
+{{!-- template-lint-disable no-at-ember-render-modifiers --}}
 <section
   class="weekly-calendar"
   aria-busy={{if @isLoadingEvents "true" "false"}}
@@ -21,7 +22,6 @@
   <div
     class="days"
     tabindex="0"
-    {{did-insert (perform this.scrollView) this.earliestHour}}
     {{did-update (perform this.scrollView) this.earliestHour}}
   >
     <div class="hours">

diff --git a/packages/ilios-common/addon/components/weekly-calendar.js b/packages/ilios-common/addon/components/weekly-calendar.js
@@ -4,7 +4,6 @@ import { restartableTask, timeout } from 'ember-concurrency';
 import { action, set } from '@ember/object';
 import { DateTime } from 'luxon';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import scrollIntoView from 'scroll-into-view';
 
 export default class WeeklyCalendarComponent extends Component {
   @service intl;
@@ -19,7 +18,11 @@ export default class WeeklyCalendarComponent extends Component {
     if (earliestHour < 24 && earliestHour > 2) {
       hourElement = this[`hour${earliestHour}`];
     }
-    scrollIntoView(hourElement, { align: { top: 0 } });
+    const { offsetTop } = hourElement;
+    calendarElement.scrollTo({
+      top: offsetTop,
+      behavior: 'instant',
+    });
   });
 
   get firstDayOfWeek() {

diff --git a/packages/ilios-common/app/styles/ilios-common/components/daily-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/daily-calendar.scss
@@ -53,6 +53,7 @@
     grid-template-rows: repeat($minute-rows, $hour-height);
     max-height: 90%;
     overflow-y: scroll;
+    position: relative;
 
     .events {
       @include m.ilios-list-reset;

diff --git a/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss
@@ -54,6 +54,7 @@
     grid-template-rows: repeat($minute-rows, $hour-height);
     max-height: 90%;
     overflow-y: scroll;
+    position: relative;
 
     .day-name {
       @include m.visually-hidden;