Reworked how ratings integrate.

[cydia.git] / Cydia.app / package.html

diff --git a/Cydia.app/package.html b/Cydia.app/package.html
index 3b0d7ba8cfe3553a698e5539f5de7d53b04291c9..3e634752582ced9def5c186172988c3c28b4235d 100644 (file)
--- a/Cydia.app/package.html
+++ b/Cydia.app/package.html
@@ -14,13 +14,11 @@
             if (count++ != 0)
                 return;
             $("#depiction-load").remove();
             if (count++ != 0)
                 return;
             $("#depiction-load").remove();

-            $.each($("#depiction-src"), function (node) {
-                node.style.display = "block";
-            });
+            $("#depiction-src").css("display" "block");

         }
 
         var remove = function() {
         }
 
         var remove = function() {

-            $(".description").display("block");
+            $(".description").css("display", "block");

             $(".depiction").remove();
         }
     </script>
             $(".depiction").remove();
         }
     </script>


@@ -74,15 +72,18 @@
 
         #boundry {
             float: left;
 
         #boundry {
             float: left;

-            width: 60px;
+            width: 64px;

         }
 
         #icon {
         }
 
         #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;
         #reflection {
             height: 59px;
             max-width: 60px;


@@ -92,7 +93,7 @@
             width: auto;
         }
 
             width: auto;
         }
 

-        #id {
+        #id, #author, #maintainer, #sponsor {

             white-space: nowrap;
         }
 
             white-space: nowrap;
         }
 


@@ -103,23 +104,26 @@
 
         #header > div {
             padding: 0;
 
         #header > div {
             padding: 0;

-            margin-left: 2px;

         }
 
         #content {
         }
 
         #content {

-            margin: auto 0;
+            padding: 5px;

             position: absolute;
             position: absolute;

-            left: 72px;
-            width: 237px;
+            left: 77px;
+            width: 232px;

         }
 
         #lower {
         }
 
         #lower {

-            margin: 12px 5px;
+            margin: 0px 5px;

         }
 
         #name {
         }
 
         #name {

-            margin: 5px 5px;
+            margin-bottom: 10px;

             font-weight: bold;
             font-weight: bold;

+            font-size: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;

         }
 
         #latest {
         }
 
         #latest {


@@ -127,83 +131,116 @@
             float: left;
         }
 
             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;
             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>
         }
     </style>

-</head><body>
+</head><body class="pinstripe">

 <dialog><panel>
 
 <fieldset id="header">
     <div class="clearfix">
         <div id="boundry">
 <dialog><panel>
 
 <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>
             <!--img id="reflection"/-->
         </div>
 
         <div id="content">
             <div id="name"></div>

-
-            <div id="lower">
-                <div id="latest"></div>
-
-                <iframe
-                    class="rating"
-                    id="rating"
-                    frameborder="0"
-                    height="0"
-                    target="_top"
-                ></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>
 
 <fieldset id="actions">
     <a id="settings">
         </div>
     </div>
 </fieldset>
 
 <fieldset id="actions">
     <a id="settings">

-        <img class="icon" src="settings.png"/>
+        <img class="icon" src="settings.png"/><div>

         <label>Change Package Settings</label>
         <label>Change Package Settings</label>

-    </a>
+    </div></a>

 
     <a id="author-href" class="author">
 
     <a id="author-href" class="author">

-        <img id="author-icon" class="icon" src="email.png"/>
+        <img id="author-icon" class="icon" src="email.png"/><div>

         <label>Author</label>
         <label>Author</label>

-        <div id="author"></div>
-    </a>
+        <label id="author"></label>
+    </div></a>

 
     <div class="commercial">
 
     <div class="commercial">

-        <img class="icon" src="commercial.png"/>
+        <img class="icon" src="commercial.png"/><div>

         <label>This is a commercial package!</label>
         <label>This is a commercial package!</label>

-    </div>
+    </div></div>

 
     <a class="console" href="http://cydia.saurik.com/purpose/console/">
 
     <a class="console" href="http://cydia.saurik.com/purpose/console/">

-        <img class="icon" src="console.png"/>
+        <img class="icon" src="console.png"/><div>

         <label>This is a console package!</label>
         <label>This is a console package!</label>

-    </a>
+    </div></a>

 
     <a id="application">
 
     <a id="application">

-        <img class="icon"/>
+        <img class="icon"/><div>

         <label class="application"></label>
         <label class="application"></label>

-    </a>
+    </div></a>

 </fieldset>
 
 </fieldset>
 

-<label class="warnings">Warnings</label>

 <fieldset class="warnings" id="warnings">
     <div id="warning">
 <fieldset class="warnings" id="warnings">
     <div id="warning">

-        <img class="icon" src="warning.png"/>
+        <img class="icon" src="warning.png"/><div>

         <label class="warning"></label>
         <label class="warning"></label>

-    </div>
+    </div></div>

 </fieldset>
 
 <div id="notice" class="notice"><iframe
 </fieldset>
 
 <div id="notice" class="notice"><iframe


@@ -226,82 +263,84 @@
     width="320"
     height="0"
     target="_top"
     width="320"
     height="0"
     target="_top"

-    onLoad_="loaded()"
+    onload_="loaded()"

 ></iframe></div>
 
 <!--hr id="lower-bar" class="depiction"/-->
 
 ></iframe></div>
 
 <!--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">
 
 <fieldset class="description homepage">
     <a class="homepage" id="homepage-href">

-        <img class="icon" src="web.png"/>
+        <img class="icon" src="web.png"/><div>

         <label>More Information</label>
         <label>More Information</label>

-    </a>
+    </div></a>

 </fieldset>
 
 <label class="installed">Installed Package</label>
 <fieldset class="installed">
     <div>
 </fieldset>
 
 <label class="installed">Installed Package</label>
 <fieldset class="installed">
     <div>

+        <img class="icon" src="version.png"/><div>

         <label>Version</label>
         <label>Version</label>

-        <div id="installed"></div>
-    </div>
+        <label id="installed"></label>
+    </div></div>

 
     <a id="files-href">
 
     <a id="files-href">

-        <img class="icon" src="filesystem.png"/>
+        <img class="icon" src="filesystem.png"/><div>

         <label>Filesystem Content</label>
         <label>Filesystem Content</label>

-    </a>
+    </div></a>

 </fieldset>
 
 <label>Package Details</label>
 <fieldset>
     <div>
 </fieldset>
 
 <label>Package Details</label>
 <fieldset>
     <div>

+        <img class="icon" src="id.png"/><div>

         <label>ID</label>
         <label>ID</label>

-        <div id="id"></div>
-    </div>
+        <label id="id"></label>
+    </div></div>

 
     <div class="section">
 
     <div class="section">

-        <img id="section-src" class="icon"/>
+        <img id="section-src" class="icon"/><div>

         <label>Section</label>
         <label>Section</label>

-        <div id="section"></div>
-    </div>
+        <label id="section"></label>
+    </div></div>

 
     <div class="size">
 
     <div class="size">

-        <img class="icon" src="expanded.png"/>
+        <img class="icon" src="expanded.png"/><div>

         <label>Expanded Size</label>
         <label>Expanded Size</label>

-        <div id="size"></div>
-    </div>
+        <label id="size"></label>
+    </div></div>

 
     <a id="maintainer-href" class="maintainer">
 
     <a id="maintainer-href" class="maintainer">

-        <img id="maintainer-icon" class="icon" src="email.png"/>
+        <img id="maintainer-icon" class="icon" src="email.png"/><div>

         <label>Contact</label>
         <label>Contact</label>

-        <div id="maintainer"></div>
-    </a>
+        <label id="maintainer"></label>
+    </div></a>

 
     <a id="sponsor-href" class="sponsor">
 
     <a id="sponsor-href" class="sponsor">

-        <img class="icon" src="web.png"/>
+        <img class="icon" src="web.png"/><div>

         <label>Sponsor</label>
         <label>Sponsor</label>

-        <div id="sponsor"></div>
-    </a>
+        <label id="sponsor"></label>
+    </div></a>

 
     <!--a class="trusted" id="trusted">
 
     <!--a class="trusted" id="trusted">

-        <img class="icon" src="trusted.png">
+        <img class="icon" src="trusted.png"><div>

         <label>View Repository Signature</label>
         <label>View Repository Signature</label>

-    </a-->
+    </div></a-->

 
     <div class="trusted">
 
     <div class="trusted">

-        <img class="icon" src="trusted.png">
-        <label></label>
-        <div>This package has been signed.</div>
-    </div>
+        <img class="icon" src="trusted.png"><div>
+        <label>&nbsp;</label>
+        <label>This package has been signed.</label>
+    </div></div>

 </fieldset>
 
 <label class="source">Source Information</label>
 <fieldset class="source">
     <div>
 </fieldset>
 
 <label class="source">Source Information</label>
 <fieldset class="source">
     <div>

-        <img class="icon" id="source-src"/>
+        <img class="icon" id="source-src"/><div>

         <label id="source-name"></label>
         <label id="source-name"></label>

-    </div>
+    </div></div>

 
     <div class="source-description" id="source-description"></div>
 </fieldset>
 
     <div class="source-description" id="source-description"></div>
 </fieldset>