Skip to content

GitLab

S
scratch-www
Commit cd6a60e5 authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

Change bearstack/bball to hide and dance 

Also make updates to style scoping based on feedback from @rschamp
parent f4b0b26b
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 250 deletions
src/views/hoc/hoc.jsx
View file @ cd6a60e5
...@@ -36,42 +36,42 @@ var Hoc = React.createClass({ ...@@ -36,42 +36,42 @@ var Hoc = React.createClass({
<FormattedMessage id='hoc.subTitle' /> <FormattedMessage id='hoc.subTitle' />
</p> </p>
<section className="section title-banner-section"> <section className="hoc-section mod-title-banner">
<FlexRow> <FlexRow>
<div className="flex-row-card"> <div className="flex-row-card">
<a href="/projects/editor/?tip_bar=name"> <a href="/projects/editor/?tip_bar=name">
<div className="flex-row-card-info" <div className="flex-row-card-info"
onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}> onMouseEnter={this.onCardEnter.bind(this, 'mod-name-bg')}>
<img className="img card-info" <img className="flex-row-card-info-img"
src="/images/hoc/name-tutorial.jpg" src="/images/hoc/name-tutorial.jpg"
alt="" /> alt="" />
<Button className="card-info"> <Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' /> <FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</Button> </Button>
</div> </div>
</a> </a>
</div> </div>
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}> <div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-wbb-bg')}>
<a href="/projects/editor/?tip_bar=fly"> <a href="/projects/editor/?tip_bar=fly">
<div className="flex-row-card-info"> <div className="flex-row-card-info">
<img className="img card-info" <img className="flex-row-card-info-img"
src="/images/hoc/make-it-fly-tutorial.png" src="/images/hoc/make-it-fly-tutorial.png"
alt="" /> alt="" />
<Button className="card-info"> <Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsMakeItFlyTitle' /> <FormattedMessage id='hoc.tipsMakeItFlyTitle' />
</Button> </Button>
</div> </div>
</a> </a>
</div> </div>
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}> <div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-dance-bg')}>
<a href="/projects/editor/?tip_bar=music"> <a href="/projects/editor/?tip_bar=music">
<div className="flex-row-card-info"> <div className="flex-row-card-info">
<img className="img card-info" <img className="flex-row-card-info-img"
src="/images/hoc/make-music-tutorial.png" src="/images/hoc/make-music-tutorial.png"
alt="" /> alt="" />
<Button className="card-info"> <Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsMakeMusicTitle' /> <FormattedMessage id='hoc.tipsMakeMusicTitle' />
</Button> </Button>
</div> </div>
...@@ -106,8 +106,8 @@ var Hoc = React.createClass({ ...@@ -106,8 +106,8 @@ var Hoc = React.createClass({
<div className="inner"> <div className="inner">
<Box title={''}> <Box title={''}>
<section id="teacher" className="section"> <section id="teacher" className="hoc-section">
<div className="section-column"> <div className="hoc-section-column">
<h3> <h3>
<FormattedMessage id='hoc.activityCardsHeader' /> <FormattedMessage id='hoc.activityCardsHeader' />
</h3> </h3>
...@@ -116,19 +116,19 @@ var Hoc = React.createClass({ ...@@ -116,19 +116,19 @@ var Hoc = React.createClass({
</p> </p>
</div> </div>
<div className="resource"> <div className="hoc-section-resource">
<img className="img mod-resource" <img className="hoc-section-resource-img"
src="/svgs/tips-card.svg" src="/svgs/tips-card.svg"
alt="" /> alt="" />
<div className="resource-info"> <div className="hoc-section-resource-info">
<h5 className="resource-info-header"> <h5 className="hoc-section-resource-info-header">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' /> <FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</h5> </h5>
<a className="resource-anchor" <a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf"> href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
<FormattedMessage id='hoc.activityCards' /> <FormattedMessage id='hoc.activityCards' />
</a> </a>
<a className="resource-anchor" <a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf"> href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
<FormattedMessage id='hoc.facilitatorGuide' /> <FormattedMessage id='hoc.facilitatorGuide' />
</a> </a>
...@@ -136,28 +136,28 @@ var Hoc = React.createClass({ ...@@ -136,28 +136,28 @@ var Hoc = React.createClass({
</div> </div>
</section> </section>
<section className="section"> <section className="hoc-section">
<div className="section-column mod-split"> <div className="hoc-section-column mod-split">
<h3> <h3>
<FormattedMessage id='hoc.helpScratch' /> <FormattedMessage id='hoc.helpScratch' />
</h3> </h3>
<p className="section-paragraph"> <p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.helpScratchDescription' /> <FormattedHTMLMessage id='hoc.helpScratchDescription' />
</p> </p>
</div> </div>
<div className="section-column mod-split"> <div className="hoc-section-column mod-split">
<img className="img mod-border" <img className="hoc-section-column-img"
src="/images/hoc/tips-test-animation.gif" src="/images/hoc/tips-test-animation.gif"
alt="Tips Window Animation" /> alt="Tips Window Animation" />
</div> </div>
</section> </section>
<section className="section"> <section className="hoc-section">
<div className="section-column"> <div className="hoc-section-column">
<h3> <h3>
<FormattedMessage id='hoc.moreActivities' /> <FormattedMessage id='hoc.moreActivities' />
</h3> </h3>
<p className="section-paragraph"> <p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.moreDescription' /> <FormattedHTMLMessage id='hoc.moreDescription' />
</p> </p>
</div> </div>
...@@ -166,7 +166,7 @@ var Hoc = React.createClass({ ...@@ -166,7 +166,7 @@ var Hoc = React.createClass({
<div className="flex-row-card"> <div className="flex-row-card">
<a href="/projects/editor/?tip_bar=getStarted"> <a href="/projects/editor/?tip_bar=getStarted">
<div className="flex-row-card-info"> <div className="flex-row-card-info">
<img className="img card-info" <img className="flex-row-card-info-img"
src="/images/hoc/getting-started-tutorial.jpg" alt="" /> src="/images/hoc/getting-started-tutorial.jpg" alt="" />
<Button> <Button>
<FormattedMessage id='hoc.tipsGetStarted' /> <FormattedMessage id='hoc.tipsGetStarted' />
...@@ -176,26 +176,26 @@ var Hoc = React.createClass({ ...@@ -176,26 +176,26 @@ var Hoc = React.createClass({
</div> </div>
<div className="flex-row-card"> <div className="flex-row-card">
<a href="/bearstack/"> <a href="/hide/">
<div className="flex-row-card-info"> <div className="flex-row-card-info">
<img className="img card-info" <img className="flex-row-card-info-img"
src="/images/hoc/bearstack-tutorial.jpg" src="/images/hoc/hide-seek-tutorial.jpg"
alt="" /> alt="" />
<Button> <Button>
<FormattedMessage id='hoc.tipsBearstack' /> <FormattedMessage id='hoc.tipsHideAndSeekTitle' />
</Button> </Button>
</div> </div>
</a> </a>
</div> </div>
<div className="flex-row-card"> <div className="flex-row-card">
<a href="/hoops"> <a href="//projects/editor/?tip_bar=dance">
<div className="flex-row-card-info"> <div className="flex-row-card-info">
<img className="img card-info" <img className="flex-row-card-info-img"
src="/images/hoc/bball-tutorial.jpg" src="/images/hoc/dance-tutorial.jpg"
alt="" /> alt="" />
<Button> <Button>
<FormattedMessage id='hoc.tipsBBallHoops' /> <FormattedMessage id='hoc.tipsDanceTitle' />
</Button> </Button>
</div> </div>
</a> </a>
...@@ -203,24 +203,24 @@ var Hoc = React.createClass({ ...@@ -203,24 +203,24 @@ var Hoc = React.createClass({
</FlexRow> </FlexRow>
</section> </section>
<section className="section"> <section className="hoc-section">
<div className="section-column"> <div className="hoc-section-column">
<h3> <h3>
<FormattedMessage id='hoc.addToStudios' /> <FormattedMessage id='hoc.addToStudios' />
</h3> </h3>
<p className="section-paragraph"> <p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.addToStudiosDescription' /> <FormattedHTMLMessage id='hoc.addToStudiosDescription' />
</p> </p>
</div> </div>
<FlexRow> <FlexRow>
<div className="studio"> <div className="hoc-section-studio">
<img className="img mod-studio" <img className="hoc-section-studio-img"
src="/svgs/studio.svg" src="/svgs/studio.svg"
alt="" /> alt="" />
<div className="studio-info"> <div className="hoc-section-studio-info">
<a href="/studios/432299/"> <a href="/studios/432299/">
<h5 className="studio-info-header"> <h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' /> <FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</h5> </h5>
</a> </a>
...@@ -228,13 +228,13 @@ var Hoc = React.createClass({ ...@@ -228,13 +228,13 @@ var Hoc = React.createClass({
</div> </div>
<div className="studio"> <div className="hoc-section-studio">
<img className="img mod-studio" <img className="hoc-section-studio-img"
src="/svgs/studio.svg" src="/svgs/studio.svg"
alt="" /> alt="" />
<div className="studio-info"> <div className="hoc-section-studio-info">
<a href="/studios/1672166/"> <a href="/studios/1672166/">
<h5 className="studio-info-header"> <h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.studioWeBareBears' /> <FormattedMessage id='hoc.studioWeBareBears' />
</h5> </h5>
</a> </a>
...@@ -243,26 +243,26 @@ var Hoc = React.createClass({ ...@@ -243,26 +243,26 @@ var Hoc = React.createClass({
</FlexRow> </FlexRow>
<FlexRow> <FlexRow>
<div className="studio"> <div className="hoc-section-studio">
<img className="img mod-studio" <img className="hoc-section-studio-img"
src="/svgs/studio.svg" src="/svgs/studio.svg"
alt="" /> alt="" />
<div className="studio-info"> <div className="hoc-section-studio-info">
<a href="/studios/1999784/"> <a href="/studios/1999784/">
<h5 className="studio-info-header"> <h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsMakeMusicTitle' /> <FormattedMessage id='hoc.tipsMakeMusicTitle' />
</h5> </h5>
</a> </a>
</div> </div>
</div> </div>
<div className="studio"> <div className="hoc-section-studio">
<img className="img mod-studio" <img className="hoc-section-studio-img"
src="/svgs/studio.svg" src="/svgs/studio.svg"
alt="" /> alt="" />
<div className="studio-info"> <div className="hoc-section-studio-info">
<a href="/studios/1672164/"> <a href="/studios/1672164/">
<h5 className="studio-info-header"> <h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.studioAlice' /> <FormattedMessage id='hoc.studioAlice' />
</h5> </h5>
</a> </a>
...@@ -272,47 +272,47 @@ var Hoc = React.createClass({ ...@@ -272,47 +272,47 @@ var Hoc = React.createClass({
</section> </section>
</Box> </Box>
<section className="section"> <section className="hoc-section">
<h3> <h3>
<FormattedMessage <FormattedMessage
id='general.collaborators' id='general.collaborators'
defaultMessage={'Collaborators'} /> defaultMessage={'Collaborators'} />
</h3> </h3>
<div className="logos"> <div className="hoc-section-logos">
<a href="http://scratched.gse.harvard.edu/"> <a href="http://scratched.gse.harvard.edu/">
<img className="img mod-logo" <img className="hoc-section-logos-img"
src="/images/hoc/scratchEd-logo.png" src="/images/hoc/scratchEd-logo.png"
alt="ScratchEd" /> alt="ScratchEd" />
</a> </a>
<a href="https://code.org/"> <a href="https://code.org/">
<img className="img mod-logo" <img className="hoc-section-logos-img"
src="/images/hoc/code-org-logo.png" src="/images/hoc/code-org-logo.png"
alt="code.org" /> alt="code.org" />
</a> </a>
<a href="http://www.cartoonnetwork.com/"> <a href="http://www.cartoonnetwork.com/">
<img className="img mod-logo" <img className="hoc-section-logos-img"
src="/images/hoc/cn-logo.png" src="/images/hoc/cn-logo.png"
alt="Cartoon Network" /> alt="Cartoon Network" />
</a> </a>
<a href="http://www.madewithcode.com/"> <a href="http://www.madewithcode.com/">
<img className="img mod-logo" <img className="hoc-section-logos-img"
src="/images/hoc/made-with-code-logo.png" src="/images/hoc/made-with-code-logo.png"
alt="Made with Code" /> alt="Made with Code" />
</a> </a>
<a href="http://www.paalive.org/"> <a href="http://www.paalive.org/">
<img className="img mod-logo" <img className="hoc-section-logos-img"
src="/images/hoc/paa-logo.png" src="/images/hoc/paa-logo.png"
alt="Progressive Arts Alliance" /> alt="Progressive Arts Alliance" />
</a> </a>
<a href="http://www.catrobat.org/"> <a href="http://www.catrobat.org/">
<img className="img mod-logo" <img className="hoc-section-logos-img"
src="/images/hoc/pocketcode-logo.png" src="/images/hoc/pocketcode-logo.png"
alt="Pocket Code" /> alt="Pocket Code" />
</a> </a>
</div> </div>
<div className="trademark"> <div className="hoc-section-trademark">
<p className="section-paragraph legal"> <p className="hoc-section-paragraph legal">
<FormattedHTMLMessage id='hoc.officialNotice' /> <FormattedHTMLMessage id='hoc.officialNotice' />
</p> </p>
</div> </div>
......
src/views/hoc/hoc.scss
View file @ cd6a60e5
...@@ -7,225 +7,205 @@ $base-bg: $ui-white; ...@@ -7,225 +7,205 @@ $base-bg: $ui-white;
padding: 0; padding: 0;
} }
.hoc { .hoc-section {
.img, display: flex;
.button { margin: 0 auto;
&.card-info { border-bottom: 1px solid $ui-border;
width: calc(100% - 20px); padding: 50px 0;
} width: 95%;
} text-align: center;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.img { .hoc-section:last-child {
&.card-info { border-bottom: 0;
margin: 10px 10px 5px 10px; }
border-radius: 5px;
}
&.mod-border {
border-radius: 5px;
width: 100%;
}
&.mod-resource,
&.mod-studio {
margin-right: 15px;
}
&.mod-studio {
float: left;
}
&.mod-logo {
margin: 20px;
max-width: 150px;
max-height: 55px;
vertical-align: middle;
}
}
.button { .hoc-section.mod-title-banner {
&.card-info { border: 0;
margin: 0 10px 10px 10px; padding: 10px 0;
} max-width: $desktop;
} }
.section { .hoc-section-column {
display: flex; width: 100%;
margin: 0 auto; }
border-bottom: 1px solid $ui-border;
padding: 50px 0;
width: 95%;
text-align: center;
justify-content: center; .hoc-section-column.mod-split {
flex-wrap: wrap; min-width: 200px;
align-items: center; max-width: 40%;
text-align: left;
}
&:last-child { .hoc-section-column-img {
border-bottom: 0; border-radius: 5px;
} width: 100%;
}
&.title-banner-section { .hoc-section-paragraph {
border: 0; margin: 10px auto 20px;
padding: 10px 0; max-width: 600px;
max-width: $desktop; }
}
}
.section-column { .title-banner.mod-wbb-bg {
width: 100%; background-image: url("/images/hoc2015/hide-bg.jpg");
}
&.mod-split { .title-banner.mod-dance-bg {
min-width: 200px; background-image: url("/images/hoc2015/dance-bg.jpg");
max-width: 40%; }
text-align: left;
}
}
.section-paragraph { .title-banner.mod-name-bg {
margin: 10px auto 20px; background-image: url("/images/hoc2015/name-bg.jpg");
max-width: 600px; }
}
.title-banner { .flex-row-card {
&.wbb-bg { margin: 10px;
background-image: url("/images/hoc2015/hide-bg.jpg"); border-radius: 7px;
} background-color: $active-gray;
padding: 2px;
&.dance-bg { width: 30%;
background-image: url("/images/hoc2015/dance-bg.jpg"); min-width: 200px;
} max-width: 230px;
}
&.name-bg { .flex-row-card-info {
background-image: url("/images/hoc2015/name-bg.jpg"); border-radius: 5px;
} background-color: $base-bg;
} width: 100%;
height: 100%;
}
.flex-row-card { .flex-row-card-info-img,
margin: 10px; .button.flex-row-card-info-button {
border-radius: 7px; width: calc(100% - 20px);
background-color: $active-gray; }
padding: 2px;
width: 30%; .flex-row-card-info-img {
min-width: 200px; margin: 10px 10px 5px 10px;
max-width: 230px; border-radius: 5px;
} }
.flex-row-card-info { .button.flex-row-card-info-button {
border-radius: 5px; margin: 0 10px 10px 10px;
background-color: $base-bg; }
width: 100%;
height: 100%;
}
.resource, .hoc-section-resource,
.studio { .hoc-section-studio {
display: flex; display: flex;
margin: 10px 0; margin: 10px 0;
min-width: 200px; min-width: 200px;
text-align: left; text-align: left;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.resource { .hoc-section-resource-img,
width: 33%; .hoc-section-studio-img {
} margin-right: 15px;
}
.resource-anchor { .hoc-section-resource {
display: block; width: 33%;
margin: 5px 0; }
font-size: .8em;
}
.resource-info-header { .hoc-section-resource-anchor {
margin: 0; display: block;
line-height: inherit; margin: 5px 0;
} font-size: .8em;
}
.studio { .hoc-section-resource-info-header {
width: 50%; margin: 0;
} line-height: inherit;
}
.studio-info-header { .hoc-section-studio {
margin: 8px 0; width: 50%;
width: 200px; }
color: $ui-blue;
font-weight: 500;
&:hover { .hoc-section-studio-img {
color: darken($ui-blue, 15); float: left;
} }
}
.logos { .hoc-section-studio-info-header {
margin: 20px 0; margin: 8px 0;
width: 100%; width: 200px;
} color: $ui-blue;
font-weight: 500;
}
.trademark { .hoc-section-studio-info-header:hover {
margin-top: 20px; color: darken($ui-blue, 15);
} }
.hoc-section-logos {
margin: 20px 0;
width: 100%;
}
.hoc-section-logos-img {
margin: 20px;
max-width: 150px;
max-height: 55px;
vertical-align: middle;
}
.hoc-section-trademark {
margin-top: 20px;
} }
@media only screen and (max-width: $mobile - 1) { @media only screen and (max-width: $mobile - 1) {
.hoc { .hoc-section-studio {
.studio { display: inline-block;
display: inline-block;
}
} }
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.hoc { .hoc-section.mod-title-banner {
.title-banner-section { max-width: $mobile;
max-width: $mobile; }
}
.hoc-section-studio {
.studio { display: inline-block;
display: inline-block;
}
} }
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.hoc { .flex-row-card {
.img { margin: 2px;
&.mod-resource, min-width: 175px;
&.mod-studio { }
margin: 0 auto;
} .button.flex-row-card-info-button {
font-size: .7em;
&.mod-studio { }
float: none;
} .hoc-section-resource,
} .hoc-section-studio {
display: block;
.button { width: 30%;
&.card-info { min-width: 180px;
font-size: .7em; text-align: center;
} }
}
.hoc-section-resource-img,
.flex-row-card { .hoc-section-studio-img {
margin: 2px; margin: 0 auto;
min-width: 175px; }
}
.hoc-section-studio-img {
.resource, float: none;
.studio { }
display: block;
width: 30%; .hoc-section-studio-info-header {
min-width: 180px; width: 100%;
text-align: center;
}
.studio-info-header {
width: 100%;
}
} }
} }
src/views/hoc/l10n.json
View file @ cd6a60e5
...@@ -17,10 +17,10 @@ ...@@ -17,10 +17,10 @@
"hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>", "hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
"hoc.title": "Get Creative with Coding", "hoc.title": "Get Creative with Coding",
"hoc.tipsAnimateYourNameTitle": "Animate Your Name", "hoc.tipsAnimateYourNameTitle": "Animate Your Name",
"hoc.tipsBearstack": "Bearstack Story", "hoc.tipsDanceTitle": "Dance, Dance, Dance",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsGetStarted": "Getting Started", "hoc.tipsGetStarted": "Getting Started",
"hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsMakeItFlyTitle": "Make it Fly", "hoc.tipsMakeItFlyTitle": "Make it Fly",
"hoc.tipsPongGame": "Create a Pong Game", "hoc.tipsPongGame": "Create a Pong Game"
"hoc.tipsBBallHoops": "B-Ball Hoops"
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment