diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.sass b/app/assets/stylesheets/darkswarm/_shop-filters.css.sass new file mode 100644 index 0000000000..fbebe3a431 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.sass @@ -0,0 +1,92 @@ +@import mixins +@import branding +@import big-input +@import animations + +// Alert when search, taxon, filter is triggered + +.alert-box.search-alert + background-color: #faf6c7 + border-color: #faf6c7 + color: #888 + font-size: 0.75rem + + span.applied-properties + color: #333 + + span.applied-taxons + color: $clr-blue + + span.applied-search + color: $clr-brick + + span.filter-label + opacity: 0.75 + +// Shopfront taxons +.filter-box.filter-box-shopfront, .filter-box.property-box-shopfront + background: transparent + + ul + margin: 0 + ul, ul li + list-style: none + li + display: inline-block + @include border-radius(0) + padding: 0 + margin: 0 0 0.25rem 0.25rem + &:hover, &:focus + background: transparent + + li.active + @include box-shadow(none) + a, a:hover, a:focus, a:active, a.active + border: 1px solid $clr-blue + background: $clr-blue + color: white + render-svg + svg + path + fill: white + li a + @include border-radius(0.5em) + border: 1px solid $clr-blue-light + padding: 0.625em + font-size: 0.875em + color: $clr-blue + font-size: 0.75em + i + font-size: 1.25rem + margin-left: 0.25rem + render-svg + width: 1.25rem + height: 1.25rem + svg + width: 1.25rem + height: 1.25rem + path + @include csstrans + fill: $clr-blue + &:hover, &:focus + color: $clr-blue-bright + render-svg + svg + path + fill: $clr-blue-bright + +// Shopfront properties +.filter-box.property-box-shopfront + li.active + @include box-shadow(none) + a, a:hover, a:focus, a:active, a.active + border: 1px solid #333 + background: #333 + color: white + li a + border: 1px solid #ccc + color: #888 + &:hover, &:focus + border: 1px solid #999 + color: #666 + diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass index 7b76d2643e..d19f116139 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass @@ -27,7 +27,6 @@ products .filter-box background: #f7f7f7 - .filter-box background: rgba(245,245,245,0.6) .tdhead @@ -42,7 +41,6 @@ products .filter-box [class*="block-grid-"] > li padding-bottom: 0.5rem !important - li @include border-radius(12px) padding-top: 0.5rem @@ -107,16 +105,6 @@ products .filter-box path fill: #666 -.filter-box.filter-box-shopfront - .tdhead - margin-top: 0rem - margin-bottom: 0.75rem - padding: 0.5rem 0 - h5 - color: $clr-blue - .button.tiny - margin-bottom: 0rem - .button.filterbtn margin-bottom: 0 !important min-width: 160px diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml index 0ed6f0c7d1..61f807c684 100644 --- a/app/views/shop/products/_filters.html.haml +++ b/app/views/shop/products/_filters.html.haml @@ -1,21 +1,45 @@ -.row.animate-show{"ng-hide" => "filtersActive"} - .small-12.columns - = render partial: 'shared/components/filter_controls_shopfront' +.filter-box.filter-box-shopfront.animate-hide.text-right + %ul + %taxon-selector{objects: "Products.products | products:query | products:showProfiles", + results: "activeTaxons"} -.row.filter-box.filter-box-shopfront.animate-hide{"ng-show" => "filtersActive"} - .small-12.columns - / .row.tdhead - / .small-12.medium-6.columns - / %h5 - / .light Filter by - / Category - / .small-12.medium-6.columns.text-right - / = render partial: 'shared/components/filter_box_shopfront' - / = render partial: 'shared/components/filter_controls_shopfront' - - .row - .small-12.columns - %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-4 - %taxon-selector{objects: "Products.products | products:query | products:showProfiles", - results: "activeTaxons"} + %li + %a + %span + + 7 more + %i.ofn-i_052-point-down + / TODO: Needs controller for Angular Bootstrap directive for dropdown: + / {"ng-controller" => "DropdownCtrl"} + + / %li + / .btn-group{:dropdown => "", "is-open" => "status.isopen"} + / %button.btn.btn-primary.dropdown-toggle{"dropdown-toggle" => "", "ng-disabled" => "disabled", :type => "button"} + / + 7 more + / %span.caret + / %ul.dropdown-menu{:role => "menu"} + / %li + / %a{:href => "#"} Action + / %li + / %a{:href => "#"} Another action + / %li + / %a{:href => "#"} Something else here + / %li.divider + / %li + / %a{:href => "#"} Separated link + +.filter-box.property-box-shopfront.animate-hide.text-right + %ul + %li + %a Organic Certified + %li + %a Free Range + %li + %a Biodynamic + %li + %a + + 2 more + %span.caret + + + \ No newline at end of file diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index 48436881a7..a654c8db5e 100644 --- a/app/views/shop/products/_form.html.haml +++ b/app/views/shop/products/_form.html.haml @@ -1,6 +1,22 @@ %products.small-12.columns{"ng-controller" => "ProductsCtrl", "ng-show" => "order_cycle.order_cycle_id != null", "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1"} + // TODO: Needs an ng-show to slide content down + .row.animate-hide + .small-12.columns + .alert-box.search-alert.ng-scope{"ng-show" => "visible", "ofn-inline-alert" => ""} + %a.right{"ng-click" => "close()"} + Clear all + %i.ofn-i_009-close + %span.filter-label + Showing: + %span.applied-properties + Certified Organic + %span.applied-taxons + Fruit & Vegetables & Dairy + with + %span.applied-search + "search query string" .row .small-12.medium-6.large-5.columns %input#search.text{"ng-model" => "query",