style paddings

Author: tiye

src/app/reader.cirru

@@ -57,7 +57,8 @@ var
       AppWireframe
       div ({} (:style $ @styleRoot))
         div ({} (:style $ @styleMain))
-          div ({} (:style $ @styleList))
+          div ({} :style @styleAroundSpace)
+          div ({} :style @styleList)
             cond (? user)
               div ({} (:style $ @styleToolbar))
                 Button $ {} (:text :refresh) (:onClick @onRefresh)
@@ -84,31 +85,34 @@ var
               :user $ UserDetail $ {}
                 :user $ store.getIn $ [] :users loginname
               :post $ TopicPost
+          div ({} :style @styleAroundSpace)
 
   :styleRoot $ \ ()
     {}
       :position :absolute
       :width :100%
       :height :100%
       :overflowX :auto
+      :backgroundColor (hsl 180 26 28)
 
   :styleMain $ \ ()
     {}
-      :width :2200px
+      :width :3200px
       :display :flex
       :height :100%
 
-  :styleList $ \ ()
-    {}
-      :height :100%
-      :display :flex
-      :flexDirection :column
+  :styleList $ {}
+    :height :100%
+    :display :flex
+    :flexDirection :column
+    :borderRight $ + ":1px solid " (hsl 0 0 90)
+    :backgroundColor :white
 
   :styleToolbar $ \ ()
     {}
       :display :flex
       :alignItems :center
-      :padding ":10px 10px"
+      :padding ":10px 40px"
       :justifyContent :flex-end
 
   :styleToken $ \ ()
@@ -124,3 +128,7 @@ var
     {}
       :display :flex
       :justifyContent :flex-end
+
+  :styleAroundSpace $ {}
+    :width 400
+    :flexShrink 0

src/app/reply-detail.cirru

@@ -34,9 +34,8 @@ var
   :styleRoot $ \ ()
     {}
       :marginTop :10px
-      :padding ":0 10px"
-      :margin ":20px 0"
-      :borderBottom $ + ":1px solid " (hsl 0 0 95)
+      :padding ":0 0px"
+      :margin ":40px 0"
 
   :styleInfo $ \ ()
     {}
@@ -45,4 +44,4 @@ var
 
   :styleContent $ \ ()
     {}
-      :paddingLeft :24px
+      :paddingLeft :0px

src/app/time.cirru

@@ -58,3 +58,4 @@ var
       :height :18px
       :fontSize :12px
       :borderRadius 2
+      :whiteSpace :nowrap

src/app/topic-detail.cirru

@@ -53,12 +53,12 @@ var
   :renderEditor $ \ ()
     div ({} (:style $ @styleEditor))
       Space $ {} (:height 20)
-      div ({} (:style $ @styleSection)) ":reply:"
       textarea $ {} (:style $ @styleText)
         :value @state.text
         :onChange @onTextChange
         :onKeyDown @onTextKeyDown
         :placeholder :reply...
+      Space $ {} (:height 10)
       div ({} (:style $ @styleWrapper))
         Content $ {} (:text @state.text)
       Space $ {} (:height 10)
@@ -72,7 +72,7 @@ var
       replies $ topic.get :replies
 
     div ({} (:style $ @styleRoot))
-      div ({} (:style $ @styleContent))
+      div ({} :style @styleContent)
         div ({} (:style $ @styleTitle))
           topic.get :title
         Space $ {} :height 20
@@ -103,23 +103,24 @@ var
       :width :1600px
       :overflowY :auto
       :height :100%
+      :backgroundColor :white
 
-  :styleContent $ \ ()
-    {}
-      :width :800px
-      :paddingBottom :300px
-      :paddingLeft :20px
-      :paddingRight :20px
-      :height :100%
-      :overflowY :auto
+  :styleContent $ {}
+    :width :800px
+    :paddingBottom :300px
+    :paddingLeft :40px
+    :paddingRight :40px
+    :height :100%
+    :overflowY :auto
+    :borderRight $ + ":1px solid " (hsl 0 0 90)
 
   :styleReplies $ \ ()
     {}
       :width :800px
       :height :100%
       :display :inline-block
       :overflowY :auto
-      :padding ":10px 10px"
+      :padding ":20px 40px"
 
   :styleTitle $ \ ()
     {}

src/app/topic-entry.cirru

@@ -56,12 +56,11 @@ var
       :display :flex
       :flexDirection :row
       :alignItems :center
-      :padding ":8px 10px"
+      :padding ":10px 40px"
       :cursor :pointer
-      :borderBottom $ + ":1px solid " $ hsl 0 0 94
       :backgroundColor $ cond @props.isSelected
         hsl 0 0 95
-        hsl 0 0 100
+        hsl 0 0 100 0
 
   :styleTitle $ {}
     :textDecoration :none

src/app/topic-list.cirru

@@ -31,7 +31,7 @@ var
       :isSelected (is (topic.get :id) @props.selectedTopic)
 
   :render $ \ ()
-    div ({} (:style $ @styleRoot))
+    div ({} :style @styleRoot)
       Space $ {} (:height 40)
       MessageList $ {} (:messages @props.messages)
       @props.topics.map @renderTopic
@@ -40,16 +40,15 @@ var
           Button $ {} (:text :more) (:onClick @onMore)
       Space $ {} (:height 400)
 
-  :styleRoot $ \ ()
-    {}
-      :width :600px
-      :flex 1
-      :overflowY :auto
-      :display :inline-block
+  :styleRoot $ {}
+    :width :800px
+    :flex 1
+    :overflowY :auto
+    :display :inline-block
 
   :styleFooter $ \ ()
     {}
       :display :flex
       :justifyContent :flex-start
       :marginTop :10px
-      :paddingLeft :10px
+      :paddingLeft :40px

src/app/topic-wireframe.cirru

@@ -13,7 +13,7 @@ var
   ({}~ div span) React.DOM
 
 = module.exports $ React.createClass $ {}
-  :displayName :app-wireframe
+  :displayName :topic-wireframe
 
   :render $ \ ()
     div ({} (:style $ @styleRoot))
@@ -27,6 +27,7 @@ var
       :display :flex
       :justifyContent :center
       :alignItems :center
+      :backgroundColor :white
 
   :styleBox $ \ ()
 

style/main.css

@@ -13,5 +13,5 @@ body {
 }
 
 .topic-title:visited {
-  color: hsl(0,0%,70%);
+  color: hsl(0,0%,60%);
 }

style/markdown.css

@@ -2,6 +2,7 @@
 .markdown-content p {
   margin: 5px 0;
   margin-bottom: 20px;
+  line-height: 1.8em;
 }
 
 .markdown-content img {

tasks/assets.json

@@ -1 +1 @@
-{"main":["main.2525e543.js","style.2525e543.css"],"vendor":"vendor.770f7a2e.js"}
+{"main":["main.f73b3938.js","style.f73b3938.css"],"vendor":"vendor.1a02a50d.js"}