From 20d61ea0834fa0a74bd90f5af068b25eae2d35ed Mon Sep 17 00:00:00 2001 From: Hester van Wijk Date: Tue, 26 Apr 2016 15:43:44 +0200 Subject: [PATCH] style disabled questions and some other styling adjustments closes #12 LGTM given by: @timraasveld Squashed commit of the following: commit ecf8b5df6fd9aaf508c97b148d7a39b78344e3b1 Author: Hester van Wijk Date: Tue Apr 26 14:56:23 2016 +0200 changed margin for mobile commit 9970eade3699ca053f04a771df32955f3315c699 Author: Hester van Wijk Date: Tue Apr 26 14:37:00 2016 +0200 added transitions on more properties and put margin on feed instead of app commit 538f69e277cf4596fb4cc7afe333440cb55a475c Author: Hester van Wijk Date: Mon Apr 25 16:17:35 2016 +0200 smaller margin-bottom on feed, even smaller for mobile commit 9e34c8cd0c3b0dc14afc6a5732d94bccbd236a8c Author: Hester van Wijk Date: Mon Apr 25 16:16:35 2016 +0200 oved padding to question and outcome instead of item commit 9cca02fbc7ef7b943a499bcf7724045e4702353f Author: Hester van Wijk Date: Mon Apr 25 13:59:19 2016 +0200 removed transition group commit 597f912bdd715abb02e2f8cb5107a1bb5160ab7a Author: Hester van Wijk Date: Mon Apr 25 11:33:06 2016 +0200 fixups commit e9447594436624bea1237fab701337ab9e82b4ed Author: Hester van Wijk Date: Wed Apr 20 14:02:03 2016 +0200 option refactor commit bd2c912f15458a64065cf75cdf3e062f0c67898a Author: Hester van Wijk Date: Wed Apr 20 13:49:41 2016 +0200 transition on border color and changed transitionTimout commit 1061f40c21e9e7e7717dbd97fca852ad6da65b61 Author: Hester van Wijk Date: Wed Apr 20 12:08:45 2016 +0200 added loading-indicator style within item commit 3538fc68c302a99fd4be7a4e8d94a842371d21a2 Author: Hester van Wijk Date: Wed Apr 20 12:08:09 2016 +0200 removed animation commit 6f2741e81fe7e6864b0c9795edcc9eef7b3796d9 Author: Hester van Wijk Date: Wed Apr 20 11:15:36 2016 +0200 active style only on hover when not .disabled commit 28b906167a3792e31aaf4ed214ec7aaeab0889ad Author: Hester van Wijk Date: Wed Apr 20 11:12:09 2016 +0200 removed animation commit 81258f9cce0f666d220fd2808a455ffee8d3eece Author: Hester van Wijk 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 ed2cb4317ee32bd9dfd81e290e15a683e4c400a0 Author: Hester van Wijk Date: Wed Apr 13 16:11:55 2016 +0200 wip animation on item-enter-active commit f496081604986048941f341d87c313dd772db458 Author: Hester van Wijk Date: Wed Apr 13 16:11:10 2016 +0200 put item back in feed view commit 0117598e46c81c5f4f226e6e3eed71287b404b1c Author: Hester van Wijk Date: Wed Apr 13 14:24:06 2016 +0200 styled question flow commit 74196a979cb0258d3c528c22e12a13b61e5cbed6 Author: Hester van Wijk Date: Wed Apr 13 14:23:35 2016 +0200 styled past and disabled questions commit d12e5f25ce900101cb6790f58fcf80e595ed5852 Author: Hester van Wijk Date: Wed Apr 13 13:53:27 2016 +0200 added variables for past items and past and disabled options commit 39f087e53d82c252cda39cbda04dd83a42ed5594 Author: Hester van Wijk Date: Wed Apr 13 13:51:25 2016 +0200 set class disabled on item when done --- .../components/feed_builder.coffee | 2 +- .../javascripts/components/feed_view.coffee | 16 +- .../javascripts/components/question.coffee | 8 +- app/assets/stylesheets/_globals.sass | 166 ++++++++++++------ .../stylesheets/_loading_indicator.sass | 6 +- app/assets/stylesheets/base/_variables.sass | 23 ++- 6 files changed, 143 insertions(+), 78 deletions(-) diff --git a/app/assets/javascripts/components/feed_builder.coffee b/app/assets/javascripts/components/feed_builder.coffee index 05c87da6..b7b9838d 100644 --- 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 index 1b9ea0d2..c7ed01b5 100644 --- 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 index cd90c086..5dcb1fd5 100644 --- 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 index 3f64017b..48c55272 100644 --- 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 index 466d4009..90ee2ab2 100644 --- 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 index ec6dac4c..61551c85 100644 --- 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%)