fix(website): fixed some element for responsive purposes & MISC

algolia · Apr 29, 2016 · 75fb4e2 · 75fb4e2
1 parent 94759ad
commit 75fb4e2
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 12 deletions.
diff --git a/docs/source/index.html.haml b/docs/source/index.html.haml
@@ -27,13 +27,15 @@ subtitle: Turn any <code>&lt;input /&gt;</code> 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
@@ -2,7 +2,8 @@
   %div.container
     %div.fl-left
     %a.logo-community{href: "https://community.algolia.com/", title: 'Algolia Community'}
-      <img src="https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg" width="150" alt="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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {