- updated star-rating to integrate original author's improvments (better compatibility, php code no more dependent on the stars image size which means themers can now use any image size they like)

- updated random albums css so that it does not break lines when cover is not downloaded quickly enough

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&amp;rating_type=' . $rating->type . '&amp;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);
 }
 
 /************************************************/