]> git.saurik.com Git - cydia.git/blobdiff - Cydia.app/package.html
Welcome to the future.
[cydia.git] / Cydia.app / package.html
index 5ea2f480a0cac319c5dae704a90e486f42613d6c..75b86f0eeba7f1da8e0f24d50bef18f6ab7c253f 100644 (file)
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-16"?>
 <html><head>
     <title>Details</title>
-    <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" type="text/css" href="menes/style.css"/>
     <script type="text/javascript" src="menes/menes.js"></script>
             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>
-        body {
-            background: #c8c8c8 url(menes/pinstripes.png);
+        .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 {
         }
 
         #depiction {
-            margin-bottom: -7px;
+            margin: -8px 0;
             overflow: hidden;
             width: 320px;
         }
 
         #notice {
-            margin-bottom: -14px;
+            margin: -8px 0 -9px 0;
             overflow: hidden;
             width: 320px;
         }
             margin-bottom: 10px;
             margin-top: 0;
         }
+
+        #warnings {
+            background-color: #ffdddd;
+        }
+
+        #warnings > div > label {
+            color: red;
+        }
+
+        #boundary {
+            float: left;
+            height: 64;
+            width: 64px;
+        }
+
+        #thumb,
+        #icon {
+            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;
+            opacity: 0.4;
+            position: absolute;
+            -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
+            width: auto;
+        }
+
+        #id, #author, #maintainer, #sponsor {
+            white-space: nowrap;
+        }
+
+        #header {
+            background: transparent;
+            border: none;
+        }
+
+        #header > div {
+            padding: 0;
+        }
+
+        #content {
+            padding: 5px;
+            position: absolute;
+            left: 77px;
+            width: 232px;
+        }
+
+        #lower {
+            margin: 0px 5px;
+        }
+
+        #name {
+            margin-bottom: 13px;
+            font-weight: bold;
+            font-size: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        #latest {
+            color: #335588;
+            float: left;
+        }
+
+        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;
+            width: 124px;
+        }
+
+        .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><div class="page">
-<div class="dialog">
-    <div class="panel">
+</head><body class="pinstripe">
+<dialog><panel>
 
-<fieldset>
+<fieldset id="header">
     <div>
-        <label id="name"></label>
-        <div id="latest"></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="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">
+        <img class="icon" src="settings.png"/><div>
+        <label>Change Package Settings</label>
+    </div></a>
 
     <a id="author-href" class="author">
+        <img id="author-icon" class="icon" src="email.png"/><div>
         <label>Author</label>
-        <div id="author"></div>
-    </a>
+        <label id="author"></label>
+    </div></a>
+
+    <div class="commercial">
+        <img class="icon" src="commercial.png"/><div>
+        <label>This is a commercial package!</label>
+    </div></div>
+
+    <a class="console" href="http://cydia.saurik.com/purpose/console/">
+        <img class="icon" src="console.png"/><div>
+        <label>This is a console package!</label>
+    </div></a>
+
+    <a id="application">
+        <img class="icon"/><div>
+        <label class="application"></label>
+    </div></a>
+</fieldset>
+
+<fieldset class="warnings" id="warnings">
+    <div id="warning">
+        <img class="icon" src="warning.png"/><div>
+        <label class="warning"></label>
+    </div></div>
 </fieldset>
 
 <div id="notice" class="notice"><iframe
     width="320"
     height="0"
     target="_top"
-    onLoad="loaded()"
+    onload_="loaded()"
 ></iframe></div>
 
 <!--hr id="lower-bar" class="depiction"/-->
 
-<fieldset class="description">
-    <div id="description"></div>
+<block class="description"><p id="description"></p></block>
 
+<fieldset class="description homepage">
     <a class="homepage" id="homepage-href">
+        <img class="icon" src="web.png"/><div>
         <label>More Information</label>
-    </a>
+    </div></a>
 </fieldset>
 
 <label class="installed">Installed Package</label>
 <fieldset class="installed">
     <div>
+        <img class="icon" src="version.png"/><div>
         <label>Version</label>
-        <div id="installed"></div>
-    </div>
+        <label id="installed"></label>
+    </div></div>
 
-    <a id="files-href"><label>Filesystem Content</label></a>
+    <a id="files-href">
+        <img class="icon" src="filesystem.png"/><div>
+        <label>Filesystem Content</label>
+    </div></a>
 </fieldset>
 
 <label>Package Details</label>
 <fieldset>
     <div>
+        <img class="icon" src="id.png"/><div>
         <label>ID</label>
-        <div id="id"></div>
-    </div>
+        <label id="id"></label>
+    </div></div>
 
     <div class="section">
+        <img id="section-src" class="icon"/><div>
         <label>Section</label>
-        <div id="section"></div>
-    </div>
+        <label id="section"></label>
+    </div></div>
 
     <div class="size">
+        <img class="icon" src="expanded.png"/><div>
         <label>Expanded Size</label>
-        <div id="size"></div>
-    </div>
+        <label id="size"></label>
+    </div></div>
 
     <a id="maintainer-href" class="maintainer">
-        <label>Maintainer</label>
-        <div id="maintainer"></div>
-    </a>
+        <img id="maintainer-icon" class="icon" src="email.png"/><div>
+        <label>Contact</label>
+        <label id="maintainer"></label>
+    </div></a>
 
     <a id="sponsor-href" class="sponsor">
+        <img class="icon" src="web.png"/><div>
         <label>Sponsor</label>
-        <div id="sponsor"></div>
-    </a>
+        <label id="sponsor"></label>
+    </div></a>
+
+    <!--a class="trusted" id="trusted">
+        <img class="icon" src="trusted.png"><div>
+        <label>View Repository Signature</label>
+    </div></a-->
 
     <div class="trusted">
-        <img src="trusted.png" style="margin-top: 2px; position: absolute">
-        <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><label id="source-name"></label></div>
+    <div>
+        <img class="icon" id="source-src"/><div>
+        <label id="source-name"></label>
+    </div></div>
+
     <div class="source-description" id="source-description"></div>
 </fieldset>
 
-    </div>
-</div>
-</div></body></html>
+</panel></dialog>
+</body></html>