From 75fb4e2538351584122d4999f5dfcd020f8aea11 Mon Sep 17 00:00:00 2001 From: Lucas Bonomi Date: Fri, 29 Apr 2016 12:19:03 +0200 Subject: [PATCH] fix(website): fixed some element for responsive purposes & MISC --- docs/source/index.html.haml | 6 ++- docs/source/partials/navigation.html.haml | 3 +- .../stylesheets/components/_containers.scss | 4 ++ .../components/_documentation.scss | 50 +++++++++++++++++++ .../stylesheets/components/_inputs.scss | 14 ++++++ .../stylesheets/components/_navigation.scss | 4 ++ .../stylesheets/components/_sidebar.scss | 2 + docs/source/stylesheets/vendors/_helpers.scss | 34 +++++++++---- docs/source/stylesheets/vendors/_mixins.scss | 14 ++++++ 9 files changed, 119 insertions(+), 12 deletions(-) diff --git a/docs/source/index.html.haml b/docs/source/index.html.haml index 71c9df22c..491725bcf 100644 --- a/docs/source/index.html.haml +++ b/docs/source/index.html.haml @@ -27,13 +27,15 @@ subtitle: Turn any <input /> into an address search bar %img{src: "http://res.cloudinary.com/hilnmyskv/image/upload/f_auto,q_100/v1461833483/Algolia_Places_-_demo_checkout_v2_1_zwg57n.gif", class: "gif"} .row - .bloc-5 + .bloc-5.no-mobile %figure.media-object %img{src: "http://res.cloudinary.com/hilnmyskv/image/upload/f_auto,q_100/v1461845398/Algolia_Places_-_demo_country_opfl1a.gif", class: "gif"} .bloc-5 %h3.title Create the best City or Country selector %p Stop scrolling through a list to pick a country and help your users select it faster. - + .bloc-5.no-desktop + %figure.media-object + %img{src: "http://res.cloudinary.com/hilnmyskv/image/upload/f_auto,q_100/v1461845398/Algolia_Places_-_demo_country_opfl1a.gif", class: "gif"} .row .bloc-5 %h3.title Display a map diff --git a/docs/source/partials/navigation.html.haml b/docs/source/partials/navigation.html.haml index 90de960bf..88c50a2c1 100644 --- a/docs/source/partials/navigation.html.haml +++ b/docs/source/partials/navigation.html.haml @@ -2,7 +2,8 @@ %div.container %div.fl-left %a.logo-community{href: "https://community.algolia.com/", title: 'Algolia Community'} - Algolia Community + %img{src:"https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg",width:"150",alt:"Algolia Community", class:"nav-icon no-mobile"} + %img{src:"https://res.cloudinary.com/hilnmyskv/image/upload/v1461180081/logo-community-sm.svg", alt:"Algolia Community", class:"community-badge no-desktop"} %a.project-title{href: "./", title: "Home"} Places %div.fl-right diff --git a/docs/source/stylesheets/components/_containers.scss b/docs/source/stylesheets/components/_containers.scss index 039d8f74f..65abf021c 100644 --- a/docs/source/stylesheets/components/_containers.scss +++ b/docs/source/stylesheets/components/_containers.scss @@ -220,6 +220,10 @@ section { .bloc-5 { padding: 1em; + + @include small-mq { + width: 100%; + } } .row:nth-of-type(1) { diff --git a/docs/source/stylesheets/components/_documentation.scss b/docs/source/stylesheets/components/_documentation.scss index aede5097b..a672bf7b2 100644 --- a/docs/source/stylesheets/components/_documentation.scss +++ b/docs/source/stylesheets/components/_documentation.scss @@ -77,6 +77,9 @@ padding: 0; border-collapse: collapse; border-spacing: 0; + width: 100%; + display: block; + margin: 0; tr { border-top: 1px solid #cccccc; @@ -123,8 +126,55 @@ &+ h3 { margin-top: 2em; } + + + @include small-mq { + display: block; + float: left; + margin-bottom: 2em; + + thead, tbody, th, td, tr { + display: block; + float: left; + width: 100%; + } + tbody { + border-bottom: 1px solid #cccccc; + } + tr { + border-left: 1px solid #cccccc; + border-right: 1px solid #cccccc; + + th { + border: none; + + &:nth-of-type(2) { + border-left: 1px solid #cccccc; + } + } + } + tr td { + border: none; + overflow: auto; + + + &:nth-of-type(2) { + border-left: 1px solid #cccccc; + } + } + + th, td { + width: 50%; + float: left; + } + + tr:nth-child(even) { + background: #f8f8f8 + } + } } + .anchor { margin-left: .2em; display: none; diff --git a/docs/source/stylesheets/components/_inputs.scss b/docs/source/stylesheets/components/_inputs.scss index 41ee71ac7..ee4b1046c 100644 --- a/docs/source/stylesheets/components/_inputs.scss +++ b/docs/source/stylesheets/components/_inputs.scss @@ -1,8 +1,20 @@ input { outline: none; + border-radius: 4px; + + @include appearance(none !important); + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + display: none !important; + } } + + // Style the input for the Demo page .hero-section { + .algolia-places { top: 50px; font-family: 'Open Sans', helvetica Neue; @@ -36,6 +48,8 @@ input { padding-left: 16px; padding-right: 48px; border-radius: 4px; + + @include appearance(none) } .ap-suggestion { diff --git a/docs/source/stylesheets/components/_navigation.scss b/docs/source/stylesheets/components/_navigation.scss index f4eaddae3..c8a80aa6d 100644 --- a/docs/source/stylesheets/components/_navigation.scss +++ b/docs/source/stylesheets/components/_navigation.scss @@ -34,6 +34,10 @@ top: 7px; width: 200px; margin-right: 6px; + + &.community-badge { + width: 34px; + } } } diff --git a/docs/source/stylesheets/components/_sidebar.scss b/docs/source/stylesheets/components/_sidebar.scss index e1a8130d2..3026043b1 100644 --- a/docs/source/stylesheets/components/_sidebar.scss +++ b/docs/source/stylesheets/components/_sidebar.scss @@ -58,6 +58,7 @@ nav.sidebar { top: 16px; border: none; padding-top: 0; + display: none; select { width: calc(100% - 32px); @@ -69,6 +70,7 @@ nav.sidebar { background: $brand-primary; color: #fff; top: 50px; + display: block; select { visibility: visible; diff --git a/docs/source/stylesheets/vendors/_helpers.scss b/docs/source/stylesheets/vendors/_helpers.scss index 7c860f10b..eb4b0c0c6 100644 --- a/docs/source/stylesheets/vendors/_helpers.scss +++ b/docs/source/stylesheets/vendors/_helpers.scss @@ -76,32 +76,48 @@ hr { // - display-on-small : only display on smallish screen ( no mobile ) .no-desktop { - display: none !important; - + @include hide(); @include small-mq { - display: none !important; + @include hide(); } + @include mobile-mq { - display: block !important; + @include unhide(block); } + +&.community-badge { + @include mobile-mq { + @include unhide(inline); + } +} + @media screen and (orientation: landscape) { - display: none !important; + @include hide(); } } .no-mobile { - display: block !important; + @include unhide(block); + + &.nav-icon { + @include unhide(inline); + + @include small-mq { + @include hide(); + } + } @include small-mq { - display: none !important; + @include hide(); } } .display-on-small { - display: none !important; + @include hide(); @media (max-width: 960px){ - display: inline-block !important + display: inline-block !important; + visibility: visible; } } diff --git a/docs/source/stylesheets/vendors/_mixins.scss b/docs/source/stylesheets/vendors/_mixins.scss index 4f39135f1..af191981e 100644 --- a/docs/source/stylesheets/vendors/_mixins.scss +++ b/docs/source/stylesheets/vendors/_mixins.scss @@ -19,6 +19,20 @@ float: none; } +@mixin hide() { + display: none !important; + visibility: hidden; +} + +@mixin unhide($type) { + display: $type !important; + visibility: visible; +} +@mixin appearance ($value) { + -webkit-appearance: $value; + -moz-appearance: $value; + appearance: $value; +} // Responsive Breakpoints @mixin big-min-mq {