Gainsight/Custom_Templates/customer_templates/Anthology - Production/search.html.liquid

{% include "header" %}
<main class="np-main np-search np-subpage-container np-max-width">
  {% comment %} <div class="np-resource-title">
    {% t .title %}
  </div> {% endcomment %}
  <div class="np-search-header">
    {% assign render_search = false %}
    {% if results.items.any? %}
      {% for result in results.items %}
        {% comment %} https://newacademy.anthology.com/app/search/00000000-0000-0000?q= {% endcomment %}
        {% if result.type == 'course' %}
          {% for course in courses.enrolled %}
            {% if result.course.id == course.id %}
              {% assign render_search = true %}
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if render_search %}
      {% assign result_count = 0 %}
      {% for item in results.items %}
        {% if item.type == 'course' %}
          {% assign result_count = result_count | plus: 1 %}
        {% endif %}
      {% endfor %}
    {% endif %}

    <div class="np-resource-title">
      {% comment %} {% t .showing %} {% endcomment %}
      {% if render_search %}
        <span class="np-resource-subtitle-number">{{ result_count }}</span>
      {% else %}
        <span class="np-resource-subtitle-number">{{ results.count }}</span>
      {% endif %}
      {% comment %} {% t .results_for %} {% endcomment %}
      Resources For 
      <span class="np-button-color">"{{ results.term }}"</span>
    </div>
    {% if render_search %}
      <div style="align-items: center; display: flex; flex-direction: row;">
        <div style="font-weight: 700; margin-right: 15px;">Filter By: </div>

        {% capture label %}{% t shared.filters.by_type %}{% endcapture %}
        {% include "filter_by_product", page: 'Search' %}
        {% include "filter_by_category", page: 'Search' %}
      </div>
    {% endif %}
  </div>
  {% if render_search %}
    <div class="np-catalog-courses row row-with-thumbnails">
      {% for result in results.items %}
        {% comment %} https://newacademy.anthology.com/app/search/00000000-0000-0000?q= {% endcomment %}
        {% if result.type == 'course' %}
          {% for course in courses.enrolled %}
            {% if result.course.id == course.id %}
              {% include "cards_searched_course" with course %}
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
    </div>
  {% else %}
    {% include "search_zero_state" %}
  {% endif %}
</main>
{% include "footer" %}

<style>
  .np-search-header{
    align-items: flex-start;
    flex-direction: column;
  }

  .np-resource-title{
    color: #363636;
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700 !important;
  }

  .np-card{
    margin-bottom: 15px;
  }

  .card-product-banner{
    align-items: center;
    background: #FFF;
    box-shadow: 0 3px 30px rgba(0,0,0,.1);
    display: flex;
    height: 32px;
    overflow: hidden;
    padding: 6px 8px;
    width: 100%;
  }

  .product-logo{
    height: 100%;
  }

  .card-image-replacement{
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
    background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
    height: 12rem;
    width: 100%;
  }

  @media screen and (min-width: 550px) and (max-width: 649px){
    .card-image-replacement{
      height: 15rem;
    }
  }

  @media screen and (min-width: 650px) and (max-width: 767px){
    .card-image-replacement{
      height: 20rem;
    }
  }

  .course-card-info{
    height: calc(100% - 38px);
    justify-content: center;
    position: absolute;
    top: 0;
    width: unset;
  }

  .course-card-title{
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    margin-top: 8px !important;
  }

  .course-card-button{
    /* border-radius: 0; */
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    line-height: 21px;
    width: 30%;
  }

  .course-card-button:focus{
    border: 2px solid blue;
  }

  .np-progress-bar-container,
  .np-card-progress-bar{
    border-radius: 0;
    height: 6px;
    margin: 0;
  }

  .np-card-content-progress{
    height: 25px;
    margin: 0;
  }

  .course-card-progress-bar{
    min-width: 0;
  }

  .np-card-content-progress{
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
  }

  .card-bottom-details{
    justify-content: flex-end;
  }

  .product-filter-dropdown,
  .category-filter-dropdown{
    padding: 0 5px;
    /* border-radius: 0; */
    height: 45px;
    min-width: 150px;
  }

  @media screen and (min-width: 768px){
    .np-filter{
      margin: 12px 10px !important;
    }

    .np-resource-title{
      margin-bottom: 0;
      font-size: 32px;
      line-height: 25.25px;
    }

    .np-card{
      margin-bottom: 15px !important;
      min-width: unset;
    }

    .course-card-wrapper{
      margin-bottom: 32px;
      /* max-height: 315px;
      max-width: 445px; */
    }

    .course-card{
      padding: 0 10px !important;
    }

    .course-card-wrapper,
    .course-card{
      height: 100%;
    }
  }
</style>