adds two-column view

Former-commit-id: 5018d00 Former-commit-id: 1488700
DimensionSoftware · Apr 9, 2015 · a6f4f69 · a6f4f69
1 parent 07ba34e
commit a6f4f69
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 65 deletions.
diff --git a/client/stylus/animations.styl b/client/stylus/animations.styl
@@ -1,7 +1,21 @@
 
+fadeOut(px)
+  -o-filter grayscale(px)
+  -ms-filter grayscale(px)
+  -moz-filter grayscale(px)
+  -webkit-filter grayscale(px)
+  filter grayscale(px)
+
+blurry(px)
+  -o-filter blur(px)
+  -ms-filter blur(px)
+  -moz-filter blur(px)
+  -webkit-filter blur(px)
+  filter blur(px)
+
 @keyframes fadeIn
   0%
-    opacity .5
+    opacity .4
   100%
     opacity 1
 
@@ -12,16 +26,10 @@
 @keyframes focusIn
   0%
     opacity .3
-    -o-filter blur(1px)
-    -ms-filter blur(1px)
-    -moz-filter blur(1px)
-    -webkit-filter blur(1px)
+    blurry(1px)
   100%
     opacity 1
-    -o-filter blur(0)
-    -ms-filter blur(0)
-    -moz-filter blur(0)
-    -webkit-filter blur(0)
+    blurry(0)
 
 @keyframes fallInX
   0%

diff --git a/client/stylus/app.styl b/client/stylus/app.styl
@@ -9,7 +9,8 @@ maxWidth     = 1200px
 
 bounce = cubic-bezier(0,1.72,0,.75)
 
-headerBackground=tint(themeColor, 96%)
+headerBackground = tint(themeColor, 96%)
+leftNavWidth     = 125px
 
 body
   margin-top 0
@@ -22,7 +23,7 @@ body
     right 0
     bottom 0
     left 0
-    background-image linear-gradient(#ffffff 80%, #eeeeee)
+    background-image linear-gradient(#fdfdfd 80%, #f4f4f4)
   &:after
     content ''
     position fixed
@@ -78,9 +79,11 @@ h1, h2
 h2, h3
   margin-top grid * 4
 
-.Page > div
-  animation focusIn .03s ease-in
-  backface-visibility hidden
+.Page
+  margin-left leftNavWidth + (grid * 2)
+  > div
+    animation focusIn .03s ease-in
+    backface-visibility hidden
 
 .HomePage
   max-width 800px
@@ -99,20 +102,23 @@ h2, h3
   h2
     margin-top grid * 3.3
     margin-bottom grid * 6.5
+    text-overflow ellipsis
+    overflow hidden
+    height 1em
   header
     position fixed
-    left grid * 4
-    right grid * 4
+    left 22.2 * grid
+    right 0
     z-index onTop + 1
     top grid * 7.6
-    margin 0 auto 0 auto
+    margin 0 auto
     max-width maxWidth
     transition transform .2s ease-out
     form
-      margin 0 (grid * 2.8) 0 (grid * 4.5)
+      margin 0 (grid * 7) 0 0
       .clip
         overflow hidden
-        border-right 1px solid themeColor
+        border-right 1px solid lighten(themeColor, 80%)
         input[type='text']
           padding-top 9px
           padding-bottom @padding-top
@@ -122,7 +128,7 @@ h2, h3
           background transparent
           background-image linear-gradient(to top, tint(themeColor, 93%), rgba(#ffffff, .85) 45px)
           opacity 1
-          padding-left 9px
+          padding-left 13px
           margin-left 4px
           max-width maxWidth - 50px
           border-bottom-color themeColor
@@ -144,7 +150,7 @@ h2, h3
       top grid * 3.5
       right grid * 2.7
       font-size 1.1em
-      padding 2px 10px
+      padding 3px 15px
       background-color tint(themeColor, 98%)
       border-radius 30px
       border 1px solid tint(themeColor, 85%)
@@ -157,7 +163,7 @@ h2, h3
       &:focus
         width 230px
         border-color tint(themeColor, 50%)
-        transition width .03s ease-in
+        transition width .01s ease-in
 
 .HomePage, .MyTodoPage, .PublicPage
   overflow hidden
@@ -185,13 +191,10 @@ h2, h3
   ol
     min-height grid * 30
     padding-bottom grid * 5
-    margin-top 0
-    margin-bottom (grid / 2)
+    margin 0 0 (grid / 2) 0
     position relative
     overflow hidden
-    borderColor = #eee
-    border-bottom 2px solid borderColor
-    box-shadow 0 1px 5px -1px borderColor
+    border-bottom 2px solid tint(themeColor, 93%)
     // two lines simulating 8x11 paper
     &:after
       position absolute
@@ -201,9 +204,9 @@ h2, h3
       bottom 0
       content ''
       width 3px
-      height 100%
-      border-left 1px solid tint(themeColor, 80%)
-      border-right 1px solid tint(themeColor, 80%)
+      height 90%
+      border-left 1px solid tint(themeColor, 85%)
+      border-right 1px solid tint(themeColor, 85%)
     &:before
       position absolute
       z-index onTop
@@ -212,7 +215,6 @@ h2, h3
       bottom 0
       content ''
       width 1px
-      height 100%
       background-color borderColor
     // todo list iem
     li
@@ -252,11 +254,13 @@ h2, h3
         width 100%
         & + .fx
           border-bottom 1px solid transparent
-        &:hover + .fx
-          border-bottom 1px solid rgba(themeColor, .2)
-        &:focus + .fx, &:hover + .fx
+          transition all .35s ease-out .2s
+        &:focus + .fx, &:focus:hover + .fx
           border-bottom 1px solid rgba(themeColor, .8)
           margin-right grid * 2
+        &:hover + .fx
+          border-bottom 1px solid rgba(themeColor, .2)
+          transition none
         &:hover, &:focus
           ~ .delete
             display block
@@ -306,23 +310,29 @@ h2, h3
       bottom 0
       left 50%
       font-size 1.1em
-      margin-left -202px
+      margin-left -133px
       padding 0 (grid * 4.5)
       background-color rgba(#fff, .95)
-      animation fadeIn .6s ease-in
+      animation fadeIn .8s ease-in
       backface-visibility hidden
       a
         position relative
         padding (grid * 1.5) 0 grid 0
+        border-bottom 5px solid transparent
         margin 0 (grid * 2)
         min-width 40px
+        fadeOut(40%)
+        transition all .2s ease-in .01s
+        text-transform lowercase
+        &:hover
+          transition none
         &.active
-          //text-transform uppercase
-          box-shadow inset 0 -3px 0 tint(themeColor, 40%)
+          text-transform capitalize
+          fadeOut(0)
           font-weight bold
-          border-bottom-color themeColor
+          border-bottom-color darken(themeColor, 10%)
           transform scale(1.08)
-          transition transform .2s ease-in
+          transition none
 
   // "next" link
   > a

diff --git a/client/stylus/controls.styl b/client/stylus/controls.styl
@@ -17,7 +17,7 @@ input[type="password"], select, textarea, input[type="text"]
   padding 15px
   vertical-align middle
   font-size 1.25em
-  color lighten(textColor, 20%)
+  color lighten(textColor, 28%)
   border 1px solid lighten(textColor, 95%)
   background-color #fcfcfc
   border-bottom 2px solid lighten(textColor, 85%)
@@ -41,7 +41,7 @@ input[type="password"], select, textarea, input[type="text"]
     cursor text
     z-index 10
     box-shadow 0 0 10px -5px themeColor
-    color darken(textColor, 20%)
+    color darken(textColor, 25%)
     transition color .5s ease-out, border .05s ease-out
 
 .button, input[type="button"], input[type="submit"], button

diff --git a/client/stylus/dimension.styl b/client/stylus/dimension.styl
@@ -1,7 +1,9 @@
 
 // when features.dimension is true...
+
 body
   .dimension
+    padding-left leftNavWidth
     text-align center
     .dimension-logo
       bottom grid * 11
@@ -24,3 +26,16 @@ body
   &.loaded
     .dimension
       visibility visible
+
+// handle mobile screens
+@media all and (max-width: 768px)
+  body
+    .dimension
+      position fixed
+      padding-left 0
+      bottom -(grid * 2)
+      left 50%
+      z-index 0
+      margin-left -120px
+      .fb-like, .ribbon
+        display none!important
diff --git a/client/stylus/nav.styl b/client/stylus/nav.styl
@@ -4,8 +4,6 @@ nav
   animation fadeIn .6s ease-in
   position fixed
   z-index onTop
-  bottom grid
-  right grid * 1.5
   text-align right
   padding 2px 15px
   color lighten(textColor, 50%)
@@ -14,8 +12,9 @@ nav
   .switch
     position fixed
     z-index onTop * 2
-    right grid * 2
-    bottom grid * 2
+    left grid
+    top grid * 6.2
+    bottom 0
     input[type='checkbox']
       display none
     // this is a heavily modified css-only (jsfrei & faster) version of @elijahmanor's:
@@ -44,13 +43,13 @@ nav
         transition all .15s ease-in
     // the menu
     ul
-      background rgba(#fff, .85)
-      border 1px solid #fff
       padding grid (grid * 2)
       margin 0
       list-style-type none
       > small
-        color darken(textColor, 20%)
+        display inline-block
+        width grid * 10.5
+        color lighten(textColor, 25%)
         text-transform capitalize
         font-weight bold
 
@@ -64,6 +63,8 @@ nav
     display block
     .switch
       top grid * 1.8
+      left auto
+      right grid * 1.5
       bottom auto
       height grid
       width grid
@@ -108,3 +109,5 @@ nav
             text-align center
             font-size 3em
             line-height 1.5em
+            small
+              width auto
diff --git a/client/stylus/responsive.styl b/client/stylus/responsive.styl
@@ -22,6 +22,8 @@
     button
       padding-left grid
       padding-right @padding-left
+    .Page
+      margin-left 0
     .PublicPage, .MyTodoPage
       margin-bottom grid * 6
       padding-left 0
@@ -48,6 +50,7 @@
         z-index 1
         overflow visible
         padding 0 0 (grid * 5) 0
+        margin-left 0
         margin-bottom 125px
         box-shadow none
         border-bottom-width 1px
@@ -99,12 +102,3 @@
         margin-left grid * 2
         margin-right @margin-left
         overflow hidden
-
-    .dimension
-      position fixed
-      bottom -(grid * 2)
-      left 50%
-      z-index 0
-      margin-left -120px
-      .fb-like, .ribbon
-        display none!important
diff --git a/client/stylus/typography.styl b/client/stylus/typography.styl
@@ -26,15 +26,15 @@ a
     right 0
     width 0
     bottom -1px
-    height 6px
+    height 5px
     background themeColor
     transition all .1s ease-out .25s
   &:hover, &:visited
-    color darken(themeColor, 10%)
+    color darken(themeColor, 12%)
   &:hover
     transform scale(1.03)
     transition none
-    box-shadow inset 0 -3px 0 tint(themeColor, 30%)
+    border-bottom-color tint(themeColor, 50%)
     &:after
       transition width .1s ease-in
       width 100%

diff --git a/shared/react/Nav.ls b/shared/react/Nav.ls
@@ -16,7 +16,7 @@ module.exports = component \Nav ({name, path, last-page}:props) ->
       span {class-name: 'bg'}
       # items inside
       ul void [
-        small void name
+        small void (name or \\u0001) # don't jank the dom
         routes.list
           .filter (-> it?1 isnt path)
           .map (route) ->

diff --git a/shared/react/TodoList.ls b/shared/react/TodoList.ls
@@ -77,8 +77,8 @@ module.exports = component \TodoList ({todos,visible,search}:props, {name, on-de
 
     # filters
     div {class-name:\actions} [
-      a {on-click:(-> show-only \all), class-name:(cn \all)} \All
-      a {on-click:(-> show-only \active), class-name:(cn \active)} \Active
-      a {on-click:(-> show-only \completed), class-name:(cn \completed)} \Completed
+      a {on-click:(-> show-only \all), class-name:'nofx ' + cn \all} \All
+      a {on-click:(-> show-only \active), class-name:'nofx ' + cn \active} \Active
+      a {on-click:(-> show-only \completed), class-name:'nofx ' + cn \completed} \Completed
     ]
   ]