done

.umirc.js

@@ -1,3 +1,4 @@
 export default {
-  plugins: ['umi-plugin-dva'],
+  // hashHistory: true,
+  plugins: ['umi-plugin-dva']
 }

src/components/Comment/index.jsx

@@ -51,7 +51,7 @@ class Comment extends Component {
 
         <div className={styles.commentChildren}>
           {comment.kids && open
-            ? comment.kid.map(id => (
+            ? comment.kids.map(id => (
                 <Comment key={id} id={id} itemsById={itemsById} />
               ))
             : null}

src/components/Comment/styles.less

@@ -10,6 +10,7 @@
 .by,
 .text {
   font-size: 0.9em;
+  padding: 1em 0;
 }
 
 .by {

src/components/Item/index.jsx

@@ -6,22 +6,22 @@ const Item = ({ item }) => {
   const { score, title, url, type, id, by, descendants, time } = item
 
   return (
-    <>
+    <li className={styles.normal}>
       <span className={styles.score}>{score}</span>
-      <span className={styles.title}>
+      <p className={styles.title}>
         {url ? (
-          <span>
+          <>
             <a href={url} rel="noopener noreferrer" target="_blank">
               {title}
             </a>
-            <span className={styles.host}>({host(url)})</span>
-          </span>
+            <span className={styles.host}>( {host(url)} )</span>
+          </>
         ) : (
           <Link to={`/item/${id}`}>{title}</Link>
         )}
-      </span>
-      <br />
-      <span className={styles.meta}>
+      </p>
+
+      <p className={styles.meta}>
         {type !== 'job' ? (
           <span className={styles.by}>
             by <Link to={`/user/${by}`}>{by}</Link>
@@ -34,9 +34,9 @@ const Item = ({ item }) => {
             <Link to={`/item/${id}`}>{descendants} comments</Link>
           </span>
         ) : null}
-      </span>
+      </p>
       {type !== 'story' ? <span className={styles.label}>{type}</span> : null}
-    </>
+    </li>
   )
 }
 

src/components/Item/styles.less

@@ -2,20 +2,21 @@
   position: relative;
   padding: 20px 30px 20px 80px;
   border-bottom: 1px solid #eeeeee;
-  background-color: #fff;
-  line-height: 20px;
+  p {
+    line-height: 20px;
+  }
 }
 
 .score {
   position: absolute;
   top: 50%;
   left: 0;
   width: 80px;
-  margin-top: -10px;
   text-align: center;
   color: #ff6600;
   font-size: 1.1em;
   font-weight: 700;
+  transform: translateY(-50%);
 }
 
 .meta,

src/components/ItemList/index.jsx

@@ -7,35 +7,39 @@ import Item from '../Item'
 const ItemList = ({ loading, items, page, maxPage, activeType, location }) => (
   <>
     <Spinner loading={loading} />
-    <div className={styles.nav}>
+    <div className={styles.pagination}>
       {page > 1 ? (
         <Link to={`/${activeType}/${page - 1}`}>&lt; prev</Link>
       ) : (
         <a className={styles.disabled}>&lt; prev</a>
       )}
       <span>{`${page}/${maxPage}`}</span>
-      {page > maxPage ? (
+      {page < maxPage ? (
         <Link to={`/${activeType}/${page + 1}`}>more &gt;</Link>
       ) : (
         <a className={styles.disabled}>more &gt;</a>
       )}
     </div>
     <ReactCSSTransitionGroup
+      component="div"
       transitionName="list"
       transitionEnterTimeout={500}
       transitionLeaveTimeout={500}
     >
-      <div key={location.pathname} className={styles.list}>
-        <ReactCSSTransitionGroup
-          transitionName="item"
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={500}
-        >
-          {items.map(item => (
-            <Item key={item.id} item={item} />
-          ))}
-        </ReactCSSTransitionGroup>
-      </div>
+      {/* <div > */}
+      <ReactCSSTransitionGroup
+        component="ul"
+        transitionName="item"
+        transitionEnterTimeout={500}
+        transitionLeaveTimeout={500}
+        key={location.pathname}
+        className={styles.list}
+      >
+        {items.map(item => (
+          <Item key={item.id} item={item} />
+        ))}
+      </ReactCSSTransitionGroup>
+      {/* </> */}
     </ReactCSSTransitionGroup>
   </>
 )

src/components/ItemList/styles.less

@@ -1,4 +1,4 @@
-.nav {
+.pagination {
   position: fixed;
   top: 55px;
   left: 0;
@@ -13,7 +13,7 @@
   a {
     margin: 0 1em;
   }
-  .disable {
+  .disabled {
     color: #cccccc;
   }
 }
@@ -47,12 +47,13 @@
   .item-leave.item-leave-active,
   .item-enter {
     opacity: 0.01;
-    transition: translate(30px, 0);
+    transform: translate(30px, 0);
   }
 
   .item-leave,
   .item-enter.item-enter-active {
     opacity: 1;
+    transform: translate(0, 0);
     transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
   }
 }

src/components/ItemPage/index.jsx

@@ -1,6 +1,6 @@
 import { Link } from 'dva/router'
 import { connect } from 'dva'
-import styles from './styles'
+import styles from './styles.less'
 import { itemSelector } from '../../selectors/item'
 import Spinner from '../Spinner'
 import { host, timeAgo } from '../../utils/filters'

src/components/Spinner/styles.less

@@ -3,13 +3,15 @@
 
 .spinner {
   position: fixed;
-  right: 15px;
-  bottom: 15px;
+  top: 40%;
+  left: 50%;
   opacity: 0;
   transition: opacity 0.15s ease;
   animation: rotator @duration linear infinite;
   animation-play-state: paused;
   z-index: 999;
+  transform: translateX(-50%);
+  transform-origin: center;
 }
 
 .show {

src/components/UserPage/index.jsx

@@ -1,5 +1,5 @@
 import { connect } from 'dva'
-import styles from './styles'
+import styles from './styles.less'
 import userSelector from '../../selectors/user'
 import Spinner from '../Spinner'
 import { timeAgo } from '../../utils/filters'

src/global.css

@@ -1,3 +1,133 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
 html,
 body,
 :global(#root) {
@@ -18,3 +148,7 @@ a {
   color: #34495e;
   text-decoration: none;
 }
+
+li {
+  list-style-type: none;
+}

src/layouts/index.jsx

@@ -2,8 +2,8 @@ import NavLink from 'umi/navlink'
 import styles from './styles.less'
 
 const Layout = props => (
-  <div className={styles.noraml}>
-    <div className={styles.header}>
+  <>
+    <header className={styles.header}>
       <div className={styles.inner}>
         <NavLink to="/">
           <img
@@ -48,9 +48,9 @@ const Layout = props => (
           </a>
         </span>
       </div>
-    </div>
-    <div className={styles.view}>{props.children}</div>
-  </div>
+    </header>
+    <main className={styles.view}>{props.children}</main>
+  </>
 )
 
 export default Layout

src/layouts/styles.less

@@ -1,6 +1,3 @@
-.normal {
-}
-
 .header {
   position: fixed;
   top: 0;