Adjust Live's and ScoreBoard's layout

homerchen19 · Apr 10, 2018 · 53147bf · 53147bf
1 parent 49edb08
commit 53147bf
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 74 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,4 +1,8 @@
 {
   "processors": ["stylelint-processor-styled-components"],
-  "extends": ["stylelint-config-yoctol", "stylelint-config-styled-components"]
+  "extends": ["stylelint-config-yoctol", "stylelint-config-styled-components"],
+  "rules": {
+    "declaration-colon-newline-after": null,
+    "value-list-max-empty-lines": null
+  }
 }
diff --git a/src/components/Home/MatchCard.js b/src/components/Home/MatchCard.js
@@ -40,7 +40,6 @@ const TeamContent = styled(Flex)`
   width: 100%;
   padding: 8px 15px;
   border-bottom: 1px solid ${colors.white};
-  /* stylelint-disable-next-line declaration-colon-newline-after */
   background: linear-gradient(
     to right,
     ${props => props.background} 80%,

diff --git a/src/components/Preview/TeamScore.js b/src/components/Preview/TeamScore.js
@@ -17,7 +17,6 @@ const TeamWrapper = styled(Flex)`
   padding: 3px 0;
   border-top: 1px solid ${colors.white};
   flex: 3;
-  /* stylelint-disable-next-line declaration-colon-newline-after */
   background: linear-gradient(
     to right,
     ${props => props.homeColor} 50%,

diff --git a/src/components/Scoreboard/BoxScore.js b/src/components/Scoreboard/BoxScore.js
@@ -7,6 +7,8 @@ import { getMainColor } from 'nba-color';
 
 import 'react-sticky-table/dist/react-sticky-table.css';
 
+import { colors } from '../../styles/theme';
+
 const Wrapper = styled(Flex)`
   width: 100%;
   height: 300px;
@@ -25,14 +27,21 @@ const Button = styled.button`
   height: 28px;
   margin: 8px 0;
   border: 0;
-  color: #fff !important;
+  color: ${props => (props.selected ? colors.white : colors.black)} !important;
   cursor: pointer;
-  background-color: ${props => props.background} !important;
+  background-color: ${props =>
+    props.selected ? props.background : colors.white} !important;
   opacity: 1;
-  transition: opacity ease 0.5s;
+  transition: all ease 0.2s;
 
   & :hover {
-    opacity: 0.9;
+    ${props =>
+      props.selected
+        ? 'opacity: 0.9;'
+        : `
+    color: ${colors.white} !important;
+    background-color: ${props.background} !important;
+    `};
   }
 `;
 
@@ -94,25 +103,28 @@ const renderTeamBoxScoreTable = team => (
 class Boxscore extends Component {
   state = {
     team: this.props.home,
+    selected: 'home',
   };
 
-  toggleTeam = team => {
+  toggleTeam = (team, selected) => {
     this.setState({
       team,
+      selected,
     });
   };
 
   render() {
-    const { team } = this.state;
+    const { team, selected } = this.state;
     const { home, visitor } = this.props;
 
     return (
       <Fragment>
-        <Flex justify="center">
+        <Flex justify="center" style={{ background: '#fff' }}>
           <Button
+            selected={selected === 'home'}
             background={getMainColor(home.name).hex}
             onClick={() => {
-              this.toggleTeam(home);
+              this.toggleTeam(home, 'home');
             }}
             style={{
               borderRadius: '5px 0 0 5px',
@@ -121,9 +133,10 @@ class Boxscore extends Component {
             {home.name}
           </Button>
           <Button
+            selected={selected === 'visitor'}
             background={getMainColor(visitor.name).hex}
             onClick={() => {
-              this.toggleTeam(visitor);
+              this.toggleTeam(visitor, 'visitor');
             }}
             style={{
               borderRadius: '0 5px 5px 0',

diff --git a/src/components/Scoreboard/LineScore.js b/src/components/Scoreboard/LineScore.js
@@ -4,20 +4,24 @@ import { Flex } from 'antd-mobile';
 import styled from 'styled-components';
 import { StickyTable, Row, Cell } from 'react-sticky-table';
 import { getMainColor } from 'nba-color';
+
 import 'react-sticky-table/dist/react-sticky-table.css';
 
+import { colors } from '../../styles/theme';
+
 const Wrapper = styled(Flex)`
   width: 100%;
   background: #fff;
 `;
 
 const StyledCell = styled(Cell)`
-  padding: 8px 11px;
+  padding: 8px 12px;
+  border-bottom: 1px solid ${colors.white};
   text-align: center;
 `;
 
 const TeamName = styled.p`
-  color: #fff;
+  color: ${colors.white};
   font-weight: 500;
 `;
 
@@ -27,7 +31,7 @@ const reanderTeamRow = team => (
       key="name"
       style={{
         backgroundColor: getMainColor(team.name).hex,
-        padding: '8px 14px',
+        padding: '8px 16px',
       }}
     >
       <TeamName>{team.name}</TeamName>
@@ -40,7 +44,7 @@ const reanderTeamRow = team => (
 );
 
 const LineScore = ({ home, visitor }) => (
-  <Wrapper justify="center">
+  <Wrapper justify="start">
     <StickyTable stickyHeaderCount={0}>
       <Row key="header">
         <StyledCell key="name" />
@@ -53,8 +57,8 @@ const LineScore = ({ home, visitor }) => (
           <b>T</b>
         </StyledCell>
       </Row>
-      {reanderTeamRow(home)}
-      {reanderTeamRow(visitor)}
+      {reanderTeamRow(home, true)}
+      {reanderTeamRow(visitor, false)}
     </StickyTable>
   </Wrapper>
 );

diff --git a/src/components/Scoreboard/TeamScore.js b/src/components/Scoreboard/TeamScore.js
@@ -2,23 +2,40 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from 'antd-mobile';
 import styled from 'styled-components';
+import { getMainColor } from 'nba-color';
+
+import { BarLoader } from '../Loader';
+import { colors } from '../../styles/theme';
 
 const Wrapper = styled(Flex)`
   width: 100%;
+  color: ${colors.white};
 `;
 
-const TeamWrapper = styled(Flex)`
+const InfoWrapper = styled(Flex)`
   width: 100%;
-  padding-bottom: 10px;
+  padding: 0 0 5px;
+  background: ${colors.darkBlue};
 `;
 
 const ScoreWrapper = styled(Flex)`
   width: 100%;
-  padding: 5px 0 20px;
+  padding: 3px 0 6px;
+  border-top: 1px solid ${colors.white};
+  background: linear-gradient(
+    to right,
+    ${props => props.background.home} 50%,
+    ${props => props.background.visitor} 50%
+  );
+`;
+
+const Team = styled(Flex)`
+  margin: 0;
+  flex: 1;
 `;
 
 const TeamName = styled.h3`
-  line-height: 2em;
+  line-height: 35px;
 `;
 
 const Score = styled.p`
@@ -28,30 +45,42 @@ const Score = styled.p`
   opacity: ${props => (props.win ? '1' : '0.9')};
 `;
 
-const TeamScore = ({ arena, city, home, visitor, winner, gameStatus }) => (
+const TeamScore = ({
+  arena,
+  city,
+  home,
+  visitor,
+  winner,
+  gameStatus,
+  showBarLoader,
+}) => (
   <Wrapper justify="start" direction="column">
-    <TeamWrapper justify="center" align="center">
+    <InfoWrapper direction="column" justify="center" align="center">
       <Flex.Item style={{ textAlign: 'center' }}>
-        <TeamName>{home.name}</TeamName>
+        <h4>{gameStatus}</h4>
       </Flex.Item>
       <Flex.Item style={{ margin: 0, textAlign: 'center' }}>
-        <TeamName>{visitor.name}</TeamName>
+        <span style={{ fontSize: '10px' }}>{`${arena}, ${city}`}</span>
       </Flex.Item>
-    </TeamWrapper>
-    <ScoreWrapper justify="center" align="center">
-      <Flex.Item style={{ flex: 2 }}>
+    </InfoWrapper>
+    {showBarLoader && <BarLoader />}
+    <ScoreWrapper
+      justify="center"
+      align="center"
+      background={{
+        home: getMainColor(home.name).hex,
+        visitor: getMainColor(visitor.name).hex,
+      }}
+    >
+      <Team direction="column" justify="center" align="center">
+        <TeamName>{home.name}</TeamName>
         <Score win={winner === 'home'}>{home.score}</Score>
-      </Flex.Item>
-      <Flex.Item style={{ margin: 0, flex: 1, textAlign: 'center' }}>
-        <span style={{ fontSize: '0.8em' }}>
-          <b>{gameStatus}</b>
-        </span>
-      </Flex.Item>
-      <Flex.Item style={{ margin: 0, flex: 2 }}>
+      </Team>
+      <Team direction="column" justify="center" align="center">
+        <TeamName>{visitor.name}</TeamName>
         <Score win={winner === 'visitor'}>{visitor.score}</Score>
-      </Flex.Item>
+      </Team>
     </ScoreWrapper>
-    <span style={{ fontSize: '10px' }}>{`${arena}, ${city}`}</span>
   </Wrapper>
 );
 
@@ -62,6 +91,11 @@ TeamScore.propTypes = {
   home: PropTypes.object.isRequired,
   visitor: PropTypes.object.isRequired,
   gameStatus: PropTypes.string.isRequired,
+  showBarLoader: PropTypes.bool,
+};
+
+TeamScore.defaultProps = {
+  showBarLoader: false,
 };
 
 export default TeamScore;
diff --git a/src/containers/Live/Live.js b/src/containers/Live/Live.js
@@ -8,7 +8,7 @@ import R from 'ramda';
 import * as actions from './actions';
 import Wrapper from '../../components/Wrapper';
 import NavBar from '../../components/NavBar';
-import { Spinner, BarLoader } from '../../components/Loader';
+import { Spinner } from '../../components/Loader';
 import {
   TeamScore,
   LineScore,
@@ -20,7 +20,6 @@ const DataSection = styled.section`
   display: flex;
   width: 100%;
   height: 100%;
-  padding-top: 15px;
   flex-direction: column;
   align-items: center;
   overflow-y: scroll !important;
@@ -89,14 +88,22 @@ class Live extends Component {
       gamePlayByPlayData,
     } = this.props;
 
+    let gameClock = '';
+
+    if (!loading) {
+      gameClock =
+        gameBoxScoreData.periodTime.gameClock === '0.0'
+          ? ''
+          : ` ${gameBoxScoreData.periodTime.gameClock}`;
+    }
+
     return (
       <Wrapper
         currentTab={1}
         history={history}
         schedule={
           <Fragment>
             <NavBar page="LIVE" />
-            {live !== 'error' && <BarLoader />}
             <DataSection>
               {loading && <Spinner />}
               {!loading && (
@@ -121,10 +128,11 @@ class Live extends Component {
                       }
                       gameStatus={`${
                         gameBoxScoreData.periodTime.periodStatus
-                      } ${gameBoxScoreData.periodTime.gameClock}`}
+                      }${gameClock}`}
+                      showBarLoader={live !== 'error'}
                     />
                   </Item>
-                  <Item marginTop="30">
+                  <Item marginTop="20">
                     <LineScore
                       home={{
                         name: gameData.home.abbreviation,