busca algolia

busca-algolia.markdown

busca algolia

A Pen by Kentaro Fujiy on CodePen.

License.

index.html

<script id="movie" type="text/x-handlebars-template">
  <article class="movie">

    <div class="movie-meta">
      <div class="movie-title">
        {{{_highlightResult.name.value}}}
        <span class="movie-year">
          {{description.id}}
        </span>
      </div>

   

      <div class="movie-genres">
        {{#genre}}
          <div class="movie-genre">
            {{.}}
          </div>
        {{/genre}}
      </div>
    </div>
  </article>
</script>

<div class="container">
  <div class="top">
    <div class="search-button">
      <i class="fa fa-search"></i>
    </div>
    <div class="input-container">
      <input type="text" id="search-box" />
      <div id="stats"></div>
    </div>
  </div>
  
  <div class="content">
    <div class="facets">
      <div class="facet">
        <div class="facet-title">Genre</div>
        <div id="genres"></div>
      </div>
      


      <div class="facet">
        <div class="facet-title">Year</div>
        <div id="year"></div>
      </div>
    </div>

    <div class="canvas">
      <div id="filters"></div>
      
      <div id="hits"></div>
      
      <div id="pagination"></div>
    </div>
  </div>
</div>

script.js

const search = instantsearch({
    appId: 'J84EXPZ9MQ',
  apiKey: '534027ead32c8f0ea761783aefd47019',
  indexName: 'Task'
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search for movies',
    autofocus: false,
  })
);



search.addWidget(
  instantsearch.widgets.currentRefinedValues({
    container: '#filters',
  })
)

const hitTemplate = document.getElementById('movie').innerHTML;

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    hitsPerPage: 12,
    templates: {
      item: hitTemplate,
    },
    transformData: hit => {
      hit.stars = [];
      for (var i = 1; i <= 5; ++i) {
        hit.stars.push(i <= hit.rating);
      }
      return hit;
    },
  })
);

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination',
  })
);

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#genres',
    attributeName: 'project',
    operator: 'or',
    limit: 10,
  })
);


search.addWidget(
  instantsearch.widgets.rangeSlider({
    container: '#year',
    attributeName: 'description.id',
    tooltips: {
      format: v => v && v.toLocaleString(),
    },
  })
);

search.start();

scripts

<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>

style.scss

* {
  box-sizing: border-box;
}

body {
  font-family: arial, sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  flex-direction: column;
}

.top {
  position: relative;
  display: flex;
}

.input-container {
  position: relative;
  flex: 1;
}

.search-button {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  font-size: 1.6em;
  background-color: lighten(#0074D9, 5%);
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -6px 12px -8px rgba(0, 0, 0, 0.2), inset 0 6px 12px -8px rgba(255, 255, 255, 0.2);
  
  &:hover {
    background-color: lighten(#0074D9, 10%);
  }
  
  &:active {
    background-color: darken(#0074D9, 5%);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}

#search-box {
  width: 100%;
  font-size: inherit;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-left: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
  outline: none;
  padding: 0.8em 1em;
  font-size: 1.2em;
  
  &:focus {
    box-shadow: inset 0 2px 6px rgba(0, 100, 220, 0.15);
    border-color: rgba(0, 100, 220, 0.6);
  }
}

#stats {
  z-index: 1;
  position: absolute;
  bottom: 0.6em;
  right: 0.6em;
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.4);
}

.content {
  display: flex;
  margin-top: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

#hits {
  flex: 1;
}

.ais-hits {
  display: flex;
  flex-wrap: wrap;
}

.ais-hits__empty {
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1.6em;
  color: rgba(0, 0, 0, 0.4);
}

.ais-hits--item {
  flex: 1 0 25%;
  min-width: 380px;
}

.movie {
  position: relative;
  display: flex;
  margin: 10px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
  padding: 0.2em;
}

.movie-image {
  flex-shrink: 0;
  height: 231px;
  width: 154px;
  background-color: rgba(0, 0, 0, 0.1);
}

.movie-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 1em;
}

.movie-title {
  align-items: center;
  font-size: 1.1em;
  font-weight: bold;
  
  em {
    color: rgb(0, 150, 230);
    background: rgba(0, 160, 220, 0.2);
  }
}

.movie-year {
  font-size: 0.8em;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.6);
}

.movie-rating {
  margin-top: 0.2em;
}

.movie-genres {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
  margin-top: 0.7em;
  margin-right: -0.4em;
  margin-bottom: -0.4em;
}

.movie-genre {
  color: rgba(0, 0, 0, 0.7);
  padding: 0.4em 0.6em;
  background-color: rgba(0, 0, 0, 0.1);
  margin-right: 0.4em;
  margin-bottom: 0.4em;
}

ul.ais-pagination {
  padding: 0;
  margin: 0;
}

#pagination {
  margin: 10px 0;
  text-align: center;
}

.ais-pagination--item {
  margin: 0 0.2em;
}

.ais-pagination--link {
  font-size: 1.2em;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.4);
  
  .ais-pagination--item__active & {
    font-weight: bold;
    color: rgba(0, 100, 220, 0.6);
   }
}

.facets {
  width: 20%;
  min-width: 270px;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.facet {
  padding: 1em 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.facet-title {
  padding: 0 1em;
  font-size: 1.1em;
  margin-bottom: 0.6em;
}

.ais-refinement-list--item {
  padding: 0 1em;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.7);

  &:hover {
    color: black;
    background-color: rgba(0, 0, 0, 0.04);
  }

  &.ais-refinement-list--item__active {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: bold;
    color: black;
  }
}

.ais-refinement-list--label {
  position: relative;
  display: flex;
  line-height: 1.4em;
  cursor: inherit;
  
  input[type=checkbox] {
    display: none;
  }
}

.ais-refinement-list--count, .ais-star-rating--count {
  top: 0;
  position: absolute;
  right: 0;
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.4);
}

.ais-star-rating--item {
  padding: 0 1em;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.7);

  &:hover {
    color: black;
    background-color: rgba(0, 0, 0, 0.04);
  }
  
  &.ais-star-rating--item__active {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: bold;
    color: black;
  }
}

.ais-star-rating--link {
  position: relative;
  display: block;
  text-decoration: none;
  line-height: 1.4em;
  color: inherit;
}

.ais-range-slider--tooltip {
  position: relative;
  background: none;
}

.ais-range-slider--handle {
  display: flex;
  justify-content: center;
}

#year {
  padding: 0 2em;
}

.ais-current-refined-values--body > div {
  padding: 0.5em;
  display: flex;
}

.ais-current-refined-values--list {
  display: flex;
  margin-right: -0.3em;
}

.ais-current-refined-values--link,
.ais-current-refined-values--clear-all {
  display: block;
  text-decoration: none;
  padding: 0.3em 0.5em;
  background: white;
  color: #666;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
  margin-right: 0.3em;
}

.ais-current-refined-values--link > div {
  display: flex;
  align-items: center;
}

.ais-current-refined-values--count {
  opacity: 0.7;
  margin-left: 0.4em;
  font-size: 0.8em;
}

styles

<link href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />