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;
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;
width: auto;
}
- #id {
+ #id, #author, #maintainer, #sponsor {
white-space: nowrap;
}
#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 {
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;
+ }
+
+ .rating .back,
+ .rating .fore,
+ .rating .star {
+ background: url(star.png);
+ height: 16px;
}
- #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 {
+ 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">
<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 id="actions">
<a id="settings">
- <img class="icon" src="settings.png"/>
+ <img class="icon" src="settings.png"/><div>
<label>Change Package Settings</label>
- </a>
+ </div></a>
<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>
- <div id="author"></div>
- </a>
+ <label id="author"></label>
+ </div></a>
- <div class="commercial">
- <img class="icon" src="commercial.png"/>
+ <!--div class="commercial">
+ <img class="icon" src="commercial.png"/><div>
<label>This is a commercial package!</label>
- </div>
+ </div></div-->
<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>
- </a>
+ </div></a>
<a id="application">
- <img class="icon"/>
+ <img class="icon"/><div>
<label class="application"></label>
- </a>
+ </div></a>
</fieldset>
-<label class="warnings">Warnings</label>
<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>
- </div>
+ </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"/-->
-<div id="description" class="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"/>
+ <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">
- <img class="icon" src="filesystem.png"/>
+ <img class="icon" src="filesystem.png"/><div>
<label>Filesystem Content</label>
- </a>
+ </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"/>
+ <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"/>
+ <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">
- <img id="maintainer-icon" class="icon" src="email.png"/>
+ <img id="maintainer-icon" class="icon" src="email.png"/><div>
<label>Contact</label>
- <div id="maintainer"></div>
- </a>
+ <label id="maintainer"></label>
+ </div></a>
<a id="sponsor-href" class="sponsor">
- <img class="icon" src="web.png"/>
+ <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">
+ <img class="icon" src="trusted.png"><div>
<label>View Repository Signature</label>
- </a-->
+ </div></a-->
<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> </label>
+ <label>This package has been signed.</label>
+ </div></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>
- </div>
+ </div></div>
<div class="source-description" id="source-description"></div>
</fieldset>
projects / cydia.git / blobdiff