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({
<FormattedMessage id='hoc.subTitle' />
</p>
<section className="section title-banner-section">
<section className="hoc-section mod-title-banner">
<FlexRow>
<div className="flex-row-card">
<a href="/projects/editor/?tip_bar=name">
<div className="flex-row-card-info"
onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
<img className="img card-info"
onMouseEnter={this.onCardEnter.bind(this, 'mod-name-bg')}>
<img className="flex-row-card-info-img"
src="/images/hoc/name-tutorial.jpg"
alt="" />
<Button className="card-info">
<Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</Button>
</div>
</a>
</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">
<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"
alt="" />
<Button className="card-info">
<Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
</Button>
</div>
</a>
</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">
<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"
alt="" />
<Button className="card-info">
<Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
</Button>
</div>
......@@ -106,8 +106,8 @@ var Hoc = React.createClass({
<div className="inner">
<Box title={''}>
<section id="teacher" className="section">
<div className="section-column">
<section id="teacher" className="hoc-section">
<div className="hoc-section-column">
<h3>
<FormattedMessage id='hoc.activityCardsHeader' />
</h3>
......@@ -116,19 +116,19 @@ var Hoc = React.createClass({
</p>
</div>
<div className="resource">
<img className="img mod-resource"
<div className="hoc-section-resource">
<img className="hoc-section-resource-img"
src="/svgs/tips-card.svg"
alt="" />
<div className="resource-info">
<h5 className="resource-info-header">
<div className="hoc-section-resource-info">
<h5 className="hoc-section-resource-info-header">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</h5>
<a className="resource-anchor"
<a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
<FormattedMessage id='hoc.activityCards' />
</a>
<a className="resource-anchor"
<a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
<FormattedMessage id='hoc.facilitatorGuide' />
</a>
......@@ -136,28 +136,28 @@ var Hoc = React.createClass({
</div>
</section>
<section className="section">
<div className="section-column mod-split">
<section className="hoc-section">
<div className="hoc-section-column mod-split">
<h3>
<FormattedMessage id='hoc.helpScratch' />
</h3>
<p className="section-paragraph">
<p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.helpScratchDescription' />
</p>
</div>
<div className="section-column mod-split">
<img className="img mod-border"
<div className="hoc-section-column mod-split">
<img className="hoc-section-column-img"
src="/images/hoc/tips-test-animation.gif"
alt="Tips Window Animation" />
</div>
</section>
<section className="section">
<div className="section-column">
<section className="hoc-section">
<div className="hoc-section-column">
<h3>
<FormattedMessage id='hoc.moreActivities' />
</h3>
<p className="section-paragraph">
<p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.moreDescription' />
</p>
</div>
......@@ -166,7 +166,7 @@ var Hoc = React.createClass({
<div className="flex-row-card">
<a href="/projects/editor/?tip_bar=getStarted">
<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="" />
<Button>
<FormattedMessage id='hoc.tipsGetStarted' />
......@@ -176,26 +176,26 @@ var Hoc = React.createClass({
</div>
<div className="flex-row-card">
<a href="/bearstack/">
<a href="/hide/">
<div className="flex-row-card-info">
<img className="img card-info"
src="/images/hoc/bearstack-tutorial.jpg"
<img className="flex-row-card-info-img"
src="/images/hoc/hide-seek-tutorial.jpg"
alt="" />
<Button>
<FormattedMessage id='hoc.tipsBearstack' />
<FormattedMessage id='hoc.tipsHideAndSeekTitle' />
</Button>
</div>
</a>
</div>
<div className="flex-row-card">
<a href="/hoops">
<a href="//projects/editor/?tip_bar=dance">
<div className="flex-row-card-info">
<img className="img card-info"
src="/images/hoc/bball-tutorial.jpg"
<img className="flex-row-card-info-img"
src="/images/hoc/dance-tutorial.jpg"
alt="" />
<Button>
<FormattedMessage id='hoc.tipsBBallHoops' />
<FormattedMessage id='hoc.tipsDanceTitle' />
</Button>
</div>
</a>
......@@ -203,24 +203,24 @@ var Hoc = React.createClass({
</FlexRow>
</section>
<section className="section">
<div className="section-column">
<section className="hoc-section">
<div className="hoc-section-column">
<h3>
<FormattedMessage id='hoc.addToStudios' />
</h3>
<p className="section-paragraph">
<p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.addToStudiosDescription' />
</p>
</div>
<FlexRow>
<div className="studio">
<img className="img mod-studio"
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="studio-info">
<div className="hoc-section-studio-info">
<a href="/studios/432299/">
<h5 className="studio-info-header">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</h5>
</a>
......@@ -228,13 +228,13 @@ var Hoc = React.createClass({
</div>
<div className="studio">
<img className="img mod-studio"
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="studio-info">
<div className="hoc-section-studio-info">
<a href="/studios/1672166/">
<h5 className="studio-info-header">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.studioWeBareBears' />
</h5>
</a>
......@@ -243,26 +243,26 @@ var Hoc = React.createClass({
</FlexRow>
<FlexRow>
<div className="studio">
<img className="img mod-studio"
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="studio-info">
<div className="hoc-section-studio-info">
<a href="/studios/1999784/">
<h5 className="studio-info-header">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
</h5>
</a>
</div>
</div>
<div className="studio">
<img className="img mod-studio"
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="studio-info">
<div className="hoc-section-studio-info">
<a href="/studios/1672164/">
<h5 className="studio-info-header">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.studioAlice' />
</h5>
</a>
......@@ -272,47 +272,47 @@ var Hoc = React.createClass({
</section>
</Box>
<section className="section">
<section className="hoc-section">
<h3>
<FormattedMessage
id='general.collaborators'
defaultMessage={'Collaborators'} />
</h3>
<div className="logos">
<div className="hoc-section-logos">
<a href="http://scratched.gse.harvard.edu/">
<img className="img mod-logo"
<img className="hoc-section-logos-img"
src="/images/hoc/scratchEd-logo.png"
alt="ScratchEd" />
</a>
<a href="https://code.org/">
<img className="img mod-logo"
<img className="hoc-section-logos-img"
src="/images/hoc/code-org-logo.png"
alt="code.org" />
</a>
<a href="http://www.cartoonnetwork.com/">
<img className="img mod-logo"
<img className="hoc-section-logos-img"
src="/images/hoc/cn-logo.png"
alt="Cartoon Network" />
</a>
<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"
alt="Made with Code" />
</a>
<a href="http://www.paalive.org/">
<img className="img mod-logo"
<img className="hoc-section-logos-img"
src="/images/hoc/paa-logo.png"
alt="Progressive Arts Alliance" />
</a>
<a href="http://www.catrobat.org/">
<img className="img mod-logo"
<img className="hoc-section-logos-img"
src="/images/hoc/pocketcode-logo.png"
alt="Pocket Code" />
</a>
</div>
<div className="trademark">
<p className="section-paragraph legal">
<div className="hoc-section-trademark">
<p className="hoc-section-paragraph legal">
<FormattedHTMLMessage id='hoc.officialNotice' />
</p>
</div>
......
src/views/hoc/hoc.scss
View file @ cd6a60e5
......@@ -7,225 +7,205 @@ $base-bg: $ui-white;
padding: 0;
}
.hoc {
.img,
.button {
&.card-info {
width: calc(100% - 20px);
}
}
.hoc-section {
display: flex;
margin: 0 auto;
border-bottom: 1px solid $ui-border;
padding: 50px 0;
width: 95%;
text-align: center;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.img {
&.card-info {
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;
}
}
.hoc-section:last-child {
border-bottom: 0;
}
.button {
&.card-info {
margin: 0 10px 10px 10px;
}
}
.hoc-section.mod-title-banner {
border: 0;
padding: 10px 0;
max-width: $desktop;
}
.section {
display: flex;
margin: 0 auto;
border-bottom: 1px solid $ui-border;
padding: 50px 0;
width: 95%;
text-align: center;
.hoc-section-column {
width: 100%;
}
justify-content: center;
flex-wrap: wrap;
align-items: center;
.hoc-section-column.mod-split {
min-width: 200px;
max-width: 40%;
text-align: left;
}
&:last-child {
border-bottom: 0;
}
.hoc-section-column-img {
border-radius: 5px;
width: 100%;
}
&.title-banner-section {
border: 0;
padding: 10px 0;
max-width: $desktop;
}
}
.hoc-section-paragraph {
margin: 10px auto 20px;
max-width: 600px;
}
.section-column {
width: 100%;
.title-banner.mod-wbb-bg {
background-image: url("/images/hoc2015/hide-bg.jpg");
}
&.mod-split {
min-width: 200px;
max-width: 40%;
text-align: left;
}
}
.title-banner.mod-dance-bg {
background-image: url("/images/hoc2015/dance-bg.jpg");
}
.section-paragraph {
margin: 10px auto 20px;
max-width: 600px;
}
.title-banner.mod-name-bg {
background-image: url("/images/hoc2015/name-bg.jpg");
}
.title-banner {
&.wbb-bg {
background-image: url("/images/hoc2015/hide-bg.jpg");
}
.flex-row-card {
margin: 10px;
border-radius: 7px;
background-color: $active-gray;
padding: 2px;
&.dance-bg {
background-image: url("/images/hoc2015/dance-bg.jpg");
}
width: 30%;
min-width: 200px;
max-width: 230px;
}
&.name-bg {
background-image: url("/images/hoc2015/name-bg.jpg");
}
}
.flex-row-card-info {
border-radius: 5px;
background-color: $base-bg;
width: 100%;
height: 100%;
}
.flex-row-card {
margin: 10px;
border-radius: 7px;
background-color: $active-gray;
padding: 2px;
.flex-row-card-info-img,
.button.flex-row-card-info-button {
width: calc(100% - 20px);
}
width: 30%;
min-width: 200px;
max-width: 230px;
}
.flex-row-card-info-img {
margin: 10px 10px 5px 10px;
border-radius: 5px;
}
.flex-row-card-info {
border-radius: 5px;
background-color: $base-bg;
width: 100%;
height: 100%;
}
.button.flex-row-card-info-button {
margin: 0 10px 10px 10px;
}
.resource,
.studio {
display: flex;
margin: 10px 0;
min-width: 200px;
.hoc-section-resource,
.hoc-section-studio {
display: flex;
margin: 10px 0;
min-width: 200px;
text-align: left;
justify-content: center;
align-items: center;
}
text-align: left;
justify-content: center;
align-items: center;
}
.resource {
width: 33%;
}
.hoc-section-resource-img,
.hoc-section-studio-img {
margin-right: 15px;
}
.resource-anchor {
display: block;
margin: 5px 0;
font-size: .8em;
}
.hoc-section-resource {
width: 33%;
}
.resource-info-header {
margin: 0;
line-height: inherit;
}
.hoc-section-resource-anchor {
display: block;
margin: 5px 0;
font-size: .8em;
}
.studio {
width: 50%;
}
.hoc-section-resource-info-header {
margin: 0;
line-height: inherit;
}
.studio-info-header {
margin: 8px 0;
width: 200px;
color: $ui-blue;
font-weight: 500;
.hoc-section-studio {
width: 50%;
}
&:hover {
color: darken($ui-blue, 15);
}
}
.hoc-section-studio-img {
float: left;
}
.logos {
margin: 20px 0;
width: 100%;
}
.hoc-section-studio-info-header {
margin: 8px 0;
width: 200px;
color: $ui-blue;
font-weight: 500;
}
.trademark {
margin-top: 20px;
}
.hoc-section-studio-info-header:hover {
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) {
.hoc {
.studio {
display: inline-block;
}
.hoc-section-studio {
display: inline-block;
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.hoc {
.title-banner-section {
max-width: $mobile;
}
.studio {
display: inline-block;
}
.hoc-section.mod-title-banner {
max-width: $mobile;
}
.hoc-section-studio {
display: inline-block;
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.hoc {
.img {
&.mod-resource,
&.mod-studio {
margin: 0 auto;
}
&.mod-studio {
float: none;
}
}
.button {
&.card-info {
font-size: .7em;
}
}
.flex-row-card {
margin: 2px;
min-width: 175px;
}
.resource,
.studio {
display: block;
width: 30%;
min-width: 180px;
text-align: center;
}
.studio-info-header {
width: 100%;
}
.flex-row-card {
margin: 2px;
min-width: 175px;
}
.button.flex-row-card-info-button {
font-size: .7em;
}
.hoc-section-resource,
.hoc-section-studio {
display: block;
width: 30%;
min-width: 180px;
text-align: center;
}
.hoc-section-resource-img,
.hoc-section-studio-img {
margin: 0 auto;
}
.hoc-section-studio-img {
float: none;
}
.hoc-section-studio-info-header {
width: 100%;
}
}
src/views/hoc/l10n.json
View file @ cd6a60e5
......@@ -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.title": "Get Creative with Coding",
"hoc.tipsAnimateYourNameTitle": "Animate Your Name",
"hoc.tipsBearstack": "Bearstack Story",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsDanceTitle": "Dance, Dance, Dance",
"hoc.tipsGetStarted": "Getting Started",
"hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsMakeItFlyTitle": "Make it Fly",
"hoc.tipsPongGame": "Create a Pong Game",
"hoc.tipsBBallHoops": "B-Ball Hoops"
"hoc.tipsPongGame": "Create a Pong Game"
}
\ 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