diff --git a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
index 335dd32d6eb2821f35904596b5dfd20161622b32..6c585f5bd43c274fbe08f1fba82c9324a519b4dd 100644
--- a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
+++ b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
@@ -1,6 +1,8 @@
import React from 'react';
import { hot } from 'react-hot-loader'
import Switcher from '@components/Switcher'
+import DetailView from '@components/DetailView';
+import DisplayPanel from '@components/DisplayPanel';
import SubmissionsByRoundContainer from '@containers/SubmissionsByRoundContainer';
@@ -27,15 +29,18 @@ class SubmissionsByRoundApp extends React.Component {
return (
<>
<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 &&
+ <DetailView>
+ <SubmissionsByRoundContainer roundId={this.props.roundId} />
+ <DisplayPanel />
+ </DetailView>
+ }
</>
)
}
-
- renderSubmissionsByRound() {
- return <SubmissionsByRoundContainer roundId={this.props.roundId} />;
- }
}
diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bdb5e1f9a3d3ef7dd4e59e970497070591fb5498
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ApplicationDisplay = () => <div>Application Display</div>
+
+export default ApplicationDisplay;
diff --git a/opentech/static_src/src/app/src/components/DetailView/index.js b/opentech/static_src/src/app/src/components/DetailView/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd23b42658b17de56dde74f15b6b488867507b61
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/DetailView/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './style.scss';
+
+const DetailView = ({ children }) => (
+ <div className="detail-view">
+ {children}
+ </div>
+);
+
+DetailView.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default DetailView;
diff --git a/opentech/static_src/src/app/src/components/DetailView/style.scss b/opentech/static_src/src/app/src/components/DetailView/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0e19c76f3f0d357f87e2df0f003b1ca0d043d576
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/DetailView/style.scss
@@ -0,0 +1,19 @@
+.detail-view {
+ margin: 0 -20px;
+
+ @include media-query(tablet-landscape) {
+ display: grid;
+ grid-template-columns: 250px 1fr;
+ }
+
+ @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: 390px 1fr;
+ }
+}
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/index.js b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3d719c4ab0799fccc8a71905e7a5a92d1d0bc28
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ApplicationDisplay from '@components/ApplicationDisplay'
+import Tabber from '@components/Tabber'
+import './style.scss';
+
+const DisplayPanel = () => (
+ <div className="display-panel">
+ <ApplicationDisplay />
+ <Tabber />
+ </div>
+);
+
+export default DisplayPanel;
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/style.scss b/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8763c4446a7bcdba447f87f221683b5d523ccb04
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
@@ -0,0 +1,15 @@
+.display-panel {
+ // temporary to visualise middle column
+ > div:first-child {
+ background-color: $color--white;
+ }
+
+ @include media-query(tablet-landscape) {
+ display: grid;
+ grid-template-columns: 1fr 250px;
+ }
+
+ @include media-query(desktop) {
+ grid-template-columns: 1fr 390px;
+ }
+}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
index 13fb624426c35cb0201626e4f8c4939117614e30..379edd569a7d13713b53662f0282d475d4ec7569 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
@@ -2,6 +2,7 @@ import React from 'react';
import SubmissionsByRoundListHeading from '@components/SubmissionsByRoundListHeading';
import SubmissionsByRoundListItem from '@components/SubmissionsByRoundListItem';
+import './SubmissionsByRoundList.scss'
export default class SubmissionsByRoundList extends React.Component {
renderListItems() {
@@ -22,9 +23,20 @@ export default class SubmissionsByRoundList extends React.Component {
render() {
return (
- <ul>
- {this.renderListItems()}
- </ul>
+ <div className="listing">
+ <div className="listing__header">
+ <form className="form form__select">
+ <select>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </form>
+ </div>
+ <ul className="listing__list">
+ {this.renderListItems()}
+ </ul>
+ </div>
);
}
}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss b/opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss
new file mode 100644
index 0000000000000000000000000000000000000000..30c929f4174cfac8a41432078684537d7d4c829b
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss
@@ -0,0 +1,85 @@
+$listing-header-height: 75px;
+
+.listing {
+ &__header {
+ @include submission-list-item;
+ height: $listing-header-height;
+ padding: 20px;
+ }
+
+ // containing <ul>
+ &__list {
+ @include media-query(tablet-landscape) {
+ // only allow columns to be scrolled on larger screens
+ height: calc(100vh - var(--header-admin-height) - #{$listing-header-height});
+ overflow-y: scroll;
+ }
+
+ @include media-query(laptop-short) {
+ // allow for vertical scrolling on laptops
+ height: calc(100vh - #{$listing-header-height});
+ }
+ }
+
+ // inner <li>'s
+ &__item {
+ @include submission-list-item;
+
+ &.is-active {
+ border-right: 2px solid $color--white;
+ transition: border $transition;
+ }
+
+ &--heading {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: $color--fog;
+ padding: 15px 20px;
+ }
+ }
+
+ // <a> tags
+ &__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;
+ }
+ }
+ }
+
+ &__title {
+ margin: 0;
+ }
+
+ &__count {
+ background-color: $color--white;
+ padding: 0 8px;
+ border-radius: 5px;
+ font-size: 14px;
+ }
+}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
index 4291cd7c9fc9c3b31c850c4f148f6af898700355..bc97b2f7aac1ecad63f2bf60535e53b665e9ba29 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
@@ -1,12 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
-
export default class SubmissionsByRoundListHeading extends React.Component {
render() {
return (
- <li>
- <h2>{this.props.title} ({this.props.count})</h2>
+ <li className="listing__item listing__item--heading">
+ <h5 className="listing__title">{this.props.title}</h5>
+ <span className="listing__count">{this.props.count}</span>
</li>
);
}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js
index ecb3f91db304b0e77243cfea628292c0048ac10c..7f2e41122fca121cd710039fbec743fe89a72a5c 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="listing__item">
+ <a className="listing__link">{this.props.title}</a>
</li>
);
}
diff --git a/opentech/static_src/src/app/src/components/Tabber/index.js b/opentech/static_src/src/app/src/components/Tabber/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fb0d353784635de2c102c026d4ca09043732add
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/Tabber/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Tabber = () => <div>Tabber</div>
+
+export default Tabber;
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..f9a25c0487340745e734abe5ad5be486a606397f 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
@@ -155,3 +155,7 @@
}
}
+@mixin submission-list-item {
+ border-bottom: 2px solid $color--light-mid-grey;
+ 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 f49d745e8984da9dd0ccaff6c02c294279b91ab0..b18005a2a1857d91f1721313012892c4d181c69c 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,10 @@ $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-medium' '(min-width: 1920px)',
+ 'desktop-wide' '(min-width: 2556px)'
);
// Transition
diff --git a/opentech/static_src/src/sass/public/abstracts/_variables.scss b/opentech/static_src/src/sass/public/abstracts/_variables.scss
index 8545b9184473fddf3b1265333fe22b842cc6d0cd..e501e189b0d40067423ab61d8e127718ec3e15f5 100644
--- a/opentech/static_src/src/sass/public/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/public/abstracts/_variables.scss
@@ -92,7 +92,7 @@ $breakpoints: (
'tablet-portrait' '(min-width: 768px)',
'tablet-landscape' '(min-width: 1024px)',
'desktop' '(min-width: 1320px)',
- 'deskop-wide' '(min-width: 2556px)'
+ 'desktop-wide' '(min-width: 2556px)'
);
// Transition