diff options
| -rw-r--r-- | templates/show_object_rating.inc.php | 20 | ||||
| -rw-r--r-- | templates/show_object_rating_static.inc.php | 19 | ||||
| -rw-r--r-- | themes/classic/templates/default.css | 131 |
3 files changed, 70 insertions, 100 deletions
diff --git a/templates/show_object_rating.inc.php b/templates/show_object_rating.inc.php index 6e5bf185..d2908b5f 100644 --- a/templates/show_object_rating.inc.php +++ b/templates/show_object_rating.inc.php @@ -22,18 +22,15 @@ $web_path = Config::get('web_path'); $base_url = '?action=set_rating&rating_type=' . $rating->type . '&object_id=' . $rating->id; +echo "<div class=\"star-rating dynamic-star-rating\">\n"; +echo "<ul>\n"; -//set the background to no stars -echo "<ul class=\"star-rating\">\n"; - -// Add in the 0 / Remove rating level -echo "<li class=\"zero-stars\">" . Ajax::text($base_url . '&rating=-1','','rating0_' . $rating->id,'','zero-stars') . "</li>"; - -// decide width of rating. image is 16 px wide -$width = $rating->rating*16; +// decide width of rating (5 stars -> 20% per star) +$width = $rating->rating*20; +if ($width < 0) $width = 0; //set the current rating background -echo "<li class=\"current-rating\" style=\"width:${width}px\" >Current rating: "; +echo "<li class=\"current-rating\" style=\"width:${width}%\" >Current rating: "; if ($rating->rating <= 0) { echo "not rated yet </li>\n"; } @@ -58,3 +55,8 @@ else echo "$rating->rating of 5</li>\n"; </li> </ul> +<?php + // Add in the 0 / Remove rating level + echo "<span class=\"zero-stars\">" . Ajax::text($base_url . '&rating=-1','','rating0_' . $rating->id,'','zero-stars') . "</span>\n"; + echo "</div>\n"; +?> diff --git a/templates/show_object_rating_static.inc.php b/templates/show_object_rating_static.inc.php index a0b60206..763c115a 100644 --- a/templates/show_object_rating_static.inc.php +++ b/templates/show_object_rating_static.inc.php @@ -22,23 +22,15 @@ $web_path = Config::get('web_path'); $base_url = Config::get('ajax_url') . '?action=set_rating&rating_type=' . $rating->type . '&object_id=' . $rating->id; +echo "<div class=\"star-rating\">\n"; +echo "<ul>\n"; -//set the background to no stars -echo "<ul class=\"static-star-rating\">\n"; - -/* Handle the "Not rated" possibility */ -if ($rating->rating == '-1') { - echo "<li class=\"zero-stars\" style=\"display:none;\">reset</li>\n"; -} -else { - echo "<li class=\"zero-stars\" style=\"display:none;\">reset</li>\n"; -} -// decide width of rating. image is 16 px wide -$width = $rating->rating*16; +// decide width of rating (5 stars -> 20% per star) +$width = $rating->rating*20; if ($width < 0) $width = 0; //set the current rating background -echo "<li class=\"current-rating\" style=\"width:${width}px\" >Current rating: "; +echo "<li class=\"current-rating\" style=\"width:${width}%\" >Current rating: "; if ($rating->rating <= 0) { echo "not rated yet </li>\n"; } @@ -62,3 +54,4 @@ else echo "$rating->rating of 5</li>\n"; <span class="five-stars" title="5 <?php echo _('out of'); ?> 5">5</span> </li> </ul> +</div> diff --git a/themes/classic/templates/default.css b/themes/classic/templates/default.css index cd0bef63..af2480f2 100644 --- a/themes/classic/templates/default.css +++ b/themes/classic/templates/default.css @@ -340,6 +340,7 @@ h3#content_title span { position:relative; float:left; padding:8px; + width:80px; } .random_album .play_album @@ -386,86 +387,60 @@ h3#content_title span { /************************************************/ /* Styles for the star ratings */ /************************************************/ -.star-rating{ - position: relative; - list-style:none; - width: 80px; - height: 15px; - background: url(../../../images/ratings/star_rating.gif) top left repeat-x; +.star-rating { + position:relative; + display:inline; +} + +.star-rating ul, +.star-rating span:hover, +.star-rating .current-rating{ + background: url(../../../images/ratings/star_rating.gif) left -1000px repeat-x; +} +.star-rating ul{ + position:relative; + width:80px; + height:15px; + overflow:hidden; + list-style:none; + margin:0; + padding:0; + background-position: left top; } .star-rating li{ - float: right; -} - -li.current-rating{ - display: block; - position: absolute; - height: 15px; - background: url(../../../images/ratings/star_rating.gif) left bottom; - text-indent: -9000px; - z-index: 1; -} -.star-rating li span{ - position: absolute; - display:block; - width:16px; - height: 15px; - text-decoration: none; - text-indent: -9000px; - z-index: 20; -} -.star-rating li span:hover{ - background: url(../../../images/ratings/star_rating.gif) left center; - z-index: 2; - left: 0; -} -li.zero-stars span:hover { - display: block; - left: 80px; - height: 15px; - background: url(../../../images/ratings/x.gif); -} -span.zero-stars { - display: block; - left: 80px; - height: 15px; - background: url(../../../images/ratings/x_off.gif); -} -span.one-stars { left: 0px; } -span.one-stars:hover { width:16px; } -span.two-stars { left:16px; } -span.two-stars:hover { width: 32px; } -span.three-stars { left: 32px; } -span.three-stars:hover{ width: 48px; } -span.four-stars { left: 48px; } -span.four-stars:hover { width: 64px; } -span.five-stars { left: 64px; } -span.five-stars:hover { width: 80px; } - -/************************************************/ -/* Styles for the static star ratings */ -/************************************************/ -.static-star-rating li span:hover { - /* Kill the mouseovers */ -} -.static-star-rating li span{ - position: absolute; - display:block; - width:16px; - height: 15px; - text-decoration: none; - text-indent: -9000px; - z-index: 20; -} -.static-star-rating li { - float: right; -} -.static-star-rating { - position: relative; - list-style:none; - width: 80px; - height: 15px; - background: url(../../../images/ratings/star_rating.gif) top left repeat-x; + display: inline; +} +.star-rating span, +.star-rating .current-rating{ + position:absolute; + top:0; + left:0; + text-indent:-1000em; + height:15px; + line-height:15px; + outline:none; + overflow:hidden; + border: none; +} +.star-rating span.one-stars { width:20%; z-index:6; } +.star-rating span.two-stars { width:40%; z-index:5; } +.star-rating span.three-stars{ width:60%; z-index:4; } +.star-rating span.four-stars { width:80%; z-index:3; } +.star-rating span.five-stars { width:100%; z-index:2; } +.star-rating .current-rating { z-index:1; background-position: left bottom; } + +.star-rating span.zero-stars { + left:80px; + width:16px; + background-image: url(../../../images/ratings/x_off.gif); +} + +/* hovering effect only for dynamic star rating */ +.dynamic-star-rating span:hover{ + background-position: left center; +} +.dynamic-star-rating span:hover.zero-stars { + background-image: url(../../../images/ratings/x.gif); } /************************************************/ |