diff --git a/opentech/static_src/src/app/src/components/Listing/style.scss b/opentech/static_src/src/app/src/components/Listing/style.scss index 0038a8354977860abe5a2f6f7e332026d44a1e4d..1029988cc7f9e2fd34ab513f18951c81c10b25f6 100644 --- a/opentech/static_src/src/app/src/components/Listing/style.scss +++ b/opentech/static_src/src/app/src/components/Listing/style.scss @@ -11,18 +11,8 @@ // containing <ul> &__list { + @include column-scrolling; overflow-y: scroll; - height: calc(100vh - #{$listing-header-height}); - - @include media-query(tablet-landscape) { - // only allow columns to be scrolled on larger screens - height: calc(100vh - var(--header-admin-height) - #{$listing-header-height}); - } - - @include media-query(laptop-short) { - // allow for vertical scrolling on laptops - height: calc(100vh - #{$listing-header-height}); - } // ensures the last item will be at the top of the column after navigating to it via the dropdown &--applications { diff --git a/opentech/static_src/src/app/src/components/SubmissionDisplay/styles.scss b/opentech/static_src/src/app/src/components/SubmissionDisplay/styles.scss index 2f8dd6926579f2150db5f2bf78fd401c1cfb13b1..7ad72c885e015d6c5ce5f0fd1eba44d70f5db652 100644 --- a/opentech/static_src/src/app/src/components/SubmissionDisplay/styles.scss +++ b/opentech/static_src/src/app/src/components/SubmissionDisplay/styles.scss @@ -1,13 +1,4 @@ .application-display { + @include column-scrolling; padding: 20px; - - @include media-query(tablet-landscape) { - height: calc(100vh - var(--header-admin-height) - #{$listing-header-height} - 40px); - overflow-y: scroll; - } - - @include media-query(laptop-short) { - // allow for vertical scrolling on laptops - height: calc(100vh - #{$listing-header-height} - 40px); - } } diff --git a/opentech/static_src/src/app/src/containers/DisplayPanel/style.scss b/opentech/static_src/src/app/src/containers/DisplayPanel/style.scss index 2dc49a061bb09aed069b4107d6a5db87620d96f2..370ef9f16d1c9ca2c0002584980203906d0d24b9 100644 --- a/opentech/static_src/src/app/src/containers/DisplayPanel/style.scss +++ b/opentech/static_src/src/app/src/containers/DisplayPanel/style.scss @@ -24,14 +24,7 @@ // loading container &__loading { - @include media-query(tablet-portrait) { - height: calc(100vh - var(--header-admin-height) - #{$listing-header-height} - 40px); - } - - // 100vh - listing header - display-panel__body padding - @include media-query(laptop-short) { - height: calc(100vh - #{$listing-header-height} - 40px); - } + @include column-scrolling; } &__header { diff --git a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss index a4ac8a42d3d28b1fc951d0226fb1a445087cdc1e..a3a20c321fa0489f7026443909d57246c888dea5 100644 --- a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss +++ b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss @@ -209,3 +209,15 @@ } } } + +@mixin column-scrolling { + @include media-query(tablet-landscape) { + height: calc(100vh - var(--header-admin-height) - #{$listing-header-height} - 40px); + overflow-y: scroll; + } + + @include media-query(laptop-short) { + // allow for vertical scrolling on laptops + height: calc(100vh - #{$listing-header-height} - 40px); + } +}