adds detail view, application display and tabber components

opentech/static_src/src/app/src/SubmissionsByRoundApp.js

 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} />;
+    }
 }
 
 

opentech/static_src/src/app/src/components/ApplicationDisplay/index.js

+import React from 'react';
+
+const ApplicationDisplay = () => <div>Application Display</div>
+
+export default ApplicationDisplay;

opentech/static_src/src/app/src/components/SubmissionsGrid/index.js → 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;

opentech/static_src/src/app/src/components/SubmissionsGrid/style.scss → opentech/static_src/src/app/src/components/DetailView/style.scss

-.submissions-grid {
+.detail-view {
     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%;
+        grid-template-columns: 250px 1fr;
     }
 
     @include media-query(desktop) {
@@ -19,26 +14,6 @@
         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);
-        }
+        grid-template-columns: 390px 1fr;
     }
 }

opentech/static_src/src/app/src/components/DisplayPanel/index.js

+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;

opentech/static_src/src/app/src/components/DisplayPanel/style.scss

+.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;
+    }
+}

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>
         );
     }
 }

opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.scss → opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss

-.submission-list-item {
-    @include submission-list-item;
+$listing-header-height: 75px;
 
-    &.is-active {
-        border-right: 0;
-        border-left: 0;
+.listing {
+    &__header {
+        @include submission-list-item;
+        height: $listing-header-height;
+        padding: 20px;
     }
 
-    &--heading {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: $color--fog;
-        padding: 15px 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;
+        }
 
-    &__title {
-        margin: 0;
+        @include media-query(laptop-short) {
+            // allow for vertical scrolling on laptops
+            height: calc(100vh -  #{$listing-header-height});
+        }
     }
 
-    &__count {
-        background-color: $color--white;
-        padding: 0 8px;
-        border-radius: 5px;
-        font-size: 14px;
+    // 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;
@@ -56,4 +71,15 @@
             }
         }
     }
+
+    &__title {
+        margin: 0;
+    }
+
+    &__count {
+        background-color: $color--white;
+        padding: 0 8px;
+        border-radius: 5px;
+        font-size: 14px;
+    }
 }

opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js

 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>
         );
     }

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>
         );
     }

opentech/static_src/src/app/src/components/Tabber/index.js

+import React from 'react';
+
+const Tabber = () => <div>Tabber</div>
+
+export default Tabber;