Skip to content

GitLab

S
scratch-www
Commit 7de13d02 authored by Connor Hudson's avatar Connor Hudson
Browse files
Options

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

parent 6d3d8b74
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 223 deletions
src/views/teachers/landing/carousel.scss deleted 100644 → 0
View file @ 6d3d8b74
@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;
}*/
}
src/views/teachers/landing/landing.jsx
View file @ 7de13d02
......@@ -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>
......
src/views/teachers/landing/landing.scss
View file @ 7de13d02
......@@ -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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment