raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search and filter styling and markup tweaks

Browse Source
This commit is contained in:
summerscope
2014-07-09 16:13:43 +10:00
parent 95d519f0f1
commit 263060611d
7 changed files with 110 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/assets/stylesheets/darkswarm/active_table_search.css.sass
View File

@@ -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)

11
app/assets/stylesheets/darkswarm/animations.sass
View File

@@ -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

54
app/assets/stylesheets/darkswarm/big-input.sass Normal file
View File

@@ -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

26
app/assets/stylesheets/darkswarm/mixins.sass
View File

@@ -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

10
app/assets/stylesheets/darkswarm/shop.css.sass
View File

@@ -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

4
app/views/producers/_filters.html.haml
View File

@@ -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

8
app/views/producers/index.html.haml
View File

@@ -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