Indicate star selection with highlight colour on hover

This commit is contained in:
Mikko Nieminen 2016-11-21 15:48:18 +02:00
parent 1d0155fb2c
commit b9605aed15
5 changed files with 23 additions and 4 deletions

View File

@ -14,6 +14,8 @@ class RatingPlugin(plugins.SingletonPlugin):
toolkit.add_template_directory(config_, 'templates')
toolkit.add_public_directory(config_, 'public')
toolkit.add_resource('fanstatic', 'rating')
toolkit.add_resource('public/css/', 'rating_css')
toolkit.add_resource('public/js/', 'rating_js')
# IActions

View File

@ -0,0 +1,4 @@
a.rating-star-hover,
a.rating-star-hover:hover {
color: #cca835;
}

View File

@ -0,0 +1,10 @@
$('.rating-star').hover(
function(){
$(this).addClass('rating-star-hover')
$(this).prevAll().addClass('rating-star-hover')
},
function(){
$(this).removeClass('rating-star-hover')
$(this).prevAll().removeClass('rating-star-hover')
}
)

View File

@ -8,14 +8,17 @@ package - The package for which the rating belongs to
#}
{% resource "rating_css/rating.css" %}
{% resource "rating_js/rating.js" %}
{% set stars = h.package_rating(None, {'package_id' : package.id} ).rating %}
<span class="star-rating{% if stars == 0 %} no-stars{% endif %}">
<span class="star-rating-stars">
{%- for index in range(stars|int) -%}
<a class="icon icon-star rating_star" href="/rating/{{ package.type }}/{{ package.name }}/{{ index + 1 }}"></a>
<a class="icon icon-star rating-star" id="star-{{index}}" href="/rating/{{ package.type }}/{{ package.name }}/{{ index + 1 }}"></a>
{%- endfor -%}
{%- for index in range(stars|int, 5) -%}
<a class="icon icon-star-empty rating_star" href="/rating/{{ package.type }}/{{ package.name }}/{{ index + 1 }}"></a>
<a class="icon icon-star-empty rating-star" href="/rating/{{ package.type }}/{{ package.name }}/{{ index + 1 }}"></a>
{%- endfor -%}
</span>
</span>

View File

@ -10,10 +10,10 @@ stars - The number of stars to be displayed.
<span class="star-rating{% if stars == 0 %} no-stars{% endif %}">
<span class="star-rating-stars">
{%- for index in range(stars|int) -%}
<span class="icon icon-star rating_star"></span>
<span class="icon icon-star rating-star"></span>
{%- endfor -%}
{%- for index in range(stars|int, 5) -%}
<span class="icon icon-star-empty rating_star"></span>
<span class="icon icon-star-empty rating-star"></span>
{%- endfor -%}
</span>
</span>