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

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

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

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