From b59aa477af8bad9e1b3fa2cfef07ab3cb5d79b5b Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Fri, 11 Jan 2019 15:44:45 +0000
Subject: [PATCH] adds three column submission layout and basic list styles
---
.../src/app/src/SubmissionsByRoundApp.js | 15 ++++-
.../src/components/SubmissionsByRoundList.js | 15 ++++-
.../SubmissionsByRoundListHeading.js | 6 +-
.../SubmissionsByRoundListHeading.scss | 59 +++++++++++++++++++
.../components/SubmissionsByRoundListItem.js | 4 +-
.../src/components/SubmissionsGrid/index.js | 15 +++++
.../src/components/SubmissionsGrid/style.scss | 35 +++++++++++
opentech/static_src/src/javascript/main.js | 7 +++
.../src/sass/apply/abstracts/_mixins.scss | 5 ++
.../src/sass/apply/abstracts/_variables.scss | 7 ++-
10 files changed, 159 insertions(+), 9 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss
create mode 100644 opentech/static_src/src/app/src/components/SubmissionsGrid/index.js
create mode 100644 opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss
diff --git a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
index 335dd32d6..8c552bc85 100644
--- a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
+++ b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
@@ -1,6 +1,7 @@
import React from 'react';
import { hot } from 'react-hot-loader'
import Switcher from '@components/Switcher'
+import SubmissionsGrid from '@components/SubmissionsGrid';
import SubmissionsByRoundContainer from '@containers/SubmissionsByRoundContainer';
@@ -28,7 +29,19 @@ class SubmissionsByRoundApp extends React.Component {
<>
<Switcher selector='submissions-by-round-app-react-switcher' open={this.state.detailOpen} handleOpen={this.detailOpen} handleClose={this.detailClose} />
<div style={this.state.style} ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
- {this.state.detailOpen && this.renderSubmissionsByRound()}
+ {this.state.detailOpen &&
+ <SubmissionsGrid>
+ <div>
+ {this.renderSubmissionsByRound()}
+ </div>
+ <div>
+ <h4>Column 2</h4>
+ </div>
+ <div>
+ <h4>Column 3</h4>
+ </div>
+ </SubmissionsGrid>
+ }
</>
)
}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
index 13fb62442..bb3e26164 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
@@ -22,9 +22,18 @@ export default class SubmissionsByRoundList extends React.Component {
render() {
return (
- <ul>
- {this.renderListItems()}
- </ul>
+ <>
+ <div className="submissions-grid__header">
+ <select>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+ <ul className="submissions-grid__list">
+ {this.renderListItems()}
+ </ul>
+ </>
);
}
}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
index 4291cd7c9..03ee96c77 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
@@ -1,12 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
+import './SubmissionsByRoundListHeading.scss';
export default class SubmissionsByRoundListHeading extends React.Component {
render() {
return (
- <li>
- <h2>{this.props.title} ({this.props.count})</h2>
+ <li className="submission-list-item submission-list-item--heading">
+ <h5 className="submission-list-item__title">{this.props.title}</h5>
+ <span className="submission-list-item__count">{this.props.count}</span>
</li>
);
}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss
new file mode 100644
index 000000000..375fe3794
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss
@@ -0,0 +1,59 @@
+.submission-list-item {
+ @include submission-list-item;
+
+ &.is-active {
+ border-right: 0;
+ border-left: 0;
+ }
+
+ &--heading {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: $color--fog;
+ padding: 15px 20px;
+ }
+
+ &__title {
+ margin: 0;
+ }
+
+ &__count {
+ background-color: $color--white;
+ padding: 0 8px;
+ border-radius: 5px;
+ font-size: 14px;
+ }
+
+ &__link {
+ display: block;
+ padding: 30px;
+ background-color: transparent;
+ transition: background-color $quick-transition;
+ position: relative;
+ color: $color--default;
+
+ &::before {
+ content: '';
+ height: 100%;
+ width: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-color: $color--dark-blue;
+ transition: width $transition;
+ }
+
+ &:hover {
+ background-color: $color--white;
+ }
+
+ .is-active & {
+ background-color: $color--white;
+
+ &::before {
+ width: 8px;
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js
index ecb3f91db..4a182ebc0 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
export default class SubmissionsByRoundListItem extends React.Component {
render() {
return (
- <li>
- <a>{this.props.title}</a>
+ <li className="submission-list-item">
+ <a className="submission-list-item__link">{this.props.title}</a>
</li>
);
}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsGrid/index.js b/opentech/static_src/src/app/src/components/SubmissionsGrid/index.js
new file mode 100644
index 000000000..0d158dd2a
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/SubmissionsGrid/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './style.scss';
+
+const SubmissionsGrid = ({ children }) => (
+ <div className="submissions-grid">
+ {children}
+ </div>
+);
+
+SubmissionsGrid.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default SubmissionsGrid;
diff --git a/opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss b/opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss
new file mode 100644
index 000000000..c6a059733
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss
@@ -0,0 +1,35 @@
+.submissions-grid {
+ margin: 0 -20px;
+
+ @include media-query(tablet-landscape) {
+ display: grid;
+ grid-template-columns: 28% 1fr 28%;
+ }
+
+ @include media-query(desktop) {
+ // breakout of the wrapper
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ grid-template-columns: 20% 1fr 28%;
+ }
+
+ &__header {
+ @include submission-list-item;
+ padding: 15px 20px;
+ }
+
+ &__list {
+ @include media-query(tablet-portrait) {
+ height: calc(100vh - var(--header-admin-height) - 56px);
+ overflow-y: scroll;
+ }
+
+ @include media-query(laptop-short) {
+ height: calc(100vh - 56px);
+ }
+ }
+}
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 64620fb59..e96c44e25 100644
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -149,4 +149,11 @@
}
});
+ // Get the header and admin bar height and set custom prop with value
+ (() => {
+ const headerHeight = $('.header').outerHeight();
+ const adminbarHeight = $('.admin-bar').outerHeight();
+ document.documentElement.style.setProperty('--header-admin-height', headerHeight + adminbarHeight + 'px');
+ })();
+
})(jQuery);
diff --git a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
index 24509a3ef..97b72e3fb 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
@@ -155,3 +155,8 @@
}
}
+@mixin submission-list-item {
+ border-bottom: 2px solid $color--light-mid-grey;
+ border-right: 2px solid $color--light-mid-grey;
+ border-left: 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 f49d745e8..d77a0c1bf 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -1,4 +1,7 @@
// sass-lint:disable no-color-keywords; no-color-hex
+:root {
+ --header-admin-height: 0;
+}
// Default
$color--white: #fff;
@@ -28,6 +31,7 @@ $color--mist: #f3fafe;
$color--green: #7dc558;
$color--pastel-red: #f1a9a9;
$color--pastel-green: #afe6af;
+$color--fog: #eff2f5;
// Social
$color--twitter: #1da6f6;
@@ -91,8 +95,9 @@ $breakpoints: (
'small-tablet' '(min-width: 600px)',
'tablet-portrait' '(min-width: 768px)',
'tablet-landscape' '(min-width: 1024px)',
+ 'laptop-short' '(min-width: 1024px) and (max-height: 1280px)',
'desktop' '(min-width: 1320px)',
- 'deskop-wide' '(min-width: 2556px)'
+ 'desktop-wide' '(min-width: 2556px)'
);
// Transition
--
GitLab