mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update events
This commit is contained in:
Luke Pulverenti
parent
ab15648bbb
commit
f8a1cdd9a2
8 changed files with 151 additions and 600 deletions
|
|
@ -1,105 +0,0 @@
|
|||
.remoteControlFlyout {
|
||||
width: 300px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.playMenuOptions {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.tblRemoteControl {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.tblRemoteControl tbody tr:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.tblRemoteControl td {
|
||||
padding: 5px;
|
||||
border-top: 1px solid #ccc;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tblRemoteControl th {
|
||||
padding: 3px 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tblRemoteControl th:first-child, .tblRemoteControl td:first-child {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.tblRemoteControlNoHeader tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.tdSelectPlayTime, .tdSelectItem {
|
||||
vertical-align: middle!important;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.tdRemoteControlImage {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.tblRemoteControl img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.nowPlaying .ui-slider-track {
|
||||
margin-left: 15px!important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) {
|
||||
.nowPlayingCell + .nowPlayingCell {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 450px) {
|
||||
.nowPlayingCell {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-height: 500px) {
|
||||
.remoteControlFlyout {
|
||||
min-height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-height: 600px) {
|
||||
.remoteControlFlyout {
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-height: 800px) {
|
||||
.playMenuOptions {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 400px) {
|
||||
.remoteControlFlyout {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
.remoteControlFlyout {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
.remoteControlFlyout {
|
||||
width: 550px;
|
||||
}
|
||||
}
|
||||
|
|
@ -246,9 +246,9 @@
|
|||
|
||||
var legacyTabs = $('.legacyTabs', ownerpage);
|
||||
|
||||
$(pages).on('iron-select', function (e) {
|
||||
pages.addEventListener('iron-select', function (e) {
|
||||
|
||||
var selected = this.selected;
|
||||
var selected = pages.selected;
|
||||
$('a', legacyTabs).removeClass('ui-btn-active')[selected].classList.add('ui-btn-active');
|
||||
});
|
||||
|
||||
|
|
@ -2816,8 +2816,8 @@
|
|||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
$(dlg).on('iron-overlay-closed', function () {
|
||||
$(this).remove();
|
||||
dlg.addEventListener('iron-overlay-closed', function () {
|
||||
$(dlg).remove();
|
||||
});
|
||||
|
||||
require(['components/paperdialoghelper'], function () {
|
||||
|
|
|
|||
|
|
@ -2,14 +2,35 @@
|
|||
|
||||
var showOverlayTimeout;
|
||||
|
||||
function onHoverOut() {
|
||||
function getCardHoverElement(e) {
|
||||
|
||||
var elem = parentWithClass(e.target, 'card');
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (elem.classList.contains('bannerCard')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function onHoverOut(e) {
|
||||
|
||||
var elem = getCardHoverElement(e);
|
||||
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (showOverlayTimeout) {
|
||||
clearTimeout(showOverlayTimeout);
|
||||
showOverlayTimeout = null;
|
||||
}
|
||||
|
||||
var elem = this.querySelector('.cardOverlayTarget');
|
||||
elem = elem.querySelector('.cardOverlayTarget');
|
||||
|
||||
if ($(elem).is(':visible')) {
|
||||
require(["jquery", "velocity"], function ($, Velocity) {
|
||||
|
|
@ -637,235 +658,13 @@
|
|||
url += '&context=' + context;
|
||||
}
|
||||
Dashboard.navigate(url);
|
||||
return;
|
||||
|
||||
var ids = items.map(function (i) {
|
||||
return i.Id;
|
||||
});
|
||||
|
||||
showItemsOverlay({
|
||||
ids: ids,
|
||||
context: context
|
||||
});
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function getItemsOverlay(ids, context) {
|
||||
|
||||
$('.detailsMenu').remove();
|
||||
|
||||
var html = '<div data-role="popup" class="detailsMenu" style="border:0;padding:0;" data-ids="' + ids.join(',') + '" data-context="' + (context || '') + '">';
|
||||
|
||||
html += '<div style="padding:1em 1em;background:rgba(20,20,20,1);margin:0;text-align:center;" class="detailsMenuHeader">';
|
||||
html += '<paper-icon-button icon="keyboard-arrow-left" class="detailsMenuLeftButton"></paper-icon-button>';
|
||||
html += '<h3 style="font-weight:400;margin:.5em 0;"></h3>';
|
||||
html += '<paper-icon-button icon="keyboard-arrow-right" class="detailsMenuRightButton"></paper-icon-button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="detailsMenuContent" style="background-position:center center;background-repeat:no-repeat;background-size:cover;">';
|
||||
html += '<div style="padding:.5em 1em 1em;background:rgba(10,10,10,.80);" class="detailsMenuContentInner">';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$($.mobile.activePage).append(html);
|
||||
|
||||
var elem = $('.detailsMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
|
||||
|
||||
$(this).off("popupafterclose").remove();
|
||||
})[0];
|
||||
|
||||
$('.detailsMenuLeftButton', elem).on('click', function () {
|
||||
|
||||
var overlay = $(this).parents('.detailsMenu')[0];
|
||||
setItemIntoOverlay(overlay, parseInt(overlay.getAttribute('data-index') || '0') - 1, context);
|
||||
});
|
||||
|
||||
$('.detailsMenuRightButton', elem).on('click', function () {
|
||||
|
||||
var overlay = $(this).parents('.detailsMenu')[0];
|
||||
setItemIntoOverlay(overlay, parseInt(overlay.getAttribute('data-index') || '0') + 1, context);
|
||||
});
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function setItemIntoOverlay(elem, index) {
|
||||
|
||||
var ids = elem.getAttribute('data-ids').split(',');
|
||||
var itemId = ids[index];
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
var context = elem.getAttribute('data-context');
|
||||
|
||||
elem.setAttribute('data-index', index);
|
||||
|
||||
if (index > 0) {
|
||||
$('.detailsMenuLeftButton', elem).show();
|
||||
} else {
|
||||
$('.detailsMenuLeftButton', elem).hide();
|
||||
}
|
||||
|
||||
if (index < ids.length - 1) {
|
||||
$('.detailsMenuRightButton', elem).show();
|
||||
} else {
|
||||
$('.detailsMenuRightButton', elem).hide();
|
||||
}
|
||||
|
||||
var promise1 = ApiClient.getItem(userId, itemId);
|
||||
var promise2 = Dashboard.getCurrentUser();
|
||||
|
||||
$.when(promise1, promise2).done(function (response1, response2) {
|
||||
|
||||
var item = response1[0];
|
||||
var user = response2[0];
|
||||
|
||||
var background = 'none';
|
||||
|
||||
if (AppInfo.enableDetailsMenuImages) {
|
||||
var backdropUrl;
|
||||
var screenWidth = $(window).width();
|
||||
var backdropWidth = Math.min(screenWidth, 800);
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
backdropUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
index: 0,
|
||||
maxWidth: backdropWidth,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
}
|
||||
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||
|
||||
backdropUrl = ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
||||
type: 'Backdrop',
|
||||
index: 0,
|
||||
tag: item.ParentBackdropImageTags[0],
|
||||
maxWidth: backdropWidth
|
||||
});
|
||||
}
|
||||
|
||||
if (backdropUrl) {
|
||||
background = 'url(' + backdropUrl + ')';
|
||||
}
|
||||
}
|
||||
|
||||
$('.detailsMenuContent', elem).css('backgroundImage', background);
|
||||
|
||||
var headerHtml = LibraryBrowser.getPosterViewDisplayName(item);
|
||||
$('.detailsMenuHeader', elem).removeClass('detailsMenuHeaderWithLogo');
|
||||
if (AppInfo.enableDetailsMenuImages) {
|
||||
|
||||
var logoUrl;
|
||||
|
||||
var logoHeight = 30;
|
||||
if (item.ImageTags && item.ImageTags.Logo) {
|
||||
|
||||
logoUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Logo",
|
||||
index: 0,
|
||||
maxHeight: logoHeight,
|
||||
tag: item.ImageTags.Logo
|
||||
});
|
||||
}
|
||||
|
||||
if (logoUrl) {
|
||||
headerHtml = '<img src="' + logoUrl + '" style="height:' + logoHeight + 'px;" />';
|
||||
$('.detailsMenuHeader', elem).addClass('detailsMenuHeaderWithLogo');
|
||||
}
|
||||
}
|
||||
|
||||
$('h3', elem).html(headerHtml);
|
||||
|
||||
var contentHtml = '';
|
||||
|
||||
var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
|
||||
if (miscInfo) {
|
||||
|
||||
contentHtml += '<p>' + miscInfo + '</p>';
|
||||
}
|
||||
|
||||
var userData = LibraryBrowser.getUserDataIconsHtml(item);
|
||||
if (userData) {
|
||||
|
||||
contentHtml += '<p class="detailsMenuUserData">' + userData + '</p>';
|
||||
}
|
||||
|
||||
var ratingHtml = LibraryBrowser.getRatingHtml(item);
|
||||
if (ratingHtml) {
|
||||
|
||||
contentHtml += '<p>' + ratingHtml + '</p>';
|
||||
}
|
||||
|
||||
if (item.Overview) {
|
||||
contentHtml += '<p class="detailsMenuOverview">' + item.Overview + '</p>';
|
||||
}
|
||||
|
||||
contentHtml += '<div class="detailsMenuButtons">';
|
||||
|
||||
if (MediaController.canPlay(item)) {
|
||||
if (item.MediaType == 'Video' && !item.IsFolder && item.UserData && item.UserData.PlaybackPositionTicks) {
|
||||
contentHtml += '<paper-button raised class="secondary btnResume" style="background-color:#ff8f00;"><iron-icon icon="play-arrow"></iron-icon><span>' + Globalize.translate('ButtonResume') + '</span></paper-button>';
|
||||
}
|
||||
|
||||
contentHtml += '<paper-button raised class="secondary btnPlay"><iron-icon icon="play-arrow"></iron-icon><span>' + Globalize.translate('ButtonPlay') + '</span></paper-button>';
|
||||
}
|
||||
|
||||
contentHtml += '<paper-button data-href="' + LibraryBrowser.getHref(item, context) + '" raised class="submit" style="background-color: #673AB7;" onclick="Dashboard.navigate(this.getAttribute(\'data-href\'));"><iron-icon icon="folder-open"></iron-icon><span>' + Globalize.translate('ButtonOpen') + '</span></paper-button>';
|
||||
|
||||
if (SyncManager.isAvailable(item, user)) {
|
||||
contentHtml += '<paper-button raised class="submit btnSync"><iron-icon icon="sync"></iron-icon><span>' + Globalize.translate('ButtonSync') + '</span></paper-button>';
|
||||
}
|
||||
|
||||
contentHtml += '</div>';
|
||||
|
||||
$('.detailsMenuContentInner', elem).html(contentHtml).trigger('create');
|
||||
|
||||
$('.btnSync', elem).on('click', function () {
|
||||
|
||||
$(elem).popup('close');
|
||||
|
||||
SyncManager.showMenu({
|
||||
items: [item]
|
||||
});
|
||||
});
|
||||
|
||||
$('.btnPlay', elem).on('click', function () {
|
||||
|
||||
$(elem).popup('close');
|
||||
|
||||
MediaController.play({
|
||||
items: [item]
|
||||
});
|
||||
});
|
||||
|
||||
$('.btnResume', elem).on('click', function () {
|
||||
|
||||
$(elem).popup('close');
|
||||
|
||||
MediaController.play({
|
||||
items: [item],
|
||||
startPositionTicks: item.UserData.PlaybackPositionTicks
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showItemsOverlay(options) {
|
||||
|
||||
var context = options.context;
|
||||
|
||||
require(['jqmpopup'], function () {
|
||||
var elem = getItemsOverlay(options.ids, context);
|
||||
|
||||
setItemIntoOverlay(elem, 0);
|
||||
});
|
||||
}
|
||||
|
||||
function parentWithClass(elem, className) {
|
||||
|
||||
while (!elem.classList || !elem.classList.contains(className)) {
|
||||
|
|
@ -933,6 +732,12 @@
|
|||
|
||||
function onHoverIn(e) {
|
||||
|
||||
var elem = getCardHoverElement(e);
|
||||
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (preventHover === true) {
|
||||
preventHover = false;
|
||||
return;
|
||||
|
|
@ -943,14 +748,11 @@
|
|||
showOverlayTimeout = null;
|
||||
}
|
||||
|
||||
var elem = this;
|
||||
|
||||
while (!elem.classList.contains('card')) {
|
||||
elem = elem.parentNode;
|
||||
}
|
||||
|
||||
showOverlayTimeout = setTimeout(function () {
|
||||
|
||||
onShowTimerExpired(elem);
|
||||
|
||||
}, 1000);
|
||||
|
|
@ -960,31 +762,33 @@
|
|||
preventHover = true;
|
||||
}
|
||||
|
||||
this.off('click', onCardClick);
|
||||
this.on('click', onCardClick);
|
||||
for (var i = 0, length = this.length; i < length; i++) {
|
||||
|
||||
var curr = this[i];
|
||||
curr.removeEventListener('click', onCardClick);
|
||||
curr.addEventListener('click', onCardClick);
|
||||
|
||||
if (AppInfo.isTouchPreferred) {
|
||||
this.off('contextmenu', disableEvent);
|
||||
this.on('contextmenu', disableEvent);
|
||||
curr.removeEventListener('contextmenu', disableEvent);
|
||||
curr.addEventListener('contextmenu', disableEvent);
|
||||
//this.off('contextmenu', onContextMenu);
|
||||
//this.on('contextmenu', onContextMenu);
|
||||
}
|
||||
else {
|
||||
this.off('contextmenu', onContextMenu);
|
||||
this.on('contextmenu', onContextMenu);
|
||||
curr.removeEventListener('contextmenu', onContextMenu);
|
||||
curr.addEventListener('contextmenu', onContextMenu);
|
||||
|
||||
this.off('mouseenter', '.card:not(.bannerCard) .cardContent', onHoverIn);
|
||||
this.on('mouseenter', '.card:not(.bannerCard) .cardContent', onHoverIn);
|
||||
curr.removeEventListener('mouseenter', onHoverIn);
|
||||
curr.addEventListener('mouseenter', onHoverIn, true);
|
||||
|
||||
this.off('mouseleave', '.card:not(.bannerCard) .cardContent', onHoverOut);
|
||||
this.on('mouseleave', '.card:not(.bannerCard) .cardContent', onHoverOut);
|
||||
curr.removeEventListener('mouseleave', onHoverOut);
|
||||
curr.addEventListener('mouseleave', onHoverOut, true);
|
||||
|
||||
this.off("touchstart", '.card:not(.bannerCard) .cardContent', preventTouchHover);
|
||||
this.on("touchstart", '.card:not(.bannerCard) .cardContent', preventTouchHover);
|
||||
curr.removeEventListener("touchstart", preventTouchHover);
|
||||
curr.addEventListener("touchstart", preventTouchHover);
|
||||
}
|
||||
|
||||
for (var i = 0, length = this.length; i < length; i++) {
|
||||
initTapHoldMenus(this[i]);
|
||||
initTapHoldMenus(curr);
|
||||
}
|
||||
|
||||
return this;
|
||||
|
|
@ -1368,7 +1172,11 @@
|
|||
|
||||
function onItemWithActionClick(e) {
|
||||
|
||||
var elem = this;
|
||||
var elem = parentWithClass(e.target, 'itemWithAction');
|
||||
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
var action = elem.getAttribute('data-action');
|
||||
var elemWithAttributes = elem;
|
||||
|
|
@ -1400,6 +1208,7 @@
|
|||
MediaController.instantMix(itemId);
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -1436,7 +1245,7 @@
|
|||
|
||||
var page = this;
|
||||
|
||||
$(page).on('click', '.itemWithAction', onItemWithActionClick);
|
||||
page.addEventListener('click', onItemWithActionClick);
|
||||
|
||||
var itemsContainers = page.querySelectorAll('.itemsContainer:not(.noautoinit)');
|
||||
for (var i = 0, length = itemsContainers.length; i < length; i++) {
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
if (mainDrawerButton) {
|
||||
if (AppInfo.isTouchPreferred || $.browser.mobile) {
|
||||
|
||||
Events.on(mainDrawerButton, 'click', openMainDrawer);
|
||||
mainDrawerButton.addEventListener('click', openMainDrawer);
|
||||
|
||||
} else {
|
||||
$(mainDrawerButton).createHoverTouch().on('hovertouch', openMainDrawer);
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
|
||||
var headerBackButton = document.querySelector('.headerBackButton');
|
||||
if (headerBackButton) {
|
||||
Events.on(headerBackButton, 'click', onBackClick);
|
||||
headerBackButton.addEventListener('click', onBackClick);
|
||||
}
|
||||
|
||||
var viewMenuBar = document.querySelector(".viewMenuBar");
|
||||
|
|
@ -226,9 +226,10 @@
|
|||
|
||||
document.querySelector('.mainDrawerPanel').closeDrawer();
|
||||
}
|
||||
function onMainDrawerSelect() {
|
||||
function onMainDrawerSelect(e) {
|
||||
|
||||
if (this.selected == 'main') {
|
||||
var drawer = e.target;
|
||||
if (drawer.selected == 'main') {
|
||||
|
||||
document.body.classList.remove('bodyWithPopupOpen');
|
||||
document.querySelector('.mainDrawerPanel #drawer').classList.remove('verticalScrollingDrawer');
|
||||
|
|
@ -385,7 +386,7 @@
|
|||
|
||||
drawer.querySelector('.userFooter').innerHTML = html;
|
||||
|
||||
Events.on(drawer.querySelector('.lnkManageServer'), 'click', onManageServerClicked);
|
||||
drawer.querySelector('.lnkManageServer').addEventListener('click', onManageServerClicked);
|
||||
}
|
||||
|
||||
function onSidebarLinkClick() {
|
||||
|
|
@ -998,7 +999,7 @@
|
|||
});
|
||||
|
||||
var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
|
||||
Events.on(mainDrawerPanel, 'iron-select', onMainDrawerSelect);
|
||||
mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
|
||||
});
|
||||
|
||||
})(window, document, jQuery, window.devicePixelRatio);
|
||||
|
|
|
|||
|
|
@ -674,9 +674,9 @@ var Dashboard = {
|
|||
});
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
$(dlg).on('iron-overlay-closed', function (e) {
|
||||
dlg.addEventListener('iron-overlay-closed', function (e) {
|
||||
|
||||
this.parentNode.removeChild(this);
|
||||
dlg.parentNode.removeChild(dlg);
|
||||
});
|
||||
|
||||
dlg.open();
|
||||
|
|
@ -729,9 +729,10 @@ var Dashboard = {
|
|||
var dlg = document.getElementById(id);
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
$(dlg).on('iron-overlay-closed', function (e) {
|
||||
var confirmed = this.closingReason.confirmed;
|
||||
this.parentNode.removeChild(this);
|
||||
dlg.addEventListener('iron-overlay-closed', function (e) {
|
||||
|
||||
var confirmed = dlg.closingReason.confirmed;
|
||||
dlg.parentNode.removeChild(dlg);
|
||||
|
||||
if (callback) {
|
||||
callback(confirmed);
|
||||
|
|
@ -2009,7 +2010,7 @@ var AppInfo = {};
|
|||
|
||||
$(document.body).append(footerHtml);
|
||||
|
||||
$(window).on("beforeunload", function () {
|
||||
window.addEventListener("beforeunload", function () {
|
||||
|
||||
var apiClient = window.ApiClient;
|
||||
|
||||
|
|
@ -2028,14 +2029,6 @@ var AppInfo = {};
|
|||
}
|
||||
});
|
||||
|
||||
$(document).on('contextmenu', '.ui-popup-screen', function (e) {
|
||||
|
||||
$('.ui-popup').popup('close');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
if (Dashboard.isRunningInCordova()) {
|
||||
require(['cordova/connectsdk', 'scripts/registrationservices', 'cordova/back']);
|
||||
|
||||
|
|
@ -2468,9 +2461,9 @@ var AppInfo = {};
|
|||
onWebComponentsReady();
|
||||
} else {
|
||||
|
||||
$(document).on('WebComponentsReady', function() {
|
||||
document.addEventListener('WebComponentsReady', function () {
|
||||
|
||||
setTimeout(onWebComponentsReady, 200);
|
||||
setTimeout(onWebComponentsReady, 300);
|
||||
});
|
||||
require(['bower_components/webcomponentsjs/webcomponents-lite.js']);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,16 @@
|
|||
/* Panel */
|
||||
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
||||
@media (max-width: 35em) {
|
||||
.ui-responsive > .ui-block-a,
|
||||
.ui-responsive > .ui-block-b,
|
||||
.ui-responsive > .ui-block-c,
|
||||
.ui-responsive > .ui-block-d,
|
||||
.ui-responsive > .ui-block-e {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.ui-panel {
|
||||
width: 17em;
|
||||
min-height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,59 @@
|
|||
.ui-table {
|
||||
.ui-block-a,
|
||||
.ui-block-b,
|
||||
.ui-block-c,
|
||||
.ui-block-d,
|
||||
.ui-block-e {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* force new row */
|
||||
.ui-block-a {
|
||||
clear: left;
|
||||
}
|
||||
li.ui-block-a,
|
||||
li.ui-block-b,
|
||||
li.ui-block-c,
|
||||
li.ui-block-d,
|
||||
li.ui-block-e {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
|
||||
[class*="ui-block-"] > button.ui-btn {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
[class*="ui-block-"] > .ui-btn,
|
||||
[class*="ui-block-"] > .ui-select,
|
||||
[class*="ui-block-"] > .ui-checkbox,
|
||||
[class*="ui-block-"] > .ui-radio,
|
||||
[class*="ui-block-"] > button.ui-btn-inline,
|
||||
[class*="ui-block-"] > button.ui-btn-icon-notext {
|
||||
margin-right: .3125em;
|
||||
margin-left: .3125em;
|
||||
}
|
||||
|
||||
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
||||
@media (max-width: 35em) {
|
||||
.ui-responsive > .ui-block-a,
|
||||
.ui-responsive > .ui-block-b,
|
||||
.ui-responsive > .ui-block-c,
|
||||
.ui-responsive > .ui-block-d,
|
||||
.ui-responsive > .ui-block-e {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-table {
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -291,217 +291,3 @@ button.ui-btn-icon-notext,
|
|||
.ui-screen-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* content configurations. */
|
||||
.ui-grid-a,
|
||||
.ui-grid-b,
|
||||
.ui-grid-c,
|
||||
.ui-grid-d,
|
||||
.ui-grid-solo {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-block-a,
|
||||
.ui-block-b,
|
||||
.ui-block-c,
|
||||
.ui-block-d,
|
||||
.ui-block-e {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* force new row */
|
||||
.ui-block-a {
|
||||
clear: left;
|
||||
}
|
||||
ul.ui-grid-a,
|
||||
ul.ui-grid-b,
|
||||
ul.ui-grid-c,
|
||||
ul.ui-grid-d,
|
||||
ul.ui-grid-solo,
|
||||
li.ui-block-a,
|
||||
li.ui-block-b,
|
||||
li.ui-block-c,
|
||||
li.ui-block-d,
|
||||
li.ui-block-e {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
|
||||
[class*="ui-block-"] > button.ui-btn {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
[class*="ui-block-"] > .ui-btn,
|
||||
[class*="ui-block-"] > .ui-select,
|
||||
[class*="ui-block-"] > .ui-checkbox,
|
||||
[class*="ui-block-"] > .ui-radio,
|
||||
[class*="ui-block-"] > button.ui-btn-inline,
|
||||
[class*="ui-block-"] > button.ui-btn-icon-notext {
|
||||
margin-right: .3125em;
|
||||
margin-left: .3125em;
|
||||
}
|
||||
|
||||
.ui-grid-a > .ui-block-a,
|
||||
.ui-grid-a > .ui-block-b {
|
||||
/* width: 49.95%; IE7 */
|
||||
/* margin-right: -.5px; BB5 */
|
||||
width: 50%;
|
||||
}
|
||||
.ui-grid-b > .ui-block-a,
|
||||
.ui-grid-b > .ui-block-b,
|
||||
.ui-grid-b > .ui-block-c {
|
||||
/* width: 33.25%; IE7 */
|
||||
/* margin-right: -.5px; BB5 */
|
||||
width: 33.333%;
|
||||
}
|
||||
.ui-grid-c > .ui-block-a,
|
||||
.ui-grid-c > .ui-block-b,
|
||||
.ui-grid-c > .ui-block-c,
|
||||
.ui-grid-c > .ui-block-d {
|
||||
/* width: 24.925%; IE7 */
|
||||
/* margin-right: -.5px; BB5 */
|
||||
width: 25%;
|
||||
}
|
||||
.ui-grid-d > .ui-block-a,
|
||||
.ui-grid-d > .ui-block-b,
|
||||
.ui-grid-d > .ui-block-c,
|
||||
.ui-grid-d > .ui-block-d,
|
||||
.ui-grid-d > .ui-block-e {
|
||||
/* width: 19.925%; IE7 */
|
||||
width: 20%;
|
||||
}
|
||||
.ui-grid-solo > .ui-block-a {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
||||
@media (max-width: 35em) {
|
||||
.ui-responsive > .ui-block-a,
|
||||
.ui-responsive > .ui-block-b,
|
||||
.ui-responsive > .ui-block-c,
|
||||
.ui-responsive > .ui-block-d,
|
||||
.ui-responsive > .ui-block-e {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Transitions originally inspired by those from jQtouch, nice work, folks */
|
||||
.ui-mobile-viewport-transitioning,
|
||||
.ui-mobile-viewport-transitioning .ui-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-page-pre-in {
|
||||
opacity: 0;
|
||||
}
|
||||
.in {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-animation-duration: 350ms;
|
||||
animation-timing-function: ease-out;
|
||||
animation-duration: 350ms;
|
||||
}
|
||||
.out {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-moz-animation-duration: 225ms;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 225ms;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-moz-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
.fade.out {
|
||||
opacity: 0;
|
||||
-webkit-animation-duration: 125ms;
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-duration: 125ms;
|
||||
-moz-animation-name: fadeout;
|
||||
animation-duration: 125ms;
|
||||
animation-name: fadeout;
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
-webkit-animation-duration: 225ms;
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-duration: 225ms;
|
||||
-moz-animation-name: fadein;
|
||||
animation-duration: 225ms;
|
||||
animation-name: fadein;
|
||||
}
|
||||
|
||||
/* Hide the native input element */
|
||||
.ui-input-btn input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
background: rgba(255,255,255,0);
|
||||
filter: Alpha(Opacity=0);
|
||||
opacity: .1;
|
||||
font-size: 1px;
|
||||
text-indent: -9999px;
|
||||
z-index: 2;
|
||||
}
|
||||
/* Fixes IE/WP filter alpha opacity bugs */
|
||||
.ui-input-btn.ui-state-disabled input {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px,1px,1px,1px);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue