Skip to content

Commit

Permalink
Merge pull request #8873 from MiroslavDionisiev/UEPR-90
Browse files Browse the repository at this point in the history 
feat: [UEPR-90] Added new section to the ideas page
  • Loading branch information
@MiroslavDionisiev
MiroslavDionisiev authored Nov 14, 2024
2 parents ceefbbf + 94984d7 commit 0cc1091
Show file tree
Hide file tree
Showing 8 changed files with 350 additions and 407 deletions.
1 change: 1 addition & 0 deletions src/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $active-dark-gray: hsla(0, 0%, 0%, .2);
$box-shadow-gray: hsla(0, 0%, 0%, .25);
$box-shadow-light-gray: hsla(0, 0%, 0%, .15);
$overlay-gray: hsla(0, 0%, 0%, .75);
$gray-50: hsla(226, 15%, 97%, 1);
$transparent-light-blue: rgba(229, 240, 254, 0);

/* Typography Colors */
Expand Down
467 changes: 222 additions & 245 deletions src/views/ideas/ideas.jsx
View file

Large diffs are not rendered by default.

250 changes: 114 additions & 136 deletions src/views/ideas/ideas.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,127 +17,131 @@ $base-bg: $ui-white;
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);
}

.banner-button {
background-color: $ui-white;
color: $ui-aqua;
font-size: 1rem;

img {
margin-right: 1rem;
height: 1.5rem;
vertical-align: middle;
}

a {
color: $ui-white;
}

span {
vertical-align: middle;
.tips {
.inner {
display: flex;
flex-direction: column;
gap: 0.75rem;

.tips-section {
display: flex;
justify-content: space-between;

.tip {
display: flex;
flex-direction: column;

.tips-img {
width: $cols3;
height: 10rem;
}
}
}
}
}

.ideas-button {
margin-right: .75rem;
background-color: $ui-purple-dark;
color: $ui-white;
font-size: 1rem;
.physical-ideas {
.inner {
display: flex;
flex-direction: column;
gap: 1.5rem;

img {
margin-right: 1rem;
height: 1.5rem;
vertical-align: middle;
}
.physical-ideas-section {
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;

.physical-idea {
display: flex;
gap: 1.5rem;
text-align: start;

.makey-makey-img {
height: 6.5rem;
}

.micro-bit {
height: 8.5rem;
}

.physical-idea-description {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;

p {
margin: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
}

.tips-button {
width: auto;
padding: 0.75rem;
}
}
}

a {
color: $ui-white;
}
.physical-idea:first-child {
flex: 1.5;
}

span {
vertical-align: middle;
.physical-idea:last-child {
flex: 2;
}
}
}
}

.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, .physical-ideas {
display: flex;
justify-content: center;
padding: 3rem 0;
background-color: $gray-50;
}

.tips-left {
justify-content: flex-start;
}
.gray-area {
background-color: $ui-gray;

.ideas-image {
margin-right: 2rem;
}
.tips-info-section {
padding: 2.5rem 0;
width: 100%;
flex-wrap: nowrap;

.tips-activity-guides {
background-color: $ui-light-gray;
padding-bottom: 2rem;
}
.tips-info-body {
text-align: left;
}
}

.purchase-button {
img {
margin-right: 0;
margin-left: .75rem;
width: 1rem;
vertical-align: baseline;
img.tips-icon {
height: 1.75rem;
}
}

.tips-info-section {
padding: 2.5rem 0;
width: 100%;
flex-wrap: nowrap;
.section-header {
font-size: 2rem;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-weight: 700;
}

.tips-info-body {
text-align: left;
}
.tips-button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;

font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-weight: 700;
line-height: 1.25rem;

.tips-cards-buttons {
a {
white-space: normal;
}
}
width: 100%;
padding: 0.5rem 0;

.gray-area {
background-color: $ui-gray;
border-radius: 4px;
}

img.tips-icon {
height: 1.75rem;
}
//4 columns
@media #{$small} {

Expand All @@ -151,14 +155,7 @@ img.tips-icon {
}
}

.ttt-head {

p {
max-width: $cols4;
}
}

//put the image first if in 4-column
// put the image first if in 4-column
.tips-info-body {
max-width: $cols4;
text-align: center;
Expand Down Expand Up @@ -187,19 +184,6 @@ img.tips-icon {
}
}

.ttt-head {
p {
max-width: $cols6;
}
}

.tips-info-body.tips-illustration {
order: -1;
img {
width: $cols4;
}
}

.tips-info-body {
max-width: $cols4;
text-align: center;
Expand All @@ -219,21 +203,21 @@ img.tips-icon {
}
}

.ttt-head {
p {
max-width: $cols6;
}
.tips-info-body {
max-width: $cols4;
}
}

.tips-info-section {
&.mod-align-top {
align-items: flex-start;
@media #{$intermediate-and-smaller}{
.physical-ideas {
.inner {
.physical-ideas-section {
.physical-idea:first-child {
flex: 2;
}
}
}
}

.tips-info-body {
max-width: $cols4;
}
}

// 12 columns
Expand All @@ -248,12 +232,6 @@ img.tips-icon {
}
}

.ttt-head {
p {
max-width: $cols8;
}
}

.tips-info-section {
&.mod-align-top {
align-items: flex-start;
Expand Down
2 changes: 2 additions & 0 deletions src/views/ideas/l10n-static.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
"cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf",
"cards.name-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/name-cards.pdf",
"cards.animation-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/animation-cards.pdf",
"cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf",
"cards.makeymakey-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/makeymakey-cards.pdf",
"cards.music-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/music-cards.pdf",
"cards.story-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/story-cards.pdf",
"cards.chase-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/chase-cards.pdf",
Expand Down
36 changes: 10 additions & 26 deletions src/views/ideas/l10n.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
"ideas.headerMessage": "What will you create?",
"ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.",
"ideas.headerButtonMessage": "Choose a tutorial",
"ideas.gettingStartedTitle": "Getting Started",
"ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.",
"ideas.startHereText": "New to Scratch? Stay here!",
"ideas.gettingStartedButtonText": "Try Getting Started Tutorial",
"ideas.seeTutorialsLibraryButtonText": "See Tutorials Library",
"ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",
"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.seeTutorialsLibraryImageDescription": "An illustration of three tutorial thumbnails.",
"ideas.animateANameTitle": "Animate a Name",
"ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.",
"ideas.animateANameImageDescription": "The name ANYA in all caps and blocked letters is poised to wiggle",
Expand All @@ -26,43 +25,28 @@
"ideas.videoSensingTitle": "Video Sensing",
"ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.",
"ideas.videoSensingImageDescription": "A virtual hand dodges a spurt of flame in an attempt to pet a dragon.",
"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.cardsIllustrationDescription": "An assortment of fun, animated characters and objects leap out of a stack of cards.",
"ideas.starterProjectsTitle": "Starter Projects",
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
"ideas.starterProjectsImageDescription": "An illustration of the Scratch Code Editor.",
"ideas.starterProjectsButton": "Explore Starter Projects",
"ideas.tryTheTutorial": "Try the tutorial",
"ideas.codingCards": "Coding Cards",
"ideas.educatorGuide": "Educator Guide",
"ideas.physicalPlayIdeas": "Physical Play Ideas",
"ideas.microBitHeader": "Have a micro:bit?",
"ideas.microBitBody": "Connect your Scratch project to the real world.",
"ideas.makeyMakeyHeader": "Have a MakeyMakey?",
"ideas.makeyMakeyBody": "Turn anything into a key that connects with your Scratch project!",
"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.desktopEditorBodyHTML": "To create projects without an Internet connection, you can <a>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.questionsBodyHTML": "Have more questions? See the <faq>Frequently Asked Questions</faq> or visit the <forum>Help with Scripts Forum</forum>.",
"ideas.cardsPurchase": "Purchase Printed Set",
"ideas.MakeItFlyTitle": "Make It Fly",
"ideas.MakeItFlyDescription": "Choose any character and make it fly!",
"ideas.MakeItFlyImageDescription": "The scratch cat flies over the skyline. Alongside a flying taco.",
"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.PongImageDescription": "A ball bounces off a digital paddle.",
"ideas.ImagineTitle": "Imagine a World",
"ideas.ImagineDescription": "Imagine a world where anything is possible.",
"ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings.",
"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."
"ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings."
}
1 change: 1 addition & 0 deletions static/images/ideas/make-board.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/ideas/micro-bit.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/ideas/see-tutorials-library.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0cc1091

Please sign in to comment.