General improvements on design (#1561)

* General improvements on design * Update main.js
algolia · Nov 16, 2016 · 05b3141 · 05b3141
1 parent a9dd0a5
commit 05b3141
Show file tree

Hide file tree

Showing 16 changed files with 198 additions and 181 deletions.
diff --git a/docgen/assets/js/header.js b/docgen/assets/js/header.js
@@ -114,8 +114,6 @@ export default function initHeader() {
         });
         wrapper.innerHTML += `<ul class="cm-menu__list">${linksTpl}</ul>`;
       });
-    } else {
-      document.getElementById('menu-wrapper').remove();
     }
   }
 

diff --git a/docgen/assets/js/main.js b/docgen/assets/js/main.js
@@ -6,7 +6,7 @@ import dropdowns from './dropdowns.js';
 const container = document.querySelector('.documentation-container');
 const sidebarContainer = document.querySelector('.sidebar');
 
-if (container && sidebar) {
+if (sidebarContainer) {
   sidebar({
     headersContainer: container,
     sidebarContainer,

diff --git a/docgen/assets/js/sidebar.js b/docgen/assets/js/sidebar.js
@@ -32,6 +32,28 @@ function sidebarFollowScroll(sidebarContainer) {
   document.addEventListener('scroll', positionSidebar);
 }
 
+function sidebarToggleFollowScroll(sidebarContainer) {
+  const {height, navHeight, footerHeight, menuHeight, sidebarTop} = getPositionsKeyElements(sidebarContainer);
+  const positionSidebar = () => {
+    const currentScroll = window.pageYOffset;
+    if (currentScroll > sidebarTop - navHeight) {
+      const fold = height - footerHeight - menuHeight - 100;
+      if (currentScroll > fold) {
+        sidebarContainer.style.top = `${fold - currentScroll + navHeight + 20}px`;
+      } else {
+        sidebarContainer.style.top = null;
+      }
+      sidebarContainer.classList.add('fixed');
+    } else {
+      sidebarContainer.classList.remove('fixed');
+    }
+  };
+
+  window.addEventListener('load', positionSidebar);
+  document.addEventListener('DOMContentLoaded', positionSidebar);
+  document.addEventListener('scroll', positionSidebar);
+}
+
 function scrollSpy(sidebarContainer, headersContainer) {
   const headers = [...headersContainer.querySelectorAll('h2')];
 
@@ -83,6 +105,27 @@ function activeLinks(sidebarContainer) {
     }
   });
 }
+// The Following function will make the '.sidebar-opener'
+// clickable and it will open/close the sidebar on the
+// documentations
+
+function toggleDocumentationSidebar() {
+  const sidebarNav = document.querySelector('nav.sidebar');
+  const bodySize = document.body.clientWidth;
+
+  if (sidebarNav && bodySize < 960) {
+    const trigger = document.querySelector('.sidebar-opener');
+    const sidebarDoc = document.querySelector('.sidebar');
+
+    sidebarToggleFollowScroll(document.querySelector('.sidebar-opener'));
+
+    trigger.addEventListener('click', () => {
+      sidebarDoc.classList.toggle('Showed');
+      trigger.classList.toggle('Showed');
+    });
+  }
+}
+toggleDocumentationSidebar();
 
 function getPositionsKeyElements($sidebar) {
   const sidebarBBox = $sidebar.getBoundingClientRect();
@@ -98,3 +141,4 @@ function getPositionsKeyElements($sidebar) {
 
   return {sidebarTop, height, navHeight, footerHeight, menuHeight};
 }
+
diff --git a/docgen/layouts/archetypes/content-with-menu.pug b/docgen/layouts/archetypes/content-with-menu.pug
@@ -5,6 +5,7 @@ body.documentation
 
   section.documentation-section
     .container
+      a.sidebar-opener.no-desktop
       nav.sidebar
         block navigation
       .documentation-container

diff --git a/docgen/layouts/common/footer.pug b/docgen/layouts/common/footer.pug
@@ -6,6 +6,7 @@ section.ac-footer
       br
       a.ac-footer-link-item(href='https://github.com/algolia/instantsearch.js') GitHub
       a.ac-footer-link-item(href='https://github.com/algolia/instantsearch.js/issues') issues
+      a.ac-footer-link-item(href = 'https://www.algolia.com/policies/privacy') Privacy policy
   .ac-footer-container.ac-footer-brand
     p This project is part of
     img.ac-footer-brand-icon(src='https://res.cloudinary.com/hilnmyskv/image/upload/logo-community.svg')

diff --git a/docgen/layouts/common/hero.pug b/docgen/layouts/common/hero.pug
@@ -6,7 +6,7 @@ section.hero-section.shrink
         a(href='https://www.algolia.com/?utm_medium=social-owned&utm_source=algoliasearch-helper%20website&utm_campaign=homepage', title='Algolia built this', class='algolia-website-logo-link')
           span#icon-algolia.icon.icon-algolia-small_white.no-mobile
         figure
-          img(src=h.publicPath("images/react-instant-search-logo.svg"))
+          img(src=h.publicPath("images/react-instant-search-logo.svg"), width="46")
           figcaption
             h1=title
 
@@ -20,5 +20,5 @@ section.hero-section.shrink
         h2.tagline.
           Create instant-search experiences using #[a(href="https://facebook.github.io/react/") React]
           and #[a(href="https://www.algolia.com/") Algolia]
-      .fl-right.project-logo
+      .fl-left.project-logo
         <svg version="1.1" id="manatSVG" class="is-react-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;stroke:#FFFFFF;stroke-width:16;stroke-linecap:round;stroke-miterlimit:10;} </style> <g> <g> <g> <path class="st0" d="M266.3,120.2c71.5,11.8,122.7,43.5,122.7,80.6c0,23.1-19.8,44.2-52,59.5"/> <path class="st0" d="M214.4,58.8c31-22.5,60.9-30.5,81.8-18.3c31.3,18.1,33.9,75.4,10.6,140.8"/> <path class="st0" d="M321.6,284.7c3.1,36.5-5,64.9-25.4,76.7c-31,17.9-81.3-7.8-126.2-59.9"/> </g> <g> <path class="st0" d="M133.7,120.2C62.2,132.1,11,163.8,11,200.8c0,23.1,19.8,44.2,52,59.5"/> <path class="st0" d="M185.7,58.8c-31-22.5-60.9-30.5-81.8-18.3C72.6,58.6,70,115.9,93.3,181.3"/> <path class="st0" d="M78.4,284.7c-3.1,36.5,5,64.9,25.4,76.7c31,17.9,81.3-7.8,126.2-59.9"/> </g> </g> </g> <g style="transform: translateY(14px)"> <circle class="st0" cx="200.9" cy="121.6" r="39.3"/> <circle class="st0" cx="271.9" cy="244.5" r="39.3"/> <circle class="st0" cx="130" cy="244.5" r="39.3"/> <g> <line class="st0" x1="233.4" y1="177.8" x2="220.5" y2="155.6"/> <line class="st0" x1="233.4" y1="177.8" x2="239.3" y2="188.3"/> <line class="st0" x1="207" y1="244.5" x2="232.5" y2="244.5"/> <line class="st0" x1="149.5" y1="210.6" x2="162.4" y2="188.3"/> <line class="st0" x1="162.4" y1="188.3" x2="168.5" y2="177.8"/> <line class="st0" x1="195" y1="244.5" x2="207" y2="244.5"/> </g> </g> </svg>
diff --git a/docgen/src/images/open-doc-menu_icon.svg b/docgen/src/images/open-doc-menu_icon.svg
diff --git a/docgen/src/stylesheets/components/_buttons.scss b/docgen/src/stylesheets/components/_buttons.scss
@@ -1,5 +1,6 @@
 .btn {
   background: linear-gradient(to right, mix(#895cf2, #fff, 95%) 0%,  mix(#2faddc, #fff, 95%) 90%) mix(#3066BE, #fff, 95%);
+  background: #2faddc;
   color: $hero-color-accent;
   height: 40px;
   max-width: 140px;
@@ -19,6 +20,7 @@
   &:hover,
   &:active {
     background: linear-gradient(to right, mix(#895cf2, #fff, 90%) 0%,  mix(#2faddc, #fff, 90%) 90%) mix(#3066BE, #fff, 90%);
+    background: mix(#2faddc, #fff, 90%);
     transform: scale(0.95)
   }
 

diff --git a/docgen/src/stylesheets/components/_containers.scss b/docgen/src/stylesheets/components/_containers.scss
@@ -1,6 +1,7 @@
 // Avoid horizontal flickering when scrollbar appears
 body {
   overflow-y: scroll;
+  background: linear-gradient(to right, #ffffff, #ebf1f5);
 }
 
 /* Containers
@@ -26,6 +27,7 @@ body:not(.example) section {
   width: 100%;
   float: left;
   position: relative;
+  z-index: 1;
 
   &.oddbg {
     background-color: #f9fafb
@@ -34,143 +36,4 @@ body:not(.example) section {
   @include medium-mq {
     padding: 0 16px;
   }
-
-}
-
-
-/* Sections
-=========================*/
-
-.marketing-section {
-  .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    @include medium-mq {
-     position: relative;
-     transform: none;
-     top: inherit;
-     left: inherit;
-     padding: 4em 16px;
-    }
-  }
-
-  .bloc-5 {
-    margin-bottom: 40px;
-    position: relative;
-
-    &:nth-child(1),
-    &:nth-child(3) {
-      padding-right: 10px;
-    }
-
-    &:nth-child(2),
-    &:nth-child(4) {
-      padding-left: 10px;
-    }
-
-    @include medium-mq {
-      width: 100%;
-      padding: 0 !important;
-
-      .bloc-3 {
-        position: relative;
-        height: 100%;
-
-        img {
-          width: 100%;
-          position: relative;
-          top: -10px;
-          left: -8px;
-        }
-      }
-    }
-
-    @include tablet-mq-portrait {
-      .bloc-7 {
-        padding-right: 16px;
-      }
-      .bloc-3 img {
-        max-width: 50%;
-        top: 0;
-        left: 0
-      }
-    }
-
-    @include small-mq {
-      .bloc-3 img {
-          top: 10px;
-        }
-      }
-  }
-
-  .bloc-3 {
-    img {
-      width: 90%;
-      margin: 0 auto;
-      display: block;
-      float: none;
-      padding: 0 16px 16px;
-
-      max-width: 140px;
-    }
-  }
-
-  h3.title ~ p {
-    margin: 0;
-    font-size: 16px;
-    line-height: 22px;
-  }
-}
-
-////
-.examples-section {
-  padding-bottom: 3em;
-
-  .bloc-5 {
-    padding: 1em;
-
-    @include small-mq {
-      width: 100%;
-    }
-  }
-
-  .row:nth-of-type(1) {
-    margin-top: 5em;
-  }
-
-  h3.title {
-    margin-top: 1em;
-  }
-
-  h3.title ~ p {
-    margin: 0;
-    font-size: 16px;
-  }
-}
-
-////
-.action-section {
-  background: url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 38%;
-  padding-bottom: 300px;
-  margin-bottom: -120px;
-
-  @include medium-mq {
-    background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 58%;
-  }
-
-  @include big-min-mq {
-    background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 28%;
-  }
-
-  @include small-mq {
-    padding-bottom: 260px;
-
-    .btn.btn-cta {
-      max-width: 100%;
-      width: 100%;
-    }
-  }
 }
diff --git a/docgen/src/stylesheets/components/_documentation.scss b/docgen/src/stylesheets/components/_documentation.scss
@@ -78,6 +78,7 @@
     position: relative;
     left: #{$sidebar-width};
     width: calc(100% - #{$sidebar-width});
+    min-height: 890px;
     padding-left: 30px;
     padding-top: 120px;
     padding-bottom: 200px;
@@ -148,13 +149,25 @@
       border-spacing: 0;
       width: 100%;
       display: table;
+      table-layout: fixed;
       margin: 0;
 
+      tbody {
+        border: 1px solid #ccc
+      }
+
       tr {
-        border-left: 1px solid #cccccc;
         background-color: white;
         margin: 0;
         padding: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        &:not(:last-child),
+        &:not(:only-child) {
+          border-bottom: 1px solid #ccc;
+        }
 
         &:nth-child(2n) {
           background-color: #f8f8f8;
@@ -176,18 +189,39 @@
         }
 
         td {
-
           text-align: left;
           margin: 0;
           padding: 13px 13px;
+          flex: 1;
+          overflow: scroll;
+
 
           &:first-child {
             margin-top: 0;
+            flex-grow: 1;
+            min-width: 170px;
+            border-right: 1px solid #CCC;
+
+            &:only-child {
+              border: none;
+
+            }
+
+            &[colspan] {
+              flex: 100%;
+              border-right: none;
+            }
           }
 
-          &:last-child {
+          &:nth-child(3) {
             margin-bottom: 0;
-            width: 100%;
+          }
+
+          &+ td:empty {
+            display: none;
+          }
+          &+ td:nth-child(3):not(:empty) {
+            border-left: 1px solid #CCC;
           }
         }
       }
@@ -196,6 +230,9 @@
         margin-top: 2em;
       }
 
+      tr, td {
+        white-space: nowrap;
+      }
 
       @include small-mq {
         display: block;
@@ -288,7 +325,6 @@
 }
 
 tr.api-entry-values {
-  border-top: 10px solid #fff;
   .api-entry-type {
     white-space: nowrap;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -114,8 +114,6 @@ export default function initHeader() { @@
             });
             wrapper.innerHTML += `<ul class="cm-menu__list">${linksTpl}</ul>`;
           });
-        } else {
-          document.getElementById('menu-wrapper').remove();
         }
       }
@@ Expand Down @@