Skip to content

Commit

Permalink
Add header links
Browse files Browse the repository at this point in the history
  • Loading branch information
@martincadoux
martincadoux committed Mar 7, 2018
1 parent f742778 commit a47d217
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 75 deletions.
1 change: 1 addition & 0 deletions src/assets/images/icons/icon_english.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/images/icons/icon_rocket.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
151 changes: 85 additions & 66 deletions src/assets/scss/includes/_header.scss
View file
@@ -1,33 +1,43 @@
.site-header {
align-items: center;
background: $brand-color;
border-bottom: 1px solid $border-color;
display: flex;
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;
margin-bottom: 5px;
height: 40px;
width: 120px;
@media (min-width: 48em) {
margin-bottom: 0;
height: 60px;
width: 160px;
&__content {
display: flex;
flex-flow: column wrap;
align-items: center;
width: 100%;
@media (min-width: em(768px)) {
flex-flow: row nowrap;
height: auto;
margin: 0 auto;
width: 100%;
}
}

a {
color: $header-link-color;
}
}

.branding {
display: inline-block;
margin-bottom: em(5px);
height: em(40px);
width: em(120px);
@media (min-width: em(768px)) {
margin: 0 em(30px) 0 0;
height: em(60px);
width: em(160px);
max-width: em(255px);
flex: 1 1 em(200px);
}

&__content {
&:hover {
background: none;
text-decoration: none;
Expand All @@ -39,73 +49,43 @@
content: '';
display: block;
margin: 0 auto;
height: 40px;
width: 120px;
@media (min-width: 48em) {
height: em(40px);
width: em(120px);
@media (min-width: em(768px)) {
margin: 0;
height: 60px;
width: 160px;
height: em(60px);
width: em(160px);
}
}
}
}

a {
color: $header-link-color;
}

.avatar {
border-radius: .2rem;
float: left;
height: 2rem;
margin-right: 1rem;
margin-top: -3px;
width: 2rem;
}

.site-nav {
ul {
display: inline-block;
line-height: 1.5;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

li {
display: inline-block;
margin-right: .4rem;
}
}

.branding-container,
.search-bar,
.site-nav {
@media (min-width: 48em) {
flex: 1 1 12.5em;
max-width: 15.9375em;
margin: 0 1.875em 0 0;
}
}
.avatar {
border-radius: .2rem;
float: left;
height: 2rem;
margin-right: 1rem;
margin-top: -3px;
width: 2rem;
}

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

&__title {
$context: 24px;

font-size: em($context);
margin-bottom: em(20px, $context);
@media (min-width: 48em) {
@media (min-width: em(768px)) {
margin-bottom: 0;
}
}
Expand All @@ -124,3 +104,42 @@
}
}
}

.links {
$margin: em(8px);

display: flex;
flex-direction: row;
width: 100%;
max-width: em(200px);
@media (min-width: em(768px)) {
margin: 0 0 0 em(30px);
}

&__list {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
text-align: center;

&.-language:before {
content: "";
display: inline-block;
margin: 0 $margin;
width: em(1px);
height: em(24px);
background-color: $brand-black;
vertical-align: middle;
}
}

&__item {
& + & {
margin-left: $margin;
}
}
}
60 changes: 51 additions & 9 deletions src/containers/Header.jsx
View file
Expand Up @@ -4,6 +4,8 @@ import { connect } from 'react-redux';
import cx from 'classnames';

import clock from '../assets/images/icons/icon_clock.svg';
import rocket from '../assets/images/icons/icon_rocket.svg';
import english from '../assets/images/icons/icon_english.svg';

const mapStateToProps = ({
currentCourse,
Expand All @@ -25,21 +27,61 @@ export class Header extends React.Component {
currentCourse,
} = this.props;

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

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

<div className="course-header">
{currentCourse.title && <h2 className="course-header__title">{currentCourse.title}</h2>}
{currentCourse.time && <p className="course-header__duration" data-icon={clock}>{currentCourse.time} minutes</p>}
</div>

<div className="links">
<ul className="links__list -social">
<li className="links__item">
<a className="no-link-style tracked-link" href="https://blog.eleven-labs.com/feed.xml" title="Ajoutez-nous à votre veille" rel="nofollow noreferrer"><i className="fa fa-fw fa-rss"></i></a>
</li>

<li className="links__item">
<a className="no-link-style tracked-link" href="https://github.com/eleven-labs" title="Suivez-nous sur GitHub" rel="nofollow noreferrer"><i className="fa fa-fw fa-github"></i></a>
</li>

<li className="links__item">
<a className="no-link-style tracked-link" href="https://twitter.com/eleven_labs" title="Suivez-nous sur Twitter" rel="nofollow noreferrer"><i className="fa fa-fw fa-twitter"></i></a>
</li>

<li className="links__item">
<a className="no-link-style tracked-link" href="https://www.facebook.com/11Labs" title="Suivez-nous sur Facebook" rel="nofollow noreferrer"><i className="fa fa-fw fa-facebook"></i></a>
</li>

<li className="links__item">
<a className="no-link-style tracked-link" href="https://fr.linkedin.com/company/eleven-labs" title="Suivez-nous sur LinkedIn" rel="nofollow noreferrer"><i className="fa fa-fw fa-linkedin"></i></a>
</li>

<li className="links__item">
<a className="no-link-style tracked-link" href="https://eleven-labs.com" title="Découvrez Eleven Labs" rel="nofollow">
<img className="corporate-logo" src={rocket} alt="Découvrez Eleven Labs" height="19"></img>
</a>
</li>
</ul>

<div className="course-header">
{currentCourse.title && <h2 className="course-header__title">{currentCourse.title}</h2>}
{currentCourse.time && <p className="course-header__duration" data-icon={clock}>{currentCourse.time} minutes</p>}
{/*<ul className="links__list -language">
<li className="links__item">
<a className="page-link no-link-style" href="/en" title="Switch to English">
<img src={english} alt="Switch to English" title="Switch to English" width="18" height="12"></img>
</a>
</li>
</ul>*/}
</div>
</div>
</nav>
</header>
);
}
}
Expand Down

0 comments on commit a47d217

Please sign in to comment.