X-Git-Url: https://git.saurik.com/cydia.git/blobdiff_plain/0470069371352de4f0b448ea31c0984a8cbdc9d7..3ff1504e78cec862a5b88baac7ea10bf702173be:/Cydia.app/package.html

diff --git a/Cydia.app/package.html b/Cydia.app/package.html
index 952256cd..fdbc835e 100644
--- a/Cydia.app/package.html
+++ b/Cydia.app/package.html
@@ -14,18 +14,42 @@
             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>
 
     <style>
+        .flip-180 {
+            -webkit-backface-visibility: hidden;
+            -webkit-transform: rotateY(180deg);
+            -webkit-transition-duration: 2s;
+            -webkit-transition-property: transform;
+        }
+
+        .flip-360 {
+            -webkit-backface-visibility: hidden;
+            -webkit-transform: rotateY(360deg);
+            -webkit-transition-duration: 2s;
+            -webkit-transition-property: transform;
+        }
+
+        .fade-out { 
+            opacity: 0;
+            -webkit-transition-property: opacity;
+            -webkit-transition-duration: 2s;
+        }
+
+        .fade-in { 
+            opacity: 1;
+            -webkit-transition-property: opacity;
+            -webkit-transition-duration: 2s;
+        }
+
         #remove {
             margin-top: 7px;
             text-align: center;
@@ -37,18 +61,6 @@
             top: -5px;
         }
 
-        #depiction {
-            margin: -8px 0;
-            overflow: hidden;
-            width: 320px;
-        }
-
-        #notice {
-            margin: -8px 0 -9px 0;
-            overflow: hidden;
-            width: 320px;
-        }
-
         #remove > a {
             color: #335588;
             text-decoration: none;
@@ -72,17 +84,26 @@
             color: red;
         }
 
-        #boundry {
+        #boundary {
             float: left;
-            width: 60px;
+            height: 64;
+            width: 64px;
         }
 
+        #thumb,
         #icon {
-            height: 59px;
-            max-width: 60px;
-            width: auto;
+            background-position: center center;
+            background-repeat: no-repeat;
+            height: 64px;
+            position: absolute;
+            width: 64px;
+        }
+
+        #thumb {
+            -webkit-border-radius: 9px;
         }
 
+        /* XXX: this style is out of date */
         #reflection {
             height: 59px;
             max-width: 60px;
@@ -92,7 +113,7 @@
             width: auto;
         }
 
-        #id {
+        #id, #author, #maintainer, #sponsor {
             white-space: nowrap;
         }
 
@@ -103,23 +124,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: 13px;
             font-weight: bold;
+            font-size: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         #latest {
@@ -127,50 +151,76 @@
             float: left;
         }
 
-        #rating {
+        a[href].rating {
+            background: 107px 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: 126px;
+        }
+
+        .rating .back,
+        .rating .fore,
+        .rating .star {
+            background: url(star.png);
+        }
+
+        .rating .text {
+            display: inline-block;
+            color: #4d4d70;
+            margin: 0 6px;
+            vertical-align: top;
         }
 
-        #description {
-            background-color: #c7ced5;
-            border-bottom: 1px solid #999999;
-            border-top: 1px solid #999999;
-            font-size: 16px;
-            margin: 9px 10px;
-            padding: 10px;
+        #rating-done {
+            padding-left: 12px;
+        }
+
+        #rating-none,
+        #rating-done {
+            display: none;
         }
     </style>
 </head><body class="pinstripe">
 <dialog><panel>
 
 <fieldset id="header">
-    <div class="clearfix">
-        <div id="boundry">
-            <img id="icon"/>
+    <div>
+        <div id="boundary">
+            <div class="flip-0" id="icon"></div>
+            <div class="flip-180" id="thumb"></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"
-                    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>
 
+<fieldset class="mode">
+    <a>
+        <img class="icon" id="mode-src"/><div>
+        <label>Package Queue</label>
+        <label id="mode"></label>
+    </div></a>
+</fieldset>
+
 <fieldset id="actions">
     <a id="settings">
         <img class="icon" src="settings.png"/><div>
@@ -183,10 +233,10 @@
         <label id="author"></label>
     </div></a>
 
-    <div class="commercial">
+    <!--div class="commercial">
         <img class="icon" src="commercial.png"/><div>
         <label>This is a commercial package!</label>
-    </div></div>
+    </div></div-->
 
     <a class="console" href="http://cydia.saurik.com/purpose/console/">
         <img class="icon" src="console.png"/><div>
@@ -206,13 +256,23 @@
     </div></div>
 </fieldset>
 
-<div id="notice" class="notice"><iframe
+<!--iframe
+    class="notice"
     id="notice-src"
     frameborder="0"
     width="320"
     height="0"
     target="_top"
-></iframe></div>
+></iframe-->
+
+<!--iframe
+    class="activation"
+    id="activation-src"
+    frameborder="0"
+    width="320"
+    height="0"
+    target="_top"
+></iframe-->
 
 <!--div id="remove" class="depiction">
     <a href="javascript:remove()">Remove Custom Depiction</a>
@@ -220,18 +280,19 @@
 
 <hr id="upper-bar" class="depiction"/-->
 
-<div id="depiction" class="depiction"><iframe
+<iframe
+    class="depiction"
     id="depiction-src"
     frameborder="0"
     width="320"
     height="0"
     target="_top"
-    onLoad_="loaded()"
-></iframe></div>
+    onload_="loaded()"
+></iframe>
 
 <!--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">
@@ -242,7 +303,8 @@
 
 <label class="installed">Installed Package</label>
 <fieldset class="installed">
-    <div><div>
+    <div>
+        <img class="icon" src="version.png"/><div>
         <label>Version</label>
         <label id="installed"></label>
     </div></div>
@@ -255,7 +317,8 @@
 
 <label>Package Details</label>
 <fieldset>
-    <div><div>
+    <div>
+        <img class="icon" src="id.png"/><div>
         <label>ID</label>
         <label id="id"></label>
     </div></div>