diff --git a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
index 335dd32d6eb2821f35904596b5dfd20161622b32..8c552bc859612782dbd2e649a7b939f89899e280 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 13fb624426c35cb0201626e4f8c4939117614e30..bb3e26164fbfca6fd74452b4d2540a30598c4903 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 4291cd7c9fc9c3b31c850c4f148f6af898700355..03ee96c776e57ea1a0f5bdb45c1a7a9a7611fb27 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 0000000000000000000000000000000000000000..375fe37944f071ca7e3fa114e214a8f358fca4b3
--- /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 ecb3f91db304b0e77243cfea628292c0048ac10c..4a182ebc01fffc8b10a3b46968df6fc90b3aa022 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 0000000000000000000000000000000000000000..0d158dd2ae982bc693e067c31aa9bd8ef1545f87
--- /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 0000000000000000000000000000000000000000..c6a059733cac0b3904a7f1a6354804203a1dbd1b
--- /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 64620fb592e12b6465e532a75c5247aa82cfac4d..e96c44e258673b7b6da9f4700ef4f2d17a3b2d2b 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 24509a3ef802fb81c132e6610dc72a471817ad97..97b72e3fb0e9e9a6885cd95cc1aa28da8542176c 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 f49d745e8984da9dd0ccaff6c02c294279b91ab0..d77a0c1bf634adeac6ff1de38fd4e4955e404630 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