From c835c67fe77ba5df326cfbe6f53745b5893b92aa Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Mon, 8 Nov 2021 14:46:35 -0500 Subject: [PATCH 01/11] Updates to TextAndMediaSnippet layout, spacing, and some font sizing. Fix width of components of other sections e.g. Scratch in India. --- .../text-and-media-snippet.jsx | 127 ++++++------ .../text-and-media-snippet.scss | 132 ++++++++++--- src/lib/frameless.js | 2 +- .../annual-report/2020/annual-report.jsx | 180 ++++++++++++------ .../annual-report/2020/annual-report.scss | 18 +- 5 files changed, 311 insertions(+), 148 deletions(-) diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.jsx b/src/components/text-and-media-snippet/text-and-media-snippet.jsx index 1a0cfc391..994ca6941 100644 --- a/src/components/text-and-media-snippet/text-and-media-snippet.jsx +++ b/src/components/text-and-media-snippet/text-and-media-snippet.jsx @@ -7,73 +7,90 @@ const frameless = require('../../lib/frameless'); require('./text-and-media-snippet.scss'); +// For left and right mode: +// Regular means text is on the left and media is on the right; reverse means these are swapped. + +// For top and bottom mode: +// Regular means text is on top and media is on the bottom; and reverse means these are swapped. + const TextAndMediaSnippet = props => (
- {props.className === 'regular' && -
- {props.type === 'video' && -
- - - - - - -
- } - {props.type !== 'video' && - {props.alt} - } -
- }
-
{props.title}
+

{props.title}

{props.children}

- {props.className === 'reverse' && -
+ +
+ {props.type === 'video' && +
+ + + + + + + + + + + + +
+ } + {props.type !== 'video' && {props.alt} -
- } - {props.className === 'full-width' && -
- {props.alt} -
- } + } +
); diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.scss b/src/components/text-and-media-snippet/text-and-media-snippet.scss index 220622f85..a5ac624e3 100644 --- a/src/components/text-and-media-snippet/text-and-media-snippet.scss +++ b/src/components/text-and-media-snippet/text-and-media-snippet.scss @@ -3,49 +3,119 @@ .text-and-media-snippet{ display: flex; align-items: center; - justify-content: space-around; - margin: 30px 0; - &.between{ - justify-content: space-between; + justify-content: space-between; + margin: 100px auto; + + &.top { + margin-top: 30px; } - @media #{$intermediate-and-smaller} { + + &.regular { + flex-direction: row; + } + &.reverse { + flex-direction: row-reverse; + } + + &.full-width{ flex-direction: column; - } - &.reverse{ - @media #{$intermediate-and-smaller} { - flex-direction: column-reverse; + max-width: 780px; + margin: auto; + + @media #{$intermediate} { + max-width: 620px; } - } - .half{ - max-width: 360px; - width: 100%; - @media #{$intermediate-and-smaller} { - max-width: 430px; - width: 100%; - margin-bottom: 20px; + + @media #{$medium} { + max-width: 460px; } - img.large{ - max-width: 350px; + + @media #{$small} { + max-width: 300px; + } + + .half{ width: 100%; - @media #{$intermediate-and-smaller} { - max-width: 430px; + img.large{ width: 100%; } } } - p{ - font-size: 14px; - text-align: left; + + @media #{$intermediate-and-smaller} { + text-align: center; + + margin: 32px auto; + + &.top { + margin-top: 16px; + } + + &.regular { + flex-direction: column; + } + &.reverse { + flex-direction: column-reverse; + } } - &.full-width{ - flex-direction: column; - max-width: 600px; - margin: auto; - .half{ - max-width: 100%; + + &.regular, &.reverse { + @media #{$intermediate} { + max-width: 620px; + } + + @media #{$medium} { + max-width: 460px; + } + + @media #{$small} { + max-width: 300px; + } + + .half { + max-width: 400px; + width: 100%; + + @media #{$intermediate} { + max-width: 620px; + } + + @media #{$medium} { + max-width: 460px; + } + + @media #{$small} { + max-width: 300px; + } + + @media #{$intermediate-and-smaller} { + width: 100%; + margin-bottom: 20px; + } img.large{ - max-width: 100%; + max-width: 420px; + width: 100%; } } } + + h4 { + font-size: 1.5rem; + } + + &.big-title { + h4 { + font-size: 2.25rem; + line-height: 3rem; + } + } + + p { + font-size: 1rem; + text-align: left; + + @media #{$intermediate-and-smaller} { + text-align: center; + } + } } \ No newline at end of file diff --git a/src/lib/frameless.js b/src/lib/frameless.js index 174f95a60..1ec11ca13 100644 --- a/src/lib/frameless.js +++ b/src/lib/frameless.js @@ -3,8 +3,8 @@ */ const frameless = { desktop: 942, - mobileIntermediate: 640, tabletPortrait: 768, + mobileIntermediate: 640, mobile: 480 }; diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx index aa56bcd89..bb3cfea2d 100644 --- a/src/views/annual-report/2020/annual-report.jsx +++ b/src/views/annual-report/2020/annual-report.jsx @@ -1240,7 +1240,7 @@ class AnnualReport extends React.Component {
- - - + + + + + + + + + +
-
+
- - - Hack Your Window - - ) - }} - /> - + + + + Hack Your Window + + ) + }} + /> + + + + + + Hack Your Window + + ) + }} + /> + +
@@ -1542,7 +1589,7 @@ class AnnualReport extends React.Component {
- - - + + + + + + + + + +
diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss index b5c7b2376..9a6c485db 100644 --- a/src/views/annual-report/2020/annual-report.scss +++ b/src/views/annual-report/2020/annual-report.scss @@ -1116,7 +1116,7 @@ img.comment-viz{ flex-direction: column; } .text{ - width: 360px; + width: 390px; .larger{ font-size: 1.25rem; line-height: 2.5rem; @@ -1260,11 +1260,11 @@ img.comment-viz{ } .flex-content{ - max-width: 840px; + max-width: 940px; width: 100%; margin-top: 50px; text-align: left; - @media #{$medium-and-smaller} { + @media #{$intermediate-and-smaller} { flex-direction: column; align-items: center; justify-content: center; @@ -1290,7 +1290,7 @@ img.comment-viz{ &.content{ justify-content: space-between; .text{ - max-width: 360px; + max-width: 460px; width: 100%; } .images{ @@ -1300,6 +1300,10 @@ img.comment-viz{ width: 100%; } } + + @media #{$intermediate} { + max-width: 620px; + } } &.lg{ h5{ @@ -2391,6 +2395,12 @@ img.comment-viz{ box-shadow: none; } +.grid { + .flex-row { + justify-content: center; + } +} + .annual-report-content, #footer { position: relative; top: 58px; From f427e4a2b039c26d064cd1304103083959d701b0 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Mon, 8 Nov 2021 23:41:58 -0500 Subject: [PATCH 02/11] Update font sizes, pill styling, and country blurb font sizing and layout. --- .../annual-report/2020/annual-report.jsx | 16 ++++--- .../annual-report/2020/annual-report.scss | 45 ++++++++++--------- .../2020/country-blurb/country-blurb.jsx | 27 ++++------- .../2020/country-blurb/country-blurb.scss | 41 ++++++++++------- 4 files changed, 67 insertions(+), 62 deletions(-) diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx index bb3cfea2d..037f907eb 100644 --- a/src/views/annual-report/2020/annual-report.jsx +++ b/src/views/annual-report/2020/annual-report.jsx @@ -785,7 +785,11 @@ class AnnualReport extends React.Component { {id: 'annualReport.2020.altArrowUp'} )} /> - + + +

@@ -1059,9 +1063,9 @@ class AnnualReport extends React.Component {

-

+ -

+
@@ -1125,7 +1129,6 @@ class AnnualReport extends React.Component {
(
- {props.className === 'regular' && -
- {props.alt} -
- }
( alt={props.iconAlt} />
-
{props.title}
+

{props.title}

( {props.children}

- {props.className === 'reverse' && -
- {props.alt} -
- } +
+ {props.alt} +
); diff --git a/src/views/annual-report/2020/country-blurb/country-blurb.scss b/src/views/annual-report/2020/country-blurb/country-blurb.scss index 170e93536..62455d2ee 100644 --- a/src/views/annual-report/2020/country-blurb/country-blurb.scss +++ b/src/views/annual-report/2020/country-blurb/country-blurb.scss @@ -2,31 +2,35 @@ .country-blurb{ display: flex; + flex-direction: row; align-items: center; - @media #{$intermediate-and-smaller} { - flex-direction: column; - } - .half img{ - float: left; - } - &.reverse{ - .half img{ - float: right; - } + justify-content: space-around; + margin-bottom: 62px; + + &.reverse { + flex-direction: row-reverse; + @media #{$intermediate-and-smaller} { flex-direction: column-reverse; } } + + @media #{$intermediate-and-smaller} { + // If we want to support both image on top and image on bottom, + // we can use the regular & reverse classNames + flex-direction: column-reverse; + } + .half{ - max-width: 400px; - width: 100%; + max-width: 460px; + img.large{ - max-width: 350px; - width: 100%; + max-width: 380px; } } + p{ - font-size: 14px; + font-size: 1rem; text-align: left; } } @@ -40,12 +44,17 @@ margin-right: 15px; } .country-text{ - h5{ + h4{ margin: 0 0 5px 0; } .location{ display: flex; justify-content: flex-start; + align-items: center; + + font-size: 1.25rem; + line-height: 1.5rem; + img{ width: 18px; height: 18px; From 1d68765c48e6b8366390efd531bfc1bdb9a755a6 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Tue, 9 Nov 2021 18:41:46 -0500 Subject: [PATCH 03/11] More layout, and font-size fixes for annual report. --- .../text-and-media-snippet.scss | 8 +- .../timeline-card/timeline-card.jsx | 90 +- .../timeline-card/timeline-card.scss | 51 +- .../annual-report/2020/annual-report.jsx | 1085 +++++++++-------- .../annual-report/2020/annual-report.scss | 174 +-- 5 files changed, 739 insertions(+), 669 deletions(-) diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.scss b/src/components/text-and-media-snippet/text-and-media-snippet.scss index a5ac624e3..690c9ab46 100644 --- a/src/components/text-and-media-snippet/text-and-media-snippet.scss +++ b/src/components/text-and-media-snippet/text-and-media-snippet.scss @@ -4,10 +4,10 @@ display: flex; align-items: center; justify-content: space-between; - margin: 100px auto; + margin: 50px auto; &.top { - margin-top: 30px; + margin-top: 75px; } &.regular { @@ -48,7 +48,7 @@ margin: 32px auto; &.top { - margin-top: 16px; + margin-top: 32px; } &.regular { @@ -108,6 +108,8 @@ font-size: 2.25rem; line-height: 3rem; } + + margin: 25px auto; } p { diff --git a/src/components/timeline-card/timeline-card.jsx b/src/components/timeline-card/timeline-card.jsx index b9f3b8726..f56b9fe57 100644 --- a/src/components/timeline-card/timeline-card.jsx +++ b/src/components/timeline-card/timeline-card.jsx @@ -2,47 +2,67 @@ const classNames = require('classnames'); const PropTypes = require('prop-types'); const React = require('react'); const VideoPreview = require('../video-preview/video-preview.jsx'); +const frameless = require('../../lib/frameless.js'); +const MediaQuery = require('react-responsive').default; require('./timeline-card.scss'); const TimelineCard = props => (
- - open link - -
{props.date}
-

{props.title}

-

{props.text}

- {props.videoId && - - } - {!props.videoId && props.image && - {props.alt} - } - {props.attribution && -

{props.projectBy} {props.attribution}

- } +
+ + open link + +
{props.date}
+

{props.title}

+

{props.text}

+ {props.videoId && +
+ + + + + + +
+ } + {!props.videoId && props.image && + {props.alt} + } + {props.attribution && +

{props.projectBy} {props.attribution}

+ } +
); diff --git a/src/components/timeline-card/timeline-card.scss b/src/components/timeline-card/timeline-card.scss index 6469c279f..8e643d3d9 100644 --- a/src/components/timeline-card/timeline-card.scss +++ b/src/components/timeline-card/timeline-card.scss @@ -3,22 +3,41 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)"; .timeline-card{ - max-width: 450px; - width: calc(100% - 30px); + max-width: 460px; + + @media #{$small} { + max-width: 300px; + } + background-color: $ui-white; border-radius: 8px; - padding: 15px; position: relative; z-index: 1; margin-bottom: 30px; - p{ - margin: 10px 0 0; - line-height: 1.5; - } - a{ - position: absolute; - right: 15px; - top: 15px; + + .timeline-content { + margin: 15px; + text-align: left; + p { + margin: 10px 0 0; + line-height: 1.5; + } + a{ + position: absolute; + right: 15px; + top: 15px; + } + + img{ + margin-top: 10px; + width: 100%; + } + .video-preview{ + margin-top: 15px; + img{ + margin-top: 0px; + } + } } &.center{ margin: 0 auto 30px; @@ -35,14 +54,4 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)"; margin: 0 auto 30px; } } - img{ - margin-top: 10px; - width: 100%; - } - .video-preview{ - margin-top: 15px; - img{ - margin-top: 0px; - } - } } \ No newline at end of file diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx index 037f907eb..d6d0cdce0 100644 --- a/src/views/annual-report/2020/annual-report.jsx +++ b/src/views/annual-report/2020/annual-report.jsx @@ -772,7 +772,7 @@ class AnnualReport extends React.Component {
-
+

@@ -1063,7 +1063,7 @@ class AnnualReport extends React.Component {

- +
@@ -1233,9 +1233,9 @@ class AnnualReport extends React.Component {

-

+

-

+

@@ -1258,7 +1258,7 @@ class AnnualReport extends React.Component {
-
-
+
+

@@ -1654,573 +1654,574 @@ class AnnualReport extends React.Component { {/*
*/}
-
-
-
-

- -

-

- -

+
+
+
+
+

+ +

+

+ +

+
+
+
+
+
+ +
+

+ +

+

+ +

+

+ +

+
+
+ {this.props.intl.formatMessage({id: + {this.props.intl.formatMessage({id: +
+
+ +