scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

attempted mobile styling

Browse source
This commit is contained in:
Connor Hudson 2016-06-23 13:18:45 -04:00
parent 230cadffa5
commit c52a6e16e9
3 changed files with 101 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/views/teachers/landing/carousel.scss
View file

@ -5,6 +5,10 @@
$button-offset: $icon-size + 5px; $button-offset: $icon-size + 5px;
$box-content-offset: 20px; $box-content-offset: 20px;
.slick-slide {
padding: 0;
}
margin-bottom: 0; margin-bottom: 0;
padding: 12px $button-offset; padding: 12px $button-offset;
@ -72,7 +76,7 @@
} }
/*.slick-slide { /*.slick-slide {
padding-right: 30px; padding-right: 2px;
}*/ }*/
} }

68
src/views/teachers/landing/landing.jsx
View file

@ -19,7 +19,14 @@ var settings = {
arrows: true, arrows: true,
infinite: false, infinite: false,
slidesToShow: 2, slidesToShow: 2,
slidesToScroll: 2 slidesToScroll: 2,
responsive: [
{ breakpoint: 640, settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true
}}
]
}; };
var Landing = React.createClass({ var Landing = React.createClass({
@ -71,34 +78,42 @@ var Landing = React.createClass({
math, computer science, foreign languages, and the arts</p> math, computer science, foreign languages, and the arts</p>
</FlexRow> </FlexRow>
<Slider className="carousel" {...settings}> <Slider className="carousel" {...settings}>
<div>
<div className="story">
<img src="/images/teachers/stories/dylan.jpg" alt="dylan's story" />
<a href="#">Dylan Person</a>
<p>A place</p>
</div>
</div>
<div>
<div className="story">
<img src="/images/teachers/stories/ghana-code-club.jpg"
alt="ghana code club's story" />
<a href="#">Dylan Person</a>
<p>A place</p>
</div>
</div>
<div> <div>
<div className="story"> <div className="story">
<img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" /> <img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
<a href="#">Dylan Person</a> <div className="story-info">
<p>A place</p> <a href="//bit.ly/28SBsa9">Ingrid Gustafson</a>
<p>Instructional Technology Specialist</p>
</div>
</div>
</div>
<div>
<div className="story">
<img src="/images/teachers/stories/dylan.jpg" alt="dylan's story" />
<div className="story-info">
<a href="//bit.ly/28Q5l6P">Dylan Ryder</a>
<p>Educational Technologist</p>
</div>
</div> </div>
</div> </div>
<div> <div>
<div className="story"> <div className="story">
<img src="/images/teachers/stories/plug-in-studio.jpg" <img src="/images/teachers/stories/plug-in-studio.jpg"
alt="plug in studio's story" /> alt="plug in studio's story" />
<a href="#">Dylan Person</a> <div className="story-info">
<p>A place</p> <a href="//bit.ly/28SC1AY">Plug-In Studios</a>
<p>After-School Program</p>
</div>
</div>
</div>
<div>
<div className="story">
<img src="/images/teachers/stories/ghana-code-club.jpg"
alt="ghana code club's story" />
<div className="story-info">
<a href="//bit.ly/28UzapJ">Ghana Code Club</a>
<p>After-School Program</p>
</div>
</div> </div>
</div> </div>
</Slider> </Slider>
@ -112,8 +127,8 @@ var Landing = React.createClass({
<p> <p>
<a href="http://scratched.gse.harvard.edu/">ScratchEd</a> is an{' '} <a href="http://scratched.gse.harvard.edu/">ScratchEd</a> is an{' '}
online community where Scratch educators{' '} online community where Scratch educators{' '}
<a href="http://scratched.gse.harvard.edu/stories">share stories</a>,{' '} <a href="http://scratched.gse.harvard.edu/stories">share stories</a>,
exchange resources, ask questions, and{' '} exchange resources, ask questions, and{' '}
find people. ScratchEd is developed and supported by{' '} find people. ScratchEd is developed and supported by{' '}
the Harvard Graduate School of Education. the Harvard Graduate School of Education.
</p> </p>
@ -147,9 +162,10 @@ var Landing = React.createClass({
</div> </div>
<div> <div>
<img src="/svgs/teachers/creative-computing.svg" alt="creative computing icon" /> <img src="/svgs/teachers/creative-computing.svg" alt="creative computing icon" />
<p className="intro"> <p>
The <a href="http://scratched.gse.harvard.edu/guide/">Creative Computing{' '} The <a href="http://scratched.gse.harvard.edu/guide/">Creative Computing{' '}
Curriculum <br />Guide</a> provides plans, activities, and{' '} Curriculum Guide</a>{' '}
provides plans, activities, and{' '}
strategies for introducing creative computing. strategies for introducing creative computing.
</p> </p>
</div> </div>
@ -167,9 +183,9 @@ var Landing = React.createClass({
projects and comments. To learn more, see the{' '} projects and comments. To learn more, see the{' '}
Teacher Account FAQ page. Teacher Account FAQ page.
</p> </p>
<Button>Request Account</Button> <a href="register"><Button>Request Account</Button></a>
</div> </div>
<img src="/images/teachers/teacher-account.png" alt="teacher account" /> <img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
</div> </div>
</div> </div>
</div> </div>

76
src/views/teachers/landing/landing.scss
View file

@ -8,6 +8,9 @@ $teacher-spot: $ui-purple;
} }
.educators { .educators {
a {
white-space: normal;
}
.title-banner { .title-banner {
&.masthead { &.masthead {
background-color: $teacher-spot; background-color: $teacher-spot;
@ -21,7 +24,7 @@ $teacher-spot: $ui-purple;
p { p {
margin: 0; margin: 0;
width: $cols6; max-width: $cols6;
text-align: left; text-align: left;
color: $ui-white; color: $ui-white;
@ -58,9 +61,10 @@ $teacher-spot: $ui-purple;
#teacher-accounts { #teacher-accounts {
width: 100%; width: 100%;
height: $cols7;
background-color: $teacher-spot; background-color: $teacher-spot;
margin-bottom: 0px; margin-bottom: -3px;
padding: 50px 0;
overflow-x: hidden;
.inner { .inner {
display: flex; display: flex;
@ -88,6 +92,7 @@ $teacher-spot: $ui-purple;
#left { #left {
max-width: $cols4; max-width: $cols4;
text-align: left;
p { p {
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
@ -104,7 +109,6 @@ $teacher-spot: $ui-purple;
} }
img { img {
display: inline;
max-width: $cols7; max-width: $cols7;
} }
} }
@ -155,6 +159,7 @@ $teacher-spot: $ui-purple;
margin-bottom: 2rem; margin-bottom: 2rem;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
text-align: left;
div { div {
max-width: $cols6; max-width: $cols6;
@ -195,19 +200,10 @@ $teacher-spot: $ui-purple;
padding-bottom: 2rem; padding-bottom: 2rem;
.story { .story {
width: $cols4; width: $cols4 - 0.125em ;
border: 1px solid $ui-border; border: 1px solid $ui-border;
border-radius: 10px; border-radius: 10px;
background-color: $ui-white; background-color: $ui-white;
img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
p {
width: $cols2;
}
} }
.carousel { .carousel {
@ -218,12 +214,23 @@ $teacher-spot: $ui-purple;
right: 0; right: 0;
} }
.slick-slide { .story {
border-radius: 10px; border-radius: 10px;
width: $cols4; width: $cols4 - 0.125em;
img { img {
width: $cols4; width: $cols4 - 0.125em;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.story-info {
padding-left: 10px;
padding-top: 10px;
p {
margin: 10px 0;
}
} }
} }
} }
@ -248,9 +255,6 @@ $teacher-spot: $ui-purple;
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media only screen and (max-width: $mobile - 1) {
#view {
text-align: left;
}
.title-banner { .title-banner {
&.masthead { &.masthead {
@ -270,12 +274,28 @@ $teacher-spot: $ui-purple;
} }
} }
} }
#teacher-icon {
display: none;
}
.in-practice {
text-align: center;
}
.flex-row {
align-items: center !important;
}
.story {
margin-left: 50px;
}
} }
//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) {
#view { #teacher-icon {
text-align: left; display: none;
} }
.flex-row { .flex-row {
@ -290,6 +310,18 @@ $teacher-spot: $ui-purple;
} }
} }
} }
.in-practice {
text-align: center;
}
.flex-row {
align-items: center !important;
}
.story {
margin-left: 50px;
}
} }
//8 columns //8 columns