diff --git a/doc/css/_header.scss b/doc/css/_header.scss index 194cbe1b..61c6f710 100644 --- a/doc/css/_header.scss +++ b/doc/css/_header.scss @@ -8,25 +8,37 @@ header.site-header { transition: background 2s ease; nav.navbar { margin-bottom: 0; - background-color: #0B1724; + background-color: #000008; border-radius: 0; border: none; .navbar-collapse.in { - background-color: #0B1724 !important; + background-color: #000008 !important; animation: fadeInUp .2s ease-in-out; position: fixed; @include position(0,0,0,0); padding: 20%; font-size: 1.2em; li { - padding-bottom: 1em; } } + padding-bottom: 1em; + } + } .navbar-brand { font-size: 1em; color: white; - z-index: 1; } + z-index: 1; + &.auto-hide { + opacity: 0; + -webkit-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; + &.visible { + opacity: 1; + } + } + } .navbar-header { position: relative; - z-index: 2; } + z-index: 2; + } .navbar-toggle { background-color: $brand-primary; border: solid 1px $brand-primary; @@ -34,14 +46,22 @@ header.site-header { &.collapsed { background-color: transparent; border: solid 1px rgba(white,.4); - color: white; } } + color: white; + } + } .navbar-nav { > li > a { - padding-bottom: 0; } + padding-bottom: 0; + } > .active > a { color: #1D96C7 !important; - background-color: transparent; } } } } + background-color: transparent; + } + } + } +} .main-content { - margin-top: $navbar-height; } + margin-top: $navbar-height; +} diff --git a/doc/css/_home.scss b/doc/css/_home.scss index 3f1f7051..a46a4ff7 100644 --- a/doc/css/_home.scss +++ b/doc/css/_home.scss @@ -1,9 +1,40 @@ + + + +/* GENERAL +// ------------------------- */ +h1 { + font-size: 3.2em; +} h2 { font-size: 1.8em; font-weight: normal; letter-spacing: 1px; - margin-bottom: 1em; } + margin-bottom: 1em; +} +.page-section { + padding-top: 80px; + padding-bottom: 70px; +} +.headline { + text-align: center; + font-size: 1.8em; + margin-top: 0; + + &:after { + display: block; + content: ' '; + height: 20px; + border-bottom: 4px solid $magento-orange; + margin: 0 auto 1em auto; + width: 50px; + } +} + + +/* JUMBOTRON +// ------------------------- */ .jumbotron { background-image: url(../img/header-bg.png); background-repeat: no-repeat; @@ -12,53 +43,109 @@ h2 { color: white; h1 { + font-size: 3.2em; text-align: center; - img { - height: 1em; + img.jumbotron-algolia_logo { + height: 1.2em; + position: relative; + top: -0.1em; + margin-right: 8px; + } + + img.jumbotron-magento_logo { + height: 1.8em; + position: relative; + top: -0.05em; + margin-left: 8px; } } p { - font-size: 24px; - line-height: 32px; + font-size: 1.5em; + line-height: 1.3; } .latest-version { text-align: center; - font-size: 18px; - margin: 30px 0 40px 0; + font-size: 1em; + margin: 30px 0 40px; } .buttons { text-align: center; margin-bottom: 40px; + text-transform: uppercase; .btn { border-width: 2px; font-size: 14px; margin: 0 10px; } + .btn-primary-full { + background: $magento-orange; + } } + .badges { + text-align: center; + img { + vertical-align: top; + } + } } -.headline { - text-align: center; - font-size: 30px; - &:after { - display: block; - content: ' '; - height: 10px; - border-bottom: 2px solid $magento-orange; - margin: 0 auto 1em auto; - width: 30px; + +/* THE WHY +// ------------------------- */ +.the-why p { + font-size: 1.2em; + font-family: $headings-font-family; + line-height: 1.5; +} + + + +/* INTEGRATE +// ------------------------- */ +.integrate { + padding-top: 0; + + p { + position: relative; + top: 50px; } } + + +/* DEMOS +// ------------------------- */ +.demos { + background: #F5F5F9; + .demo { + margin-bottom: 40px; + &:last-child { + margin-bottom: 0; + } + + .icon { + width: 46px; + } + h3 { + font-size: 1.2em; + font-weight: bold; + } + } +} + + + +/* FEATURES +// ------------------------- */ .features { - .row { + .feature { margin-bottom: 50px; h3 { @@ -79,6 +166,7 @@ h2 { border-radius: 50%; float: left; margin-right: 20px; + clear: both; } .bubble { @@ -119,29 +207,18 @@ h2 { } -.integrate { - margin-top: 100px; - margin-bottom: 100px; -} - -.demo { - margin-bottom: 100px; - - .icon { - width: 46px; - } - h3 { - font-size: 18px; - font-weight: bold; - } -} +/* SHOWCASES +// ------------------------- */ .showcases { + background: $dark-blue; text-align: center; + font-weight: 300; + color: #FFF; .showcase { - display: block; + display: inline-block; height: 323px; overflow: hidden; @@ -150,19 +227,25 @@ h2 { } &.fixme { - width: 100%; + color: #666; + width: 350px; height: 323px; - background: #efefef; + border: #666 4px dashed; line-height: 323px; font-size: 2em; } } + .showcase-link, .showcase-join { + display: inline-block; + font-size: 1.1em; + margin-top: 8px; + margin-bottom: 10px; + color: #FFF; + } + .showcase-link:hover { + color: $magento-orange; + text-decoration: none; + } } -.badges { - text-align: center; - img { - vertical-align: top; - } -} \ No newline at end of file diff --git a/doc/img/.DS_Store b/doc/img/.DS_Store new file mode 100644 index 00000000..4406a679 Binary files /dev/null and b/doc/img/.DS_Store differ diff --git a/doc/img/magento-logo.png b/doc/img/magento-logo.png index 9c0bde13..afd1c949 100644 Binary files a/doc/img/magento-logo.png and b/doc/img/magento-logo.png differ diff --git a/doc/index.haml b/doc/index.haml index ab91035d..ca9c1d87 100644 --- a/doc/index.haml +++ b/doc/index.haml @@ -1,15 +1,15 @@ --- layout: default +navbar-brand-class: auto-hide --- .main-content .jumbotron .container %h1 - %img{src: '{{site.baseurl}}/img/algolia-logo.svg'} + %img{src: '{{site.baseurl}}/img/algolia-logo.svg', class: 'jumbotron-algolia_logo'} for - %img{src: '{{site.baseurl}}/img/magento-logo.png'} - Magento + %img{src: '{{site.baseurl}}/img/magento-logo.png', class: 'jumbotron-magento_logo'} .row .col-sm-6.col-sm-offset-3.text-center @@ -18,14 +18,9 @@ layout: default .latest-version Latest version: {{ site.version }} .buttons - %a.btn.btn-primary{href: 'https://www.algolia.com/schedule-demo?hi=magento'} - %i.fa.fa-headphones - Request a demo %a.btn.btn-primary{href: 'https://magento.algolia.com'} - %i.fa.fa-desktop Try it live - %a.btn.btn-primary{href: 'http://www.magentocommerce.com/magento-connect/algolia-search-extension.html'} - %i.fa.fa-download + %a.btn.btn-primary.btn-primary-full{href: 'http://www.magentocommerce.com/magento-connect/algolia-search-extension.html'} Install the extension now .badges @@ -35,41 +30,46 @@ layout: default %img{src: 'https://img.shields.io/badge/magento-1.8.1-blue.svg'} %img{src: 'https://img.shields.io/badge/magento-1.9.2-blue.svg'} - .container - .spacer50 - %h1.headline Build Unique Shopping Experiences - .row - .col-sm-8.col-sm-offset-2.text-center - %p With Algolia's as-you-type search customers think less about how to search and more about what they find. Serve relevant content from the first keystroke. - - .row.integrate - .col-sm-4.col-sm-offset-1 - %img.img-responsive.m-l-r-auto{src: '{{site.baseurl}}/img/ecommerce-search.png'} - .col-sm-6 - %p Integrate in minutes the Magento default search with Algolia's instant search and increase the conversion rates of your e-commerce site. - %p Algolia’s Search Magento Extension makes it easy to deliver a lightning fast search experience to your End-Users. - - - .row.demo - .col-sm-7 - %img.img-responsive.m-l-r-auto{src: '{{site.baseurl}}/auto-complete.gif'} - .col-sm-5 - %img.icon{src: '{{site.baseurl}}/img/autocomplete.png'} - %h3 Product & Category Autocomplete - %p Offer End-Users immediate access to your whole catalog from the dropdown menu, whatever your number of categories or attributes. - - .row.demo - .col-sm-5.text-right - %img.icon{src: '{{site.baseurl}}/img/faceted.png'} - %h3 Instant & Faceted search - %p Have your search results page, navigation and pagination updated in realtime, after each keystroke. - .col-sm-7 - %img.img-responsive.m-l-r-auto{src: '{{site.baseurl}}/instant-search.gif'} - - %h1.headline Features - .features + .page-section.the-why + .container + %h1.headline Build Unique Shopping Experiences + .row + .col-sm-8.col-sm-offset-2.text-center + %p With Algolia's as-you-type search customers think less about how to search and more about what they find. Serve relevant content from the first keystroke. + + .page-section.integrate + .container .row + .col-sm-4.col-sm-offset-1 + %img.img-responsive.m-l-r-auto{src: '{{site.baseurl}}/img/ecommerce-search.png'} + .col-sm-6 + %p Integrate in minutes the Magento default search with Algolia's instant search and increase the conversion rates of your e-commerce site. + %p Algolia’s Search Magento Extension makes it easy to deliver a lightning fast search experience to your End-Users. + + + .page-section.demos + .container + .row.demo + .col-sm-7 + %img.img-responsive.m-l-r-auto{src: '{{site.baseurl}}/auto-complete.gif'} .col-sm-5 + %img.icon{src: '{{site.baseurl}}/img/autocomplete.png'} + %h3 Product & Category Autocomplete + %p Offer End-Users immediate access to your whole catalog from the dropdown menu, whatever your number of categories or attributes. + + .row.demo + .col-sm-5.text-right + %img.icon{src: '{{site.baseurl}}/img/faceted.png'} + %h3 Instant & Faceted search + %p Have your search results page, navigation and pagination updated in realtime, after each keystroke. + .col-sm-7 + %img.img-responsive.m-l-r-auto{src: '{{site.baseurl}}/instant-search.gif'} + + .page-section.features + .container + %h1.headline Features + .row + .feature.col-sm-5.col-sm-offset-1 .bubble-outer .bubble .bubble-inner @@ -77,7 +77,7 @@ layout: default %img{src: '{{site.baseurl}}/img/icon-relevance.png'} %h3 Relevance %p Increase customer satisfaction by serving relevant results. If a user can't find a product, they won't buy it! - .col-sm-5.col-sm-offset-2 + .feature.col-sm-5 .bubble-outer .bubble .bubble-inner @@ -87,7 +87,7 @@ layout: default %p Deliver lightning fast results to your customers, anywhere in the world thanks to our distributed search network. .row - .col-sm-5 + .feature.col-sm-5.col-sm-offset-1 .bubble-outer .bubble .bubble-inner @@ -95,7 +95,7 @@ layout: default %img{src: '{{site.baseurl}}/img/icon-typo-tolerance.png'} %h3 Typo Tolerance %p Don't let spelling mistakes prevent your users from finding the products they are looking for. - .col-sm-5.col-sm-offset-2 + .feature.col-sm-5 .bubble-outer .bubble .bubble-inner @@ -105,7 +105,7 @@ layout: default %p Have your search results page, navigation and pagination updated in realtime, after each keystroke. .row - .col-sm-5 + .feature.col-sm-5.col-sm-offset-1 .bubble-outer .bubble .bubble-inner @@ -113,7 +113,7 @@ layout: default %img{src: '{{site.baseurl}}/img/icon-analytics.png'} %h3 Analytics %p From a simple dashboard, get valuable information on how your customers are searching and what they're searching for. - .col-sm-5.col-sm-offset-2 + .feature.col-sm-5 .bubble-outer .bubble .bubble-inner @@ -126,20 +126,26 @@ layout: default .col-sm-4.col-sm-offset-4.github %i.fa.fa-github %h3 Open source - %p Make it look like anything you want! Open-source, available on GitHub. + %p + Make it look like anything you want! + %br Open-source, available on Github. - .spacer100 - %h1.headline Showcase - .showcases + .page-section.showcases + .container + %h1.headline Showcase .row .col-sm-4 %a.showcase{href: 'http://www.whisky.fr'} %img.img-responsive{src: '{{site.baseurl}}/img/showcase-1.png'} - %p Whisky.fr + %br + %a.showcase-link{href: 'http://www.whisky.fr'} Whisky.fr .col-sm-4 %a.showcase{href: 'http://www.beyondretro.com/'} %img.img-responsive{src: 'img/beyond.png'} - %p Beyond Retro + %br + %a.showcase-link{href: 'http://www.beyondretro.com/'} Beyond Retro .col-sm-4 .showcase.fixme{href: '#'} You? - %p Join us! + %br + %p.showcase-join Join us! + diff --git a/doc/js/header.js b/doc/js/header.js new file mode 100644 index 00000000..581747be --- /dev/null +++ b/doc/js/header.js @@ -0,0 +1,15 @@ + + $(document).ready(function(){ + var scroll_start = 0; + var startchange = $('.navbar-brand.auto-hide'); + if (startchange.length) { + $(document).scroll(function() { + scroll_start = $(this).scrollTop(); + if(scroll_start > 300) { + startchange.addClass("visible"); + } else { + startchange.removeClass("visible"); + } + }); + } + }); \ No newline at end of file diff --git a/releases/algoliasearch-1.5.3.tgz b/releases/algoliasearch-1.5.3.tgz new file mode 100644 index 00000000..761e69e6 Binary files /dev/null and b/releases/algoliasearch-1.5.3.tgz differ diff --git a/skin/algoliasearch.css b/skin/algoliasearch.css index 82f72d52..ca210b7a 100755 --- a/skin/algoliasearch.css +++ b/skin/algoliasearch.css @@ -367,6 +367,7 @@ a.ais-current-refined-values--link:hover @media (min-width: 992px) { #algolia-autocomplete-container .aa-dropdown-menu { width: 71.1%; + min-width: 800px; } } @@ -752,18 +753,15 @@ a.ais-current-refined-values--link:hover overflow: hidden; } -#instant-search-bar-container { - width: 100%; - position: relative; -} - #algolia_instant_selector #instant-search-bar { - width: 100%; + float: left; + width: calc(100% - 140px); height: 40px; font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; - border: none; - border-bottom: solid 2px #54A5CD; - padding-left: 36px; + border: solid 2px #54A5CD; + border-left: none; + padding-left: 6px; + padding-top: 2px; } #algolia_instant_selector.with-facets #algolia-right-container { @@ -786,6 +784,10 @@ a.ais-current-refined-values--link:hover color: #555; } +#algolia_instant_selector .hits .sort-by-label { + margin-right: 8px; +} + #algolia_instant_selector .hits .no-results { margin: 40px 25px; color: #636363; @@ -965,6 +967,14 @@ a.ais-current-refined-values--link:hover #algolia_instant_selector #instant-search-bar-container { padding-top: 0px; margin-bottom: 15px; + width: 100%; + position: relative; +} + +#algolia_instant_selector #instant-search-bar-container:after { + clear: both; + content: ""; + display: block; } #algolia_instant_selector .as-search-box--input { @@ -982,12 +992,23 @@ a.ais-current-refined-values--link:hover display: none; } +#algolia_instant_selector .instant-search-bar-label { + background-color: #54A5CD; + height: 40px; + line-height: 24px; + padding: 8px 12px; + color: white; + float: left; + width: 140px; + text-align: right; +} + #algolia_instant_selector #instant-search-box svg.magnifying-glass { position: absolute; top: 8px; - left: 0px; - fill: #54A5CD; - stroke: #54A5CD; + left: 8px; + fill: #FFFFFF; + stroke: #FFFFFF; } #algolia_instant_selector .before_special {