mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-25 20:29:45 -04:00
refactored the Resources for Educators section to have icons
This commit is contained in:
Ben Wheeler
parent
ee2cb00cc8
commit
815aa31f91
6 changed files with 156 additions and 2 deletions
src/views/teachers/landing
static
|
|
@ -10,7 +10,7 @@
|
|||
"teacherlanding.educatorGuideLinkText" : "Educator Guides",
|
||||
"teacherlanding.sip":"{sipLink} shares ideas and resources from Scratch Team and educators around the world, with a new theme each month.",
|
||||
"teacherlanding.sipText":"Scratch in Practice",
|
||||
"teacherlanding.creativeComputing": "{scratchEdLink} from the ScratchEd team provides plans, activities, and strategies for introducing creative computing.",
|
||||
"teacherlanding.creativeComputing": "{scratchEdLink} from the ScratchEd Team at Harvard provides plans, activities, and strategies for introducing creative computing in the classroom.",
|
||||
"teacherlanding.scratchEdLinkText" : "Creative Computing",
|
||||
"teacherlanding.studentResourcesTitle" : "Resources for Students",
|
||||
"teacherlanding.tutorialResources": "Explore {tutorialLink} to find out how you can create stories, animations, games, and more!",
|
||||
|
|
|
|||
|
|
@ -67,6 +67,91 @@ const Landing = props => (
|
|||
</TitleBanner>
|
||||
|
||||
<div className="inner">
|
||||
<section>
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="teacherlanding.educatorResourcesTitle" /></h2>
|
||||
<FlexRow className="guides-and-tutorials">
|
||||
<div>
|
||||
<div className="icon-wrapper">
|
||||
<a href="/projects/editor/?tutorial=all">
|
||||
<img
|
||||
className="sip-icon"
|
||||
alt="tips window icon"
|
||||
src="/images/teachers/sip.png"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.sip"
|
||||
values={{
|
||||
sipLink: (
|
||||
<a
|
||||
href="https://sip.scratch.mit.edu/"
|
||||
>
|
||||
<FormattedMessage id="teacherlanding.sipText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="icon-wrapper">
|
||||
<a href="/ideas">
|
||||
<img
|
||||
className="resources-icon"
|
||||
alt="creative computing icon"
|
||||
src="/svgs/teachers/resources.svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.educatorGuides"
|
||||
values={{
|
||||
educatorLink: (
|
||||
<a
|
||||
href={props.intl.formatMessage({
|
||||
id: 'guides.EducatorGuidesAllLink'
|
||||
})}
|
||||
>
|
||||
<FormattedMessage id="teacherlanding.educatorGuideLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="icon-wrapper">
|
||||
<a
|
||||
href={props.intl.formatMessage({
|
||||
id: 'cards.scratch-cards-allLink'
|
||||
})}
|
||||
>
|
||||
<img
|
||||
className="creativecomputing-icon"
|
||||
alt="cards icon"
|
||||
src="/svgs/teachers/creative-computing.svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="teacherlanding.creativeComputing"
|
||||
values={{
|
||||
scratchEdLink: (
|
||||
<a href="http://scratched.gse.harvard.edu/guide/">
|
||||
<FormattedMessage id="teacherlanding.scratchEdLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
<section id="resources">
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="teacherlanding.educatorResourcesTitle" /></h2>
|
||||
|
|
|
|||
|
|
@ -92,6 +92,22 @@ $story-width: $cols3;
|
|||
max-width: 16rem;
|
||||
text-align: center;
|
||||
}
|
||||
.icon-wrapper {
|
||||
height: 150px;
|
||||
|
||||
img.sip-icon {
|
||||
padding: 1.75rem;
|
||||
width: 130px;
|
||||
}
|
||||
img.resources-icon {
|
||||
padding: 1.5rem;
|
||||
width: 100px;
|
||||
}
|
||||
img.creativecomputing-icon {
|
||||
padding: 1.5rem;
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
|
|||
BIN
static/images/teachers/sip.png
Normal file
BIN
static/images/teachers/sip.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 14 KiB |
|
|
@ -1 +1,30 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>creative-computing</title><g opacity="0.1"><rect x="52.5" y="36.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="51.5" y="35.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><g opacity="0.1"><rect x="48.5" y="32.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="47.5" y="31.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><g opacity="0.1"><rect x="44.5" y="28.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="43.5" y="27.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff"/><polygon points="79.5 59.5 43.5 59.5 43.5 51.5 79.5 51.5 75.5 55.5 79.5 59.5" fill="#f7941e" stroke="#ce781b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="43.5" y="27.5" width="44" height="52" rx="2.12" ry="2.12" fill="none" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="63.5" y1="67.5" x2="79.5" y2="67.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="63.5" y1="71.5" x2="67.5" y2="71.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="71.5" y1="71.5" x2="79.5" y2="71.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="56px" height="64px" viewBox="0 0 56 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Artboard</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard">
|
||||
<g id="creative-computing" transform="translate(1.000000, 1.000000)">
|
||||
<g id="Group" opacity="0.1" transform="translate(9.000000, 9.000000)" stroke="#231F20" fill-rule="nonzero" stroke-width="1.4" fill="#231F20" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect id="Rectangle-path" x="0.5" y="0.5" width="44" height="52" rx="2.12"></rect>
|
||||
</g>
|
||||
<rect id="Rectangle-path" stroke="#824DCB" stroke-width="1.4" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="8.5" y="8.5" width="44" height="52" rx="2.12"></rect>
|
||||
<g id="Group" opacity="0.1" transform="translate(5.000000, 5.000000)" stroke="#231F20" fill-rule="nonzero" stroke-width="1.4" fill="#231F20" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect id="Rectangle-path" x="0.5" y="0.5" width="44" height="52" rx="2.12"></rect>
|
||||
</g>
|
||||
<rect id="Rectangle-path" stroke="#824DCB" stroke-width="1.4" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="4.5" y="4.5" width="44" height="52" rx="2.12"></rect>
|
||||
<g id="Group" opacity="0.1" transform="translate(1.000000, 1.000000)" stroke="#231F20" fill-rule="nonzero" stroke-width="1.4" fill="#231F20" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect id="Rectangle-path" x="0.5" y="0.5" width="44" height="52" rx="2.12"></rect>
|
||||
</g>
|
||||
<rect id="Rectangle-path" fill="#FFFFFF" fill-rule="nonzero" x="0.5" y="0.5" width="44" height="52" rx="2.12"></rect>
|
||||
<polygon id="Shape" stroke="#CE781B" stroke-width="1.4" fill="#F7941E" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="36.5 32.5 0.5 32.5 0.5 24.5 36.5 24.5 32.5 28.5"></polygon>
|
||||
<rect id="Rectangle-path" stroke="#824DCB" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" x="0.5" y="0.5" width="44" height="52" rx="2.12"></rect>
|
||||
<path d="M20.5,40.5 L36.5,40.5" id="Shape" stroke="#A7A9AC" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M20.5,44.5 L24.5,44.5" id="Shape" stroke="#A7A9AC" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M28.5,44.5 L36.5,44.5" id="Shape" stroke="#A7A9AC" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before 
(image error) Size: 1.8 KiB After 
(image error) Size: 2.9 KiB
|
24
static/svgs/teachers/resources.svg
Normal file
24
static/svgs/teachers/resources.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="59px" height="64px" viewBox="0 0 59 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Artboard</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Artboard" stroke-width="1.4" fill-rule="nonzero">
|
||||
<g id="resources" transform="translate(2.000000, 1.000000)">
|
||||
<g id="Group" opacity="0.4" style="mix-blend-mode: multiply;" transform="translate(0.000000, 7.000000)" stroke="#BCBEC0" fill="#BCBEC0">
|
||||
<path d="M55,10.18 L49.25,28.24 L49.25,47.16 C49.2500112,48.509202 48.1591908,49.6044931 46.81,49.61 L42.43,49.61 L41.48,52.61 C41.282743,53.2268572 40.848344,53.739989 40.2725027,54.0363503 C39.6966615,54.3327116 39.0266232,54.3879873 38.41,54.19 L24.18,49.61 L9.18,49.61 C7.83080924,49.6044931 6.73998876,48.509202 6.74,47.16 L6.74,44 L2.57,42.67 C1.32005722,42.2548438 0.625178693,40.9226245 1,39.66 L6.75,21.66 L6.75,2.66 C6.75,1.31242521 7.84242521,0.22 9.19,0.22 L31.85,0.22 L49.25,5.77 L53.42,7.1 C54.7059477,7.51524424 55.4128655,8.89328666 55,10.18 L55,10.18 Z" id="Shape"></path>
|
||||
<path d="M49.25,2.66 L49.25,5.77 L31.85,0.22 L46.85,0.22 C48.1819281,0.24183781 49.250179,1.32789288 49.25,2.66 L49.25,2.66 Z" id="Shape"></path>
|
||||
</g>
|
||||
<rect id="Rectangle-path" stroke="#824DCB" fill="#CAA9FF" transform="translate(27.997953, 30.167365) rotate(17.690000) translate(-27.997953, -30.167365) " x="6.73795301" y="5.4673647" width="42.52" height="49.4" rx="2.12"></rect>
|
||||
<rect id="Rectangle-path" stroke="#824DCB" fill="#CAA9FF" x="6.74" y="5.47" width="42.52" height="49.4" rx="2.12"></rect>
|
||||
<path d="M12.57,18.78 L43.43,18.78 L43.43,44.35 C43.43,46.0068542 42.0868542,47.35 40.43,47.35 L15.57,47.35 C13.9131458,47.35 12.57,46.0068542 12.57,44.35 L12.57,18.78 L12.57,18.78 Z" id="Shape" stroke="#824DCB" fill="#FFFFFF"></path>
|
||||
<path d="M15.34,13 L40.66,13 C42.1898288,13 43.43,14.2401712 43.43,15.77 L43.43,18.77 L12.57,18.77 L12.57,15.77 C12.57,15.0353503 12.8618384,14.33079 13.3813142,13.8113142 C13.90079,13.2918384 14.6053503,13 15.34,13 L15.34,13 Z" id="Shape" stroke="#824DCB" fill="#824DCB"></path>
|
||||
<polygon id="Shape" stroke="#824DCB" fill="#FFFFFF" points="32.76 34.95 28 39.7 23.24 34.95 25.36 34.95 25.36 30.45 30.64 30.45 30.64 34.95"></polygon>
|
||||
<path d="M25.93,27.53 L30.07,27.53" id="Shape" stroke="#824DCB" fill="#FFFFFF"></path>
|
||||
<path d="M26.88,24.81 L29.12,24.81" id="Shape" stroke="#824DCB" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 2.9 KiB |
Loading…
Add table
Reference in a new issue