scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

reconfigure video layout

Browse source
This commit is contained in:
caseymm 2021-10-21 10:46:37 -07:00
parent acc8cdab3c
commit 9f2c4a29cf
6 changed files with 84 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/views/annual-report/2020/annual-report.jsx
View file

@ -1065,18 +1065,19 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.connectivityWorldSubtitle" /> <FormattedMessage id="annualReport.2020.connectivityWorldSubtitle" />
</p> </p>
</div> </div>
</div>
<div className="video-container connectivity"> <div className="video-container connectivity">
<div className="video-background connectivity">
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview <VideoPreview
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'})
} }
thumbnail="/images/annual-report/2020/connectivity/Scratch Around the World Video.png" thumbnail="/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png"
thumbnailWidth="1000"
videoHeight="450"
videoId="rlsjbx0st4" videoId="rlsjbx0st4"
videoWidth="700" thumbnailWidth="580"
videoHeight="320"
videoWidth="568"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2020.altConnectivityVideoPreview'} {id: 'annualReport.2020.altConnectivityVideoPreview'}
@ -1092,10 +1093,10 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'})
} }
thumbnail="/images/annual-report/2020/connectivity/Scratch Around the World Video.png" thumbnail="/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png"
thumbnailWidth="800"
videoHeight="320"
videoId="rlsjbx0st4" videoId="rlsjbx0st4"
thumbnailWidth="400"
videoHeight="320"
videoWidth="568" videoWidth="568"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
@ -1109,10 +1110,10 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'})
} }
thumbnail="/images/annual-report/2020/connectivity/Scratch Around the World Video.png" thumbnail="/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png"
thumbnailWidth="500"
videoHeight="216"
videoId="rlsjbx0st4" videoId="rlsjbx0st4"
thumbnailWidth="300"
videoHeight="216"
videoWidth="380" videoWidth="380"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
@ -1122,6 +1123,8 @@ class AnnualReport extends React.Component {
/> />
</MediaQuery> </MediaQuery>
</div> </div>
</div>
<div className="inner">
<div className="flex-content"> <div className="flex-content">
<CountryBlurb <CountryBlurb
className="reverse" className="reverse"
@ -1365,16 +1368,18 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.adaptationHighlightText3b" /> <FormattedMessage id="annualReport.2020.adaptationHighlightText3b" />
</p> </p>
</div> </div>
</div>
<div className="video-container themes adaptation"> <div className="video-container themes adaptation">
<div className="video-background adaptation">
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview <VideoPreview
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'})
} }
thumbnail="/images/annual-report/2020/adaptation/Create-along video.png" thumbnail="/images/annual-report/2020/adaptation/createalongs_videothumb.png"
thumbnailWidth="1000"
videoHeight="320"
videoId="uzfapi7t03" videoId="uzfapi7t03"
thumbnailWidth="580"
videoHeight="320"
videoWidth="568" videoWidth="568"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
@ -1391,10 +1396,10 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'})
} }
thumbnail="/images/annual-report/2020/adaptation/Create-along video.png" thumbnail="/images/annual-report/2020/adaptation/createalongs_videothumb.png"
thumbnailWidth="800"
videoHeight="320"
videoId="uzfapi7t03" videoId="uzfapi7t03"
thumbnailWidth="400"
videoHeight="320"
videoWidth="568" videoWidth="568"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
@ -1408,10 +1413,10 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2020.watchVideo'})
} }
thumbnail="/images/annual-report/2020/adaptation/Create-along video.png" thumbnail="/images/annual-report/2020/adaptation/createalongs_videothumb.png"
thumbnailWidth="500"
videoHeight="216"
videoId="uzfapi7t03" videoId="uzfapi7t03"
thumbnailWidth="300"
videoHeight="216"
videoWidth="380" videoWidth="380"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
@ -1421,7 +1426,8 @@ class AnnualReport extends React.Component {
/> />
</MediaQuery> </MediaQuery>
</div> </div>
</div>
<div className="inner">
<div className="flex-content"> <div className="flex-content">
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"

102
src/views/annual-report/2020/annual-report.scss
View file

@ -1239,6 +1239,10 @@ img.comment-viz{
max-width: 840px; max-width: 840px;
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;
text-align: left;
@media #{$medium-and-smaller} {
flex-direction: column;
}
&.split{ &.split{
&.content{ &.content{
.text{ .text{
@ -1641,36 +1645,62 @@ img.comment-viz{
.video-container { .video-container {
width: 100%; width: 100%;
height: 500px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 30px; margin-bottom: 72px;
@media #{$medium}{
height: 400px;
margin-bottom: 0px;
}
@media #{$small}{
height: 300px;
margin-bottom: 0px;
}
+ .inner{
padding-top: 0px;
}
}
.video-background {
width: 100%;
height: 500px;
overflow: hidden;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
display: flex;
align-items: center;
justify-content: center;
@media #{$medium}{
height: 400px;
}
@media #{$small}{
height: 300px;
}
&.adaptation {
background-image: url("/images/annual-report/2020/adaptation/createalongs_splash.svg");
}
&.connectivity {
background-image: url("/images/annual-report/2020/connectivity/aroundtheworld_splash.svg");
}
} }
.video-thumbnail .button{ .video-thumbnail .button{
top: -113px; top: 6px;
font-size: 15px; font-size: 15px;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
@media #{$medium}{
top: -99px;
}
@media #{$small}{
top: -107px;
top: -74px;
font-size: 12px;
}
} }
.themes .video-thumbnail .button{ .themes .video-thumbnail .button{
top: -119px; top: 0px;
@media #{$medium}{
top: -107px;
}
@media #{$small}{
top: -105px;
top: -74px;
font-size: 12px;
}
} }
.tweet-container{ .tweet-container{
@ -1696,40 +1726,6 @@ img.comment-viz{
} }
} }
} }
.video-background {
width: 100%;
height: 500px;
overflow: hidden;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
display: flex;
align-items: center;
justify-content: center;
&.blm {
background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
}
&.abhi {
background-image: url("/images/annual-report/initiatives/Abhi Video Splash.svg");
.button {
background-color: $ui-aqua;
}
}
&.cps {
background-image: url("/images/annual-report/initiatives/schools/CPS Story/CPS Video Splash.svg");
.button {
background-color: $ui-purple-dark;
}
}
}
} }
.directors-message { .directors-message {

3
static/images/annual-report/2020/adaptation/createalongs_splash.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="1020" height="500" viewBox="0 0 1020 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M7.47369 178.846C13.5341 269.511 79.0963 299.237 36.8286 326.807C-70.7794 396.998 74.9443 535.486 248.094 484.139C353.129 452.992 492.993 460.604 587.379 484.139C733.029 520.457 861.681 494.151 958.796 407.833C1055.91 321.515 1034.94 187.698 913.712 107.33C785.92 22.6142 506.584 -31.1179 248.094 19.8178C107.088 47.6032 3.29736 116.366 7.47369 178.846ZM986.992 6.96484C959.878 3.16931 936.17 20.6422 934.218 37.2736C932.266 53.9051 943.417 78.9368 968.077 83.2485C992.737 87.5602 1010.86 72.4258 1014.49 60.5979C1018.12 48.77 1014.11 10.7604 986.992 6.96484Z" fill="#0FBD8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 750 B

BIN
static/images/annual-report/2020/adaptation/createalongs_videothumb.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 655 KiB

3
static/images/annual-report/2020/connectivity/aroundtheworld_splash.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="1020" height="500" viewBox="0 0 1020 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M61.6772 70.3664C234.157 -35.4025 677.179 4.68477 750.953 22.1909C858.406 47.6891 1006.11 97.9507 901.513 165.834C860.428 192.498 991.213 227.253 997.104 314.938C1008.61 486.136 650.277 525.115 446.777 486.136C222.451 443.168 26.8853 474.387 19.1859 410.891C11.4865 347.396 164.325 351.218 61.6772 281.991C-38.1378 214.675 -0.898449 108.739 61.6772 70.3664ZM973.642 139.135C996.208 132.302 1020 153.082 1020 176.599C1020 200.116 994.546 221.092 966.091 198.377C937.637 175.662 951.076 145.968 973.642 139.135Z" fill="#9966FF"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 700 B

BIN
static/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 562 KiB