Last active
January 3, 2016 17:49
-
-
Save benknight/8497929 to your computer and use it in GitHub Desktop.
Full-width Yelp search with fixed map
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .app-header { | |
| top: 0; | |
| width: 100%; | |
| } | |
| .app-header, | |
| #dropper, | |
| .autocomplete_choices { | |
| z-index: 99999 !important; /* KAPOW! */ | |
| position: fixed !important; | |
| } | |
| .hovercard { | |
| z-index: 999999; | |
| } | |
| #dropper, | |
| .autocomplete_choices { | |
| top: 45px !important; | |
| } | |
| #super-container { | |
| position: relative; | |
| top: 77px; | |
| width: auto; | |
| margin: 0; | |
| border: none; | |
| -webkit-transition: margin 0.5s; | |
| transition: margin 0.5s; | |
| } | |
| .search-results-block .column-alpha { | |
| width: 100%; | |
| } | |
| .footer { | |
| display: none; | |
| } | |
| .map-wrapper { | |
| position: fixed !important; | |
| top: 77px; | |
| left: 0; | |
| bottom: 0; | |
| -webkit-transition: width 0.5s; | |
| transition: width 0.5s; | |
| } | |
| .map-wrapper .search-map { | |
| height: 100%; | |
| border-width: 0 1px 0 0; | |
| } | |
| .map-wrapper #map-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .search-footer-block > .column-alpha, | |
| .search-footer-block > .column-beta { | |
| width: 100%; | |
| } | |
| /** Mo Map */ | |
| .mo-map-enabled #super-container { | |
| margin-left: 66%; | |
| } | |
| .mo-map-enabled .map-wrapper { | |
| width: 66%; | |
| } | |
| .mo-map-enabled .search-header h1, | |
| .mo-map-enabled .search-header .pagination-results-window { | |
| float: none; | |
| padding-top: 0; | |
| } | |
| .mo-map-enabled .search-footer-block .column, | |
| .mo-map-enabled .search-footer-block .column-borders .ysection { | |
| width: 100%; | |
| float: none; | |
| border: none; | |
| } | |
| /** Less Map */ | |
| #super-container { | |
| margin-left: 42%; | |
| } | |
| .map-wrapper { | |
| width: 42%; | |
| } | |
| /** Map Controls */ | |
| .map-header { | |
| position: relative; | |
| z-index: 1; | |
| padding: 0; | |
| } | |
| .mo-map-trigger { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| border: 5px solid white; | |
| border-radius: 3px; | |
| background: white; | |
| } | |
| .map-header .cube-wrapper { | |
| position: absolute; | |
| top: 10px; | |
| left: 38px; | |
| } | |
| .map-header .cube-wrapper .cube .face { | |
| height: auto; | |
| background: none; | |
| } | |
| .map-header .cube-wrapper .cube .face1 { | |
| background: rgba(0, 0, 0, 0.4); | |
| padding: 6px; | |
| color: white; | |
| font-weight: bold; | |
| border-radius: 3px; | |
| } | |
| .map-header .cube-wrapper .cube .face1 label { | |
| float: none; | |
| } | |
| .map-header .cube-wrapper .cube .face2 a { | |
| float: none; | |
| margin: 8px 0 0 0; | |
| } | |
| .reset-mo-map .map-header i, | |
| .map-header i { | |
| -webkit-transform: rotate(-180deg); | |
| -moz-transform: rotate(-180deg); | |
| -ms-transform: rotate(-180deg); | |
| transform: rotate(-180deg); | |
| } | |
| .mo-map-enabled .map-header i { | |
| -webkit-transform: none; | |
| -moz-transform: none; | |
| -ms-transform: none; | |
| transform: none; | |
| } | |
| /** Filters */ | |
| .filter-panel .inner-wrap { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| padding: 0 15px; | |
| } | |
| .filter-panel .inner-wrap:before { | |
| display: none; | |
| } | |
| .filter-panel .filter-set { | |
| width: auto; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .mo-map-enabled .filter-panel .filter-set { | |
| width: 33%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| if (! $) { | |
| return false; | |
| } | |
| var transitionEvents = [ | |
| 'webkitTransitionEnd', | |
| 'oTransitionEnd', | |
| 'otransitionend', | |
| 'transitionend', | |
| 'msTransitionEnd' | |
| ]; | |
| var syncMoMap = function() { | |
| $(document.body).toggleClass( | |
| 'mo-map-enabled', | |
| $('.search-results-block').is('.mo-map') | |
| ); | |
| }; | |
| var centerMap = function() { | |
| transitionEvents.forEach(function(eventType) { | |
| $('#map-container').trigger(eventType); | |
| }); | |
| }; | |
| // Set things up. | |
| syncMoMap(); | |
| centerMap(); | |
| $('.redo-search').removeClass('ybtn-primary ybtn-small').addClass('ybtn-tertiary'); | |
| $('.mo-map-trigger').bind('click', function() { | |
| syncMoMap(); | |
| setTimeout(centerMap, 500); | |
| }); | |
| })(window.jQuery); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Badass Search</title> | |
| </head> | |
| Drag me into the bookmarks bar:<br> | |
| <a href="javascript:(function(){var gist_id='8497929';var css=[];var js=[];var applyCSS=function(){for(var x in css){var style=document.createElement('style');style.innerHTML=css[x];document.head.appendChild(style);}};var applyJS=function(){for(var x in js){var script=document.createElement('script');script.innerHTML=js[x];document.body.appendChild(script);}};var xhr=new XMLHttpRequest();xhr.open('GET','https://api.github.com/gists/'+gist_id,true);xhr.onload=function(){var data=JSON.parse(this.responseText);for(var file in data.files){if(data.files[file].language=='CSS'){css.push(data.files[file].content);}if(data.files[file].language=='JavaScript'){js.push(data.files[file].content);}}applyCSS();applyJS();};xhr.onerror=function(){console.log('Failed to load Gist: '+request.gist);};xhr.send();}());">Badass Search</a> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment