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;
$box-content-offset: 20px;
.slick-slide {
padding: 0;
}
margin-bottom: 0;
padding: 12px $button-offset;
@ -72,7 +76,7 @@
}
/*.slick-slide {
padding-right: 30px;
padding-right: 2px;
}*/
}

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

@ -19,7 +19,14 @@ var settings = {
arrows: true,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
slidesToScroll: 2,
responsive: [
{ breakpoint: 640, settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true
}}
]
};
var Landing = React.createClass({
@ -71,34 +78,42 @@ var Landing = React.createClass({
math, computer science, foreign languages, and the arts</p>
</FlexRow>
<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 className="story">
<img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
<a href="#">Dylan Person</a>
<p>A place</p>
<div className="story-info">
<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 className="story">
<img src="/images/teachers/stories/plug-in-studio.jpg"
alt="plug in studio's story" />
<a href="#">Dylan Person</a>
<p>A place</p>
<div className="story-info">
<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>
</Slider>
@ -112,7 +127,7 @@ var Landing = React.createClass({
<p>
<a href="http://scratched.gse.harvard.edu/">ScratchEd</a> is an{' '}
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{' '}
find people. ScratchEd is developed and supported by{' '}
the Harvard Graduate School of Education.
@ -147,9 +162,10 @@ var Landing = React.createClass({
</div>
<div>
<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{' '}
Curriculum <br />Guide</a> provides plans, activities, and{' '}
Curriculum Guide</a>{' '}
provides plans, activities, and{' '}
strategies for introducing creative computing.
</p>
</div>
@ -167,9 +183,9 @@ var Landing = React.createClass({
projects and comments. To learn more, see the{' '}
Teacher Account FAQ page.
</p>
<Button>Request Account</Button>
<a href="register"><Button>Request Account</Button></a>
</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>

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

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