scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

work on community responsive

Browse source
This commit is contained in:
seotts 2020-10-13 18:31:39 -04:00 committed by Karishma Chadha
parent 261313091d
commit cc67b79f00
2 changed files with 138 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/views/annual-report/annual-report.jsx
View file

@ -70,8 +70,7 @@ class AnnualReport extends React.Component {
this.state = { this.state = {
currentlyVisible: SECTIONS.message, // The currently visible section currentlyVisible: SECTIONS.message, // The currently visible section
dropdownVisible: false, dropdownVisible: false
videoOpen: false
}; };
bindAll(this, [ bindAll(this, [
@ -880,7 +879,9 @@ class AnnualReport extends React.Component {
<div className="guidelines-list"> <div className="guidelines-list">
<ul> <ul>
<li> <li>
<FormattedMessage id="annualReport.communityGuidelinesRespect" /> <FormattedMessage
id="annualReport.communityGuidelinesRespect"
/>
</li> </li>
<li> <li>
<FormattedMessage id="annualReport.communityGuidelinesShare" /> <FormattedMessage id="annualReport.communityGuidelinesShare" />
@ -891,13 +892,19 @@ class AnnualReport extends React.Component {
</ul> </ul>
<ul> <ul>
<li> <li>
<FormattedMessage id="annualReport.communityGuidelinesConstructive" /> <FormattedMessage
id="annualReport.communityGuidelinesConstructive"
/>
</li> </li>
<li> <li>
<FormattedMessage id="annualReport.communityGuidelinesPrivacy" /> <FormattedMessage
id="annualReport.communityGuidelinesPrivacy"
/>
</li> </li>
<li> <li>
<FormattedMessage id="annualReport.communityGuidelinesFriendly" /> <FormattedMessage
id="annualReport.communityGuidelinesFriendly"
/>
</li> </li>
</ul> </ul>
</div> </div>
@ -987,7 +994,9 @@ class AnnualReport extends React.Component {
<div>angelical</div> <div>angelical</div>
</div> </div>
<Comment <Comment
comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote1'})} comment={this.props.intl.formatMessage(
{id: 'annualReport.communityQuote1'}
)}
/> />
</div> </div>
<div className="community-quote"> <div className="community-quote">
@ -999,7 +1008,9 @@ class AnnualReport extends React.Component {
<div>dlore2009</div> <div>dlore2009</div>
</div> </div>
<Comment <Comment
comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote2'})} comment={this.props.intl.formatMessage(
{id: 'annualReport.communityQuote2'}
)}
/> />
</div> </div>
<div className="community-quote"> <div className="community-quote">

125
src/views/annual-report/annual-report.scss
View file

@ -604,6 +604,7 @@ p {
.initiatives-community { .initiatives-community {
.hero { .hero {
width: 100%; width: 100%;
margin: 52px 0;
} }
.moderation-and-guidelines { .moderation-and-guidelines {
@ -631,6 +632,7 @@ p {
ul { ul {
list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg'); list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg');
margin-right: 64px;
} }
li { li {
// vertical-align: middle; // vertical-align: middle;
@ -639,10 +641,13 @@ p {
.community-engagement { .community-engagement {
max-width: 620px; max-width: 620px;
text-align: center;
margin: 48px;
} }
.community-sds { .community-sds {
text-align: center; text-align: center;
margin-bottom: 68px;
.sds-list { .sds-list {
display: flex; display: flex;
@ -658,6 +663,11 @@ p {
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
} }
p {
font-size: .875rem;
line-height: 1.25rem;
}
} }
} }
} }
@ -670,6 +680,8 @@ p {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-top: 48px;
margin-bottom: 144px;
.community-quote { .community-quote {
width: 380px; width: 380px;
@ -683,17 +695,26 @@ p {
p { p {
color: $ui-white; color: $ui-white;
line-height: 40px; line-height: 40px;
font-size: 1.25rem;
} }
} }
.comment-text, .comment-text::before, .comment-text::after { .comment-text, .comment-text::before, .comment-text::after {
border-color: $ui-blue; border-color: $ui-blue;
} }
.comment-text {
padding: 1.75rem;
}
} }
} }
.community-blm { .community-blm {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
h2 {
margin-top: 32px;
}
.blm-intro { .blm-intro {
max-width: 460px; max-width: 460px;
@ -712,18 +733,107 @@ p {
} }
} }
.grid .thumbail {
box-shadow: none;
background-color: blue;
}
.blm-change { .blm-change {
width: 380px; width: 380px;
p {
font-size: 1.25rem;
line-height: 2.5rem;
}
}
}
@media #{$intermediate-and-smaller} {
.inner {
max-width: 620px;
}
.moderation-and-guidelines {
flex-direction: column;
}
.community-moderation, .community-guidelines, .community-engagement {
margin: 32px 0;
width: 620px;
text-align: left;
}
.sds-list {
max-width: 460px;
}
.community-quotes {
.community-quote {
width: 100%;
text-align: left;
margin: 24px 0;
.comment-text {
margin-left: 12px;
}
}
}
.blm-tag {
align-self: center;
}
.community-blm {
margin: 16px 0;
justify-content: center;
.blm-image {
order: -1;
}
.blm-intro, .blm-change {
max-width: 100%;
width: 100%;
}
.blm-change {
margin-top: 80px;
}
}
}
@media #{$small} {
.inner {
overflow: hidden;
}
.hero {
width: 540px;
}
.community-moderation, .community-guidelines, .community-engagement {
width: 300px;
text-align: left;
}
ul {
margin: 0;
}
li {
margin-bottom: 0;
} }
} }
} }
.video-container { .video-container {
width: 100%; width: 100%;
overflow: hidden; height: 500px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 72px;
} }
.video-background { .video-background {
@ -731,7 +841,7 @@ p {
height: 500px; height: 500px;
overflow: hidden; overflow: hidden;
background-size: cover; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
@ -739,6 +849,9 @@ p {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
@media #{$big} { @media #{$big} {
} }
@ -751,7 +864,7 @@ p {
.community-team-intro { .community-team-intro {
max-width: 780px; max-width: 780px;
text-align: center; text-align: center;
margin: 32px 0; margin-top: 32px;
p { p {
max-width: 620px; max-width: 620px;