Clean up code in history, change cards look

ttuanhung · Dec 15, 2017 · 14ee1bb · 14ee1bb
1 parent 564275b
commit 14ee1bb
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 134 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 *.log
 *.log*
 build
-dist
+dist
+package-lock.json
diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx
@@ -18,8 +18,8 @@ export default class Checkbox extends React.Component {
   }
 
   render () {
-    const borderClass = `border ${!this.state.toggled ? '' : 'animation'}`
-    const iconClass = `icon ${!this.state.toggled ? 'hide' : 'animation'}`
+    const borderClass = `checkbox-border ${!this.state.toggled ? '' : 'checkbox-animation'}`
+    const iconClass = `checkbox-icon ${!this.state.toggled ? 'checkbox-hide' : 'checkbox-icon-animation'}`
 
     const borderStyle = {
       borderWidth: (!this.state.toggled || this.root == null) ? 2 : this.root.offsetWidth / 2

diff --git a/src/components/Checkbox/style.scss b/src/components/Checkbox/style.scss
@@ -5,39 +5,39 @@
     -webkit-font-smoothing: antialiased;
     cursor: pointer;
     @include cursor-pointer;
+}
 
-    .border {
-        width: 100%;
-        height: 100%;
-        border-width: 2px;
-        border-color: #757575;
-        border-style: solid;
-        border-radius: 3px;
-        box-sizing: border-box;
-        transition: 0.15s border-width, 0.15s border-color;
+.checkbox-border {
+    width: 100%;
+    height: 100%;
+    border-width: 2px;
+    border-color: #757575;
+    border-style: solid;
+    border-radius: 3px;
+    box-sizing: border-box;
+    transition: 0.15s border-width, 0.15s border-color;
+}
 
-        &.animation {
-            border-color: #FFC107;
-        }
-    }
+.checkbox-icon {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url(images/Controls/check.svg);
+    @include image-center(16px, auto);
+    @include invert-colors;
+}
 
-    .icon {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-image: url(images/Controls/check.svg);
-        @include image-center(16px, auto);
-        @include invert-colors;
+.checkbox-hide {
+    clip-path: inset(0 100% 0 0);
+}
 
-        &.hide {
-            clip-path: inset(0 100% 0 0);
-        }
+.checkbox-animation {
+    border-color: #FFC107;
+}
 
-        &.animation {
-            clip-path: inset(0 0 0 0);
-            transition: 0.3s all;
-        }
-    }
+.checkbox-icon-animation {
+    clip-path: inset(0 0 0 0);
+    transition: 0.3s all;
 }
diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
@@ -27,13 +27,13 @@ export default class History extends React.Component {
           url: 'https://www.github.com',
           title: 'GitHub',
           description: 'Build for developers',
-          screenshot: 'https://scontent-waw1-1.xx.fbcdn.net/v/t1.0-9/24899862_2050574158507064_8530629417294747664_n.jpg?oh=eba9b82613dacc8a41e99d63ca32c845&oe=5ACD27C8',
+          image: 'https://scontent-waw1-1.xx.fbcdn.net/v/t1.0-9/24899862_2050574158507064_8530629417294747664_n.jpg?oh=eba9b82613dacc8a41e99d63ca32c845&oe=5ACD27C8',
           icon: 'https://image.flaticon.com/icons/svg/25/25231.svg',
         },
         {
           url: 'https://www.facebook.com',
           title: 'Facebook',
-          description: '',
+          description: 'Build for developersBuild for developersBuild for developersBuild for developersBuild for developersBuild for developers',
           screenshot: 'http://cdn.ilovefreesoftware.com/wp-content/uploads/2013/06/facebookdesktopversion.png',
           icon: 'https://image.flaticon.com/icons/png/512/124/124010.png',
         },
@@ -58,6 +58,27 @@ export default class History extends React.Component {
           screenshot: 'http://cdn.ilovefreesoftware.com/wp-content/uploads/2013/06/facebookdesktopversion.png',
           icon: 'https://image.flaticon.com/icons/png/512/124/124010.png',
         },
+        {
+          url: 'https://www.youtube.com',
+          title: 'YouTube',
+          description: '',
+          screenshot: 'https://www.mhthemes.com/support/files/2015/10/YouTube.png',
+          icon: 'https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-256.png',
+        },
+        {
+          url: 'https://www.facebook.com',
+          title: 'Facebook',
+          description: '',
+          screenshot: 'http://cdn.ilovefreesoftware.com/wp-content/uploads/2013/06/facebookdesktopversion.png',
+          icon: 'https://image.flaticon.com/icons/png/512/124/124010.png',
+        },
+        {
+          url: 'https://www.youtube.com',
+          title: 'YouTube',
+          description: '',
+          screenshot: 'https://www.mhthemes.com/support/files/2015/10/YouTube.png',
+          icon: 'https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-256.png',
+        },
         {
           url: 'https://www.youtube.com',
           title: 'YouTube',

diff --git a/src/components/History/style.scss b/src/components/History/style.scss
@@ -3,4 +3,8 @@ html, body {
     padding: 0px 0px 16px 0px;
     background-color: $background-color;
     @include Body1;
+}
+
+a {
+    text-decoration: none;
 }
diff --git a/src/components/HistoryCard/index.jsx b/src/components/HistoryCard/index.jsx
@@ -2,29 +2,42 @@ import React from 'react'
 
 export default class HistoryCard extends React.Component {
   render () {
-    const screenshotStyle = {
-      backgroundImage: `url(${this.props.data.screenshot}`
+    const imageStyle = this.props.displayImage && {
+      backgroundImage: `url(${this.props.data.image}`
+    } || {
+      display: 'none'
     }
 
     const iconStyle = {
       backgroundImage: `url(${this.props.data.icon}`
     }
 
+    const descriptionStyle = {
+      display: this.props.description ? 'block' : 'none'
+    }
+
     return (
-      <a href={this.props.data.url} class='history-card'>
-        <div class='screenshot' style={screenshotStyle} />
-        <div class='info-container'>
-          <div class='icon' style={iconStyle} />
-          <div class='title-container'>
-            <div class='title'>
-              {this.props.data.title}
-            </div>
-            <div class='description'>
-              {this.props.data.description}
+      <a href={this.props.data.url}>
+        <div className='history-card'>
+          <div className='image' style={imageStyle} />
+          <div className='info-container'>
+            <div className='icon' style={iconStyle} />
+            <div className='title-container'>
+              <div className='title'>
+                {this.props.data.title}
+              </div>
+              <div className='description' style={descriptionStyle}>
+                {this.props.data.description}
+              </div>
             </div>
           </div>
         </div>
       </a>
     )
   }
+}
+
+HistoryCard.defaultProps = {
+  image: true,
+  description: true
 }
diff --git a/src/components/HistoryCard/style.scss b/src/components/HistoryCard/style.scss
@@ -1,59 +1,58 @@
 .history-card {
     width: $card-width;
+    position: relative;
+    display: inline-block;
     background-color: #fff;
     color: #000;
-    position: relative;
-    overflow: hidden;
-    margin-left: $card-margin;
-    margin-top: $card-margin;
     border-radius: 2px;
-    user-select: none;
-    text-decoration: none;
-    @include shadow(2);
+    overflow: hidden;
+    @include shadow(1);
 
-    .screenshot {
+    .image {
         width: 100%;
         height: calc(#{$card-width} * 9 / 16);
         @include image-cover;
     }
 
-    .icon {
-        width: 24px;
-        height: 24px;
-        border-radius: 100%;
-        opacity: 0.87;
-        position: relative;
-        left: 8px;
-        @include center-vertical;
-        @include image-cover;
-    }
-
     .info-container {
         height: 48px;
         position: relative;
     }
 
     .title-container {
-        max-width: calc(100% - 48px);
+        max-width: calc(100% - 56px);
         position: absolute;
-        left: 40px;
+        left: 48px;
         @include center-vertical;
+    }
 
-        .title, .description {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+    .icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 100%;
+        opacity: 0.87;
+        position: absolute;
+        left: 12px;
+        @include image-center(24px, auto);
+        @include center-vertical;
+    }
+
+    %overflow {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 
-        .title {
-            font-size: 15px;
-            opacity: 0.97;
-            @include Roboto-Medium;
-        }
+    .title {
+        font-size: 15px;
+        opacity: 0.87;
+        @include Roboto-Medium;
+        @extend %overflow;
+    }
 
-        .description {
-            font-size: 13px;
-            opacity: 0.54;
-        }
+    .description {
+        font-size: 13px;
+        opacity: 0.54;
+        @extend %overflow;
     }
 }
diff --git a/src/components/HistoryCards/index.jsx b/src/components/HistoryCards/index.jsx
@@ -7,52 +7,47 @@ export default class HistoryCards extends React.Component {
     super()
 
     this.state = {
-      cardsContainerWidth: 256
+      width: 0
     }
   }
 
   componentDidMount () {
-    window.addEventListener('resize', this.resizeCardsContainer)
-
-    this.resizeCardsContainer()
-  }
-
-  resizeCardsContainer = () => {
-    const count = this.getMaxCardsCount()
-    const width = this.calculateWidth(count)
-
-    if (this.state.cardsContainerWidth !== width) {
-      this.setState({
-        cardsContainerWidth: width
-      })
-    }
+    window.addEventListener('resize', this.resizeContainer)
+    this.resizeContainer()
   }
 
-  getMaxCardsCount () {
+  resizeContainer = () => {
     let i = 1
 
     while (true) {
-      if (this.calculateWidth(i) >= window.innerWidth) return (i - 1 ) > 3 ? 3 : (i - 1)
-      else i++
-    }
+      if (this.calculateWidth(i) >= window.innerWidth) {
+        const count = (i - 1 ) > 3 ? 3 : (i - 1)
 
-    return -1
+        this.setState({
+          width: this.calculateWidth(count)
+        })
+
+        break
+      } else {
+        i++
+      }
+    }
   }
 
   calculateWidth (count) {
-    return this.props.cardWidth * count + this.props.cardMargin * count + 16
+    return this.props.cardWidth * count + this.props.cardGap * (count - 1)
   }
 
   render () {
-    const cardsContainerStyle = {
-      maxWidth: this.state.cardsContainerWidth
+    const style = {
+      width: this.state.width
     }
 
     return (
-        <div class='cards-container' style={cardsContainerStyle}>
+        <div className='cards-container' style={style}>
           {
             this.props.items.map((data, key) => {
-              return <Card data={data} key={key} />
+              return <Card data={data} key={key} image={false} description={false} />
             })
           }
         </div>
@@ -62,6 +57,5 @@ export default class HistoryCards extends React.Component {
 
 HistoryCards.defaultProps = {
   cardWidth: 256,
-  cardMargin: 32,
-  items: []
+  cardGap: 16
 }
diff --git a/src/components/HistoryCards/style.scss b/src/components/HistoryCards/style.scss
@@ -1,9 +1,7 @@
 .cards-container {
-    display: inline-flex;
-    position: relative;
-    left: 50%;
-    transform: translateX(calc(-50% - 0.5 * #{$card-margin}));
-    flex-wrap: wrap;
-    padding-bottom: 24px;
-    //display: none; // temporary
+    width: 736px;
+    margin: 32px auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, $card-width);
+    grid-gap: $card-gap;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ node_modules @@
     *.log
     *.log*
     build
-    dist
+    dist
+    package-lock.json