From 6dbf50e32bc37f4a6e607e49f007fab861d69600 Mon Sep 17 00:00:00 2001 From: Shipow Date: Wed, 15 Aug 2018 06:57:43 +0200 Subject: [PATCH] ref tooltips + fixes --- docs/config.json | 3 ++- docs/src/_includes/header.pug | 2 +- docs/src/_layouts/homepage.pug | 35 +++++++++++++++++++++---- docs/src/_styles/components.css | 46 ++++++++++++++++++++++++++++++++- docs/src/js/home.js | 1 + 5 files changed, 79 insertions(+), 8 deletions(-) diff --git a/docs/config.json b/docs/config.json index 20ae18029..0a3d95eee 100644 --- 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 index 7bcf55c2a..a6cdfca0b 100644 --- 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 index 2688a8732..30ffed41f 100644 --- 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 index ccacafc09..93ce2e9b2 100644 --- 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 index 97cf676c2..bdb7f7bdd 100644 --- 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) {