diff --git a/shared/Home/Content/Blog/style.js b/shared/Home/Content/Blog/style.js index 65c2ca33..cfec51e7 100644 --- a/shared/Home/Content/Blog/style.js +++ b/shared/Home/Content/Blog/style.js @@ -78,6 +78,10 @@ export const ViewMore = styled(Link)` margin-top: -1px; transform: rotate(45deg); } + + &:hover { + border-bottom: none; + } ` export const Authors = styled.div` diff --git a/shared/Home/Content/Feature/index.js b/shared/Home/Content/Feature/index.js index a239cb3e..edc8b527 100644 --- a/shared/Home/Content/Feature/index.js +++ b/shared/Home/Content/Feature/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import { Link } from 'react-router' +import styled from 'styled-components' import { Container, LogoContainer, @@ -19,49 +20,66 @@ import { import { ArrowRight } from '../Blog/style' import AuthorLink from '../../../components/AuthorLink' +const formatLink = prettyname => `blog${prettyname}` + class Feature extends Component { - constructor(props) { - super(props) - } + renderContributor = ({ + contributor_id, + author, + img, + prettyname, + twitter, + contribution + }) => ( + + + + + + + + {prettyname} + {contribution && {contribution}} + {twitter && ( + + @{twitter} + + )} + + + ) render() { - const { feature_blog, author } = this.props - var href = 'blog' + feature_blog.prettyname + const { feature_blog, contributor } = this.props + let { contributors } = this.props + + const multipleContributors = contributors && contributors.length > 0 + + if (!multipleContributors && contributor) { + contributors = [contributor] + } + return ( - + feature of the week - + {feature_blog.title} {feature_blog.abstract} - View More - {author && ( - - - - - - - - - {author.prettyname} - - {author.twitter && ( - - @{author.twitter} - - )} - - - )} + + View More + + + {contributors && contributors.map(this.renderContributor)} + ) @@ -69,3 +87,20 @@ class Feature extends Component { } export default Feature + +const Contributors = styled.div` + flex-direction: row; + display: flex; + flex-wrap: wrap; + + ${UserBox} { + flex-basis: 40%; + padding-top: 16px; + margin-right: 10%; + } +` + +export const Contribution = styled.div` + font-size: 90%; + color: #7d8080; +` diff --git a/shared/Home/Content/Feature/style.js b/shared/Home/Content/Feature/style.js index 6d56aeda..c2aab891 100644 --- a/shared/Home/Content/Feature/style.js +++ b/shared/Home/Content/Feature/style.js @@ -45,11 +45,13 @@ export const SubTitle = styled.p` export const Desc = styled.span` color: #3a3b3b; font-size: 20px; + line-height: 30px; ` export const BlogViewMore = ViewMore.extend` color: #3a3b3b; font-size: 20px; + line-height: 30px; ` export const UserBox = styled.div` diff --git a/shared/Home/Content/index.js b/shared/Home/Content/index.js index 0c1b590b..faa88572 100644 --- a/shared/Home/Content/index.js +++ b/shared/Home/Content/index.js @@ -17,7 +17,7 @@ class Content extends Component { diff --git a/shared/Player/Components/MiniPlayer.js b/shared/Player/Components/MiniPlayer.js index 89d3dfac..22b1c951 100644 --- a/shared/Player/Components/MiniPlayer.js +++ b/shared/Player/Components/MiniPlayer.js @@ -2,7 +2,7 @@ import React from 'react' import cn from 'classnames' import PlayerProgressBar from '../Components/PlayerProgressBar' import TogglePlayButton from '../Components/TogglePlayButton' -import moment from "moment/moment"; +import moment from 'moment/moment' const ignore = e => { e.preventDefault() diff --git a/shared/Player/Components/TogglePlayButton.js b/shared/Player/Components/TogglePlayButton.js index bb4098be..343d4194 100644 --- a/shared/Player/Components/TogglePlayButton.js +++ b/shared/Player/Components/TogglePlayButton.js @@ -6,7 +6,9 @@ import PauseButton from './PauseButton' import ProposalLoading from '../../Proposals/Components/ProposalLoading/ProposalLoading' -const DisabledSymbol = () => +const DisabledSymbol = () => ( + +) export const TogglePlayButton = ({ playing = false, diff --git a/shared/reducers/PlayerReducer.js b/shared/reducers/PlayerReducer.js index 886d4153..bcc1e3cb 100644 --- a/shared/reducers/PlayerReducer.js +++ b/shared/reducers/PlayerReducer.js @@ -214,7 +214,7 @@ export default function PlayerReducer(state = defaultState, action) { nstate.is_playing = true savePlayingMeta(nstate) break - + case SET_MUTED: nstate.muted = action.payload.muted break