make metro styled tiles look and act the same

This commit is contained in:
Chris Schneider 2013-02-22 09:08:51 -06:00
parent fab627c845
commit 047e97cb22
5 changed files with 62 additions and 49 deletions

View File

@ -425,7 +425,6 @@ form, .readOnlyContent {
font-size: 15px;
padding: 0;
position: relative;
padding-bottom: 28px;
}
.posterViewItem a {
@ -436,7 +435,7 @@ form, .readOnlyContent {
.posterViewItem img {
max-width: 155px;
max-height: 148px;
max-height: 155px;
vertical-align: bottom;
}
@ -454,17 +453,23 @@ form, .readOnlyContent {
.posterViewItemText {
text-overflow: ellipsis;
overflow: hidden;
text-wrap: none;
white-space: nowrap;
margin: 0;
padding: 4px 2px 0;
position: absolute;
padding: 4px 0px 0;
bottom: 0;
left: 0;
right: 0;
height: 24px;
background: #181818;
text-shadow: none;
max-width: 155px;
}
.posterViewItemText div{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0px 4px;
height: 24px;
}
.posterViewItem:hover, .userItem:hover {
@ -477,11 +482,11 @@ form, .readOnlyContent {
.posterViewItem {
font-size: 16px;
padding-bottom: 29px;
}
.posterViewItemText {
padding-top: 5px;
max-width: 190px;
}
.posterViewItem img {
@ -498,7 +503,11 @@ form, .readOnlyContent {
.posterViewItem img {
max-width: 280px;
max-height: 250px;
max-height: 280px;
}
.posterViewItemText {
max-width: 280px;
}
}
@ -506,19 +515,23 @@ form, .readOnlyContent {
.posterViewItem {
font-size: 19px;
padding-bottom: 33px;
}
.posterViewItemText {
.posterViewItemText div{
height: 28px;
}
.posterViewItem img {
max-width: 352px;
max-height: 300px;
max-height: 352px;
}
.posterViewItemText {
max-width: 352px;
}
}
/*DEPRECATED userItem classes
.userItem {
display: inline-block;
margin: 5px;
@ -620,7 +633,8 @@ form, .readOnlyContent {
.userItemHeader {
font-size: 40px;
}
}
}*/
/*DEPRECATED userItem classes END
/* Startup wizard */
.wizardPage {

View File

@ -7,7 +7,7 @@
<div id="loginPage" data-role="page" class="page standalonePage">
<div data-role="content">
<div id="divUsers" style="margin: 50px 20px 20px; text-align: center;"></div>
<div id="divUsers" style="margin: 50px 0px 20px; text-align: center;"></div>
</div>
<div data-role="popup" id="popupLogin" class="ui-corner-all popup">

View File

@ -23,8 +23,7 @@
return ApiClient.getUserImageUrl(user.Id, {
width: 240,
tag: user.PrimaryImageTag,
type: "Primary"
tag: user.PrimaryImageTag
});
},
@ -62,34 +61,43 @@
var background = Dashboard.getRandomMetroColor();
html += '<div class="posterViewItem">';
if (user.HasPassword) {
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' class='userItem'>";
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
} else {
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' class='userItem'>";
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' \">";
}
if (user.PrimaryImageTag) {
var imgUrl = ApiClient.getUserImageUrl(user.Id, {
width: 500,
tag: user.PrimaryImageTag,
type: "Primary"
tag: user.PrimaryImageTag
});
html += '<img class="userItemImage" src="' + imgUrl + '" />';
html += '<img src="' + imgUrl + '" />';
} else {
html += '<img class="userItemImage" src="css/images/logindefault.png" style="background:' + background + ';" />';
html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
}
html += '<div class="userItemContent" style="background:' + background + ';">';
html += '<div class="posterViewItemText">';
html += '<div class="userItemContentInner">';
html += '<p class="userItemHeader">' + user.Name + '</p>';
html += '<p>' + LoginPage.getLastSeenText(user.LastActivityDate) + '</p>';
html += '<div>' + user.Name + '</div>';
html += '<div>';
var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
if (lastSeen != "") {
html += lastSeen;
}
else {
html += "&nbsp;";
}
html += '</div>';
html += '</div>';
html += '</a>';
html += '</div>';
}
$('#divUsers', '#loginPage').html(html);

View File

@ -58,12 +58,14 @@
return ip.Name == plugin.name;
})[0];
html += "<div>";
if (installedPlugin) {
html += plugin.name + " (Installed)";
} else {
html += plugin.name;
}
html += "</div>";
html += "</div>";

View File

@ -444,7 +444,9 @@ var Dashboard = {
}
if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) {
html += "<div class='posterViewItemText'>" + item.Name + "</div>";
html += "<div class='posterViewItemText'>";
html += "<div>" + item.Name + "</div>";
html += "</div>"
}
html += "</a></div>";
@ -472,8 +474,7 @@ var Dashboard = {
var imageUrl = user.PrimaryImageTag ? ApiClient.getUserImageUrl(user.Id, {
height: 400,
tag: user.PrimaryImageTag,
type: "Primary"
tag: user.PrimaryImageTag
}) : "css/images/userFlyoutDefault.png";
@ -565,18 +566,7 @@ var Dashboard = {
Dashboard.showLoadingMsg();
var promise;
if (path === "Network") {
promise = ApiClient.getNetworkComputers();
}
else if (path) {
promise = ApiClient.getDirectoryContents(path, { includeDirectories: true });
} else {
promise = ApiClient.getDrives();
}
promise.done(function (folders) {
ApiClient.getDirectoryContents(path, { includeDirectories: true }).done(function (folders) {
$('#txtDirectoryPickerPath', page).val(path || "");
@ -693,8 +683,7 @@ var Dashboard = {
var url = ApiClient.getUserImageUrl(user.Id, {
width: 225,
tag: user.PrimaryImageTag,
type: "Primary"
tag: user.PrimaryImageTag
});
headerHtml += '<img src="' + url + '" />';