From 263fdbb1fe461f67dd5cad132fb2c271ed764a01 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 29 Jan 2019 11:58:07 +0000
Subject: [PATCH] add space under last item in the list to be able to navigate
to it via the dropdown
---
.../src/app/src/components/Listing/index.js | 14 ++++++++++++++
.../src/app/src/components/Listing/style.scss | 13 +++++++++++++
.../src/sass/apply/abstracts/_variables.scss | 2 ++
3 files changed, 29 insertions(+)
diff --git a/opentech/static_src/src/app/src/components/Listing/index.js b/opentech/static_src/src/app/src/components/Listing/index.js
index d92464958..d1c8d0675 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -20,6 +20,10 @@ export default class Listing extends React.Component {
column: PropTypes.string,
};
+ componentDidUpdate() {
+ this.setLastItemHeight();
+ }
+
renderListItems() {
const {
isError,
@@ -46,6 +50,8 @@ export default class Listing extends React.Component {
);
}
+ this.setLastItemHeight();
+
return (
<ul className={`listing__list listing__list--${column}`} ref={listRef}>
{items.map(v => renderItem(v))}
@@ -65,6 +71,14 @@ export default class Listing extends React.Component {
);
}
+ // set css custom prop to allow scrolling from dropdown to last item in the list
+ setLastItemHeight() {
+ const { listRef } = this.props;
+ if (listRef.current) {
+ document.documentElement.style.setProperty('--last-listing-item-height', listRef.current.lastElementChild.offsetHeight + 'px');
+ }
+ }
+
render() {
return (
<div className="listing">
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 af322e216..5764b72db 100644
--- a/opentech/static_src/src/app/src/components/Listing/style.scss
+++ b/opentech/static_src/src/app/src/components/Listing/style.scss
@@ -25,6 +25,19 @@
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 {
+ padding-bottom: calc(100vh - var(--last-listing-item-height) - #{$listing-header-height});
+
+ @include media-query(tablet-landscape) {
+ padding-bottom: calc(100vh - var(--header-admin-height) - var(--last-listing-item-height) - #{$listing-header-height});
+ }
+
+ @include media-query(laptop-short) {
+ padding-bottom: calc(100vh - var(--last-listing-item-height) - #{$listing-header-height});
+ }
+ }
+
&.is-loading {
padding: 20px;
border-right: 2px solid $color--light-mid-grey;
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index c4e87dfd6..d2ccac095 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -1,6 +1,8 @@
// sass-lint:disable no-color-keywords; no-color-hex
+// Set via JS
:root {
--header-admin-height: 0;
+ --last-listing-item-height: 0;
}
// Default
--
GitLab