From 1a8d3029be01082b3538b70dacaaa0ae71cc21d2 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 14 Jan 2019 12:39:03 +0000
Subject: [PATCH] adds detail view, application display and tabber components
---
.../src/app/src/SubmissionsByRoundApp.js | 26 +++---
.../components/ApplicationDisplay/index.js | 5 ++
.../{SubmissionsGrid => DetailView}/index.js | 8 +-
.../app/src/components/DetailView/style.scss | 19 +++++
.../app/src/components/DisplayPanel/index.js | 13 +++
.../src/components/DisplayPanel/style.scss | 15 ++++
.../src/components/SubmissionsByRoundList.js | 11 ++-
.../components/SubmissionsByRoundList.scss | 85 +++++++++++++++++++
.../SubmissionsByRoundListHeading.js | 8 +-
.../SubmissionsByRoundListHeading.scss | 59 -------------
.../components/SubmissionsByRoundListItem.js | 4 +-
.../src/components/SubmissionsGrid/style.scss | 44 ----------
.../src/app/src/components/Tabber/index.js | 5 ++
13 files changed, 169 insertions(+), 133 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
rename opentech/static_src/src/app/src/components/{SubmissionsGrid => DetailView}/index.js (53%)
create mode 100644 opentech/static_src/src/app/src/components/DetailView/style.scss
create mode 100644 opentech/static_src/src/app/src/components/DisplayPanel/index.js
create mode 100644 opentech/static_src/src/app/src/components/DisplayPanel/style.scss
create mode 100644 opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss
delete mode 100644 opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss
delete mode 100644 opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss
create mode 100644 opentech/static_src/src/app/src/components/Tabber/index.js
diff --git a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
index 8c552bc85..640776b60 100644
--- a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
+++ b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
@@ -1,7 +1,8 @@
import React from 'react';
import { hot } from 'react-hot-loader'
import Switcher from '@components/Switcher'
-import SubmissionsGrid from '@components/SubmissionsGrid';
+import DetailView from '@components/DetailView';
+import DisplayPanel from '@components/DisplayPanel';
import SubmissionsByRoundContainer from '@containers/SubmissionsByRoundContainer';
@@ -28,27 +29,22 @@ 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 &&
- <SubmissionsGrid>
- <div>
- {this.renderSubmissionsByRound()}
- </div>
- <div>
- <h4>Column 2</h4>
- </div>
- <div>
- <h4>Column 3</h4>
- </div>
- </SubmissionsGrid>
+ <DetailView>
+ {this.renderSubmissionsByRound()}
+ <DisplayPanel />
+ </DetailView>
}
</>
)
}
- renderSubmissionsByRound() {
- return <SubmissionsByRoundContainer roundId={this.props.roundId} />;
- }
+ 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 000000000..bdb5e1f9a
--- /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/SubmissionsGrid/index.js b/opentech/static_src/src/app/src/components/DetailView/index.js
similarity index 53%
rename from opentech/static_src/src/app/src/components/SubmissionsGrid/index.js
rename to opentech/static_src/src/app/src/components/DetailView/index.js
index 0d158dd2a..cd23b4265 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsGrid/index.js
+++ b/opentech/static_src/src/app/src/components/DetailView/index.js
@@ -2,14 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';
-const SubmissionsGrid = ({ children }) => (
- <div className="submissions-grid">
+const DetailView = ({ children }) => (
+ <div className="detail-view">
{children}
</div>
);
-SubmissionsGrid.propTypes = {
+DetailView.propTypes = {
children: PropTypes.node.isRequired,
};
-export default SubmissionsGrid;
+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 000000000..0e19c76f3
--- /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 000000000..d3d719c4a
--- /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 000000000..8763c4446
--- /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 bb3e26164..379edd569 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,18 +23,20 @@ export default class SubmissionsByRoundList extends React.Component {
render() {
return (
- <>
- <div className="submissions-grid__header">
+ <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="submissions-grid__list">
+ <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 000000000..3eb16b470
--- /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: 0;
+ border-left: 0;
+ }
+
+ &--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 03ee96c77..bc97b2f7a 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
@@ -1,14 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
-import './SubmissionsByRoundListHeading.scss';
-
export default class SubmissionsByRoundListHeading extends React.Component {
render() {
return (
- <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 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/SubmissionsByRoundListHeading.scss b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss
deleted file mode 100644
index 375fe3794..000000000
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.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 4a182ebc0..7f2e41122 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 className="submission-list-item">
- <a className="submission-list-item__link">{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/SubmissionsGrid/style.scss b/opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss
deleted file mode 100644
index dc50e146f..000000000
--- a/opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.submissions-grid {
- margin: 0 -20px;
-
- // temporary to visualise middle column
- > div:nth-child(2) {
- background-color: white;
- }
-
- @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%;
- }
-
- @include media-query(desktop-medium) {
- grid-template-columns: 1fr 1280px 1fr;
- }
-
- &__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/app/src/components/Tabber/index.js b/opentech/static_src/src/app/src/components/Tabber/index.js
new file mode 100644
index 000000000..1fb0d3537
--- /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;
--
GitLab