Improving gallery CSS by using different sizes for icons and screenshots.

--HG--
branch : 1.x
This commit is contained in:
Andre Rodrigues
2011-01-10 15:25:08 -08:00
parent 9e32ee12ba
commit 1873ada9ff
3 changed files with 72 additions and 52 deletions

View File

@@ -6,17 +6,44 @@
} }
.contentItems .properties { .contentItems .properties {
float: left; float: left;
clear: both;
} }
.contentItems .pageStatus { .contentItems .pageStatus {
margin: .8em 0; margin: .8em 0;
color: #666; color: #666;
} }
.thumbnail { .iconThumbnail {
padding-left: 70px;
}
.screenshotThumbnail {
padding-left: 191px;
}
.column {
float: left; float: left;
padding: 1.2em 1.2em 0.5em 0em; position: relative;
width: 10%; }
.extensionThumbnail {
margin-left: -100%;
padding-top: 20px;
}
.iconThumbnail .extensionThumbnail {
width: 70px;
right: 70px;
height: 50px;
}
.screenshotThumbnail .extensionThumbnail {
width: 191px;
right: 191px;
height: 128px;
} }
.extensionDetails { .extensionDetails {
float: left; width: 100%;
width: 85%; }
.iconThumbnail .thumbnail {
width: 50px;
height: 50px;
}
.screenshotThumbnail .thumbnail {
width: 171px;
height: 128px;
} }

View File

@@ -28,30 +28,15 @@
iconUrl = Href("../../Content/Images/ModuleDefaultIcon.png"); iconUrl = Href("../../Content/Images/ModuleDefaultIcon.png");
} }
} }
<img src="@iconUrl" class="thumbnail"/>
<div class="extensionDetails"> <div class="iconThumbnail">
<div class="extensionName"> <div class="extensionDetails column">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2> <div class="extensionName">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2>
</div> </div>
<div class="related"> <div class="related">
@Html.ActionLink(T("Install").ToString(), "Install", new RouteValueDictionary {{"packageId", item.PackageId}, {"version", item.Version}, {"sourceId", item.Source.Id}, {"redirectTo", "Modules"}})@T(" | ") @Html.ActionLink(T("Install").ToString(), "Install", new RouteValueDictionary { { "packageId", item.PackageId }, { "version", item.Version }, { "sourceId", item.Source.Id }, { "redirectTo", "Modules" } })@T(" | ")
<a href="@item.PackageStreamUri">@T("Download")</a>
</div>
<div class="properties">
<p>@(item.Description == null ? T("(No description").Text : item.Description)</p>
<ul class="pageStatus">
<li>@T("Last Updated: {0}", DateTime.Now.ToLocalTime())</li>
<li>&nbsp;&#124;&nbsp;@T("Author: {0}", !string.IsNullOrEmpty(item.Authors) ? item.Authors : T("Unknown").ToString())</li>
<li>&nbsp;&#124;&nbsp;@T("Rating: {0}", item.Rating)</li>
<li>&nbsp;&#124;&nbsp;@T("Ratings Count: {0}", item.RatingsCount)</li>
<li>&nbsp;&#124;&nbsp;@T("Website: ")
@if(!string.IsNullOrEmpty(item.ProjectUrl)) { <a href="@item.ProjectUrl">@item.ProjectUrl</a> }
else { @T("Unknown").ToString() }
</li>
</ul>
<a href="@item.PackageStreamUri">@T("Download")</a> <a href="@item.PackageStreamUri">@T("Download")</a>
</div> </div>

View File

@@ -19,21 +19,24 @@
} }
@if (Model.Extensions.Count() > 0) { @if (Model.Extensions.Count() > 0) {
<ul class="contentItems"> <ul class="contentItems theme">
@foreach (var item in Model.Extensions) { @foreach (var item in Model.Extensions) {
<li> <li>
@{ @{
string extensionClass = "iconThumbnail";
string iconUrl = @item.IconUrl; string iconUrl = @item.IconUrl;
if (!string.IsNullOrWhiteSpace(@item.FirstScreenshot)) { if (!string.IsNullOrWhiteSpace(@item.FirstScreenshot)) {
iconUrl = Href(@item.FirstScreenshot); iconUrl = Href(@item.FirstScreenshot);
extensionClass = "screenshotThumbnail";
} }
else if (string.IsNullOrWhiteSpace(iconUrl)) { else if (string.IsNullOrWhiteSpace(iconUrl)) {
iconUrl = Href("../../Content/Images/imagePlaceholder.png"); iconUrl = Href("../../Content/Images/imagePlaceholder.png");
extensionClass = "screenshotThumbnail";
} }
} }
<img src="@iconUrl" class="thumbnail" />
<div class="extensionDetails"> <div class="@extensionClass">
<div class="extensionDetails column">
<div class="extensionName"> <div class="extensionName">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2> <h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2>
</div> </div>
@@ -57,6 +60,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="extensionThumbnail column">
<img src="@iconUrl" class="thumbnail" alt="theme" />
</div>
</div>
</li>} </li>}
</ul> </ul>
} }