update ArticleList style

browser/main/HomePage/ArticleList.js

@@ -92,8 +92,8 @@ export default class ArticleList extends React.Component {
 
       return (
         <div key={'article-' + article.key}>
-          <div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
+          <div onClick={e => this.handleArticleClick(article)(e)} className={'ArticleList-item' + (activeArticle.key === article.key ? ' active' : '')}>
-            <div className='top'>
+            <div className='ArticleList-item-top'>
               {folder != null
                 ? folderChanged
                   ? <span className='folderName'>
@@ -114,10 +114,13 @@ export default class ArticleList extends React.Component {
                 }
               />
             </div>
-            <div className='middle'>
+            <div className='ArticleList-item-middle'>
               <ModeIcon className='mode' mode={article.mode}/> <div className='title' children={title}/>
             </div>
-            <div className='bottom'>
+            <div className='ArticleList-item-middle2'>
+              <pre><code children={article.content.substring(0, 50)}/></pre>
+            </div>
+            <div className='ArticleList-item-bottom'>
               <div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>
             </div>
           </div>

browser/styles/main/HomeContainer/components/ArticleList.styl

@@ -11,35 +11,37 @@ articleItemColor = #777
   overflow-y auto
   noSelect()
   &>div
-    .articleItem
+    .ArticleList-item
       border solid 2px transparent
       position relative
-      height 88px
+      height 110px
       width 100%
       cursor pointer
       transition 0.1s
       background-color white
       padding 0 10px
       font-size 12px
-      .top
+      .ArticleList-item-top
         clearfix()
-        line-height 20px
+        padding-top 2px
-        padding 5px 0
+        line-height 18px
+        height 20px
         color articleItemColor
+        font-size 11px
         .folderName
           overflow ellipsis
           display inline-block
           width 120px
         .updatedAt
           float right
-          line-height 20px
+          line-height 18px
           .unsaved-mark
             color brandColor
-      .middle
+      .ArticleList-item-middle
-        padding 3px 0 7px
         font-size 16px
         position relative
-        height 26px
+        padding-top 6px
+        height 22px
         .mode
           position absolute
           left 0
@@ -52,17 +54,28 @@ articleItemColor = #777
           overflow ellipsis
           small
             color #AAA
-      .bottom
+      .ArticleList-item-middle2
-        padding 5px 0
+        padding-top 8px
+        pre
+          white-space pre-wrap
+          overflow hidden
+          height 33px
+          line-height 14px
+          font-size 10px
+          code
+            font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
+      .ArticleList-item-bottom
         overflow-x auto
         white-space nowrap
+        padding-top 6px
         .tags
           color articleItemColor
+          height 14px
           a
             background-color brandColor
             color white
             border-radius 2px
-            padding 1.5px 5px
+            padding 1px 5px
             margin 2px
             font-size 10px
             opacity 0.8

browser/styles/mixins/marked.styl

@@ -68,7 +68,7 @@ marked()
     &>li>ul, &>li>ol
       margin 0
   code
-    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
+    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
     padding 2px 4px
     border solid 1px borderColor
     border-radius 4px