From 263060611d722edb32bb66d0018ba5987bfaa2ed Mon Sep 17 00:00:00 2001 From: summerscope Date: Wed, 9 Jul 2014 16:13:43 +1000 Subject: [PATCH] Search and filter styling and markup tweaks --- .../darkswarm/active_table_search.css.sass | 46 +++++++++++----- .../stylesheets/darkswarm/animations.sass | 11 ++++ .../stylesheets/darkswarm/big-input.sass | 54 +++++++++++++++++++ app/assets/stylesheets/darkswarm/mixins.sass | 26 --------- .../stylesheets/darkswarm/shop.css.sass | 10 ++-- app/views/producers/_filters.html.haml | 4 +- app/views/producers/index.html.haml | 8 +-- 7 files changed, 110 insertions(+), 49 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/big-input.sass diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass index 2ec37eaa2b..05d7495f94 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass @@ -1,14 +1,18 @@ @import mixins @import branding +@import big-input +@import animations // OVERRIDES .row .row.filter-box margin-left: 0 margin-right: 0 +.row.filter-box:first-child + border-top: 1px solid $clr-brick .filter-box - background: rgba(255,255,255,0.5) + background: rgba(255,255,255,0.65) .tdhead padding: 0.25rem 0.5rem @@ -18,11 +22,19 @@ [class*="block-grid-"] > li padding-bottom: 0.5rem !important + li + @include border-radius(12px) + padding-top: 0.5rem + margin-bottom: 0.25rem + &:hover, &:focus + background: rgba(255,255,255,0.25) + li.active + background: white + @include box-shadow(inset 0 1px 3px 0 rgba(143,48,29,0.5)) + li.active a color: $clr-brick - @include border-radius(12px) - @include box-shadow(inset 0 1px 3px 0 rgba(143,48,29,0.5)) - border: 1px solid $clr-brick + // border: 1px solid $clr-brick render-svg svg path @@ -31,12 +43,12 @@ border-color: $clr-brick-bright li a + @include csstrans display: table table-layout: fixed + overflow: visible // width: 100% - height: 2.5rem - padding: 0.5rem 0.5rem 0.5rem 0.25rem - border: 1px solid transparent + height: 2rem line-height: 1 color: #444 font-size: 0.875rem @@ -46,6 +58,7 @@ text-align: left &:hover, &:focus color: $clr-brick-bright + render-svg svg path @@ -71,6 +84,9 @@ path fill: #666 +.button.filterbtn + margin-bottom: 0 !important + #active-table-search position: relative i.ofn-i_020-search @@ -81,11 +97,13 @@ // z-index: 2 // color: #b2b2b2 - input[type="text"] - font-size: 2em - @include big-input - // padding-left: 44px - - placeholder - color: $disabled-dark + @include placeholder(rgba(0,0,0,0.3), #888) + + input[type="text"] + @include big-input(rgba(0,0,0,0.2), #999, #000) + + + + + diff --git a/app/assets/stylesheets/darkswarm/animations.sass b/app/assets/stylesheets/darkswarm/animations.sass index 3fcbb41202..ff51d36199 100644 --- a/app/assets/stylesheets/darkswarm/animations.sass +++ b/app/assets/stylesheets/darkswarm/animations.sass @@ -141,3 +141,14 @@ animation-fill-mode: both +@mixin csstrans + -webkit-transition: all 300ms ease + -moz-transition: all 300ms ease + -ms-transition: all 300ms ease + -o-transition: all 300ms ease + transition: all 300ms ease + -webkit-transform-style: preserve-3d + + + + diff --git a/app/assets/stylesheets/darkswarm/big-input.sass b/app/assets/stylesheets/darkswarm/big-input.sass new file mode 100644 index 0000000000..c917602fa8 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/big-input.sass @@ -0,0 +1,54 @@ +@import typography +@import branding +@import animations + +//Big search used in active table search \\ + +@mixin big-input($input, $inputhvr, $inputactv) + @extend .avenir + @include csstrans + // transition: all 0.5s ease + background: transparent + border: none + border-bottom: 2px dotted $input + font-size: 2rem + box-shadow: 0 + padding: 0rem 0.5rem 0.2rem 0.5rem + height: auto + margin-bottom: 0.5rem + box-shadow: none + color: $inputactv + + &:hover + -webkit-box-shadow: 0 1px 1px 0 rgba(255,255,255,0.25) + box-shadow: 0 1px 1px 0 rgba(255,255,255,0.25) + border-bottom: 2px dotted $inputhvr + color: $inputactv + + &:active, &:focus, &.active + border-bottom: 2px dotted $inputactv + color: $inputactv + text-shadow: 0 0 10px #ffffff + padding: 1rem 0.5rem 0.5rem 0.5rem + letter-spacing: 0.02rem + +@mixin placeholder($placeholder, $placeholderhvr) + ::-webkit-input-placeholder + color: $placeholder + :-moz-placeholder + color: $placeholder + ::-moz-placeholder + color: $placeholder + :-ms-input-placeholder + color: $placeholder + + &:hover + ::-webkit-input-placeholder + color: $placeholderhvr + :-moz-placeholder + color: $placeholderhvr + ::-moz-placeholder + color: $placeholderhvr + :-ms-input-placeholder + color: $placeholderhvr + diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index b4845b87fc..b7207335bb 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -8,35 +8,9 @@ padding-top: 100px padding-bottom: 100px -@mixin big-input - // border: 1px solid #999 - background: transparent - border: none - border-bottom: 1px dotted black - font-size: 2rem - @extend .avenir - box-shadow: 0 - padding: 1rem 0 0.5rem 0 - height: auto - margin-bottom: 0.1rem - box-shadow: none - // background: rgba(255,255,255,0.65) - &:active, &:hover, &:focus - color: black - // background: rgba(255,255,255,1) - // border-color: #888 - @mixin disabled color: $disabled-bright -@mixin csstrans - -webkit-transition: all 100ms ease-in-out - -moz-transition: all 100ms ease-in-out - -ms-transition: all 100ms ease-in-out - -o-transition: all 100ms ease-in-out - transition: all 100ms ease-in-out - -webkit-transform-style: preserve-3d - @mixin box-shadow($box-shadow) -moz-box-shadow: $box-shadow -webkit-box-shadow: $box-shadow diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass index ae418adda6..53e7515b1c 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.sass +++ b/app/assets/stylesheets/darkswarm/shop.css.sass @@ -1,12 +1,16 @@ @import mixins @import variables @import branding +@import big-input .darkswarm - #search - font-size: 2em - @include big-input + // #search + @include placeholder(rgba(0,0,0,0.3), #999) + + input#search + @include big-input(rgba(0,0,0,0.2), #999, #000) + color: #666 display: block navigation diff --git a/app/views/producers/_filters.html.haml b/app/views/producers/_filters.html.haml index 3cdb4e3e75..2cf8caf866 100644 --- a/app/views/producers/_filters.html.haml +++ b/app/views/producers/_filters.html.haml @@ -1,7 +1,7 @@ .row .small-12.columns - %a.right{"ng-click" => "filtersActive = !filtersActive"} - Filter by + %a.button.primary.tiny.filterbtn{"ng-click" => "filtersActive = !filtersActive"} + Filter options %i.ofn-i_052-point-down .row.animate-show{"ng-show" => "filtersActive"} .small-12.columns diff --git a/app/views/producers/index.html.haml b/app/views/producers/index.html.haml index 792ec16cbe..5cde408aba 100644 --- a/app/views/producers/index.html.haml +++ b/app/views/producers/index.html.haml @@ -2,18 +2,18 @@ .producers{"ng-controller" => "ProducersCtrl"} .row .small-12.columns.pad-top - %h1 Find a local producer... + %h1 Find local producers / %div / Find a / %ofn-modal{title: "producer"} / = render partial: "modals/producers" / from the list below: - #active-table-search.row.pad-top + #active-table-search.row .small-12.columns - %input{type: :text, + %input.animate-show{type: :text, "ng-model" => "query", - placeholder: "Search Producer or by Suburb / State", + placeholder: "Search by Producer name or Suburb / State", "ng-debounce" => "150", "ofn-disable-enter" => true} / %placeholder