style disabled questions and some other styling adjustments

closes #12 LGTM given by: @timraasveld Squashed commit of the following: commit ecf8b5d Author: Hester van Wijk <[email protected]> Date: Tue Apr 26 14:56:23 2016 +0200 changed margin for mobile commit 9970ead Author: Hester van Wijk <[email protected]> Date: Tue Apr 26 14:37:00 2016 +0200 added transitions on more properties and put margin on feed instead of app commit 538f69e Author: Hester van Wijk <[email protected]> Date: Mon Apr 25 16:17:35 2016 +0200 smaller margin-bottom on feed, even smaller for mobile commit 9e34c8c Author: Hester van Wijk <[email protected]> Date: Mon Apr 25 16:16:35 2016 +0200 oved padding to question and outcome instead of item commit 9cca02f Author: Hester van Wijk <[email protected]> Date: Mon Apr 25 13:59:19 2016 +0200 removed transition group commit 597f912 Author: Hester van Wijk <[email protected]> Date: Mon Apr 25 11:33:06 2016 +0200 fixups commit e944759 Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 14:02:03 2016 +0200 option refactor commit bd2c912 Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 13:49:41 2016 +0200 transition on border color and changed transitionTimout commit 1061f40 Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 12:08:45 2016 +0200 added loading-indicator style within item commit 3538fc6 Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 12:08:09 2016 +0200 removed animation commit 6f2741e Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 11:15:36 2016 +0200 active style only on hover when not .disabled commit 28b9061 Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 11:12:09 2016 +0200 removed animation commit 81258f9 Author: Hester van Wijk <[email protected]> Date: Wed Apr 20 11:06:02 2016 +0200 added classes for active and disabled item to extend and style on .question and .outcome instead of .item commit ed2cb43 Author: Hester van Wijk <[email protected]> Date: Wed Apr 13 16:11:55 2016 +0200 wip animation on item-enter-active commit f496081 Author: Hester van Wijk <[email protected]> Date: Wed Apr 13 16:11:10 2016 +0200 put item back in feed view commit 0117598 Author: Hester van Wijk <[email protected]> Date: Wed Apr 13 14:24:06 2016 +0200 styled question flow commit 74196a9 Author: Hester van Wijk <[email protected]> Date: Wed Apr 13 14:23:35 2016 +0200 styled past and disabled questions commit d12e5f2 Author: Hester van Wijk <[email protected]> Date: Wed Apr 13 13:53:27 2016 +0200 added variables for past items and past and disabled options commit 39f087e Author: Hester van Wijk <[email protected]> Date: Wed Apr 13 13:51:25 2016 +0200 set class disabled on item when done
roqua · Apr 26, 2016 · 20d61ea · 20d61ea
1 parent 20f82e3
commit 20d61ea
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 78 deletions.
diff --git a/app/assets/javascripts/components/feed_builder.coffee b/app/assets/javascripts/components/feed_builder.coffee
@@ -12,7 +12,7 @@ class @FeedBuilder
         question: question
         key: elements.length
         onChange: setAnswer
-        editable: !done
+        disabled: done
 
     if loading
       elements.push React.createElement LoadingIndicator,

diff --git a/app/assets/javascripts/components/feed_view.coffee b/app/assets/javascripts/components/feed_view.coffee
@@ -12,16 +12,10 @@
       window.scrollTo(0, ReactDOM.findDOMNode(this).offsetHeight)
 
   render: ->
-    CSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
-
     div
       className: 'feed'
-      CSSTransitionGroup
-        transitionName: 'item'
-        transitionEnterTimeout: 0
-        transitionLeaveTimeout: 0.001
-        @props.children.map (child) ->
-          div
-            key: child.key
-            className: 'item'
-            child
+      @props.children.map (child, index) ->
+        div
+          key: index
+          className: 'item'
+          child
diff --git a/app/assets/javascripts/components/question.coffee b/app/assets/javascripts/components/question.coffee
@@ -10,12 +10,17 @@
     question = event.target
     @props.onChange(question.name, question.value)
 
+  className: ->
+    className= 'question'
+    className += ' disabled' if @props.disabled
+    className
+
   render: ->
     {text, answer_option_set} = @props.question
     question_key = @props.question.key
 
     div
-      className: 'question'
+      className: @className()
       p
         className: 'text'
         text
@@ -32,7 +37,6 @@
               id: key
               value: answer_option.value
               onClick: @onOptionClick
-              disabled: !@props.editable
             label
               className: 'text'
               htmlFor: key

diff --git a/app/assets/stylesheets/_globals.sass b/app/assets/stylesheets/_globals.sass
@@ -19,69 +19,121 @@ header
       margin: 15px auto 0
       display: block
 
+.active-item
+  border: 3px solid $feed-item-border-color
+  color: $application-text-color
+  opacity: 1
+  .options
+    .option
+      label
+        color: $option-color
+        &:hover
+          background-color: $option-background-color-hover
+          color: $option-color-hover
+          cursor: pointer
+
+      input[type="radio"]:checked
+        & + label
+          background-color: $option-background-color-checked
+          box-shadow: inset 0 1px 6px $option-inset-shadow-color-checked
+          color: $option-color-checked
+
 .app
   @include outer-container
-  margin-top: $logo-height * 2
-.feed
-  @include span-columns(8)
-  @include shift(2)
-  .item
-    background-color: $feed-item-background-color
-    border: 3px solid $feed-item-border-color
-    border-radius: 4px
-    min-height: $feed-item-height
-    padding: $feed-item-padding-vertical $feed-item-padding-horizontal
-    margin: $feed-item-margin
-
-.options
-  padding: 0
-
-  .option
-    list-style-type: none
-    display: inline
-
-    input[type="radio"]
-      display: none
-
-    label
-      background-color: $option-background-color
-      border: 1px solid $option-border-color
-      color: $option-color
-      padding: 5px 15px
-      width: 3rem
-      &:hover
-        background-color: $option-background-color-hover
-        color: $option-color-hover
-        cursor: pointer
-
-    input[type="radio"]:checked + label
-      background-color: $option-background-color-checked
-      box-shadow: inset 0 1px 6px $option-inset-shadow-color-checked
-      color: $option-color-checked
-
-  .option:first-of-type label
-    border-left: 1px solid $option-border-color
-    border-bottom-left-radius: 4px
-    border-top-left-radius: 4px
-
-  .option:last-of-type label
-    border-bottom-right-radius: 4px
-    border-top-right-radius: 4px
-
-  .option + .option label
-    border-left: none
+  .feed
+    margin-top: $logo-height * 2
+    padding-top: $logo-height
+    @include span-columns(8)
+    @include shift(2)
+    margin-bottom: 35vh
+
+    .item
+      .question,
+      .outcome,
+      .loading-indicator
+        background-color: $feed-item-background-color
+        transition: border-color 0.6s
+        border: 3px solid $past-feed-item-border-color
+        border-radius: $option-border-radius
+        min-height: $feed-item-height
+        max-height: 1000px
+        padding: $feed-item-padding-vertical $feed-item-padding-horizontal
+        margin: $feed-item-margin
+        color: $past-option-text-color
+        opacity: 1
+        .options
+          padding: 0
+
+          .option
+            list-style-type: none
+            display: inline
+
+            input[type="radio"]
+              display: none
+
+            label
+              background-color: $option-background-color
+              border: 1px solid $past-option-border-color
+              color: $past-option-color
+              padding: 5px 15px
+              width: 3rem
+
+            input[type="radio"]:checked + label
+              background-color: $option-background-color-checked
+              box-shadow: inset 0 1px 6px $option-inset-shadow-color-checked
+              color: $option-color-checked
+
+          .option:first-of-type label
+            border-left: 1px solid $option-border-color
+            border-bottom-left-radius: $option-border-radius
+            border-top-left-radius: $option-border-radius
+
+          .option:last-of-type label
+            border-bottom-right-radius: $option-border-radius
+            border-top-right-radius: $option-border-radius
+
+          .option + .option label
+            border-left: none
+        &:hover
+          &:not(.disabled)
+            @extend .active-item
+
+      .question.disabled,
+      .question.disabled:hover
+        min-height: 0
+        transition: opacity 0.5s linear 0s, max-height 0.6s linear 0s, visibility 0.5s linear 0s, padding 0.5s linear 0.5s, margin 0.5s linear 0.5s
+        opacity: 0
+        overflow: hidden
+        max-height: 0
+        visibility: hidden
+        padding: 0
+        margin: 0
+        box-sizing: border-box
+
+      &:last-of-type
+        .question,
+        .outcome,
+        .loading-indicator
+          @extend .active-item
 
 @media (max-height: $breakpoint-mobile-v)
   .questions-wrapper
     min-height: 100vh
+  .app
+    .feed
+      margin-bottom: 10%
 @media only screen and (max-width: $breakpoint-mobile)
   .app
     @include outer-container(98%)
-  .feed
-    @include span-columns(12)
-    @include shift(0)
-    .item
-      padding: $feed-item-padding-vertical-mobile $feed-item-padding-horizontal-mobile
-  .options
-    input[type="radio"] + span
-      font-size: 1rem
+    .feed
+      @include span-columns(12)
+      @include shift(0)
+      margin-top: $logo-height
+      margin-bottom: 10%
+      .item
+        .question,
+        .outcome
+          padding: $feed-item-padding-vertical-mobile $feed-item-padding-horizontal-mobile
+    .options
+      input[type="radio"] + span
+        font-size: 1rem
diff --git a/app/assets/stylesheets/_loading_indicator.sass b/app/assets/stylesheets/_loading_indicator.sass
@@ -1,19 +1,15 @@
-$difference-between-loading-indicator-inner-and-label-height: 4px
-$loader-height: calc(#{$feed-item-height} - (2 * #{$feed-item-padding-vertical}) - #{$difference-between-loading-indicator-inner-and-label-height})
-
 .feed
   .item
     .loading-indicator
       position: relative
       height: $loader-height
-      width: 100%
       overflow: hidden
 
     .loading-indicator-inner
       transform: translateY(-50%)
       top: 50%
       position: absolute
-      width: 100%
+      width: $loading-indicator-inner-width
       color: $application-text-color
       padding: 0 100px
       text-align: center

diff --git a/app/assets/stylesheets/base/_variables.sass b/app/assets/stylesheets/base/_variables.sass
@@ -16,8 +16,9 @@ $feed-item-background-color: #fff
 $feed-item-border-color: #48d0c6
 $feed-item-height: 10rem
 $feed-item-margin: 20px
-$feed-item-padding-vertical: 0.8rem
-$feed-item-padding-horizontal: 1.9rem
+$feed-item-padding-vertical: 15px
+$feed-item-padding-horizontal: 35px
+$past-feed-item-border-color: lighten(desaturate($feed-item-border-color, 15%), 35%)
 
 //feed-item-mobile
 $feed-item-padding-vertical-mobile: 0.2rem
@@ -32,6 +33,24 @@ $option-background-color-hover: lighten($option-color,7%)
 $option-color-checked: #fff
 $option-background-color-checked: $option-color
 $option-inset-shadow-color-checked: darken($option-color,11%)
+$option-border-radius: 4px
+
+// past options
+$past-option-color: lighten(desaturate($option-color, 15%), 5%)
+$past-option-border-color: lighten(desaturate($option-border-color, 25%), 15%)
+$past-option-color-checked: $option-color-checked
+$past-option-background-color-checked: lighten(desaturate($option-color, 25%), 15%)
+$past-option-inset-shadow-color-checked: lighten(desaturate($option-inset-shadow-color-checked, 25%), 15%)
+$past-option-text-color: lighten(desaturate($application-text-color, 45%), 35%)
+
+// disabled options
+$disabled-option-background-color: darken($option-background-color, 10%)
+$disabled-option-background-color-checked: desaturate($past-option-background-color-checked, 50%)
+
+// loading-indicator
+$difference-between-loading-indicator-inner-and-label-height: 4px
+$loader-height: calc(#{$feed-item-height} - (2 * #{$feed-item-padding-vertical}) - #{$difference-between-loading-indicator-inner-and-label-height})
+$loading-indicator-inner-width: calc(100% - (2 * #{$feed-item-padding-horizontal}))
 
 // debug
 $debug-color: lighten(desaturate($option-color,61%),18%)