Style refector (#167)

* 小教室 refector * style login button * add home banner * index experiences block * sort index experience * use slice * add rwd style to exp page * search bar rwd * add g0v to footer * Fix typo
goodjoblife · Jun 24, 2017 · 1290ede · 1290ede
1 parent e3dd49b
commit 1290ede
Show file tree

Hide file tree

Showing 35 changed files with 810 additions and 438 deletions.
diff --git a/src/components/ExperienceSearch/ExperienceBlock.js b/src/components/ExperienceSearch/ExperienceBlock.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
+import cn from 'classnames';
 
 import { Heading, P } from 'common/base';
 import i from 'common/icons';
@@ -8,25 +9,29 @@ import Comment from 'common/reaction/Comment';
 import { formatWithCommas } from '../../utils/numberUtil';
 import styles from './ExperienceBlock.module.css';
 
-const Label = ({ Icon, text }) => (
-  <div className={styles.label}>
+const Label = ({ Icon, text, className }) => (
+  <div className={cn(styles.label, className)}>
     <Icon />
     <P Tag="span" size="m" bold>{text}</P>
   </div>
 );
 Label.propTypes = {
   Icon: PropTypes.func.isRequired,
   text: PropTypes.string.isRequired,
+  className: PropTypes.string,
 };
 
 class ExperienceBlock extends Component {
   static propTypes = {
-    to: PropTypes.string.isRequired,
     data: PropTypes.object.isRequired,
+    size: PropTypes.oneOf(['s', 'm', 'l']),
+  }
+  static defaultProps = {
+    size: 'm',
   }
 
   render() {
-    const { data, to } = this.props;
+    const { data, size } = this.props;
     const expType = data.type === 'interview' ? '面試' : '工作';
     const date = new Date(Date.parse(data.created_at));
     const year = date.getFullYear();
@@ -54,32 +59,35 @@ class ExperienceBlock extends Component {
     }
 
     return (
-      <Link to={to} className={styles.container}>
-        <section>
+      <Link to={`/experiences/${data._id}`} className={cn(styles.container, styles[size])}>
+        <section className={styles.contentWrapper}>
           <P size="s">
             {`${expType}${splitter}${year} 年 ${month} 月`}
           </P>
 
-          <Heading Tag="h2" size="sl" bold className={styles.heading}>
+          <Heading
+            Tag="h2"
+            size={size === 'l' ? 'sl' : 'sm'}
+            className={styles.heading}
+          >
             {data.title}
           </Heading>
 
           <div className={styles.labels}>
-            <Label text={data.company.name} Icon={i.Company} />
-            <Label text={data.job_title} Icon={i.User} />
-            <Label text={data.region} Icon={i.Location} />
-            {salary && <Label text={`${salaryAmount} / ${salaryType}`} Icon={i.Coin} />}
+            <Label text={data.company.name} Icon={i.Company} className={styles.company} />
+            <Label text={data.job_title} Icon={i.User} className={styles.position} />
+            <Label text={data.region} Icon={i.Location} className={styles.location} />
+            {salary && <Label text={`${salaryAmount} / ${salaryType}`} Icon={i.Coin} className={styles.salary} />}
           </div>
 
-          <P size="m" className={styles.content}>
+          <P size="m">
             {data.preview} ... ... <span className={styles.more}>閱讀更多</span>
           </P>
-
-          <div className={styles.reaction}>
-            <ThumbsUp count={data.like_count} />
-            <Comment count={data.reply_count} />
-          </div>
         </section>
+        <div className={styles.reaction}>
+          <ThumbsUp count={data.like_count} />
+          <Comment count={data.reply_count} />
+        </div>
       </Link>
     );
   }

diff --git a/src/components/ExperienceSearch/ExperienceBlock.module.css b/src/components/ExperienceSearch/ExperienceBlock.module.css
@@ -1,9 +1,8 @@
-@value gray-dark, link-blue from "../common/variables.module.css";
+@value gray-dark, link-blue, border-gray, page-gutter-s from "common/variables.module.css";
 
 .container {
   display: block;
   background-color: #fff;
-  padding: 24px;
   box-shadow: 0 0 4px rgba(0,0,0, .15);
   margin-bottom: 40px;
   transition-property: background, box-shadow;
@@ -20,41 +19,78 @@
   }
 }
 
+.contentWrapper {
+  padding: 24px;
+}
+
 .heading {
   margin-bottom: 16px;
   margin-top: 16px;
 }
 
 .labels {
-  display: flex;
   margin-bottom: 16px;
 }
 
 .label {
   margin-right: 24px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
 
   svg {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     fill: #C3C3C3;
     margin-right: 8px;
   }
 }
 
-.content {
-  margin-bottom: 16px;
-}
-
 .more {
   color: link-blue;
 }
 
 .reaction {
   display: flex;
   align-items: center;
+  padding: 8px 24px;
   > div {
     margin-right: 24px;
   }
 }
+
+.m {
+  &.container {
+    height: 100%;
+    position: relative;
+  }
+
+  .location, .salary {
+    display: none;
+  }
+
+  .contentWrapper {
+    margin-bottom: 40px;
+  }
+
+  .reaction {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    border-top: 1px solid border-gray;
+  }
+}
+
+.l {
+  &.container {
+    @media (max-width: 850px) {
+      margin-left: calc(page-gutter-s * -1);
+      margin-right: calc(page-gutter-s * -1);
+      margin-bottom: 24px;
+    }
+  }
+
+  .reaction {
+    padding-bottom: 20px;
+  }
+}
diff --git a/src/components/ExperienceSearch/ExperienceSearch.module.css b/src/components/ExperienceSearch/ExperienceSearch.module.css
@@ -1,100 +1,54 @@
-@value main-yellow, main-gray, gray-dark, gray-light from "../common/variables.module.css";
+@value main-yellow, main-gray, gray-dark, gray-light, border-gray from "common/variables.module.css";
 
 .container {
-  display: table;
-  width: 100%;
-  border-collapse: collapse;
-
-  aside, .content {
-    display: table-cell;
-    vertical-align: top;
-  }
+  display: flex;
+}
 
-  aside {
-    width: 190px;
-    padding: 64px 0;
+.aside {
+  flex: 0 0 196px;
 
-    .frontButton {
-      border-radius: 5px 0 0 5px;
-    }
-    .rearButton {
-      border-radius: 0 5px 5px 0;
-    }
-    .frontButton, .rearButton {
-      display: inline-block;
-      text-align: center;
-      width: 80px;
-      height: 35px;
-      line-height: 35px;
-      border: 1px solid main-yellow;
-      &.toggle {
-        background-color: main-yellow;
-      }
-    }
-    .splitter {
-      margin-top: 30px;
-      border-bottom: 1px solid #ddd;
-    }
+  @media (max-width: 850px) {
+    display: none;
   }
+}
 
-  .content {
-    padding: 64px 0 64px 64px;
-
-    .searchbar {
-      .condition, .search {
-        display: table-cell;
-        vertical-align: top;
-      }
-      .condition {
-        padding-top: 7px;
-      }
-      input[type=text] {
-        border: 0;
-        border-bottom: 1px solid black;
-        background-color: transparent;
-        font-size: 1.2em;
-        padding: 5px;
-      }
-
-      .keywordGroup {
-        margin: 10px 0 20px 0;
-
-        .keyword {
-          font-size: 0.9em;
-          line-height: 2.5em;
-          border: 1px dashed #aaa;
-          border-radius: 5px;
-          padding: 7px 13px;
-          margin-left: 10px;
+.content {
+  flex: 1 1 auto;
+  margin-left: 64px;
 
-          &:first-child {
-            margin-left: 0;
-          }
-          &:hover {
-            cursor: pointer;
-            background-color: #f5f5f5;
-          }
-        }
-      }
+  @media (max-width: 850px) {
+    margin-left: 0;
+  }
+}
 
-      svg {
-        margin-left: 15px;
-        width: 1.5em;
-        height: 1.5em;
+.searchResult {
+  background-color: gray-light;
+  border: 1px solid #ccc;
+  font-weight: 700;
+  padding: 20px;
+}
 
-        &:hover {
-          cursor: pointer;
-        }
-      }
+.frontButton, .rearButton {
+  display: inline-block;
+  text-align: center;
+  width: 80px;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid main-yellow;
+  &.toggle {
+    background-color: main-yellow;
+  }
+}
 
-    }
+.frontButton {
+  border-radius: 5px 0 0 5px;
+}
 
-    .info {
-      background-color: gray-light;
-      border: 1px solid #ccc;
-      font-weight: 700;
-      padding: 20px;
-    }
-  }
+.rearButton {
+  border-radius: 0 5px 5px 0;
+}
 
+.splitter {
+  margin-bottom: 32px;
+  margin-top: 32px;
 }