Commit 12b375b2 authored by Tino Goratsch's avatar Tino Goratsch

the star ratings are now percentage based

parent 0ac2f287
Pipeline #18926514 failed with stages
in 3 minutes and 51 seconds
......@@ -3,13 +3,32 @@
* See the LICENCE file at the top-level module directory for licencing details.
*/
.rating {
align-items: center;
direction: rtl;
display: flex;
justify-content: flex-end;
display: inline-block;
font-size: 0;
position: relative;
unicode-bidi: bidi-override;
}
.rating:not(.rating_mobile):active .rating__average,
.rating:not(.rating_mobile):focus .rating__average,
.rating:not(.rating_mobile):hover .rating__average {
visibility: hidden;
}
.rating__average {
direction: ltr;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
white-space: nowrap;
}
.rating__average .rating__star::before {
content: "\e006";
color: #e3cf7a;
}
.rating__star {
cursor: pointer;
font-family: 'Glyphicons Halflings', sans-serif;
font-size: 24px;
font-style: normal;
......@@ -21,28 +40,22 @@
content: "\e007";
padding-right: 5px;
}
.rating__star.rating__star_active,
.rating__star:hover,
.rating__star:focus,
.rating__star:active {
text-decoration: none;
}
.rating__star.rating__star_active::before,
.rating__star:hover::before,
.rating__star:focus::before,
.rating__star:active::before,
.rating__star.rating__star_active ~ .rating__star::before,
.rating__star:hover ~ .rating__star::before,
.rating__star:focus ~ .rating__star::before,
.rating__star:active ~ .rating__star::before {
content: "\e007" !important;
color: #e3cf7a !important;
}
.rating__star.rating__star_active {
text-decoration: none;
}
.rating__star.rating__star_active::before,
.rating__star.rating__star_active ~ .rating__star::before {
content: "\e006";
color: #e3cf7a;
}
.rating__already-rated {
direction: initial;
margin-bottom: 5px;
}
......@@ -3,8 +3,21 @@
* See the LICENCE file at the top-level module directory for licencing details.
*/
jQuery(document).ready(function($) {
$('#rating-wrapper').on('change', ':radio', function() {
$(this).closest('form').submit();
});
jQuery(document).ready(function ($) {
$('#rating-wrapper')
.on('change', ':radio', function () {
$('.rating__already-rated').remove();
$(this).closest('form').submit();
})
.on('click', '.rating_mobile .rating__star', function () {
$('.rating__average').remove();
})
.on('click', '.rating__average .rating__star', function () {
// .rating__average sets the direction back to ltr, so we have to account for this
var index = 4 - $(this).index();
$('.rating > .rating__star')
.eq(index)
.addClass('rating__star_active')
.click();
});
});
......@@ -4,14 +4,42 @@
*/
.rating {
align-items: center;
direction: rtl;
display: flex;
justify-content: flex-end;
display: inline-block;
font-size: 0;
position: relative;
unicode-bidi: bidi-override;
&:not(.rating_mobile) {
&:active,
&:focus,
&:hover {
.rating__average {
visibility: hidden;
}
}
}
}
.rating__average {
direction: ltr;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
white-space: nowrap;
.rating__star {
&::before {
content: "\e006";
color: #e3cf7a;
}
}
}
.rating__star {
cursor: pointer;
font-family: 'Glyphicons Halflings', sans-serif;
font-size: 24px;
font-style: normal;
......@@ -24,6 +52,7 @@
padding-right: 5px;
}
&.rating__star_active,
&:hover,
&:focus,
&:active {
......@@ -31,22 +60,11 @@
&::before,
& ~ .rating__star::before {
content: "\e007" !important;
color: #e3cf7a !important;;
}
}
&.rating__star_active {
text-decoration: none;
&::before,
& ~ .rating__star::before {
content: "\e006";
color: #e3cf7a;
}
}
}
.rating__already-rated {
direction: initial;
margin-bottom: 5px;
}
......@@ -4,20 +4,28 @@
data-ajax-form="true"
data-ajax-form-target-element="#rating-wrapper"
data-ajax-form-loading-overlay="false">
<div class="rating">
{if isset($rating.already_rated) && $rating.already_rated}
<small class="rating__already-rated">{lang t="share|already_rated"}</small>
{/if}
{$rating_rounded=$rating.average_rating|round:0|default:0}
<div class="rating {if $UA_IS_MOBILE === true} rating_mobile{/if}">
<div class="rating__average" style="width:{(($rating.average_rating|default:0) * 100 / 5)|round:0}%">
<span class="rating__star"></span>
<span class="rating__star"></span>
<span class="rating__star"></span>
<span class="rating__star"></span>
<span class="rating__star"></span>
</div>
{for $i=5 to 1 step -1}
<label for="rating-star-{$i}"
title="{lang t="share|rate_with_x_stars" args=['%stars%' => $i]}"
class="rating__star{if $i == $rating_rounded} rating__star_active{/if}">
class="rating__star">
<input type="radio" id="rating-star-{$i}" name="stars" value="{$i}" class="hidden" required>
</label>
{/for}
</div>
</form>
{if isset($rating.already_rated) && $rating.already_rated}
<div class="small rating__already-rated">
<em>{lang t="share|already_rated"}</em>
</div>
{/if}
{if isset($rating.total_ratings) && $rating.total_ratings > 0}
<div class="rating-summary"
itemprop="aggregateRating"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment