Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Adjust overall presentation
  • Loading branch information
martincadoux committed Feb 28, 2018
1 parent fd85038 commit df6501f
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 61 deletions.
4 changes: 0 additions & 4 deletions src/assets/scss/base/_global.scss
Expand Up @@ -16,10 +16,6 @@ figure {

html {
background: $background-color;
font-size: 75%;
@media (min-width: 768px) {
font-size: 100%;
}
}
// Typography
::selection {
Expand Down
74 changes: 46 additions & 28 deletions src/assets/scss/includes/_header.scss
Expand Up @@ -3,19 +3,29 @@
background: $brand-color;
border-bottom: 1px solid $border-color;
display: flex;
flex-flow: row wrap;
padding: 20px 45px;
flex-flow: column wrap;
align-items: center;
width: 100%;
@media (min-width: 48em) {
flex-direction: row;
height: auto;
margin: 0;
width: 100%;
}

&.-yellow {
background-color: $brand-yellow;
}

.branding {
display: inline-block;
height: 60px;
width: 160px;

@media (max-width: 480px) {
height: 40px;
margin-bottom: 5px;
width: 120px;
margin-bottom: 5px;
height: 40px;
width: 120px;
@media (min-width: 48em) {
margin-bottom: 0;
height: 60px;
width: 160px;
}

&:hover {
Expand All @@ -28,13 +38,13 @@
background-size: contain;
content: '';
display: block;
height: 60px;
width: 160px;

@media (max-width: 480px) {
height: 40px;
margin: 0 auto;
width: 120px;
margin: 0 auto;
height: 40px;
width: 120px;
@media (min-width: 48em) {
margin: 0;
height: 60px;
width: 160px;
}
}
}
Expand All @@ -52,15 +62,6 @@
width: 2rem;
}

.site-title {
flex: auto;
float: left;
font-size: 1rem;
font-weight: bold;
line-height: 1.5;
text-align: center;
}

.site-nav {
ul {
display: inline-block;
Expand All @@ -80,9 +81,26 @@
.branding-container,
.search-bar,
.site-nav {
@media (max-width: 480px) {
flex: 0 0 100%;
text-align: center;
@media (min-width: 48em) {
flex: 1 1 12.5em;
max-width: 15.9375em;
margin: 0 1.875em 0 0;
}
}
}

.course-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
@media (min-width: 48em) {
flex-direction: row;
align-items: baseline;
flex: 1 1 25em;
}

&__duration {
margin: 0;
}
}
43 changes: 31 additions & 12 deletions src/assets/scss/objects/_course-page.scss
@@ -1,9 +1,9 @@
.summary {
flex: 1 1 em(200px);
margin: 0 0 em(70px);
margin: 0 0 em(30px);
@media (min-width: em(768px)) {
max-width: em(370px);
margin: 0 em(70px) 0 0;
max-width: em(255px);
margin: 0 em(30px) 0 0;
}

&__steps {
Expand All @@ -28,18 +28,19 @@
@media (min-width: em(768px)) {
flex-direction: row;
flex: 1 1 em(70px);
padding: 0;
text-align: left;
}

& + & {
@media (min-width: em(768px)) {
margin-top: em(60px);
margin-top: em(20px);
}
}
}

&__step-number {
$context: 40px;
$context: 32px;

font-size: em($context);
display: flex;
Expand All @@ -49,20 +50,22 @@
flex: 0 0 auto;
border: 2px solid $brand-yellow;
border-radius: 50%;
width: em(70px, $context);
height: em(70px, $context);
width: em(50px, $context);
height: em(50px, $context);
.-current & {
background-color: #b8b8b8;
}
}

&__step-title {
$context: 18px;

color: #bbc1c4;
font-size: em(22px);
font-size: $context;
line-height: 1.1;
margin: em(15px) 0 0;
margin: em(15px, $context) 0 0;
@media (min-width: em(768px)) {
margin: 0 0 0 em(15px);
margin: 0 0 0 em(15px, $context);
}
}
}
Expand All @@ -75,26 +78,42 @@

&__content {
flex: 1 1 em(400px);
margin-bottom: em(60px);
width: 100%;
}

&__chapter {
$context: 20px;

font-size: em($context);
margin-bottom: em(20px, $context);
}

&__navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
}

&__button {
position: fixed;
bottom: em(20px);
background-color: $brand-yellow;
border-style: none;
border-radius: 50%;
width: em(110px);
height: em(110px);
width: em(60px);
height: em(60px);
&[disabled] {
visibility: hidden;
}

&.-previous {
transform: rotate(180deg);
left: em(20px);
}

&.-next {
right: em(20px);
}
}

Expand Down
6 changes: 1 addition & 5 deletions src/assets/scss/objects/_layout.scss
Expand Up @@ -11,13 +11,9 @@

.container {
margin: 0 auto;
padding: 2.5em;
padding: em(20px);
max-width: em($max-width-layout);

@media (min-width: em(480px)) {
padding: em(45px);
}

@media (min-width: em(1360px)) {
padding-left: 0;
padding-right: 0;
Expand Down
5 changes: 3 additions & 2 deletions src/containers/Course.jsx
Expand Up @@ -4,7 +4,6 @@ import { connect } from 'react-redux';

import Summary from '../components/Summary';

import clock from '../assets/images/icons/icon_clock.svg';
import arrow from '../assets/images/icons/icon_arrow.svg';

import {
Expand Down Expand Up @@ -160,7 +159,9 @@ export class Course extends React.Component {
/>

<article className="course__content">
<p className="course__duration" data-icon={clock}>{course.time} minutes</p>
{stepTitles.length > 0 && (
<h1 className="course__chapter">{currentStep + 1} - {stepTitles[currentStep]}</h1>
)}
<div className="course__text">{step.map((renderer, key) => renderer({ key }))}</div>
<div className="course__navigation">
<button
Expand Down
22 changes: 12 additions & 10 deletions src/containers/Header.jsx
@@ -1,6 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import cx from 'classnames';

import clock from '../assets/images/icons/icon_clock.svg';

const mapStateToProps = ({
currentCourse,
Expand All @@ -23,24 +26,23 @@ export class Header extends React.Component {

render() {
const {
currentCourse: {
title = '',
stepTitles = [],
},
currentCourse,
currentStepIndex,
} = this.props;

const headerClasses = cx('site-header', {
'-yellow': currentCourse.title,
});

return (
<nav className="site-header">
<nav className={headerClasses + ' container'}>
<div className="branding-container">
<a href="/" className="branding" />
</div>

<div className="site-title">
<h2>{title}</h2>
{stepTitles.length > 0 && (
<h3>{currentStepIndex + 1} - {stepTitles[currentStepIndex]}</h3>
)}
<div className="course-header">
{currentCourse && <h2 className="course-header__title">{currentCourse.title}</h2>}
<p className="course-header__duration" data-icon={clock}>{/*course.time*/} minutes</p>
</div>
</nav>
);
Expand Down

0 comments on commit df6501f

Please sign in to comment.