From 0cb37fc38deb8d7ac58773e6e0b220fc6ca02962 Mon Sep 17 00:00:00 2001 From: Mark Fields Date: Sun, 3 Jun 2018 18:32:53 -0400 Subject: [PATCH 1/3] PREP-109 adjustable title filter --- .../publisherPage/styles/style-filters.scss | 15 +- app/style/_poly-fluid-sizing.scss | 128 ++++++++++++++++++ 2 files changed, 132 insertions(+), 11 deletions(-) create mode 100644 app/style/_poly-fluid-sizing.scss diff --git a/app/components/publisherPage/styles/style-filters.scss b/app/components/publisherPage/styles/style-filters.scss index 0eccabd..6c9f7e0 100644 --- a/app/components/publisherPage/styles/style-filters.scss +++ b/app/components/publisherPage/styles/style-filters.scss @@ -1,4 +1,5 @@ @import '../../../style/variables'; +@import '../../../style/poly-fluid-sizing'; .publisherContent { @@ -154,21 +155,13 @@ padding: 0 13px 0 16px; .titleFilterText { - max-width: 360px; max-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - } - @media (max-width: 866px) { - .titleFilterText { - max-width: 330px; - } - } - @media (max-width: 840px) { - .titleFilterText { - max-width: 260px; - } + + $widthMap: (960px: 390px, 768px: 190px); + @include poly-fluid-sizing('width', $widthMap) } .titleFilterX { diff --git a/app/style/_poly-fluid-sizing.scss b/app/style/_poly-fluid-sizing.scss new file mode 100644 index 0000000..1ae78b2 --- /dev/null +++ b/app/style/_poly-fluid-sizing.scss @@ -0,0 +1,128 @@ +/// linear-interpolation +/// Calculate the definition of a line between two points +/// @param $map - A SASS map of viewport widths and size value pairs +/// @returns A linear equation as a calc() function +/// @example +/// font-size: linear-interpolation((320px: 18px, 768px: 26px)); +/// @author Jake Wilson +@function linear-interpolation($map) { + $keys: map-keys($map); + @if (length($keys) != 2) { + @error "linear-interpolation() $map must be exactly 2 values"; + } + // The slope + $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1)); + + // The y-intercept + $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1); + + // Determine if the sign should be positive or negative + $sign: "+"; + @if ($b < 0) { + $sign: "-"; + $b: abs($b); + } + + @return calc(#{$m*100}vw #{$sign} #{$b}); +} + + +/// list-remove +/// Remove an item from a list +/// @param $list - A SASS list +/// @param $index - The list index to remove +/// @returns A SASS list +/// @author Jake Wilson +@function list-remove($list, $index) { + $newList: (); + @for $i from 1 through length($list) { + @if $i != $index { + $newList: append($newList, nth($list,$i), 'space'); + } + } + @return $newList; +} + + +/// list-sort +/// Sort a SASS list +/// @param $list - A SASS list +/// @returns A sorted SASS list +/// @requires function list-remove +/// @author Jake Wilson +@function list-sort($list) { + $sortedlist: (); + @while length($list) > 0 { + $value: nth($list,1); + @each $item in $list { + @if $item < $value { + $value: $item; + } + } + $sortedlist: append($sortedlist, $value, 'space'); + $list: list-remove($list, index($list, $value)); + } + @return $sortedlist; +} + + +/// map-sort +/// Sort map by keys +/// @param $map - A SASS map +/// @returns A SASS map sorted by keys +/// @requires function list-sort +/// @author Jake Wilson +@function map-sort($map) { + $keys: list-sort(map-keys($map)); + $sortedMap: (); + @each $key in $keys { + $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key))); + } + @return $sortedMap; +} + + +/// poly-fluid-sizing +/// Generate linear interpolated size values through multiple break points +/// @param $property - A string CSS property name +/// @param $map - A SASS map of viewport unit and size value pairs +/// @requires function linear-interpolation +/// @requires function map-sort +/// @example +/// @include poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px)); +/// @author Jake Wilson +@mixin poly-fluid-sizing($property, $map) { + // Get the number of provided breakpoints + $length: length(map-keys($map)); + + // Error if the number of breakpoints is < 2 + @if ($length < 2) { + @error "poly-fluid-sizing() $map requires at least values" + } + + // Sort the map by viewport width (key) + $map: map-sort($map); + $keys: map-keys($map); + + // Minimum size + #{$property}: map-get($map, nth($keys,1)); + + // Interpolated size through breakpoints + @for $i from 1 through ($length - 1) { + @media (min-width:nth($keys,$i)) { + $value1: map-get($map, nth($keys,$i)); + $value2: map-get($map, nth($keys,($i + 1))); + // If values are not equal, perform linear interpolation + @if ($value1 != $value2) { + #{$property}: linear-interpolation((nth($keys,$i): $value1, nth($keys,($i+1)): $value2)); + } @else { + #{$property}: $value1; + } + } + } + + // Maxmimum size + @media (min-width:nth($keys,$length)) { + #{$property}: map-get($map, nth($keys,$length)); + } +} \ No newline at end of file From 9b778507f25aa66f7cd616fcecc346ec19593cda Mon Sep 17 00:00:00 2001 From: Mark Fields Date: Mon, 4 Jun 2018 02:22:16 -0400 Subject: [PATCH 2/3] PREP-109 all UI changes done --- .../landingPage/styles/style-landingPage.scss | 33 +- app/components/learnMorePage/learnMorePage.js | 81 ----- .../learnMorePage/style-learnMorePage.scss | 342 ------------------ .../mainContainer/style-mainContainer.scss | 2 +- .../publisherPage/components/checkBox.js | 24 +- .../publisherPage/components/checksFilter.js | 42 +-- .../publisherPage/components/checksSection.js | 53 ++- .../publisherPage/components/totals.js | 32 -- app/components/publisherPage/publisherPage.js | 51 +-- .../publisherPage/styles/style-checkBox.scss | 23 +- .../styles/style-checksSection.scss | 69 +++- .../publisherPage/styles/style-filters.scss | 186 +++++----- .../styles/style-publisherPage.scss | 213 ++++++++--- .../styles/style-titleSearch.scss | 18 +- .../publisherPage/styles/style-totals.scss | 86 ----- .../styles/style-tutorialOverlay.scss | 41 ++- app/index.js | 2 - app/style/_commonStyles.scss | 50 --- app/utilities/editableText/headlineText.js | 2 +- 19 files changed, 454 insertions(+), 896 deletions(-) delete mode 100644 app/components/learnMorePage/learnMorePage.js delete mode 100644 app/components/learnMorePage/style-learnMorePage.scss delete mode 100644 app/components/publisherPage/components/totals.js delete mode 100644 app/components/publisherPage/styles/style-totals.scss delete mode 100644 app/style/_commonStyles.scss diff --git a/app/components/landingPage/styles/style-landingPage.scss b/app/components/landingPage/styles/style-landingPage.scss index f943c64..7df958f 100644 --- a/app/components/landingPage/styles/style-landingPage.scss +++ b/app/components/landingPage/styles/style-landingPage.scss @@ -32,6 +32,15 @@ box-sizing: border-box; padding-bottom: 16px; + @media (max-width: 768px) { + max-width: 736px; + } + + @media (max-width: 480px) { + max-width: 461px; + width: 100%; + } + .searchTitle { margin: 11.5px 0 10.5px 4%; color: white; @@ -39,31 +48,21 @@ font-size: 20px; position: relative; + @media (max-width: 480px) { + margin: 11.5px 0 10.5px 2%; + } + .bannerText { position: absolute; bottom: 65px; margin: 0; - color: black; + color: #4F5858; font-size: 22px; font-family: $regularFont; } - } @media (max-width: 480px) { - .searchTitle { - margin: 11.5px 0 10.5px 2%; - } - } - } @media (max-width: 768px) { - .searchContainer { - max-width: 736px; - } - } @media (max-width: 480px) { - .searchContainer { - max-width: 461px; - width: 100%; } } - } .content { @@ -140,7 +139,7 @@ } .button { - height: 48px; + height: 44px; width: 208px; background-color: white; justify-content: center; @@ -149,7 +148,7 @@ font-family: $regularFont; cursor: pointer; border: 2px solid #4F5858; - border-radius: 5px; + border-radius: 3px; @media (max-width: 768px) { margin-top: 21px; diff --git a/app/components/learnMorePage/learnMorePage.js b/app/components/learnMorePage/learnMorePage.js deleted file mode 100644 index 5ed0dbd..0000000 --- a/app/components/learnMorePage/learnMorePage.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import deployConfig from "../../../deployConfig" - - - - - - -export default class LearnMorePage extends React.Component { - - render() { - return( -
-
- -
-
-
this.props.history.push(`${deployConfig.baseUrl}`)}>Find a member
-
Learn more
-
-
- -
- -
- -
-

Comprehensive metadata makes publications discoverable.

-

Make sure your content can be found.

-
-
-
- -
- - -
- -
-
-
-
-

Learn more about Participation Reports

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
-
- - -
-
-
-

What problem does Participation Reports solve?

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
- -
- -
-
- - -
-
- -
- -
-
-

How does Participation Reports work?

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
-
-
- -
- ) - } -} \ No newline at end of file diff --git a/app/components/learnMorePage/style-learnMorePage.scss b/app/components/learnMorePage/style-learnMorePage.scss deleted file mode 100644 index 648ae4a..0000000 --- a/app/components/learnMorePage/style-learnMorePage.scss +++ /dev/null @@ -1,342 +0,0 @@ -@import '../../style/variables'; -@import '../../style/commonStyles'; - - -.learnMorePage { - display: flex; - flex-direction: column; - align-items: center; - - .topStripe { - @extend %topStripe; - background-image: url("images/PR_Banner_3.png"); - - .widthContainer { - - .contentBox { - justify-content: flex-start; - flex-wrap: initial; - - .leftBox { - max-Width: 508px; - min-Width: 352px; - height: 90px; - overflow: visible; - padding-left: 28px; - margin-right: 20px; - flex: .7; - z-index: 1; - - } @media(max-width: 768px) { - .leftBox { - max-width: 352px; - width: 46%; - min-width: auto; - } - } @media(max-width: 700px) { - .leftBox { - display: none; - } - } - - .rightBox { - flex: .715; - max-width: 400px; - min-width: 301px; - margin-top: 16px; - padding-left: 15px; - - .firstText { - margin: 0; - font-size: 20px; - font-family: $regularFont; - color: #4F5757; - } - - .blueText { - margin: 0 0 3px 0; - font-size: 20px; - font-family: $regularFont; - color: #3EB1CB; - font-weight: bold; - max-width: 266px - } @media(max-width: 768px) { - .blueText { - max-width: 560px; - line-height: 17px; - } - } @media(max-width: 700px) { - .blueText { - margin-top: 13px; - line-height: normal; - } - } - - } @media(max-width: 768px) { - .rightBox { - max-width: 560px; - flex: 1; - flex-basis: 100%; - margin: auto; - margin-top: 16px; - min-height: 70px; - } - } @media(max-width: 700px) { - .rightBox { - padding-top: 10px; - padding-right: 15px; - min-width: 0; - } - } - - } @media(max-width: 768px) { - .contentBox{ - flex-direction: column-reverse; - align-items: initial; - } - } - } - } - - .infoSection { - height: 1232px; - width: 100%; - max-width: 960px; - background-image: url("images/learn_more_960.png"); - background-repeat: no-repeat; - background-position-y: 135px; - background-size: 100% 82.1%; - - .whiteSection { - height: 300px; - width: 100%; - justify-content: flex-end; - display: flex; - - .leftSide { - flex: .7; - padding-left: 28px; - margin-right: 20px; - } - - .rightSide { - flex: .715; - max-width: 400px; - height: 100%; - padding-left: 15px; - display: flex; - justify-content: flex-start; - - .textSection { - height: 100%; - max-width: 353px; - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - font-family: $regularFont; - padding-right: 20px; - padding-top: 35px; - color: #4F5757; - - p {margin: 0;} - - .boldText { - font-size: 16px; - font-weight: bold; - width: 200px; - margin-bottom: 23px; - } - } - } - - } - @media(max-width: 700px) { - .whiteSection { - height: auto; - padding-bottom: 20px; - background-color: #F2F1F1; - - .leftSide { display: none } - - .rightSide { - max-width: initial; - display: flex; - justify-content: center; - flex: 1; - - .textSection { - padding-top: 45px; - - .boldText { - margin-bottom: 10px; - } - - .mainText { - line-height: 20px; - } - } - } - } - } - - - - .orangeSection { - height: 370px; - width: 100%; - display: flex; - - .rightSide { - flex: 1; - display: flex; - justify-content: center; - } - - .leftSide { - flex: 1; - display: flex; - justify-content: flex-end; - - .textSection { - width: auto; - height: 100%; - font-family: $regularFont; - display: flex; - flex-direction: column; - justify-content: center; - color: #4F5757; - padding-left: 20px; - - p {margin: 0;} - - .boldText { - font-size: 16px; - font-weight: bold; - width: 220px; - margin-bottom: 23px; - } - } - } - - - } - @media(max-width: 700px) { - .orangeSection { - height: auto; - padding-bottom: 20px; - background-color: #F2F1F1; - - .rightSide { - display: none - } - - .leftSide { - display: flex; - justify-content: center; - padding-left: 15px; - - .textSection { - padding-left: 0; - padding-right: 20px; - - .boldText { - margin-bottom: 10px; - } - - .mainText { - line-height: 20px; - } - } - } - } - } - - .blueSection { - height: 350px; - width: 100%; - display: flex; - - .leftSide { - flex: .7; - display: flex; - justify-content: center; - margin-right: 20px; - padding-left: 28px; - } - - .rightSide { - flex: .715; - display: flex; - justify-content: flex-start; - padding-left: 15px; - max-width: 400px; - - .textSection { - width: 100%; - height: 100%; - font-family: $regularFont; - display: flex; - flex-direction: column; - justify-content: center; - padding-right: 20px; - - p { - color: white; - margin: 0; - } - - .boldText { - font-size: 16px; - font-weight: bold; - max-width: 300px; - margin-bottom: 23px; - } - } - } - } - @media (max-width: 700px) { - .blueSection { - height: auto; - padding-bottom: 30px; - background-color: #F2F1F1; - - .leftSide { - display:none; - } - - .rightSide { - flex: 1; - display: flex; - justify-content: center; - max-width: initial; - - .textSection { - width: auto; - - p {color:black} - - .boldText { - margin-bottom: 10px; - } - - .mainText { - line-height: 20px; - } - } - } - } - } - - - } - @media (max-width: 700px) { - .infoSection { - background-image: none; - height: auto; - padding-bottom: 130px; - } - } - - -} \ No newline at end of file diff --git a/app/components/mainContainer/style-mainContainer.scss b/app/components/mainContainer/style-mainContainer.scss index f9f1363..fff7aa4 100644 --- a/app/components/mainContainer/style-mainContainer.scss +++ b/app/components/mainContainer/style-mainContainer.scss @@ -31,7 +31,7 @@ body { .participationLogo { width: 115px; cursor: pointer; - margin-bottom: 5px; + margin-bottom: 15px; } .crossrefLogo { diff --git a/app/components/publisherPage/components/checkBox.js b/app/components/publisherPage/components/checkBox.js index ea766e5..a3656e2 100644 --- a/app/components/publisherPage/components/checkBox.js +++ b/app/components/publisherPage/components/checkBox.js @@ -93,10 +93,10 @@ export default class CheckBox extends React.Component {
{!mobileTooltipOpen && - + } {mobile && - this.props.setOpenTooltip(undefined)}/>} + this.props.setOpenTooltip(undefined)}/>}
diff --git a/app/components/publisherPage/components/checksFilter.js b/app/components/publisherPage/components/checksFilter.js index 21b8063..400ea79 100644 --- a/app/components/publisherPage/components/checksFilter.js +++ b/app/components/publisherPage/components/checksFilter.js @@ -29,47 +29,43 @@ export default class ChecksFilter extends React.Component { return (
this.setState((prevState) => ({menuOpen: !prevState.menuOpen}))} onBlur={() => this.setState({menuOpen: false})} tabIndex="0" > {this.props.children} -

{this.props.currentFilter}

+

{this.props.currentFilter}

{this.state.menuOpen && -
+
-
-
- {this.props.label} -
+ {this.props.filters.map( filter => +
this.props.setFilter(filter)}> +
- {this.props.filters.map( filter => -
this.props.setFilter(filter)}> -
+ {filter === this.props.currentFilter && + } - {filter === this.props.currentFilter && - } +
-
+
-
+ {prettyKeys(filter)} - {prettyKeys(filter)} +
+
)} -
-
)} - -
} +
} {this.props.tutorial} diff --git a/app/components/publisherPage/components/checksSection.js b/app/components/publisherPage/components/checksSection.js index f1d0d09..4ef6426 100644 --- a/app/components/publisherPage/components/checksSection.js +++ b/app/components/publisherPage/components/checksSection.js @@ -26,7 +26,6 @@ export default class ChecksSection extends React.Component { coverage: is.object.isRequired, memberId: is.string.isRequired, loadingChecks: is.bool.isRequired, - tutorialOverlay: is.bool.isRequired } @@ -50,7 +49,9 @@ export default class ChecksSection extends React.Component { loadingStage: 0, keySig: this.generateKey(defaultContent, defaultDate), coverageError: false, - filterError: false + filterError: false, + tutorialOverlay: false, + tutorialOverlayFadeIn: false, } } @@ -91,6 +92,16 @@ export default class ChecksSection extends React.Component { } + componentDidUpdate (prevProps, prevState) { + if(!prevState.tutorialOverlay && this.state.tutorialOverlay) { + this.setState({tutorialOverlayFadeIn: true}) + } + if(prevState.tutorialOverlay && !this.state.tutorialOverlay) { + this.setState({tutorialOverlayFadeIn: false}) + } + } + + componentWillReceiveProps (nextProps) { if(!nextProps.loadingChecks && this.props.loadingChecks) { clearTimeout(this.loadingTimeout) @@ -276,7 +287,7 @@ export default class ChecksSection extends React.Component { renderLoader = () => { return ( -
+
{this.state.loadingStage === 1 &&
@@ -308,7 +319,7 @@ export default class ChecksSection extends React.Component { tutorial={tutorialOverlay ? contentFilterTutorial : undefined} /> -
+
+ src={`${deployConfig.baseUrl}assets/images/Asset_Icons_White_Close.svg`}/> : - +
@@ -359,19 +371,23 @@ export default class ChecksSection extends React.Component { render () { - const {contentFilter, titleChecksData, dateChecksData} = this.state - const {coverage, tutorialOverlay} = this.props + const {contentFilter, titleChecksData, dateChecksData, tutorialOverlay, tutorialOverlayFadeIn} = this.state + const {coverage} = this.props return (
{`Content type: ${prettyKeys(contentFilter)}`} -
- {tutorialOverlay && - - {this.renderFilters(tutorialOverlay)} - } +
+ this.setState({tutorialOverlay: false})} + onMouseDown={ () => this.setState( prevState => ({tutorialOverlay: !prevState.tutorialOverlay}))}/> +
+
{this.renderFilters()} @@ -380,7 +396,10 @@ export default class ChecksSection extends React.Component { {this.renderLoader()} {this.state.coverageError ?
No content has been registered for this member.
- :
No content has been registered for this content type within this date range. Please change the date filter.
} + :
+

No content registered for the selected date range.

+ Select another date range. +
}
: @@ -415,6 +434,12 @@ export default class ChecksSection extends React.Component { } } + +
+
+ {this.renderFilters(tutorialOverlay)} +
+
) } diff --git a/app/components/publisherPage/components/totals.js b/app/components/publisherPage/components/totals.js deleted file mode 100644 index b91c532..0000000 --- a/app/components/publisherPage/components/totals.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import is from 'prop-types' - -import {prettyKeys} from "../../../utilities/helpers" - - - - - -Totals.propTypes = { - totals: is.object -} - - -export default function Totals ({totals}) { - - const total = Object.keys(totals).reduce( (sum, key) => sum + totals[key], 0) - - return ( -
-
- {Object.keys(totals).map((key) => totals[key] ?

{`${prettyKeys(key)}: ${totals[key].toLocaleString()}`}

: null)} -
-
- {Object.keys(totals).map((key) => totals[key] ?

{`${prettyKeys(key)}: ${totals[key].toLocaleString()}`}

: null)} -
- -

{total.toLocaleString()}

-

Total registered content items

-
- ) -} \ No newline at end of file diff --git a/app/components/publisherPage/publisherPage.js b/app/components/publisherPage/publisherPage.js index f24fa4d..8cd590f 100644 --- a/app/components/publisherPage/publisherPage.js +++ b/app/components/publisherPage/publisherPage.js @@ -1,7 +1,6 @@ import React from 'react' import is from 'prop-types' -import Totals from './components/totals' import {prettyKeys} from '../../utilities/helpers' import deployConfig from "../../../deployConfig" import ChecksSection from './components/checksSection' @@ -33,8 +32,6 @@ export default class PublisherPage extends React.Component { totals: {}, coverage: {}, loadingChecks: true, - tutorialOverlay: false, - tutorialOverlayFadeIn: false, } @@ -49,19 +46,8 @@ export default class PublisherPage extends React.Component { } - componentDidUpdate (prevProps, prevState) { - if(!prevState.tutorialOverlay && this.state.tutorialOverlay) { - this.setState({tutorialOverlayFadeIn: true}) - } - if(prevState.tutorialOverlay && !this.state.tutorialOverlay) { - this.setState({tutorialOverlayFadeIn: false}) - } - } - - render() { const totals = this.state.totals - const desktop = window.matchMedia("(min-width: 768px)").matches return (
@@ -73,23 +59,13 @@ export default class PublisherPage extends React.Component { -
- {desktop && - this.setState({tutorialOverlay: false})} - onMouseDown={ () => this.setState( prevState => ({tutorialOverlay: !prevState.tutorialOverlay}))}/>} -
-
-

{headlineText.checksPage.smallText}

-

{headlineText.checksPage.bigText}

+

{headlineText.checksPage.smallText}

+

{headlineText.checksPage.bigText}

@@ -97,10 +73,23 @@ export default class PublisherPage extends React.Component { {this.props.location.state.publisherName}
- +
+

+ {Object.keys(totals).reduce( (sum, key) => sum + totals[key], 0).toLocaleString()} +

+

Total registered content items

+
+ +
+ {Object.keys(totals).map((key) => + totals[key] + ?

{prettyKeys(key)} {totals[key].toLocaleString()}

+ : null + )} +
@@ -112,14 +101,6 @@ export default class PublisherPage extends React.Component { tutorialOverlay={this.state.tutorialOverlay} loadingChecks={this.state.loadingChecks}/> -
-
-
- -
diff --git a/app/components/publisherPage/styles/style-checkBox.scss b/app/components/publisherPage/styles/style-checkBox.scss index fdd7638..e8166a2 100644 --- a/app/components/publisherPage/styles/style-checkBox.scss +++ b/app/components/publisherPage/styles/style-checkBox.scss @@ -3,25 +3,29 @@ .checksContainer { .check { - height: 91px; width: 256px; - margin: 0 32px 69px 32px; + margin: 0 32px 53px 32px; .title { width: 100%; - height: 43px; + height: 60px; font-size: 19px; font-family: $regularFont; color: #4F5757; display: flex; justify-content: space-between; - align-items: center; + align-items: flex-end; box-sizing: border-box; padding-right: 4px; + padding-bottom: 12px; + position: relative; .tooltipIconContainer { - height: 100%; + position: absolute; + right: 0; + top: 0; + height: 22px; .hoverArea { position: relative; @@ -82,6 +86,15 @@ box-shadow: 0px 0px 3px 2px #8e8a8a; pre {margin: 0; white-space: pre-wrap; font-family: $regularFont} + + .tooltipCloseButton { + position: absolute; + top: 6px; + right: 6px; + height: 17px; + width: 17px; + cursor: pointer; + } } .mobileTooltip { diff --git a/app/components/publisherPage/styles/style-checksSection.scss b/app/components/publisherPage/styles/style-checksSection.scss index c56226b..5d66fb9 100644 --- a/app/components/publisherPage/styles/style-checksSection.scss +++ b/app/components/publisherPage/styles/style-checksSection.scss @@ -3,7 +3,6 @@ .publisherContent { .checksSection { - margin-top: 32px; background-color: white; height: auto; max-width: 960px; @@ -11,21 +10,46 @@ position: relative; .titleBar { - height: 48px; - width: 100%; + height: 32px; + width: calc(100% - 32px); background-color: #4F5757; - padding-left: 32px; + margin-left: 16px; + margin-right: 16px; color: white; display: flex; align-items: center; - font-size: 18px; + font-size: 14px; font-family: $regularFont; box-sizing: border-box; + padding-left: 16px; + + @media (max-width: 704px) { + margin: 0; + width: 100%; + } + + .tutorialIconContainer { + position: absolute; + right: 0; + display: flex; + align-items: center; + padding-right: 20px; + + @media (max-width: 704px) { + visibility: hidden; + } + + .tutorialIcon { + height: 20px; + cursor: pointer; + outline: none; + } + } } .loadWhiteScreen { position: absolute; - top: -100px; + top: -70px; bottom: 0; left: 0; right: 0; @@ -33,10 +57,9 @@ opacity: .7; margin-bottom: 21px; z-index: 10; - } - @media (max-width: 767px) { - .loadWhiteScreen { - top: -230px + + @media (max-width: 704px) { + top: -200px } } @@ -94,18 +117,36 @@ height: 619px; background-color: white; display: flex; - padding: 20px 40px 323px 40px; + padding: 20px 16px 323px 16px; align-items: center; justify-content: center; box-sizing: border-box; font-family: $regularFont; font-weight: 500; text-align: center; - } - @media (max-width: 767px) { - .coverageError { + + @media (max-width: 704px) { align-items: flex-start; } + + .filterError { + background-color: #FFDD80; + height: 96px; + width: calc(100% - 32px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 11; + color: #4F5858; + position: absolute; + top: 0; + padding: 0 10px; + box-sizing: border-box; + border-radius: 2px; + + p {margin: 0} + } } } } diff --git a/app/components/publisherPage/styles/style-filters.scss b/app/components/publisherPage/styles/style-filters.scss index 6c9f7e0..3716983 100644 --- a/app/components/publisherPage/styles/style-filters.scss +++ b/app/components/publisherPage/styles/style-filters.scss @@ -4,15 +4,23 @@ .publisherContent { .filters { - min-height: 101px; - height: auto; width: 100%; display: flex; flex-wrap: wrap; - padding: 0 32px 45px 32px; + padding: 16px 16px 37px 16px; box-sizing: border-box; align-items: flex-end; position: relative; + color: #4F5858; + + @media (max-width: 704px) { + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 176px; + padding: 32px 0 0 0; + margin-bottom: 37px; + } .inactiveFilter { pointer-events: none; @@ -21,53 +29,104 @@ } .filter { - height: 40px; - min-width: 192px; + height: 32px; border: #4F5757 solid 2px; + border-radius: 3px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; - font-size: 13px; + font-size: 12px; font-family: $regularFont; background-color: white; position: relative; } - .publicationFilter { - max-width: 448px; - width: 100%; - margin-left: 16px; - margin-right: 16px; + .publicationFilterContainer { + flex: 1; + display: flex; + align-items: center; + + .publicationFilter { + max-width: 480px; + width: 100%; + margin-left: 16px; + margin-right: 16px; + + @media (max-width: 704px) { + width: 288px; + margin-left: 0; + margin-right: 0; + } + } + } + + .iconFilter { + padding-left: 30px !important; + + @media (min-width: 705px) { + width: 172px !important; + } + + .filterIcon { + position: absolute; + left: 7px; + width: 22px; + } + + .filterList { + @media (min-width: 705px) { + width: 172px !important; + } + } } .checksFilter { - min-width: 208px; - border-radius: 1px; - justify-content: flex-start; - padding: 0 14px 0 12px; + width: 160px; + padding: 0 30px 0 7px; cursor: pointer; outline: none; + @media (max-width: 704px) { + width: 288px; + margin-right: 0; + } + + .filterArrow { + width: 20px; + height: 20px; + position: absolute; + right: 8px; + } + .filterList { position: absolute; height: auto; - width: 208px; - top: 60px; + width: 192px; + top: 37px; left: -2px; border: 1px solid #4F5757; background-color: white; box-sizing: border-box; padding: 10px 0 8px 0; - z-index: 11; + z-index: 12; box-shadow: 0px 3px 3px 1px #8e8a8a; + @media (max-width: 704px) { + width: 288px; + left: -2px; + } + .filterButton { width: 100%; display: flex; height: 25px; cursor: pointer; + @media (max-width: 704px) { + margin: 8px 0; + } + .checkmark { width: 32px; height: 100%; @@ -80,66 +139,13 @@ font-size: 13px; display: flex; align-items: center; - } - } - .filterButton:hover { - .buttonText { - color: #3EB1CB; - } - } - @media (max-width: 767px) { - .filterButton { - margin: 8px 0; - } - } - } - - .filterList:after { - content: ''; - position: absolute; - top: -10px; - left: 91px; - width: 0; - height: 0; - border: 13.5px solid white; - transform: rotate(135deg); - } - - .filterList:before { - content: ''; - position: absolute; - top: -12px; - left: 93px; - width: 0; - height: 0; - border-left: 11.5px solid #4F5757; - border-bottom: 11.5px solid #4F5757; - border-top: 11.5px solid transparent; - border-right: 11.5px solid transparent; - box-shadow: 0px 0px 3px 0px #8e8a8a; - transform: rotate(135deg); - } - - } - @media (max-width: 767px) { - .checksFilter { - width: 256px; - margin-right: 0; - - .filterList { - width: 256px; - left: -2px; - } - .filterList:after { - left: 114px - } - - .filterList:before { - left: 116px + &:hover { + color: #3EB1CB; + } + } } } - } .inactivePublicationFilter { @@ -153,14 +159,17 @@ display: flex; justify-content: space-between; padding: 0 13px 0 16px; + max-width: 480px; + background-color: #4F5858; .titleFilterText { max-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + color: white; - $widthMap: (960px: 390px, 768px: 190px); + $widthMap: (908px: 410px, 705px: 210px); @include poly-fluid-sizing('width', $widthMap) } @@ -177,30 +186,5 @@ border: #a1a1a1 solid 2px; color: #a1a1a1; } - - } - @media (max-width: 767px) { - .filters { - flex-direction: column; - align-items: center; - justify-content: space-between; - height: 184px; - padding: 16px 0 0 0; - margin-bottom: 46px; - - .publicationFilter { - width: 256px; - margin-left: 0; - margin-right: 0; - } - - .timeFilterContainer { - flex: none; - - .timeFilter { - width: 256px; - } - } - } } } diff --git a/app/components/publisherPage/styles/style-publisherPage.scss b/app/components/publisherPage/styles/style-publisherPage.scss index b4ae9c5..98bd9b8 100644 --- a/app/components/publisherPage/styles/style-publisherPage.scss +++ b/app/components/publisherPage/styles/style-publisherPage.scss @@ -1,5 +1,4 @@ @import '../../../style/variables'; -@import '../../../style/commonStyles'; .publisherPage { @@ -10,36 +9,70 @@ width: 100%; margin-bottom: 32px; + @media(max-width: 700px) { + margin-bottom: 96px; + } + .topStripe { - @extend %topStripe; background-image: url("images/PR_Banner_2.png"); + width: 100%; + height: 240px; + display: flex; + justify-content: center; + + @media(max-width: 875px) { + height: auto; + background-position: 0 28px; + } .widthContainer { + max-width: 960px; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; .topBar { position: relative; + height: 48px; + width: 100%; + background-color: #4F5757; + display: flex; - .tutorialIconContainer { - position: absolute; - right: 0; + .button { + flex: 1; height: 100%; + max-width: 240px; + color: white; + font-size: 18px; + font-family: $regularFont; display: flex; + justify-content: center; align-items: center; - padding-right: 15px; + cursor: pointer; - .tutorialIcon { - height: 30px; - cursor: pointer; - outline: none; - } - } @media (max-width: 767px) { - .tutorialIconContainer { - visibility: hidden; - } + a { color: white; text-decoration: none } + a:visited { color: white } } } .contentBox { + flex: 1; + display: flex; + justify-content: center; + flex-wrap: wrap; + align-items: center; + + @media (max-width: 875px) { + height: 224px; + box-sizing: border-box; + padding-bottom: 26px; + } + + @media (max-width: 600px) { + height: 208px; + padding: 0; + } .leftBox { flex: .715; @@ -49,77 +82,148 @@ padding-left: 15px; min-height: 75px; - .firstText { + @media(max-width: 875px) { + max-width: 560px; + min-height: auto; + flex: 1; + flex-basis: 100%; + } + + @media(max-width: 600px) { + display: none + } + + .topText { margin: 0; - font-size: 20px; + font-size: 16px; font-family: $regularFont; color: #4F5757; + max-width: 320px; + + @media (max-width: 875px) { + max-width: none; + } } - .blueText { + .bottomText { margin: 0 0 3px 0; - font-size: 20px; + font-size: 16px; font-family: $regularFont; - color: #3EB1CB; font-weight: bold; - max-width: 266px - } @media(max-width: 875px) { + max-width: 266px; + color: #4F5757; + + @media (max-width: 875px) { + max-width: none; + } + } + + @media(max-width: 875px) { .blueText { max-width: 560px; line-height: 17px; } } - } @media(max-width: 875px) { - .leftBox { - max-width: 560px; - min-height: auto; - flex: 1; - flex-basis: 100%; - } - } @media(max-width: 600px) { - .leftBox { - display: none - } } .rightBox { - height: 128px; + box-shadow: 0px 2px 3px 2px #8e8a8a; + height: 96px; flex: 1; - min-width: 560px; - max-width: 560px; + min-width: 540px; background-color: white; display: flex; - margin-top: 10px; + margin-right: 20px; + + @media (max-width: 875px) { + max-width: 544px; + } + + @media(max-width: 600px) { + box-shadow: none; + height: 128px; + margin: 0; + max-width: none; + min-width: auto; + width: 100%; + } .publisherTitle { height: 100%; width: 399px; box-sizing: border-box; - padding: 11px 7px 10px 16px; + padding: 10px 7px 10px 16px; color: #4F5757; - font-size: 22px; + font-size: 16px; font-family: $regularFont; display: flex; - align-items: center; - } @media(max-width: 600px) { - .publisherTitle { - max-width: 399px; + align-items: flex-start; + + @media(max-width: 600px) { width: 100% } } - } @media(max-width: 600px) { - .rightBox { - min-width: auto; + .publisherTotals { + flex: 1; + border-left: 2px solid #E5E5E5; + box-sizing: content-box; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding-left: 15px; + position: relative; + margin: 8px 0; + + @media(max-width: 600px) { + display: none; + } + + .totalNumber { + color: #3EB1CB; + font-size: 18px; + font-family: $regularFont; + margin: 0; + } + + .totalText { + color: #4F5757; + font-size: 14px; + font-family: $regularFont; + margin: 0; + } + } + } + } + + .totals { + height: 48px; + width: 100%; + background-color: white; + display: flex; + direction: rtl; + padding-top: 7px; + padding-bottom: 7px; + padding-left: 21px; + flex-wrap: wrap; + box-sizing: border-box; + + @media (max-width: 704px) { + display: none; + } + + p { + font-family: $regularFont; + margin: 0 21px 0 0; + font-size: 12px; + color: #4F5858; + + span { + font-weight: bold; } } } - } - } @media(max-width: 875px) { - .topStripe { - height: 272px; - background-position: 0 28px; } } @@ -135,11 +239,4 @@ width: 100%; } } - - - -} @media(max-width: 700px) { - .publisherPage { - margin-bottom: 96px; - } } \ No newline at end of file diff --git a/app/components/publisherPage/styles/style-titleSearch.scss b/app/components/publisherPage/styles/style-titleSearch.scss index fb847c1..5403ec1 100644 --- a/app/components/publisherPage/styles/style-titleSearch.scss +++ b/app/components/publisherPage/styles/style-titleSearch.scss @@ -11,17 +11,18 @@ .searchInput { + color: #4F5858; width: 100%; height: 100%; border: none; - padding: 0 0 0 48px; + padding: 0 0 0 38px; box-sizing: border-box; font-size: 13px; font-family: $regularFont; background: url("images/Asset_Icons_lightgrey_Search.svg") no-repeat white; - background-size: 27px 27px; - background-position: 15px 60%; + background-size: 16px; + background-position: 14px 60%; } .searchInput::placeholder { color: #C1C0C0 @@ -30,19 +31,18 @@ .ReactVirtualized__List { position: absolute; - top: 37px; + top: 29px; background-color: white; border: 1px solid #4F5757; padding-top: 10px; height: auto; max-height: 257px; outline: none; - z-index: 5; + z-index: 12; left: -2px; box-shadow: 0px 3px 3px 1px #8e8a8a; - } - @media (max-width: 767px) { - .ReactVirtualized__List { + + @media (max-width: 767px) { right: -2px; } } @@ -66,10 +66,12 @@ } .searchItem:not(.unclickable):hover { background-color: #E5E5E5; + color: #3EB1CB; } .searchItem:not(.unclickable):focus { background-color: #E5E5E5; outline: none; + color: #3EB1CB; } } } diff --git a/app/components/publisherPage/styles/style-totals.scss b/app/components/publisherPage/styles/style-totals.scss deleted file mode 100644 index 91be363..0000000 --- a/app/components/publisherPage/styles/style-totals.scss +++ /dev/null @@ -1,86 +0,0 @@ -@import '../../../style/variables'; - - - -.publisherTotals:hover { - .tooltipHoverArea { - visibility: visible; - } - .totalTooltip { - visibility: visible; - opacity: 1; - } -} - -.publisherTotals { - cursor: pointer; - flex: 1; - border-left: 2px solid #E5E5E5; - box-sizing: content-box; - margin: 16px 15px 16px 0; - display: flex; - flex-direction: column; - justify-content: center; - padding-left: 15px; - position: relative; - - .totalNumber { - color: #3EB1CB; - font-size: 22px; - font-family: $regularFont; - margin: 0 0 12px 0; - } - - .tooltipHoverArea { - position: absolute; - left: -188px; - width: 192px; - visibility: hidden; - padding: 12px 0 13px 16px; - box-sizing: border-box; - background-color: transparent; - cursor: auto !important; - - p { - color: transparent; - font-size: 14px; - font-family: $regularFont; - margin: 0; - } - } - - .totalTooltip { - pointer-events: none; - visibility: hidden; - opacity: 0; - -webkit-transition: opacity .5s, visibility .5s; /* Safari */ - transition: opacity .5s, visibility .5s; - position: absolute; - width: 192px; - background-color: white; - left: -188px; - padding: 12px 0 13px 16px; - box-sizing: border-box; - box-shadow: 0px 2px 3px 2px #8e8a8a; - - - p { - color: #4F5757; - font-size: 14px; - font-family: $regularFont; - margin: 0; - font-weight: 500; - } - } - - .totalText { - color: #4F5757; - font-size: 16px; - font-family: $regularFont; - margin: 0; - } -} @media(max-width: 600px) { - .publisherTotals { - display: none; - } -} \ No newline at end of file diff --git a/app/components/publisherPage/styles/style-tutorialOverlay.scss b/app/components/publisherPage/styles/style-tutorialOverlay.scss index 054843a..ef69e78 100644 --- a/app/components/publisherPage/styles/style-tutorialOverlay.scss +++ b/app/components/publisherPage/styles/style-tutorialOverlay.scss @@ -1,5 +1,6 @@ +@import "../../../style/poly-fluid-sizing"; -.publisherContent { +.checksSection { .tutorialFadeIn { opacity: 1 !important; visibility: visible !important; @@ -7,22 +8,31 @@ .tutorialOverlay { position: absolute; - right: 0; top: 0; left: 0; bottom: 0; - padding-top: 80px; + right: 0; top: 32px; left: 0; bottom: 0; z-index: 11; - pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 2s, visibility 2s; /* Safari */ transition: opacity 2s, visibility 2s; + pointer-events: none; + + @media (max-width: 704px) { + display: none; + } .tutorialBackground { position: absolute; - right: 0; top: 0; left: 0; bottom: 0; + right: 0; top: 9px; left: 0; bottom: 0; background-color: black; opacity: .7; } + .clickBlocker { + position: absolute; + right: 0; left: 0; bottom: 0; top: 50px; + pointer-events: auto; + } + .tutorialText { color: white; font-size: 16px; @@ -30,8 +40,12 @@ .contentFilterTutorial { position: absolute; - left: 23.5px; top: 50px; + top: 40px; width: 223px; + pointer-events: none; + + $widthMap: (960px: 10px, 705px: -10px); + @include poly-fluid-sizing('left', $widthMap); img { margin-left: 100px; @@ -41,8 +55,11 @@ .titleSearchTutorial { position: absolute; - left: 15%; top: 50px; - width: 80%; + left: 15%; top: 40px; + pointer-events: none; + + $widthMap: (960px: 340px, 705px: 218px); + @include poly-fluid-sizing('width', $widthMap); img { margin-left: 40%; @@ -51,11 +68,15 @@ .dateFilterTutorial { position: absolute; - left: 0; top: 50px; + top: 40px; width: 222px; + pointer-events: none; + + $widthMap: (960px: 30px, 705px: -15px); + @include poly-fluid-sizing('right', $widthMap); img { - margin-left: 60px; + margin-left: 120px; transform: rotate(18deg) } } diff --git a/app/index.js b/app/index.js index 1716778..ac82428 100644 --- a/app/index.js +++ b/app/index.js @@ -8,7 +8,6 @@ import deployConfig from '../deployConfig' import MainContainer from './components/mainContainer/mainContainer' import LandingPage from './components/landingPage/landingPage' import PublisherPage from './components/publisherPage/publisherPage' -import LearnMorePage from './components/learnMorePage/learnMorePage' document.addEventListener('DOMContentLoaded', () => { @@ -25,7 +24,6 @@ function renderApp () { - diff --git a/app/style/_commonStyles.scss b/app/style/_commonStyles.scss deleted file mode 100644 index 427a3d2..0000000 --- a/app/style/_commonStyles.scss +++ /dev/null @@ -1,50 +0,0 @@ - -%topStripe { - width: 100%; - height: 240px; - display: flex; - justify-content: center; - - - .widthContainer { - max-width: 960px; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - - .topBar { - height: 64px; - width: 100%; - background-color: #4F5757; - display: flex; - - .button { - flex: 1; - height: 100%; - max-width: 240px; - color: white; - font-size: 18px; - font-family: $regularFont; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - a { color: white; text-decoration: none } - a:visited { color: white } - } - } - - .contentBox { - flex: 1; - display: flex; - justify-content: center; - flex-wrap: wrap; - align-items: flex-end; - } - } -} - - - diff --git a/app/utilities/editableText/headlineText.js b/app/utilities/editableText/headlineText.js index a4cd938..18cf084 100644 --- a/app/utilities/editableText/headlineText.js +++ b/app/utilities/editableText/headlineText.js @@ -9,7 +9,7 @@ export default { }, checksPage: { - smallText: 'Richer metadata makes content useful.', + smallText: 'Comprehensive metadata makes publications discoverable.', bigText: 'Make sure your work can be found.' } From 334068a8c4750ac5a79adc252da9e5a82e1f60c7 Mon Sep 17 00:00:00 2001 From: Mark Fields Date: Mon, 4 Jun 2018 16:32:16 -0400 Subject: [PATCH 3/3] PREP-109 map name fix --- .../publisherPage/styles/style-tutorialOverlay.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/publisherPage/styles/style-tutorialOverlay.scss b/app/components/publisherPage/styles/style-tutorialOverlay.scss index ef69e78..9ea16f9 100644 --- a/app/components/publisherPage/styles/style-tutorialOverlay.scss +++ b/app/components/publisherPage/styles/style-tutorialOverlay.scss @@ -44,8 +44,8 @@ width: 223px; pointer-events: none; - $widthMap: (960px: 10px, 705px: -10px); - @include poly-fluid-sizing('left', $widthMap); + $positionMap: (960px: 10px, 705px: -10px); + @include poly-fluid-sizing('left', $positionMap); img { margin-left: 100px; @@ -72,8 +72,8 @@ width: 222px; pointer-events: none; - $widthMap: (960px: 30px, 705px: -15px); - @include poly-fluid-sizing('right', $widthMap); + $positionMap: (960px: 30px, 705px: -15px); + @include poly-fluid-sizing('right', $positionMap); img { margin-left: 120px;