ref tooltips + fixes

algolia · Aug 20, 2018 · 6dbf50e · 6dbf50e
1 parent bdafbb0
commit 6dbf50e
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 8 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -1,6 +1,7 @@
 {
   "site": {
-    "title": "DocSearch",
+    "project": "DocSearch",
+    "title": "Algolia DocSearch: Search made for documentation",
     "description": "The easiest way to add search to your documentation",
     "url": "https://community.algolia.com/docsearch",
     "repo": "https://github.com/algolia/docsearch"

diff --git a/docs/src/_includes/header.pug b/docs/src/_includes/header.pug
@@ -49,7 +49,7 @@
     //- Project link
     .flex.fln.flrnw.flc.pl-1.sm_pl-0
       a.cursor-pointer.uppercase.tracking-poppins.poppins.text-solstice.hover_text-nebula.hover_no-underline(href=site.url)
-        span.hidden.sm_block.ml-0x=site.title
+        span.hidden.sm_block.ml-0x=site.project
         img.align-text-bottom.h-100.sm_hidden.ml-1(src="assets/docsearch-mark.svg" width=40 alt="DocSearch logo")
 
     //- DocSearch

diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug
@@ -18,60 +18,85 @@ block content
       a.c-button.c-button-primary(href="#join-docsearch-program") Join the Program
 
   .bg-moon.px-2
-    .max-w-xl.m-auto.text-center.my-3
+    .max-w-xl.m-auto.text-center.mt-3.mb-2
       .glide
         .glide__track(data-glide-el="track")
           .glide__slides
             .glide__slide
               img(src="assets/logos/babel.jpg", alt="DocSearch + Babel", width=60)
+              .glide__caption Babel
             .glide__slide
               img(src="assets/logos/bootstrap.jpg", alt="DocSearch + Bootstrap", width=60)
+              .glide__caption Bootstrap
             .glide__slide
               img(src="assets/logos/circleio.jpg", alt="DocSearch + Circle.io", width=60)
+              .glide__caption Circle.io
             .glide__slide
               img(src="assets/logos/cordova.jpg", alt="DocSearch + Cordova", width=60)
+              .glide__caption Cordova
             .glide__slide
               img(src="assets/logos/electron.jpg", alt="DocSearch + Electron", width=60)
+              .glide__caption Electron
             .glide__slide
               img(src="assets/logos/ember.jpg", alt="DocSearch + Ember", width=60)
+              .glide__caption Ember
             .glide__slide
               img(src="assets/logos/eslint.jpg", alt="DocSearch + EsLint", width=60)
+              .glide__caption EsLint
             .glide__slide
               img(src="assets/logos/gitlab.jpg", alt="DocSearch + Gitlab", width=60)
+              .glide__caption Gitlab
             .glide__slide
               img(src="assets/logos/go.jpg", alt="DocSearch + Go", width=60)
+              .glide__caption Go
             .glide__slide
               img(src="assets/logos/grafana.jpg", alt="DocSearch + Grafana", width=60)
+              .glide__caption Grafana
             .glide__slide
               img(src="assets/logos/graphql.jpg", alt="DocSearch + GraphQL", width=60)
+              .glide__caption GraphQL
             .glide__slide
               img(src="assets/logos/jekyll.jpg", alt="DocSearch + Jekyll", width=60)
+              .glide__caption Jekyll
             .glide__slide
               img(src="assets/logos/netlify.jpg", alt="DocSearch + Netlify", width=60)
+              .glide__caption Netlify
             .glide__slide
               img(src="assets/logos/paypal.jpg", alt="DocSearch + Paypal", width=60)
+              .glide__caption Paypal
             .glide__slide
               img(src="assets/logos/postman.jpg", alt="DocSearch + Postman", width=60)
+              .glide__caption Postman
             .glide__slide
               img(src="assets/logos/react.jpg", alt="DocSearch + React", width=60)
+              .glide__caption React
             .glide__slide
               img(src="assets/logos/scala.jpg", alt="DocSearch + Scala", width=60)
+              .glide__caption Scala
             .glide__slide
               img(src="assets/logos/serverless.jpg", alt="DocSearch + Serverless", width=60)
+              .glide__caption Serverless
             .glide__slide
               img(src="assets/logos/socketio.jpg", alt="DocSearch + Socket.io" , width=60)
+              .glide__caption Socket.io
             .glide__slide
               img(src="assets/logos/stripe.jpg", alt="DocSearch + Stripe", width=60)
+              .glide__caption Stripe
             .glide__slide
               img(src="assets/logos/symfony.jpg", alt="DocSearch + Symfony", width=60)
+              .glide__caption Symfony
             .glide__slide
               img(src="assets/logos/trello.jpg", alt="DocSearch + Trello", width=60)
+              .glide__caption Trello
             .glide__slide
               img(src="assets/logos/vue.jpg", alt="DocSearch + Vue", width=60)
+              .glide__caption Vue
             .glide__slide
               img(src="assets/logos/webpack.jpg", alt="DocSearch + Webpack", width=60)
+              .glide__caption Webpack
             .glide__slide
               img(src="assets/logos/yarn.jpg", alt="DocSearch + Yarn", width=60)
+              .glide__caption Yarn
 
     .max-w-md.m-auto.text-center
       h2.text-solstice.text-5.normal.pb-2 State-of-the-art search for technical documentation
@@ -189,15 +214,15 @@ block content
 
       //include ../_includes/newsletter.pug
 
-  .hidden
+  .hidde
     .my-popper
       .popper__arrow(x-arrow='right')
       img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200)
       p
         | Try to search for expressions like 
-        a.ds-sample-query(data-sample='ajax', href='#') ajax
+        a.ds-sample-query(data-sample='grid', href='#') grid
         | , 
-        a.ds-sample-query(data-sample='live', href='#') live
+        a.ds-sample-query(data-sample='flex', href='#') flex
         |  or 
-        a.ds-sample-query(data-sample='html', href='#') html
+        a.ds-sample-query(data-sample='form group', href='#') form group
         | .
diff --git a/docs/src/_styles/components.css b/docs/src/_styles/components.css
@@ -79,16 +79,60 @@
 /* Logo slider (gslide) */
 .glide__slide {
   text-align: center;
+  cursor: pointer;
+  margin: 3px 0;
+  position: relative;
+  min-height: 80px;
+  display: block;
+
+  .glide__caption {
+    display: inline-block;
+    position: relative;
+    background-color: #4F61EE;
+    color: white;
+    margin: 8px auto 0 ;
+    padding: 3px 6px 1px;
+    border-radius: 4px;
+    top: -2px;
+    font-size: 13px;
+    width: auto;
+    opacity: 0;
+    transition: opacity .5s ease;
+
+    &:before {
+      content:"";
+      position: absolute;
+      border-color: #4F61EE;
+      border-width: 0 6px 6px 6px;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-top-color: transparent;
+      top: -4px;
+      left: calc(50% - 6px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
 
+  }
+  &:hover .glide__caption {
+    opacity: 1;
+  }
   img {
     border-radius: 6px;
     overflow: hidden;
     display: inline-block;
     max-width: 50px;
-    vertical-align: text-bottom;
+    vertical-align: middle;
+    position: relative;
+    &:hover {
+      top: -1px;
+      box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15);
+    }
   }
 }
 
+
+
 /* Live Demo */
 .docsearch-live-demo-input-wrapper {
   margin-top: 5px;

diff --git a/docs/src/js/home.js b/docs/src/js/home.js
@@ -20,6 +20,7 @@ window.onload = function() {
 
   const anotherPopper = new Popper(reference, popper, {
     placement: 'bottom-start',
+    removeOnDestroy: 'true',
   });
 
   function openDocsearch(sampleQuery) {