norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated Anthology templates for the new search functionality. Updated Allen Tate/HH and a few Walmart templates.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-05-21 17:36:21 -04:00
parent f93d5053fd
commit f0b52f01d4
10 changed files with 529 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
Custom_Templates/customer_templates/Anthology - Production/search.html.liquid
View File

@ -4,25 +4,175 @@
{% t .title %}
</div>
<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-subtitle">
{% t .showing %}
<span class="np-resource-subtitle-number">{{ results.count }}</span>
{% if render_search %}
<span class="np-resource-subtitle-number">{{ result_count }}</span>
{% else %}
<span class="np-resource-subtitle-number">{{ results.count }}</span>
{% endif %}
{% t .results_for %}
<span class="np-button-color">"{{ results.term }}"</span>
</div>
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
{%- comment -%} {%
include "filter_dropdown",
filters: results.filters,
key: "type",
label: label
%} {%- endcomment -%}
{% include "filter_by_product", page: 'Search' %}
{% if render_search %}
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
{% include "filter_by_product", page: 'Search' %}
{% endif %}
</div>
{% if results.items.any? %}
{% render "search_result" for results.items as result %}
{% 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-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;
}
@media screen and (min-width: 768px){
.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>