78 lines
2.3 KiB
Plaintext
78 lines
2.3 KiB
Plaintext
{% assign rating = course.properties.np_course_rating %}
|
|
|
|
{% if isButton %}
|
|
<div class="np-ratings-container np-ratings-button" onclick='showPopup("ratingsModal")'>
|
|
{% else %}
|
|
<div class="np-ratings-container">
|
|
{% endif %}
|
|
<div class="rating-group-static">
|
|
<div class="fas fa-star-half {% if rating >= 0.5 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star {% if rating >= 1.0 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star-half {% if rating >= 1.5 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star {% if rating >= 2.0 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star-half {% if rating >= 2.5 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star {% if rating >= 3.0 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star-half {% if rating >= 3.5 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star {% if rating >= 4.0 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star-half {% if rating >= 4.5 %}star-gold{% endif %}"></div>
|
|
<div class="fas fa-star {% if rating == 5.0 %}star-gold{% endif %}"></div>
|
|
</div>
|
|
<div class="np-course-rating">{{ course.properties.np_course_rating }}</div>
|
|
<div class="np-course-rating-count">({{course.properties.np_course_rating_count}})</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.np-ratings-container {
|
|
display:flex;
|
|
align-items:center;
|
|
font-size:0.75rem;
|
|
color:#fff;
|
|
font-weight:500;
|
|
}
|
|
|
|
.np-ratings-button {
|
|
background:transparent;
|
|
outline:none;
|
|
border: 2px solid transparent;
|
|
transition:border-color 0.2s;
|
|
border-radius:4px;
|
|
cursor:pointer;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.np-ratings-button:hover { border: 2px solid #E6E9EA; }
|
|
|
|
.np-course-rating-count {
|
|
color:#bec2c6;
|
|
margin-left:3px;
|
|
}
|
|
|
|
.rating-group-static {
|
|
margin-right:8px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.rating-group-static .fa-star,
|
|
.rating-group-static .fa-star-half {
|
|
color: #EBECED;
|
|
font-size: 1.15rem;
|
|
margin: 0 1px 3px;
|
|
}
|
|
|
|
.rating-group-static .fa-star-half {
|
|
position:relative;
|
|
z-index:10;
|
|
}
|
|
|
|
.rating-group-static .fa-star{
|
|
margin-left: -22px;
|
|
}
|
|
|
|
.rating-group-static .star-gold{ color: #F7BB17; }
|
|
|
|
@media (min-width:768px) {
|
|
.np-ratings-button { margin-right:24px; }
|
|
}
|
|
|
|
</style> |