Reworked how ratings integrate.

4 files changed, 109 insertions, 82 deletions

diff --git a/Cydia.app/menes/menes.js b/Cydia.app/menes/menes.js
index b5f457b..098f377 100644
--- a/Cydia.app/menes/menes.js
+++ b/Cydia.app/menes/menes.js
@@ -287,15 +287,6 @@ $.inject({
         }
     },
 
-    display: {
-        get: function (node) {
-            return node.style.display;
-        },
-        set: function (node, value) {
-            node.style.display = value;
-        }
-    },
-
     html: {
         get: function (node) {
             return node.innerHTML;
@@ -466,7 +457,6 @@ $.xhr = function (url, method, headers, data, events) {
         events = {};
 
     xhr.onreadystatechange = function () {
-        console.log(xhr.readyState);
         if (xhr.readyState == 4) {
             var status = xhr.status;
             var text = xhr.responseText;
diff --git a/Cydia.app/package.html b/Cydia.app/package.html
index ae602b7..3e63475 100644
--- a/Cydia.app/package.html
+++ b/Cydia.app/package.html
@@ -14,13 +14,11 @@
             if (count++ != 0)
                 return;
             $("#depiction-load").remove();
-            $.each($("#depiction-src"), function (node) {
-                node.style.display = "block";
-            });
+            $("#depiction-src").css("display" "block");
         }
 
         var remove = function() {
-            $(".description").display("block");
+            $(".description").css("display", "block");
             $(".depiction").remove();
         }
     </script>
@@ -74,15 +72,18 @@
 
         #boundry {
             float: left;
-            width: 60px;
+            width: 64px;
         }
 
         #icon {
-            height: 59px;
-            max-width: 60px;
-            width: auto;
+            background-position: center center;
+            background-repeat: no-repeat;
+            -webkit-border-radius: 9px;
+            height: 64px;
+            width: 64px;
         }
 
+        /* XXX: this style is out of date */
         #reflection {
             height: 59px;
             max-width: 60px;
@@ -92,7 +93,7 @@
             width: auto;
         }
 
-        #id {
+        #id, #author, #maintainer, #sponsor {
             white-space: nowrap;
         }
 
@@ -103,23 +104,26 @@
 
         #header > div {
             padding: 0;
-            margin-left: 2px;
         }
 
         #content {
-            margin: auto 0;
+            padding: 5px;
             position: absolute;
-            left: 72px;
-            width: 237px;
+            left: 77px;
+            width: 232px;
         }
 
         #lower {
-            margin: 10px 5px;
+            margin: 0px 5px;
         }
 
         #name {
-            margin: 7px 5px;
+            margin-bottom: 10px;
             font-weight: bold;
+            font-size: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         #latest {
@@ -127,19 +131,55 @@
             float: left;
         }
 
-        #rating {
+        a[href].rating {
+            background: 105px 7px no-repeat url(menes/chevron.png);
+        }
+
+        .rating {
+            /*border: 1px solid #999999;*/
+            -webkit-border-radius: 6px;
+            padding: 7px 7px;
+            margin: -7px 0px;
             float: right;
-            margin-top: -7px;
-            width: 130px;
+            width: 124px;
         }
 
-        #description {
-            background-color: #c7ced5;
-            border-bottom: 1px solid #999999;
-            border-top: 1px solid #999999;
-            font-size: 16px;
-            margin: 9px 10px;
-            padding: 10px;
+        .rating .back,
+        .rating .fore,
+        .rating .star {
+            background: url(star.png);
+            height: 16px;
+        }
+
+        .rating .back,
+        .rating .fore {
+            width: 80px;
+        }
+
+        .rating .star {
+            display: inline-block;
+            width: 16px;
+        }
+
+        .rating .back {
+            opacity: 0.2;
+        }
+
+        .rating .fore {
+            /*border-right: 1px solid #999999;*/
+            position: absolute;
+        }
+    
+        .rating .text {
+            display: inline-block;
+            color: #4d4d70;
+            margin: 0 6px;
+            vertical-align: top;
+        }
+
+        #rating-none,
+        #rating-done {
+            display: none;
         }
     </style>
 </head><body class="pinstripe">
@@ -148,26 +188,22 @@
 <fieldset id="header">
     <div class="clearfix">
         <div id="boundry">
-            <img id="icon"/>
+            <div id="icon"></div>
             <!--img id="reflection"/-->
         </div>
 
         <div id="content">
             <div id="name"></div>
-
-            <div id="lower">
-                <div id="latest"></div>
-
-                <iframe
-                    onload="rating_()"
-                    class="rating"
-                    id="rating"
-                    frameborder="0"
-                    height="0"
-                    target="_top"
-                    src="loading.html"
-                ></iframe>
-            </div>
+            <div id="latest"></div>
+
+            <a class="rating" id="rating-href">
+                <div id="rating-none">
+                    <div class="star"></div><div class="text">Not Rated</div>
+                </div><div id="rating-done">
+                    <div class="fore" id="rating-value"></div>
+                    <div class="back"></div>
+                </div>
+            </a>
         </div>
     </div>
 </fieldset>
@@ -232,7 +268,7 @@
 
 <!--hr id="lower-bar" class="depiction"/-->
 
-<div id="description" class="description"></div>
+<block class="description"><p id="description"></p></block>
 
 <fieldset class="description homepage">
     <a class="homepage" id="homepage-href">
diff --git a/Cydia.app/package.js b/Cydia.app/package.js
index 679d183..71ac849 100644
--- a/Cydia.app/package.js
+++ b/Cydia.app/package.js
@@ -29,22 +29,47 @@ function space(selector, html, max) {
     var width = node.width();
     if (width > max) {
         var spacing = (max - node.width()) / (html.length - 1) + "px";
-        console.log(width + " " + max + " " + spacing);
         node.css("letter-spacing", spacing);
     }
 }
 
-var rated = 0;
+$(function () {
+    var id = package.id;
+    var idc = encodeURIComponent(id);
+    var name = package.name;
+    var regarding = encodeURIComponent("Cydia/APT: " + name);
+    var icon = 'cydia://package-icon/' + idc;
+    var icon = 'http://cydia.saurik.com/thumb/net.ispazio.deeptheme.png';
+
+    $("#icon").css("background-image", 'url("' + icon + '")');
+    $("#reflection").src("cydia://package-icon/" + idc);
+
+    $("#name").html(name);
+    space("#latest", package.latest, 96);
 
-var rating = function () {
     var rating = package.rating;
     if (rating == null)
         $(".rating").remove();
     else {
-        rating = 'fail.html';
-        $.xhr('_' + rating, 'GET', {}, null, {
+        $.xhr(rating, 'GET', {}, null, {
             success: function (value) {
-                document.getElementById("rating").contentWindow.document.write(value);
+                value = eval(value);
+
+                $("#rating-load").remove();
+                $("#rating-href").href(value.reviews);
+
+                var none = $("#rating-none");
+                var done = $("#rating-done");
+
+                if (value.rating == null) {
+                    done.remove();
+                    none.css("display", "block");
+                } else {
+                    none.remove();
+                    done.css("display", "block");
+
+                    $("#rating-value").css('width', 16 * value.rating);
+                }
             },
 
             failure: function (status) {
@@ -52,30 +77,6 @@ var rating = function () {
             }
         });
     }
-};
-
-var rating_ = function() {
-    if (rated == 0)
-        rated = 1;
-    else if (rated == 1) {
-        rating();
-        rated = -1;
-    }
-};
-
-$(function () {
-    var id = package.id;
-    var idc = encodeURIComponent(id);
-    var name = package.name;
-    var regarding = encodeURIComponent("Cydia/APT: " + name);
-
-    $("#icon").src("cydia://package-icon/" + idc);
-    $("#reflection").src("cydia://package-icon/" + idc);
-
-    $("#name").html(name);
-    space("#latest", package.latest, 93);
-
-    rating_();
 
     $("#settings").href("cydia://package-settings/" + idc);
 
@@ -147,7 +148,7 @@ $(function () {
     if (depiction == null)
         $(".depiction").remove();
     else {
-        $(".description").display("none");
+        $(".description").css("display", "none");
         $("#depiction-src").src(depiction);
     }
 
diff --git a/Cydia.app/star.png b/Cydia.app/star.png
new file mode 100644
index 0000000..b67a56c
--- /dev/null
+++ b/Cydia.app/star.png