Skip to content

Commit 443950a

Browse files
chrislloydchrislloyd
committed
Merge pull request coderwall#281 from dorilla/feature/jobs-filtering
Feature/jobs filtering re-design
2 parents 8768cd0 + d2b07c9 commit 443950a

File tree

8 files changed

+328
-93
lines changed

8 files changed

+328
-93
lines changed

‎app/assets/images/select-arrow.png

288 Bytes
Loading

‎app/assets/javascripts/jobs.js.coffee

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
$ ->
2-
$('a.filter').on 'click', (e)->
3-
$('.location-drop-down').toggleClass("hide")
4-
e.stopPropagation()
2+
# if the query is not empty, then make it active to see the text better
3+
if $('input.query').val() != $('input.query').attr('placeholder') && $('input.query').val().length > 0
4+
$('input.query').addClass('active')
55

6-
$(document).on 'click', ->
7-
$('.location-drop-down').addClass("hide")
6+
# after a change in keywords input, if the query is not empty, then make it active to see the text better
7+
$('input.query').on 'change', (e) ->
8+
if $(this).val().length > 0
9+
$(this).addClass('active')
10+
else
11+
$(this).removeClass('active')
812

13+
# make sure the placeholder for the keywords input form doesn't get sent as the query
14+
$('#filter-jobs').on 'submit', (e) =>
15+
if $('input.query').attr('placeholder') == $('input.query').val()
16+
$('input.query').val('')

‎app/assets/stylesheets/application.css.scss

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2045,3 +2045,116 @@ input[type=file].safari5-upload-hack {
20452045
min-width: 70px
20462046
}
20472047
}
2048+
2049+
/* ------------------------------------ */
2050+
/* Select Box Styling (cross-browser) */
2051+
/* Source: https://github.com/filamentgroup/select-css/blob/master/src/select.css */
2052+
/* ---------------------------------- */
2053+
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
2054+
.custom-select {
2055+
position: relative;
2056+
display:block;
2057+
margin-top:0.5em;
2058+
padding:0;
2059+
}
2060+
2061+
/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
2062+
.custom-select select {
2063+
width:100%;
2064+
margin:0;
2065+
background:none;
2066+
border: 1px solid transparent;
2067+
outline: none;
2068+
/* Prefixed box-sizing rules necessary for older browsers */
2069+
-webkit-box-sizing: border-box;
2070+
-moz-box-sizing: border-box;
2071+
box-sizing: border-box;
2072+
/* Remove select styling */
2073+
appearance: none;
2074+
-webkit-appearance: none;
2075+
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
2076+
font-size:1em;
2077+
}
2078+
2079+
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
2080+
2081+
.custom-select::after {
2082+
content: "";
2083+
position: absolute;
2084+
width: 9px;
2085+
height: 8px;
2086+
top: 50%;
2087+
right: 1em;
2088+
margin-top:-4px;
2089+
background-image: url("select-arrow.png");
2090+
background-repeat: no-repeat;
2091+
background-size: 100%;
2092+
z-index: 2;
2093+
/* This hack make the select behind the arrow clickable in some browsers */
2094+
pointer-events:none;
2095+
}
2096+
2097+
/* Hover style */
2098+
.custom-select:hover {
2099+
border:1px solid #888;
2100+
}
2101+
2102+
/* Focus style */
2103+
.custom-select select:focus {
2104+
outline:none;
2105+
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
2106+
background-color:transparent;
2107+
color: #222;
2108+
border:1px solid #aaa;
2109+
}
2110+
2111+
/* Set options to normal weight */
2112+
.custom-select option {
2113+
font-weight:normal;
2114+
}
2115+
2116+
/* ------------------------------------ */
2117+
/* START OF UGLY BROWSER-SPECIFIC HACKS */
2118+
/* ---------------------------------- */
2119+
2120+
/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
2121+
x:-o-prefocus, .custom-select::after {
2122+
display:none;
2123+
}
2124+
2125+
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
2126+
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
2127+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
2128+
.custom-select select::-ms-expand {
2129+
display: none;
2130+
}
2131+
.custom-select select:focus::-ms-value {
2132+
background: transparent;
2133+
color: #222;
2134+
}
2135+
}
2136+
2137+
2138+
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
2139+
/* Show only the native arrow */
2140+
@-moz-document url-prefix() {
2141+
.custom-select {
2142+
overflow: hidden;
2143+
}
2144+
.custom-select select {
2145+
width: 120%;
2146+
width: -moz-calc(100% + 3em);
2147+
width: calc(100% + em);
2148+
}
2149+
2150+
}
2151+
2152+
/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
2153+
.custom-select select:-moz-focusring {
2154+
color: transparent;
2155+
text-shadow: 0 0 0 #000;
2156+
}
2157+
2158+
/* ------------------------------------ */
2159+
/* END OF UGLY BROWSER-SPECIFIC HACKS */
2160+
/* ------------------------------------ */

‎app/assets/stylesheets/jobs.scss

Lines changed: 139 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -134,21 +134,16 @@ body#jobs {
134134
padding: 0 20px;
135135
position: relative;
136136

137-
.filter-outside {
137+
.heading-outside {
138138
float: left;
139139
margin-top: 65px;
140140

141-
.filter {
141+
.heading {
142142
position: relative;
143143
display: inline-block;
144-
background: image-url("jobs/filter-hint.png") no-repeat right center;
145144
padding-right: 30px;
146145
max-width: 440px;
147146

148-
&:hover {
149-
opacity: 0.6;
150-
}
151-
152147
h1 {
153148
font-size: 3.7em;
154149
font-family: "MuseoSans-100";
@@ -159,59 +154,9 @@ body#jobs {
159154
}
160155
}
161156
}
162-
//filter
163-
164-
.location-drop-down {
165-
166-
//display: none;
167-
168-
position: absolute;
169-
z-index: 1000;
170-
background: #fff;
171-
width: 175px;
172-
left: 223px;
173-
top: 120px;
174-
@include border-radius(4px);
175-
border: solid 1px #e1e1e1;
176-
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);
177-
178-
li {
179-
border-top: #e1e1e1 solid 1px;
180-
181-
&:first-child {
182-
border: 0;
183-
}
184-
185-
&:last-child {
186-
a.worldwide {
187-
color: black;
188-
}
189-
}
190-
191-
a {
192-
font-family: "MuseoSans-500";
193-
display: block;
194-
font-size: 1.3em;
195-
color: #8B8B8B;
196-
height: 40px;
197-
line-height: 40px;
198-
padding: 0 20px;
199-
@include ellipsis;
200-
201-
&:hover {
202-
color: $dark-grey;
203-
background: #f2f2f2;
204-
}
205-
206-
}
207-
//a
208-
}
209-
//li
210-
}
211-
//location drop down
212-
157+
//header
213158
}
214-
//filter-outside
159+
//header-outside
215160

216161
.top-box {
217162
position: absolute;
@@ -274,8 +219,142 @@ body#jobs {
274219
}
275220
// top-jobs
276221

277-
.jobs {
222+
.filter-outside {
278223
margin-top: -50px;
224+
margin-bottom: 15px;
225+
padding: 30px;
226+
background: #fff;
227+
@include border-radius(4px);
228+
@include subtle-box-shadow;
229+
230+
// clearfix
231+
&:before,&:after {
232+
content: "";
233+
display: table;
234+
}
235+
&:after {
236+
clear: both;
237+
}
238+
239+
.filter-option {
240+
float: left;
241+
font-size: 1.6em;
242+
position: relative;
243+
244+
.query {
245+
width: 250px;
246+
padding: 7px 5px 5px 28px;
247+
outline: none;
248+
border: 0;
249+
border: 1px solid #909090;
250+
-o-border-radius: 6px;
251+
border-radius: 6px;
252+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
253+
font-size: 1.0em;
254+
color: #a0a0a0;
255+
line-height: 35px - 10px;
256+
@include transition-all;
257+
258+
&:focus,
259+
&.active {
260+
color: #000;
261+
}
262+
263+
&:focus {
264+
border-color: #606060;
265+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.25);
266+
}
267+
}
268+
269+
.query-icon {
270+
position: absolute;
271+
top: 2px;
272+
left: 10px;
273+
274+
&:before {
275+
@include icon-font;
276+
content: "m";
277+
font-size: 13px;
278+
line-height: 35px;
279+
color: #b0b0b0;
280+
}
281+
}
282+
283+
.custom-select {
284+
width: 230px;
285+
height: 37px;
286+
margin-top: 0;
287+
margin-left: 10px;
288+
border: 1px solid #909090;
289+
-o-border-radius: 6px;
290+
border-radius: 6px;
291+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
292+
293+
&:hover {
294+
border-color: #909090;
295+
}
296+
297+
&:focus {
298+
border-color: #606060;
299+
}
300+
301+
select {
302+
padding: 9px 30px 6px 5px;
303+
font-family: "MuseoSans-300", arial, sans-serif;
304+
}
305+
}
306+
// custom-select
307+
308+
.checkbox {
309+
margin-left: 20px;
310+
line-height: 35px + 4px;
311+
font-size: 1.0em;
312+
}
313+
314+
&.submit {
315+
float: right;
316+
}
317+
318+
.submit-btn {
319+
@include cleaner-text;
320+
display: block;
321+
width: 135px;
322+
height: 37px;
323+
padding-top: 2px;
324+
float: left;
325+
text-align: center;
326+
font-size: 1.0em;
327+
text-transform: uppercase;
328+
letter-spacing: 0.1em;
329+
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
330+
@include border-radius(4px);
331+
332+
box-shadow: inset 0px 1px 0px 0px rgba(225, 225, 225, 0.1), 0px 2px 1px 0px rgba(0, 0, 0, 0.1);
333+
334+
background: #3f98dc; /* Old browsers */
335+
background: linear-gradient(to bottom, #3f98dc 0%, #3286c5 100%); /* W3C */
336+
337+
color: white;
338+
outline: none;
339+
border: none;
340+
341+
&:hover {
342+
background: #3f98dc;
343+
}
344+
345+
&:active {
346+
background: darken(#3f98dc, 10%);
347+
}
348+
}
349+
// submit-btn
350+
351+
}
352+
// filter-option
353+
}
354+
// filter-outside
355+
356+
.jobs {
357+
margin-top: 0px;
279358

280359
li {
281360
margin-bottom: 15px;

0 commit comments

Comments
 (0)