Search Results

The Search Results component allows you to include the standard Google Custom Search Engine results embed code in your site.

  • Usage

Usage

At this time, the Search results can simply be included. In the future, more options may be made available.

{% include "@miz/components/search-results/search-results.twig" %}

See the HTML tab for output.

{% spaceless %}
  {% set resultsId = GCSE["id"] is not empty ? GCSE["id"] : false %}
{% endspaceless %}

{%- if resultsId -%}

  <script>
    ( function () {
      var cx = '{{ resultsId }}';
      var gcse = document.createElement( 'script' );
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
      var s = document.getElementsByTagName( 'script' )[ 0 ];
      s.parentNode.insertBefore( gcse, s );
    } )();
  </script>
  <gcse:search></gcse:search>

{% else -%}

  <p>You did not provide a Google Custom Search Engine ID. Please provide one to use the GCSE.</p>

{%- endif %}
<script>
    (function() {
        var cx = '000318079189132185633:7mteyi7v9g8';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:search></gcse:search>
{
  "GCSE": {
    "id": "000318079189132185633:7mteyi7v9g8"
  }
}
  • Handle: @miz-search-results
  • Preview:
  • Filesystem Path: fractal/pattern-library/miz/components/search-results/search-results.twig
  • Content:
    /**
     * @component CSE Search Results
     *
     *
     *
     *
     *
    */
    
    .gsc-control-cse {
      padding: 0 !important;
      border: none !important;
    }
    
    .gsc-search-box-tools .gsc-search-box {
      td.gsc-input {
        margin: $miz-space-inline-left-default;
      }
    
      input.gsc-input {
        font-size: 1.75rem;
        height: 30px;
      }
    
      td.gsc-search-button,
      button.gsc-search-button {
        margin: 0 !important;
        font-size: 1.5rem;
      }
    
      button.gsc-search-button {
        padding: 4px 16px;
      }
    }
    
    .gsc-search-button-v2 {
      background-color: $miz-gold !important;
      background-image: -webkit-linear-gradient(top, $miz-gold, $miz-gold) !important;
      border: none !important;
    
      &:hover,
      &:active,
      &:focus {
        background-color: $miz-gold;
        border: none;
        background-image: none;
      }
    }
    
    .gsc-search-button-v2 svg {
      width: 24px;
      height: 24px;
      fill: $miz-white;
    
      &:hover {
        fill: $miz-black;
      }
    }
    
    .gsc-above-wrapper-area {
      border-bottom: none !important;
    }
    
    div.gsc-results {
      padding: 0;
      margin: 0;
      width: inherit;
      border-bottom: none;
    }
    
    div.gsc-result {
      padding: $miz-space-inset-l !important;
      font-family: $miz-font-family-base !important;
      margin-bottom: 2em !important;
      border: none !important;
      border-bottom: 2px solid $miz-black !important;
      // position: relative;
      background-color: $miz-black-100 !important;
    }
    
    .gsc-webResult.gsc-result:hover {
      border: none;
      border-bottom: 2px solid $miz-black;
    }
    
    div.gsc-thumbnail-inside {
      padding: 0;
    }
    
    // Search result title container
    div.gs-title {
      margin: $miz-space-stack-s;
      text-decoration: none !important;
    
      // Gold tab to the left of the title
      &::before {
        content: ' ';
        width: 15px;
        height: 24px;
        background: $miz-gold;
        position: absolute;
        left: 0;
      }
    }
    
    // Search result title link
    a.gs-title {
      color: $miz-link-color !important;
      font-weight: normal;
    
      // Search term in title
      b {
        color: $miz-link-color !important;
        font-weight: bold;
      }
    
      &:hover,
      &:active,
      &:focus {
        text-decoration: none !important;
      }
    }
    
    // Search result URL
    .gsc-url-top {
      margin: $miz-space-stack-default;
      padding: 0 !important;
    }
    
    // Search result snippet
    .gsc-table-result {
      padding: 0 !important;
    
      b {
        color: $miz-link-color !important;
        // background-color: $miz-gold;
      }
    }
    
    // Pagination
    div.gsc-cursor-box {
      margin: $miz-space-stack-l !important;
    }
    
    div.gsc-cursor-page {
      color: $miz-link-color !important;
      border-color: $miz-gold;
      background-color: $miz-gold !important;
      padding: $miz-space-inset-default;
      margin: $miz-space-inline-left-default !important;
      font-weight: bold;
    
      &:hover {
        text-decoration: none !important;
        border-bottom: 2px solid $miz-black !important;
      }
    }
    
    div.gsc-cursor-current-page {
      border: 2px solid $miz-gold !important;
      background-color: $miz-black !important;
      color: $miz-white !important;
    
      &:hover {
        border-bottom: 2px solid $miz-gold !important;
      }
    }
    
  • URL: /components/raw/miz-search-results/_search-cse-results.scss
  • Filesystem Path: fractal/pattern-library/miz/components/search-results/_search-cse-results.scss
  • Size: 2.9 KB