scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

more styling, carousel

Browse source
This commit is contained in:
Connor Hudson 2016-06-22 16:48:58 -04:00
parent dd249e8b88
commit 230cadffa5
3 changed files with 157 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/views/teachers/landing/carousel.scss Normal file
View file

@ -0,0 +1,78 @@
@import "../../../colors";
.carousel {
$icon-size: 40px;
$button-offset: $icon-size + 5px;
$box-content-offset: 20px;
margin-bottom: 0;
padding: 12px $button-offset;
.box-content & {
padding: 12px $button-offset - 20px;
}
.slick-next,
.slick-prev {
margin-top: -$icon-size / 2;
width: $icon-size;
height: $icon-size;
&:before {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 70%;
width: $icon-size;
height: $icon-size;
font-size: $icon-size;
content: "";
}
&.slick-disabled {
&:before {
opacity: 1;
}
}
}
.slick-prev {
left: 0;
&:before {
background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
&:hover {
background-image: url("/svgs/carousel/prev_ui-blue.svg");
background-size: 90%;
}
}
.box-content & {
left: -$box-content-offset;
}
}
.slick-next {
right: 0;
&:before {
background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
&:hover {
background-image: url("/svgs/carousel/next_ui-blue.svg");
background-size: 90%;
}
}
.box-content & {
right: -$box-content-offset;
}
}
/*.slick-slide {
padding-right: 30px;
}*/
}

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

@ -7,8 +7,21 @@ var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx
var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
var Button = require('../../../components/forms/button.jsx');
var Slider = require('react-slick');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./carousel.scss');
require('./landing.scss');
var settings = {
dots: true,
arrows: true,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
};
var Landing = React.createClass({
type: 'Landing',
render: function () {
@ -57,6 +70,38 @@ var Landing = React.createClass({
<p><b>Subject Areas:</b> language arts, science, social studies,{' '}
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>
</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>
</div>
</Slider>
</section>
<section id="resources">
<span className="nav-spacer"></span>

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

@ -193,6 +193,40 @@ $teacher-spot: $ui-purple;
#in-practice {
border-bottom: 1px solid $ui-border;
padding-bottom: 2rem;
.story {
width: $cols4;
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 {
max-width: $cols10;
margin: 0 auto;
.slick-dots {
right: 0;
}
.slick-slide {
border-radius: 10px;
width: $cols4;
img {
width: $cols4;
}
}
}
}
#resources {