Skip to content

GitLab

S
scratch-www
Commit 1b574cc2 authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

Changing subnav to fixed position, removing remnants of the ideas page, more... 

Changing subnav to fixed position, removing remnants of the ideas page, more updates to the message section
parent a1b77639
Show whitespace changes
Inline Side-by-side
Showing with 739 additions and 864 deletions
src/views/annual-report/annual-report.jsx
View file @ 1b574cc2
......@@ -8,9 +8,6 @@ const React = require('react');
const Button = require('../../components/forms/button.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
// const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
// const NavigationBox = require('../../components/navigation/base/navigation.jsx');
const Comment = require('../../components/comment/comment.jsx');
const Page = require('../../components/page/www/page.jsx');
......@@ -87,8 +84,8 @@ class AnnualReport extends React.Component {
// Return a button click handler that scrolls to the
// correct section
return () => {
this.scrollTo(this.sectionRefs[sectionName]);
this.setState({dropdownVisible: false});
this.scrollTo(this.sectionRefs[sectionName]);
};
}
......@@ -255,6 +252,7 @@ class AnnualReport extends React.Component {
{subnav}
</MediaQuery>
</div>
<div className="annual-report-content">
<div
className="message-section section"
ref={this.setRef(SECTIONS.message)}
......@@ -271,7 +269,10 @@ class AnnualReport extends React.Component {
<img src="/images/annual-report/message/hero-image.svg" />
</FlexRow>
<MediaQuery minWidth={frameless.desktop}>
<img src="/images/annual-report/message/wave-icon.svg" />
<img
className="wave-icon-desktop"
src="/images/annual-report/message/wave-icon.svg"
/>
</MediaQuery>
<div className="inner">
<FlexRow className="message-content">
......@@ -308,10 +309,17 @@ class AnnualReport extends React.Component {
<p className="message-signature">
<FormattedMessage id="annualReport.messageSignature" />
</p>
<img src="/images/annual-report/message/team-photo.svg" />
<img
className="team-photo"
src="/images/annual-report/message/team-photo.svg"
/>
</div>
</FlexRow>
</div>
<div className="message-transition-images">
<img src="/images/annual-report/message/blocks.svg" />
<img src="/images/annual-report/message/banana.svg" />
</div>
</div>
<div
className="mission section"
......@@ -531,24 +539,6 @@ class AnnualReport extends React.Component {
ref={this.setRef(SECTIONS.reach)}
>
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
<h2>
<FormattedMessage id="ideas.activityGuidesTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.activityGuidesText" />
</p>
</div>
<a
className="wide-button"
href="/projects/editor/?tutorial=all"
>
<Button className="ideas-button wide-button">
<FormattedMessage id="ideas.seeAllTutorials" />
</Button>
</a>
</section>
</div>
</div>
<div
......@@ -557,24 +547,6 @@ class AnnualReport extends React.Component {
ref={this.setRef(SECTIONS.initiatives)}
>
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
<h2>
<FormattedMessage id="ideas.activityGuidesTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.activityGuidesText" />
</p>
</div>
<a
className="wide-button"
href="/projects/editor/?tutorial=all"
>
<Button className="ideas-button wide-button">
<FormattedMessage id="ideas.seeAllTutorials" />
</Button>
</a>
</section>
</div>
</div>
<div
......@@ -1018,6 +990,7 @@ class AnnualReport extends React.Component {
</FlexRow>
</div>
</div>
</div>
);
}
}
......
src/views/annual-report/annual-report.scss
View file @ 1b574cc2
......@@ -8,10 +8,6 @@ $base-bg: $ui-white;
padding: 0;
}
// body {
// font-family: "Helvetica Neue";
// }
h1 {
font-size: 5rem;
line-height: 6.125rem;
......@@ -48,6 +44,11 @@ p {
width: $cols4;
}
h1 {
font-size: 3.25rem;
line-height: 4rem;
}
h2 {
font-size: 2rem;
}
......@@ -62,128 +63,8 @@ p {
scroll-margin-top: 104px;
}
.banner-wrapper {
background: $ui-yellow bottom right url("/images/ideas/right-juice.png") no-repeat;
}
.ideas-banner {
margin-bottom: 0;
background: bottom left url("/images/ideas/left-juice.png") no-repeat;
}
.ttt-section {
display: flex;
margin: 0 auto;
text-align: center;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.tips-divider {
border-top: 1px solid $ui-gray;
width: 100%;
}
.tips-banner-image {
max-width: calc(100% - 2rem);
}
.ideas-button {
margin-right: .75rem;
background-color: $ui-blue;
color: $ui-white;
font-size: 1rem;
img {
margin-right: 1rem;
height: 1.5rem;
vertical-align: middle;
}
a {
color: $ui-white;
}
span {
vertical-align: middle;
}
}
.wide-button {
width: 100%;
}
.ideas-all-cards {
padding: 5rem 0 !important;
}
.ideas-starter {
padding: 5rem 0 !important;
}
.tips-getting-started {
background-color: $ui-light-gray;
padding-top: 2.5rem;
}
.tips-left {
justify-content: flex-start;
}
.ideas-image {
margin-right: 2rem;
}
.tips-activity-guides {
background-color: $ui-light-gray;
padding-bottom: 2rem;
}
.purchase-button {
img {
margin-right: 0;
margin-left: .75rem;
width: 1rem;
vertical-align: baseline;
}
}
.tips-info-section {
padding: 2.5rem 0;
width: 100%;
flex-wrap: nowrap;
}
.tips-info-body {
text-align: left;
}
.tips-cards-buttons {
a {
white-space: normal;
}
}
.gray-area {
background-color: $ui-gray;
}
.title-banner-h1 {
text-align: left;
}
.section-heading {
font-size: 52px;
}
.title-banner {
margin-bottom: 0;
}
.message-section {
background-color: $ui-blue;
padding: 0 56px;
h1, h2, p {
color: $ui-white;
......@@ -194,6 +75,8 @@ p {
width: 100%;
}
padding: 0px;
}
}
......@@ -205,9 +88,35 @@ p {
}
.masthead-content {
width: 440px;
max-width: 440px;
text-align: left;
}
@media #{$intermediate-and-smaller} {
img {
width: 75%;
}
.masthead-year {
text-align: center;
}
}
@media #{$medium-and-smaller} {
.masthead-content {
text-align: center;
}
}
@media #{$small} {
.masthead-content {
max-width: 300px;
}
}
}
.wave-icon-desktop {
margin-left: 56px;
}
.message-content{
......@@ -215,30 +124,71 @@ p {
@media #{$big} {
h2 {
width: 300px;
max-width: 300px;
}
}
@media #{$intermediate-and-smaller} {
align-items: center;
}
@media #{$medium-and-intermediate} {
text-align: left;
h2 {
width: 480px;
max-width: 480px;
vertical-align: middle;
}
}
@media #{$small} {
p {
text-align: left;
}
h2 {
max-width: 300px;
vertical-align: middle;
text-align: center;
}
}
.wave-icon-and-title {
display: flex;
justify-content: center;
img {
margin-right: 20px;
}
@media #{$small} {
flex-direction: column;
}
}
.message-from-team {
width: 620px;
max-width: 620px;
@media #{$small} {
max-width: 300px;
}
}
img {
.team-photo {
margin: 8px 24px 8px 0px;
vertical-align: middle;
@media #{$small} {
max-width: 300px;
}
}
}
.message-transition-images {
display: flex;
justify-content: space-between;
img {
margin-bottom: -140px;
}
}
......@@ -970,7 +920,7 @@ img.tips-icon {
}
.subnavigation {
position: sticky;
position: fixed;
top: 50px;
z-index: 9;
box-shadow: 0 0 3px $box-shadow-gray;
......@@ -1064,3 +1014,8 @@ img.tips-icon {
}
}
.annual-report-content, #footer {
position: relative;
top: 58px;
}
src/views/annual-report/l10n.json
View file @ 1b574cc2
{
"ideas.headerMessage": "What will you create?",
"ideas.headerButtonMessage": "Choose a tutorial",
"ideas.gettingStartedTitle": "Getting Started",
"ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.",
"ideas.tryIt": "Try it!",
"ideas.activityGuidesTitle": "Activity Guides",
"ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.",
"ideas.animateANameTitle": "Animate a Name",
"ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.",
"ideas.animateACharacterTitle": "Animate a Character",
"ideas.animateACharacterDescription": "Bring characters to life with animation.",
"ideas.makeMusicTitle": "Make Music",
"ideas.makeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
"ideas.createAStoryTitle": "Create a Story",
"ideas.createAStoryDescription": "Choose characters, add conversation, and bring your story to life.",
"ideas.chaseGameTitle": "Make a Chase Game",
"ideas.chaseGameDescription": "Make a game where you chase a character to score points.",
"ideas.videoSensingTitle": "Video Sensing",
"ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.",
"ideas.seeAllTutorials": "See All Tutorials",
"ideas.cardsTitle": "Get the Entire Collection of Coding Cards",
"ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!",
"ideas.starterProjectsTitle": "Starter Projects",
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
"ideas.starterProjectsButton": "Explore Starter Projects",
"ideas.tryTheTutorial": "Try the tutorial",
"ideas.codingCards": "Coding Cards",
"ideas.educatorGuide": "Educator Guide",
"ideas.desktopEditorHeader": "Scratch App Download",
"ideas.desktopEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download the Scratch app</a>.",
"ideas.questionsHeader": "Questions",
"ideas.questionsBody": "Have more questions? See the <a href=\"/info/faq\">Frequently Asked Questions</a> or visit the <a href=\"/discuss/7/\">Help with Scripts Forum</a>.",
"ideas.cardsPurchase": "Purchase Printed Set",
"ideas.MakeItFlyTitle": "Make It Fly",
"ideas.MakeItFlyDescription": "Choose any character and make it fly!",
"ideas.RaceTitle": "Race to the Finish",
"ideas.RaceDescription": "Make a game where two characters race each other.",
"ideas.HideAndSeekTitle": "Hide and Seek",
"ideas.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.",
"ideas.FashionTitle": "Fashion Game",
"ideas.FashionDescription": "Make a game where you dress a character with different clothes and styles.",
"ideas.PongTitle": "Pong Game",
"ideas.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
"ideas.ImagineTitle": "Imagine a World",
"ideas.ImagineDescription": "Imagine a world where anything is possible.",
"ideas.DanceTitle": "Let's Dance",
"ideas.DanceDescription": "Design an animated dance scene with music and dance moves.",
"ideas.CatchTitle": "Catch Game",
"ideas.CatchDescription": "Make a game where you catch things falling from the sky.",
"ideas.VirtualPetTitle": "Virtual Pet",
"ideas.VirtualPetDescription": "Create an interactive pet that can eat, drink, and play.",
"annualReport.subnavMessage": "Message",
"annualReport.subnavMission": "Mission",
"annualReport.subnavMilestones": "Milestones",
......
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