From 6b7dbd2f892e76347d915896acfcd7e16354d457 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Fri, 25 Jan 2019 12:01:11 +0000
Subject: [PATCH] move column scrolling in to a mixin
---
.../src/app/src/components/Listing/style.scss | 12 +-----------
.../app/src/components/SubmissionDisplay/styles.scss | 11 +----------
.../src/app/src/containers/DisplayPanel/style.scss | 9 +--------
.../static_src/src/sass/apply/abstracts/_mixins.scss | 12 ++++++++++++
4 files changed, 15 insertions(+), 29 deletions(-)
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 0038a8354..1029988cc 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 2f8dd6926..7ad72c885 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 2dc49a061..370ef9f16 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 a4ac8a42d..a3a20c321 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);
+ }
+}
--
GitLab