From cd9f910c78f2715ee9025ccdc79da7ee88f00bb3 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 15 Jan 2019 17:23:22 +0000
Subject: [PATCH] re-arrange the detail view components so they're part of the
tabbed content to prepare for mobile layout
---
.../components/ApplicationDisplay/index.js | 2 +-
.../components/ApplicationDisplay/styles.scss | 3 --
.../app/src/components/DisplayPanel/index.js | 16 +++++--
.../src/components/DisplayPanel/style.scss | 39 ++++++++++++++--
.../src/app/src/components/Tabber/index.js | 44 ++++++++++++++++++-
5 files changed, 90 insertions(+), 14 deletions(-)
diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
index 47bf4e877..3cac4e35c 100644
--- a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
+++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
@@ -51,7 +51,7 @@ export default class ApplicationDisplay extends Component {
const { metaResponses, responses } = this.props.submissionData;
return (
- <div className="application-display">
+ <div>
<h3>Proposal Information</h3>
<div className="grid grid--proposal-info">
diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss b/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss
index e7d2cac37..e69de29bb 100644
--- a/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss
+++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss
@@ -1,3 +0,0 @@
-.application-display {
- padding: 20px;
-}
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/index.js b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
index d5dbbfc41..7e4980cd2 100644
--- a/opentech/static_src/src/app/src/components/DisplayPanel/index.js
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
@@ -1,6 +1,7 @@
import React from 'react';
import ApplicationDisplay from '@components/ApplicationDisplay'
import Tabber from '@components/Tabber'
+import {Tab} from '@components/Tabber'
import './style.scss';
const DisplayPanel = () => {
@@ -31,10 +32,17 @@ const DisplayPanel = () => {
}
return (
- <div className="display-panel">
- <ApplicationDisplay submissionData={data} />
- <Tabber />
- </div>
+ <Tabber className="display-panel">
+ <Tab name="Application">
+ <ApplicationDisplay submissionData={data} />
+ </Tab>
+ <Tab name="Notes">
+ <p>Notes</p>
+ </Tab>
+ <Tab name="Status">
+ <p>Status</p>
+ </Tab>
+ </Tabber>
)
};
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/style.scss b/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
index 00e22068d..8b08643bc 100644
--- a/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
@@ -1,8 +1,5 @@
.display-panel {
- // temporary to visualise middle column
- > div:first-child {
- background-color: $color--white;
- }
+ background-color: $color--white;
@include media-query(tablet-landscape) {
display: grid;
@@ -11,9 +8,43 @@
@include media-query(desktop) {
grid-template-columns: 1fr 390px;
+ grid-template-rows: 75px 1fr;
+ }
+
@include target-ie11 {
display: flex;
flex-wrap: wrap;
}
+
+ &__body,
+ &__header {
+ @include submission-list-item;
+ padding: 20px;
+ }
+
+ &__header {
+ &--spacer {
+ display: none;
+
+ @include media-query(tablet-landscape) {
+ display: block;
+ }
+ }
+ }
+
+ &__links {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ }
+
+ &__link {
+ padding: 20px;
+
+ @include media-query(tablet-landscape) {
+ &:first-child {
+ display: none;
+ }
+ }
}
}
diff --git a/opentech/static_src/src/app/src/components/Tabber/index.js b/opentech/static_src/src/app/src/components/Tabber/index.js
index 1fb0d3537..7ba90c2e2 100644
--- a/opentech/static_src/src/app/src/components/Tabber/index.js
+++ b/opentech/static_src/src/app/src/components/Tabber/index.js
@@ -1,5 +1,45 @@
-import React from 'react';
+import React, {Component} from 'react';
-const Tabber = () => <div>Tabber</div>
+export const Tab = ({name, children}) => <div>{children}</div>
+
+class Tabber extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ activeTab: 0
+ }
+ }
+
+ handleClick = (e) => {
+ e.preventDefault();
+ this.setState({
+ activeTab: event.target.getAttribute('data-tab')
+ })
+ }
+
+ render() {
+
+ const { children, className } = this.props;
+ const [ mainDisplay, ...other ] = children;
+
+ return (
+ <div className={className}>
+ <div className="display-panel__header display-panel__header--spacer"></div>
+ <div className="display-panel__header display-panel__links">
+ <a data-tab="0" onClick={this.handleClick} className="display-panel__link">{mainDisplay.props.name}</a>
+ {other.map((child, i) => <a data-tab={i + 1} onClick={this.handleClick} className="display-panel__link" key={child.props.name}>{child.props.name}</a>)}
+ </div>
+ <div className="display-panel__body">
+ {mainDisplay}
+ </div>
+ <div className="display-panel__body">
+ {other[0]}
+ </div>
+ </div>
+ )
+ }
+
+}
export default Tabber;
--
GitLab