SearchResults.vue

<template>
  <section id="search_results">
    <div class="flex-container" :class="$vuetify.breakpoint.name">
      <ul class="hits" v-if="results_bob.length">
        <li  class="article_container" v-for="(result, index) in results_bob" :key="index + results_hash" tabindex="-1">
          <Article
              :article="result"
              @article-click="article_link_click"
              @details-click="details_click">
          </Article>
        </li>
      </ul>
      <ul class="hits" v-if="results_nob.length">
        <li class="article_container" v-for="(result, index) in results_nob" :key="index + results_hash" tabindex="-1">
          <Article
              :article="result"
              @article-click="article_link_click"
              @details-click="details_click"
              :class="right_col_class_name">
          </Article>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import Article from './Article.vue'

export default {
  name: 'SearchResults',
  props: {
    hits: Array,
    lang: String
  },
  computed: {
    right_col_class_name: function() {
      if (this.$vuetify.breakpoint.mdAndUp) {
        if (this.results_bob.length) {
          return 'righ_hand_column'
        }
      }
      return ''
    },
    results_bob: function(){
      return this.hits.filter(hit => hit.dictionary == 'bob')
    },
    results_nob: function(){
      return this.hits.filter(hit => hit.dictionary == 'nob')
    },
    results_hash: function(){
      return this.hits.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    },
    details_click: function(item) {
      this.$emit('details-click', item)
    }
  },
  components: {
    Article
  }
}

</script>
<style >
  h2 {
    color: var(--v-primary-base);
    margin: 0px;
    padding: 20px 0px 20px 0px;
  }

  .hits {
    margin-top:0px;
  }

  .flex-container {
    display: flex;
  }

  .flex-container.xs, .flex-container.sm {
    flex-direction: column;
  }

  .flex-container > ul {
    padding: 0px !important;
    min-width: 50%;
  }

  #search_results details.xs, #search_results details.sm {
    display: none;
  }

  #search_results .article_content.xs, #search_results .article_content.sm {
    position: relative;
    height: 100px;
    overflow: hidden;
  }

  #search_results .article_content.xs > section, #search_results .article_content.sm > section {
    display: none;
  }

  #search_results .article_content.xs h3, #search_results .article_content.sm h3 {
    display: none;
  }

  #search_results .article_content.xs > section.definitions, #search_results .article_content.sm > section.definitions {
    display: block;
  }

  #search_results .article_content.xs > .fade, #search_results .article_content.sm  > .fade {
    display: inline-block;
    text-align: right;
    font-size: 20px;
    font-weight: bold;
    color: var(--v-primary-base);
    padding-top: 30px;
    width:100%;
    height:60px;
    position:absolute;
    left:0;
    top:40px;
    background:linear-gradient(rgba(255, 255, 255, 0) 0px, var(--v-tertiary-base));
  }

  article.righ_hand_column div.inflection-wrapper {
    right: -35px;
  }
</style>