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

get rid of carousel, make things centered if they need it

Browse source
This commit is contained in:
Connor Hudson 2016-06-23 15:46:02 -04:00
parent 6d3d8b7446
commit 7de13d029b
3 changed files with 193 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,82 +0,0 @@
@import "../../../colors";
.carousel {
$icon-size: 40px;
$button-offset: $icon-size + 5px;
$box-content-offset: 20px;
.slick-slide {
padding: 0;
}
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: 2px;
}*/
}

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

@ -7,28 +7,8 @@ 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,
responsive: [
{ breakpoint: 640, settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true
}}
]
};
var Landing = React.createClass({
type: 'Landing',
render: function () {
@ -77,46 +57,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/ingrid.jpg" alt="ingrid's story" />
<div className="story-info">
<a href="//bit.ly/28SBsa9">Ingrid Gustafson</a>
<p>Instructional Technology Specialist</p>
</div>
<FlexRow className="stories">
<div className="story">
<img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
<div className="story-info">
<a href="//bit.ly/28SBsa9">Ingrid Gustafson</a>
<p>Instructional Technology Specialist</p>
</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 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 className="story">
<img src="/images/teachers/stories/plug-in-studio.jpg"
alt="plug in studio's story" />
<div className="story-info">
<a href="//bit.ly/28SC1AY">Plug-In Studios</a>
<p>After-School Program</p>
</div>
<div className="story">
<img src="/images/teachers/stories/plug-in-studio.jpg"
alt="plug in studio's story" />
<div className="story-info">
<a href="//bit.ly/28SC1AY">Plug-In Studios</a>
<p>After-School Program</p>
</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 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>
</Slider>
</FlexRow>
</section>
<section id="resources">
<span className="nav-spacer"></span>
@ -173,7 +145,7 @@ var Landing = React.createClass({
</section>
</div>
<div id="teacher-accounts">
<div className="inner">
<div className="inner account-flex">
<div id="left">
<h2>Teacher Accounts in Scratch</h2>
<p>

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

@ -2,6 +2,7 @@
@import "../../../frameless";
$teacher-spot: $ui-purple;
$story-width: $cols3;
#view {
padding: 0;
@ -63,60 +64,6 @@ $teacher-spot: $ui-purple;
}
}
#teacher-accounts {
width: 100%;
background-color: $teacher-spot;
margin-bottom: -3px;
padding: 50px 0;
overflow-x: hidden;
.inner {
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
}
p {
margin: 0;
text-align: left;
color: $ui-white;
a {
border-bottom: 1px solid $ui-white;
color: $ui-white;
}
}
h2 {
margin: 0 0 2rem 0;
text-align: left;
color: $ui-white;
}
#left {
max-width: $cols4;
text-align: left;
p {
margin-bottom: 3.5rem;
}
button {
background-color: $ui-white;
color: $ui-blue;
font-size: 16px;
font-weight: 500;
padding: 16px 16px;
width: $cols5 / 2;
}
}
img {
max-width: $cols7;
}
}
.flex-row {
&.sidebar-row {
margin: 2rem 0;
@ -152,7 +99,6 @@ $teacher-spot: $ui-purple;
.general-usage {
justify-content: space-between;
align-items: flex-start;
p {
max-width: $cols4;
@ -171,9 +117,6 @@ $teacher-spot: $ui-purple;
}
.guides-and-tutorials {
justify-content: space-between;
align-items: flex-start;
div {
text-align: center;
max-width: $cols4;
@ -203,38 +146,33 @@ $teacher-spot: $ui-purple;
border-bottom: 1px solid $ui-border;
padding-bottom: 2rem;
.stories {
align-items: center;
margin: auto;
justify-content: space-between;
flex-direction: row;
}
.story {
width: $cols4 - 0.125em ;
box-sizing: border-box;
margin: 10px auto;
border: 1px solid $ui-border;
border-radius: 10px;
background-color: $ui-white;
}
.carousel {
max-width: $cols10;
margin: 0 auto;
.slick-dots {
right: 0;
img {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
width: 100%;
}
.story {
border-radius: 10px;
width: $cols4 - 0.125em;
.story-info {
padding-left: 10px;
padding-top: 10px;
img {
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;
}
p {
margin: 10px 0;
font-size: .75rem;
}
}
}
@ -255,10 +193,76 @@ $teacher-spot: $ui-purple;
}
}
#teacher-accounts {
width: 100%;
background-color: $teacher-spot;
margin-bottom: -3px;
padding: 50px 0;
overflow-x: hidden;
.inner {
display: flex;
height: 100%;
align-items: center;
}
p {
margin: 0;
text-align: left;
color: $ui-white;
a {
border-bottom: 1px solid $ui-white;
color: $ui-white;
}
}
h2 {
margin: 0 0 2rem 0;
text-align: left;
color: $ui-white;
}
#left {
width: $cols4;
text-align: left;
p {
margin-bottom: 3.5rem;
}
button {
background-color: $ui-white;
color: $ui-blue;
font-size: 16px;
font-weight: 500;
padding: 16px 16px;
width: $cols5 / 2;
}
}
img {
width: $cols7;
}
}
}
//4 columns
@media only screen and (max-width: $mobile - 1) {
$story-width: $cols4;
.stories {
width: $cols4;
}
.story {
width: $story-width;
img {
width: $story-width;
}
}
.title-banner {
&.masthead {
@ -279,10 +283,6 @@ $teacher-spot: $ui-purple;
}
}
.carousel {
display: none;
}
#teacher-icon {
display: none;
}
@ -292,16 +292,38 @@ $teacher-spot: $ui-purple;
}
.flex-row {
align-items: center !important;
align-items: center;
}
.story {
margin-left: 50px;
}
.general-usage {
align-items: center;
}
.guides-and-tutorials {
align-items: center;
}
.account-flex {
justify-content: center;
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
$story-width: $cols3;
.stories {
width: $cols6;
}
.story {
width: $story-width;
}
#teacher-icon {
display: none;
}
@ -324,16 +346,39 @@ $teacher-spot: $ui-purple;
}
.flex-row {
align-items: center !important;
align-items: center;
}
.story {
margin-left: 50px;
}
.general-usage {
align-items: center;
}
.guides-and-tutorials {
align-items: center;
}
.account-flex {
justify-content: center;
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
$story-width: $cols4;
.stories {
width: $cols8;
}
.story {
width: $story-width;
}
#view {
text-align: left;
}
@ -356,4 +401,39 @@ $teacher-spot: $ui-purple;
width: 100%;
}
}
.guides-and-tutorials {
align-items: flex-start;
justify-content: space-around;
}
#left {
margin-right: 50px;
}
}
// 12 columns
@media only screen and (min-width: $desktop){
$story-width: $cols3;
.stories {
width: $cols12;
}
.story {
width: $story-width;
}
.general-usage {
align-items: flex-start;
}
.guides-and-tutorials {
align-items: flex-start;
justify-content: space-between;
}
.account-flex {
justify-content: space-between;
}
}