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

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

View File

@@ -28,30 +28,15 @@
iconUrl = Href("../../Content/Images/ModuleDefaultIcon.png");
}
}
<img src="@iconUrl" class="thumbnail"/>
<div class="extensionDetails">
<div class="extensionName">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2>
<div class="iconThumbnail">
<div class="extensionDetails column">
<div class="extensionName">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2>
</div>
<div class="related">
@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>
<div class="related">
@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>

View File

@@ -19,42 +19,50 @@
}
@if (Model.Extensions.Count() > 0) {
<ul class="contentItems">
<ul class="contentItems theme">
@foreach (var item in Model.Extensions) {
<li>
@{
string extensionClass = "iconThumbnail";
string iconUrl = @item.IconUrl;
if (!string.IsNullOrWhiteSpace(@item.FirstScreenshot)) {
iconUrl = Href(@item.FirstScreenshot);
extensionClass = "screenshotThumbnail";
}
else if (string.IsNullOrWhiteSpace(iconUrl)) {
iconUrl = Href("../../Content/Images/imagePlaceholder.png");
extensionClass = "screenshotThumbnail";
}
}
<img src="@iconUrl" class="thumbnail" />
<div class="extensionDetails">
<div class="extensionName">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2>
<div class="@extensionClass">
<div class="extensionDetails column">
<div class="extensionName">
<h2>@item.Title<span> - @T("Version: {0}", item.Version)</span></h2>
</div>
<div class="related">
@Html.ActionLink(T("Install").ToString(), "Install", new RouteValueDictionary {{"packageId", item.PackageId}, {"version", item.Version}, {"sourceId", item.Source.Id}, {"redirectTo", "Themes"}})@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>
</div>
</div>
<div class="related">
@Html.ActionLink(T("Install").ToString(), "Install", new RouteValueDictionary {{"packageId", item.PackageId}, {"version", item.Version}, {"sourceId", item.Source.Id}, {"redirectTo", "Themes"}})@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>
<div class="extensionThumbnail column">
<img src="@iconUrl" class="thumbnail" alt="theme" />
</div>
</div>
</li>}