Home feature blog box multi contributors list

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`

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,53 +20,87 @@ 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
+  }) => (
+    <UserBox author={author} key={contributor_id}>
+      <UserImgArea>
+        <AuthorLink author={author} className="no-line">
+          <UserImg src={img} />
+        </AuthorLink>
+      </UserImgArea>
+      <UserDetail>
+        <AuthorLink author={author}>{prettyname}</AuthorLink>
+        {contribution && <Contribution>{contribution}</Contribution>}
+        {twitter && (
+          <UserInfo href={`https://twitter.com/${twitter}`}>
+            @{twitter}
+          </UserInfo>
+        )}
+      </UserDetail>
+    </UserBox>
+  )
 
   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 (
       <Container>
         <LogoContainer className="col-xs-12 col-sm-12 col-md-3">
-          <Link to={href} className="no-line">
+          <Link to={formatLink(feature_blog.prettyname)} className="no-line">
             <LogoImg src={feature_blog.img} />
           </Link>
         </LogoContainer>
         <DescBox className="col-xs-12 col-sm-12 col-md-9">
           <Title>feature of the week</Title>
           <SubTitle>
-            <Link to={href} className="no-line">
+            <Link to={formatLink(feature_blog.prettyname)} className="no-line">
               {feature_blog.title}
             </Link>
           </SubTitle>
           <Desc>{feature_blog.abstract}</Desc>
-          <BlogViewMore to={href}>View More</BlogViewMore>
-          {author && (
-            <UserBox author={author.author}>
-              <UserImgArea>
-                <AuthorLink author={author.author} className="no-line">
-                  <UserImg src={author.img} />
-                </AuthorLink>
-              </UserImgArea>
-              <UserDetail>
-                <AuthorLink author={author.author}>
-                  {author.prettyname}
-                </AuthorLink>
-                {author.twitter && (
-                  <UserInfo href={`https://twitter.com/${author.twitter}`}>
-                    @{author.twitter}
-                  </UserInfo>
-                )}
-              </UserDetail>
-            </UserBox>
-          )}
+          <BlogViewMore to={formatLink(feature_blog.prettyname)}>
+            View More
+          </BlogViewMore>
+          <Contributors>
+            {contributors && contributors.map(this.renderContributor)}
+          </Contributors>
         </DescBox>
       </Container>
     )
   }
 }
 
 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;
+`

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`

shared/Home/Content/index.js

@@ -17,7 +17,7 @@ class Content extends Component {
       <ContentContainer>
         <Feature
           feature_blog={featured_blog}
-          author={this.getContributor(featured_blog)}
+          contributor={this.getContributor(featured_blog)}
         />
         <BlogContainer className="col-xs-12 col-sm-12 col-md-7">
           <Blog blogList={blogList} getContributor={this.getContributor} />

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()

shared/Player/Components/TogglePlayButton.js

@@ -6,7 +6,9 @@ import PauseButton from './PauseButton'
 
 import ProposalLoading from '../../Proposals/Components/ProposalLoading/ProposalLoading'
 
-const DisabledSymbol = () => <img src="/img/spinner.gif" width="14" height="14" />
+const DisabledSymbol = () => (
+  <img src="/img/spinner.gif" width="14" height="14" />
+)
 
 export const TogglePlayButton = ({
   playing = false,

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