Brandon Nicholls

RESCOI-1132: Fix layout on ipads

Showing 99 changed files with 911 additions and 42 deletions
......@@ -33,11 +33,9 @@ export default function AddSection (props) {
);
}
return (
<div className={styles.container}>
<div className={styles.left}>
{props.button}
</div>
let message;
if (props.message) {
message = (
<div className={styles.right}>
<div id='message' className={messageClasses}>
<div>
......@@ -48,6 +46,15 @@ export default function AddSection (props) {
</div>
</div>
</div>
);
}
return (
<div className={styles.container}>
{message}
<div className={styles.left}>
{props.button}
</div>
</div>
);
}
......
......@@ -18,14 +18,13 @@
}
.left {
float: left;
height: 175px;
min-height: 175px;
min-width: 200px;
}
.right {
width: auto;
height: 175px;
min-height: 130px;
overflow: hidden;
}
......@@ -34,7 +33,7 @@
border-radius: 5px;
color: white;
padding: 0 20px;
height: 100px;
min-height: 100px;
font-size: 16px;
display: flex;
justify-content: center;
......@@ -60,3 +59,6 @@
.hideWarning {
display: none;
}
@media (max-width: 950px) {
}
......
......@@ -61,3 +61,18 @@
font-size: 15px;
margin-right: 10px;
}
@media (max-width: 950px) {
.expanded .menuItems {
margin: 10px 0 0 0;
}
.menuItems {
margin: -140px 0 0 0;
padding: 15px 10px 0 10px;
}
.menuItem {
padding-left: 12px;
}
}
......
......@@ -50,3 +50,18 @@
margin-top: 10px;
cursor: pointer;
}
@media (max-width: 950px) {
.container {
min-width: 139px;
}
.button {
margin-top: 22px;
white-space: nowrap;
}
.label {
white-space: normal;
}
}
......
......@@ -29,11 +29,11 @@ export default function ApprovalConfirmation(props) {
if (props.showDispositionWarning) {
dispositionWarning = 'A disposition has not been set for every project. ';
}
return (
<div className={classNames(styles.container, props.className)} >
<div className={styles.question}>
{`${dispositionWarning}Are you sure you want to approve this disclosure?`}
</div>
<BlueButton
......
......@@ -58,4 +58,17 @@
.question {
margin-bottom: 30px;
text-align: center;
}
@media (max-width: 950px) {
.container {
padding: 10px;
min-width: 150px;
}
.override.button,
.override.yesButton {
min-width: 130px;
}
}
......
......@@ -58,3 +58,9 @@
margin: 200px auto;
color: #AAA;
}
@media (max-width: 950px) {
.override.list {
min-width: 230px;
}
}
......
......@@ -65,3 +65,17 @@
padding: 0 35px 0 3px;
display: inline-block;
}
@media (max-width: 950px) {
.detailsFromPI {
padding-right: 10px;
}
.bottom {
padding-left: 10px;
}
.override.actionButtons {
margin-right: 10px;
}
}
......
......@@ -41,3 +41,9 @@
.submittedBy {
font-weight: bold;
}
@media (max-width: 950px) {
.container {
padding-left: 10px;
}
}
......
......@@ -163,7 +163,7 @@ export class DisclosureList extends React.Component {
return (
<div className={classes}>
<AdminMenu style={{padding: '32px 0px'}} />
<div style={{width: 320}}>
<div className={styles.filters}>
<DisclosureFilterSearch
query={filters.search}
onChange={AdminActions.changeSearch}
......
......@@ -81,3 +81,21 @@
.showFilters .filterArrow {
transform: rotateZ(0);
}
.filters {
width: 320px;
}
@media (max-width: 950px) {
.filters {
width: 230px;
}
.list {
min-width: 230px;
}
.heading {
padding: 8px 47px 8px 0;
}
}
......
......@@ -112,3 +112,10 @@
color: black;
border-bottom: 1px dashed black;
}
@media (max-width: 950px) {
.relations,
.left {
width: initial;
}
}
......
......@@ -115,3 +115,9 @@
:global(.color-blind) .setAllLink {
color: black;
}
@media (max-width: 950px) {
.titles {
font-size: 10px;
}
}
......
......@@ -95,7 +95,7 @@ export default class QuestionSummary extends React.Component {
<div>{question.numberToShow}</div>
</span>
<span className={'fill'} style={{display: 'inline-block'}}>
<div style={{paddingRight: 125, fontSize: 14}}>{question.text}</div>
<div className={styles.questionText}>{question.text}</div>
<div className={'flexbox row'}>
<span className={`fill ${styles.answerSection}`}>
<div className={styles.answerLabel}>ANSWER:</div>
......
......@@ -85,3 +85,24 @@
:global(.color-blind) .answerLabel {
color: black;
}
.questionText {
padding-right: 125px;
font-size: 14px;
}
@media (max-width: 950px) {
.questionText {
padding-right: 0;
padding-bottom: 5px;
}
.number {
min-width: 40px;
}
.subQuestionNumber {
min-width: 110px;
padding-left: 40px;
}
}
......
......@@ -76,4 +76,17 @@
padding-bottom: 17px;
border-bottom: 1px solid #AAA;
margin-bottom: 17px;
text-align: center;
}
@media (max-width: 950px) {
.container {
min-width: 150px;
padding: 10px;
}
.override.button,
.override.yesButton {
min-width: 130px;
}
}
......
......@@ -21,14 +21,13 @@ import React from 'react';
import {GreyButton} from '../../../grey-button';
import {BlueButton} from '../../../blue-button';
import {AdminActions} from '../../../../actions/admin-actions';
import classNames from 'classnames';
export default function ReturnToReporterConfirmation(props) {
let returnToReporterSection;
if (props.showReturnToReporterConfirmation) {
if (!props.areReviewCommentsvisibleToReporter) {
returnToReporterSection = (
<div className={classNames(styles.container)}>
<div className={styles.container}>
<div className={styles.question}>
Are you sure you want to return this disclosure to the reporter?
</div>
......@@ -59,7 +58,7 @@ export default function ReturnToReporterConfirmation(props) {
);
} else {
returnToReporterSection = (
<div className={classNames(styles.container)}>
<div className={styles.container}>
<div className={styles.question}>
There are review comments set as visible to the reporter. To return the disclosure, please set these as
not visible to the reporter.
......
......@@ -45,4 +45,16 @@
padding-bottom: 17px;
border-bottom: 1px solid #AAA;
margin-bottom: 17px;
text-align: center;
}
@media (max-width: 950px) {
.container {
min-width: 150px;
padding: 10px;
}
.button {
min-width: 130px;
}
}
......
......@@ -85,3 +85,9 @@
border-bottom: 12px solid transparent;
border-left: 17px solid transparent;
}
@media (max-width: 950px) {
.filter {
padding: 0 22px 0 10px;
}
}
......
......@@ -36,3 +36,13 @@
.lastColumn {
padding: 12px 50px 0 0;
}
@media (max-width: 950px) {
.firstColumn {
padding: 12px 0 0 20px;
}
.lastColumn {
padding: 12px 20px 0 0;
}
}
......
......@@ -40,3 +40,13 @@
.headings .override.colTwoHeading {
padding: 10px 50px 10px 0;
}
@media (max-width: 950px) {
.headings .override.colOneHeading {
padding: 10px 0 10px 20px;
}
.headings .override.colTwoHeading {
padding: 10px 20px 10px 0;
}
}
......
......@@ -196,7 +196,7 @@ export class ListView extends React.Component {
{`COI ${this.context.userInfo.coiRole} DASHBOARD`}
</h2>
</div>
<div style={{padding: '33px 38px'}}>
<div className={styles.tableContainer}>
<DisclosureTable
sort={applicationState.sort}
sortDirection={applicationState.sortDirection}
......
......@@ -109,3 +109,21 @@
.showFilters .filterArrow {
transform: rotateZ(0);
}
.tableContainer {
padding: 33px 38px;
}
@media (max-width: 950px) {
.sidebar {
min-width: 230px;
}
.heading {
padding: 8px 47px 8px 0;
}
.tableContainer {
padding: 10px;
}
}
......
......@@ -35,3 +35,14 @@
.override.saveButton {
margin-bottom: 30px;
}
@media (max-width: 950px) {
.container {
padding: 0 0 0 10px;
min-width: 177px;
}
.saveAndUndo {
width: 169px;
}
}
......
......@@ -42,3 +42,17 @@
.requiredCheckbox {
padding: 0 0 10px 10px;
}
@media (max-width: 950px) {
.details {
padding: 0;
}
.requiredCheckbox {
padding: 0 0 10px 0;
}
.textarea {
margin-bottom: 20px;
}
}
......
......@@ -37,7 +37,8 @@
color: #525252;
font-weight: 300;
background-color: white;
min-height: 70px;
min-height: 75px;
border-bottom: 1px solid #e3e3e3;
}
.configurationArea {
......@@ -51,3 +52,9 @@
margin-bottom: 50px;
font-size: 18px;
}
@media (max-width: 950px) {
.configurationArea {
padding: 25px 10px;
}
}
......
......@@ -20,7 +20,7 @@ import styles from './style';
import classNames from 'classnames';
import React from 'react';
export default class ToggleSwitch extends React.Component {
export default class NotificationToggle extends React.Component {
constructor(props) {
super();
......@@ -57,7 +57,7 @@ export default class ToggleSwitch extends React.Component {
return (
<div className={styles.container}>
<span onClick={this.onClick} className={classes}>
<span style={{margin: '0 20px'}}>
<span className={styles.spacer}>
<span className={baseClasses}>
<span className={styles.label}>OFF</span>
<span className={styles.label}>ON</span>
......
......@@ -77,3 +77,13 @@
color: black;
border: 1px solid #E6E6E6;
}
.spacer {
margin: 0 20px;
}
@media (max-width: 950px) {
.spacer {
margin: 0;
}
}
......
......@@ -66,3 +66,9 @@
transform: translateY(43px);
transition: transform 0.1s ease-out;
}
@media (max-width: 950px) {
.container {
margin: 15px 10px 12px 10px;
}
}
......
......@@ -34,7 +34,6 @@ export default function DisclosureTypes(props) {
<DisclosureType type={annual} canToggle={true} />
<DisclosureType type={travel} canToggle={true} />
</div>
<div className={styles.optionRow} />
</div>
);
}
......
......@@ -37,3 +37,13 @@
font-size: 12px;
margin-bottom: 10px;
}
@media (max-width: 950px) {
.optionRow {
flex-direction: column;
}
.container {
padding: 10px 10px 0 10px;
}
}
......
......@@ -46,3 +46,17 @@
font-size: 12px;
margin-bottom: 10px;
}
@media (max-width: 950px) {
.container {
margin: 0 10px 15px 10px;
}
.notificationQuestion {
text-align: left;
}
.dueDateOptions {
flex-direction: column;
}
}
......
......@@ -23,3 +23,14 @@
.checkbox {
padding: 13px 20px;
}
@media (max-width: 950px) {
.checkbox {
padding: 13px 7px;
}
.label {
max-width: 280px;
display: inline-block;
}
}
......
......@@ -76,3 +76,9 @@
color: #555;
display: block;
}
@media (max-width: 950px) {
.bottom {
padding: 15px 10px 12px 10px;
}
}
......
......@@ -44,3 +44,9 @@
height: 53px;
border-top: 1px solid #AAA;
}
@media (max-width: 950px) {
.override.button {
min-width: 60px;
}
}
......
......@@ -115,3 +115,19 @@
:global(.color-blind) .warning {
color: black;
}
@media (max-width: 950px) {
.override.button,
.override.nonFloatButton {
min-width: 60px;
}
.subQuestion.container {
margin-left: 25px;
}
.bottom {
padding: 10px 5px 10px 5px;
font-size: 12px;
}
}
......
......@@ -42,7 +42,8 @@
color: #525252;
font-weight: 300;
background-color: white;
min-height: 70px;
min-height: 75px;
border-bottom: 1px solid #e3e3e3;
}
.configurationArea {
......@@ -54,3 +55,9 @@
.configSection {
min-width: 200px;
}
@media (max-width: 950px) {
.configurationArea {
padding: 25px 10px;
}
}
......
......@@ -91,7 +91,7 @@ export default class RelationshipType extends React.Component {
</BlueButton>
<label htmlFor={`rtcb${this.props.typeCd}`} className={styles.name}>{this.props.name}</label>
</div>
<div className={'flexbox row'} style={{paddingLeft: 27}}>
<div className={`flexbox row ${styles.typeSection}`}>
<span className={styles.left}>
<input id="typeCheckbox" type="checkbox" ref="typeEnabled" checked={this.props.typeEnabled === 1} onChange={this.typeEnabledChanged} />
<label htmlFor="typeCheckbox" className={styles.checkboxLabel}>Type</label>
......@@ -137,7 +137,7 @@ export default class RelationshipType extends React.Component {
return (
<div className={`flexbox row ${this.props.className}`}>
<span style={{margin: '0 10px 0 20px'}}>
<span className={styles.container}>
<input
type="checkbox"
id={`rtcb${this.props.typeCd}`}
......
......@@ -16,6 +16,10 @@
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
.container {
margin: 0 10px 0 20px;
}
.collapsedContent {
border-bottom: 1px solid #E6E6E6;
padding-bottom: 20px;
......@@ -53,3 +57,27 @@
padding-left: 27px;
margin: 40px 0;
}
.typeSection {
padding-left: 27;
}
@media (max-width: 950px) {
.container {
margin: 0 10px 0 0;
}
.typeSection,
.amountSection {
padding-left: 0;
}
.left {
padding-right: 0;
min-width: 100px;
}
.checkboxLabel {
margin-left: 5px;
}
}
......
......@@ -132,9 +132,9 @@ export default class Relationship extends React.Component {
className={this.props.className}
>
<Panel title="Relationship Matrix People Configuration">
<div style={{padding: '7px 21px 15px 21px'}}>
<div className={styles.container}>
<div className={styles.panelInstructions}>Configure the people types for your relationship matrix:</div>
<div className={'flexbox row'} style={{paddingLeft: 27}}>
<div className={'flexbox row'}>
<span className={styles.peopleLeft}>
<input
id="peopleCheckbox"
......@@ -155,7 +155,7 @@ export default class Relationship extends React.Component {
</div>
</Panel>
<Panel title="Relationship Matrix Configuration">
<div style={{padding: '7px 21px 15px 21px'}}>
<div className={styles.container}>
<div className={styles.panelInstructions}>Configure the relationship types for your relationship matrix:</div>
{matrixTypes}
</div>
......
......@@ -17,11 +17,11 @@
*/
.container {
min-height: 100px;
padding: 7px 21px 15px 21px;
}
.peopleLeft {
padding-right: 25px;
padding: 0 25px 0 27px;
}
.panelInstructions {
......@@ -34,3 +34,14 @@
margin-left: 10px;
vertical-align: middle;
}
@media (max-width: 950px) {
.container {
padding: 7px 0 15px 0;
}
.peopleLeft {
padding: 0 10px 0 0;
min-width: 95px;
}
}
......
......@@ -120,7 +120,7 @@ export default class TravelRelationshipType extends RelationshipType {
return (
<div className={`flexbox row ${this.props.className}`}>
<span style={{margin: '0 10px 0 20px'}}>
<span className={styles.container}>
<input
type="checkbox"
id={`rtcb${this.props.typeCd}`}
......
......@@ -16,6 +16,10 @@
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
.container {
margin: 0 10px 0 20px;
}
.collapsedContent {
border-bottom: 1px solid #E6E6E6;
padding-bottom: 20px;
......@@ -53,3 +57,17 @@
padding-left: 27px;
margin: 40px 0;
}
@media (max-width: 950px) {
.container {
margin: 0 10px 0 0;
}
.left {
padding-right: 0;
}
.amountSection {
padding-left: 0;
}
}
......
......@@ -37,3 +37,9 @@
color: #525252;
padding-top: 3px;
}
@media (max-width: 950px) {
.saveText {
padding-left: 7px;
}
}
......
......@@ -54,3 +54,21 @@
:global(.color-blind) .active {
border-right: 5px solid black;
}
@media (max-width: 950px) {
.container {
min-width: 230px;
}
.step {
padding: 20px 20px 20px 20px;
}
.firstWord {
font-size: 26px;
}
.rest {
font-size: 21px;
}
}
......
......@@ -37,3 +37,9 @@
font-size: 17px;
color: #525252;
}
@media (max-width: 950px) {
.undoText {
padding-left: 7px;
}
}
......
......@@ -27,3 +27,9 @@
.override.entities {
margin-bottom: 25px;
}
@media (max-width: 950px) {
.container {
padding: 15px 10px;
}
}
......
......@@ -118,3 +118,9 @@
height: initial;
}
}
@media (max-width: 950px) {
.sidebar {
min-width: 230px;
}
}
......
......@@ -26,7 +26,7 @@ export default function BackToDashboard(props) {
<div className={`${styles.container} ${props.className}`}>
<div>
<i className={'fa fa-arrow-left'} />
<span style={{marginLeft: 15}}>BACK TO DASHBOARD</span>
<span className={styles.label}>BACK TO DASHBOARD</span>
</div>
</div>
</Link>
......
......@@ -28,6 +28,17 @@
box-shadow: 0 0 10px #CCC;
}