mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update scroll styles
This commit is contained in:
Luke Pulverenti
parent
308b423658
commit
ca13b8cbc2
23 changed files with 153 additions and 106 deletions
|
|
@ -16,12 +16,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.2.12",
|
||||
"_release": "1.2.12",
|
||||
"version": "1.2.13",
|
||||
"_release": "1.2.13",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.2.12",
|
||||
"commit": "7f5e97c93b067629c7e3d0da3599ec812ad573b4"
|
||||
"tag": "1.2.13",
|
||||
"commit": "23c88db1b8b062fa6b738b724c2360d398164cad"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,31 @@
|
|||
.actionSheet {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
|
||||
/*opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
z-index: 999;
|
||||
transform-origin: 100% 0;
|
||||
display: block;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
will-change: transform;
|
||||
transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
|
||||
transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);
|
||||
z-index: -1;*/
|
||||
}
|
||||
|
||||
.actionSheet.centered .actionSheetContent {
|
||||
|
|
@ -10,7 +35,7 @@
|
|||
|
||||
.actionSheetContent {
|
||||
margin: 0 !important;
|
||||
padding: 1em 1em !important;
|
||||
padding: .4em 0 !important;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -18,7 +43,7 @@
|
|||
}
|
||||
|
||||
.actionSheetMenuItem {
|
||||
padding: .5em .5em;
|
||||
padding: .7em 1.5em;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
text-align: inherit;
|
||||
|
|
@ -47,8 +72,14 @@
|
|||
|
||||
h1.actionSheetTitle {
|
||||
margin: .5em 0 1em !important;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
h2.actionSheetTitle {
|
||||
margin: .25em 0 .55em !important;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.actionSheet.extraSpacing {
|
||||
font-size: 108%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,18 +22,6 @@
|
|||
return results;
|
||||
}
|
||||
|
||||
var docElem = doc.documentElement;
|
||||
var docElemValues = {
|
||||
clientTop: docElem.clientTop,
|
||||
clientLeft: docElem.clientLeft
|
||||
};
|
||||
|
||||
var win = doc.defaultView;
|
||||
var winValues = {
|
||||
pageXOffset: win.pageXOffset,
|
||||
pageYOffset: win.pageYOffset
|
||||
};
|
||||
|
||||
var box;
|
||||
var elem;
|
||||
|
||||
|
|
@ -57,7 +45,7 @@
|
|||
return results;
|
||||
}
|
||||
|
||||
function getPosition(options) {
|
||||
function getPosition(options, dlg) {
|
||||
|
||||
var windowHeight = window.innerHeight;
|
||||
|
||||
|
|
@ -70,9 +58,9 @@
|
|||
pos.top += options.positionTo.offsetHeight / 2;
|
||||
pos.left += options.positionTo.offsetWidth / 2;
|
||||
|
||||
// Account for popup size - we can't predict this yet so just estimate
|
||||
pos.top -= (45 * options.items.length) / 2;
|
||||
pos.left -= 80;
|
||||
// Account for popup size
|
||||
pos.top -= ((dlg.offsetHeight || 300) / 2);
|
||||
pos.left -= ((dlg.offsetWidth || 160) / 2);
|
||||
|
||||
// Avoid showing too close to the bottom
|
||||
pos.top = Math.min(pos.top, windowHeight - 300);
|
||||
|
|
@ -94,16 +82,13 @@
|
|||
|
||||
function show(options) {
|
||||
|
||||
var pos = options.positionTo ? getPosition(options) : null;
|
||||
|
||||
// items
|
||||
// positionTo
|
||||
// showCancel
|
||||
// title
|
||||
var dialogOptions = {
|
||||
removeOnClose: true,
|
||||
enableHistory: options.enableHistory,
|
||||
refit: pos == null
|
||||
enableHistory: options.enableHistory
|
||||
};
|
||||
|
||||
var backButton = false;
|
||||
|
|
@ -122,6 +107,10 @@
|
|||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
if (!layoutManager.tv) {
|
||||
dlg.classList.add('extraSpacing');
|
||||
}
|
||||
|
||||
dlg.classList.add('actionSheet');
|
||||
|
||||
var html = '';
|
||||
|
|
@ -142,6 +131,10 @@
|
|||
|
||||
html += '<div class="actionSheetScroller">';
|
||||
|
||||
options.items.forEach(function (o) {
|
||||
o.ironIcon = o.selected ? 'check' : null;
|
||||
});
|
||||
|
||||
var itemsWithIcons = options.items.filter(function (o) {
|
||||
return o.ironIcon;
|
||||
});
|
||||
|
|
@ -155,7 +148,6 @@
|
|||
}
|
||||
|
||||
var enablePaperMenu = !layoutManager.tv;
|
||||
enablePaperMenu = false;
|
||||
var itemTagName = 'paper-button';
|
||||
|
||||
if (enablePaperMenu) {
|
||||
|
|
@ -168,7 +160,7 @@
|
|||
var option = options.items[i];
|
||||
|
||||
var autoFocus = option.selected ? ' autoFocus' : '';
|
||||
html += '<' + itemTagName + autoFocus + ' noink class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
|
||||
html += '<' + itemTagName + autoFocus + ' class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
|
||||
|
||||
if (option.ironIcon) {
|
||||
html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
|
||||
|
|
@ -231,6 +223,8 @@
|
|||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
var pos = options.positionTo ? getPosition(options, dlg) : null;
|
||||
|
||||
if (pos) {
|
||||
dlg.style.position = 'fixed';
|
||||
dlg.style.margin = 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.dialog {
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
z-index: 999999 !important;
|
||||
position: fixed;
|
||||
margin: 24px 40px;
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
height: auto;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.dialog.fixedSize {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,40 @@
|
|||
define(['browser'], function (browser) {
|
||||
|
||||
function setLayout(self, layout, selectedLayout) {
|
||||
|
||||
if (layout == selectedLayout) {
|
||||
self[layout] = true;
|
||||
document.documentElement.classList.add('layout-' + layout);
|
||||
} else {
|
||||
self[layout] = false;
|
||||
document.documentElement.classList.remove('layout-' + layout);
|
||||
}
|
||||
}
|
||||
|
||||
function layoutManager() {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.setFormFactor = function (formFactor) {
|
||||
self.layout = function (layout) {
|
||||
|
||||
self.mobile = false;
|
||||
self.tv = false;
|
||||
|
||||
self[formFactor] = true;
|
||||
setLayout(self, 'mobile', layout);
|
||||
setLayout(self, 'tv', layout);
|
||||
setLayout(self, 'desktop', layout);
|
||||
};
|
||||
|
||||
// Take a guess at initial layout. The consuming app can override
|
||||
if (browser.mobile) {
|
||||
self.setFormFactor('mobile');
|
||||
} else {
|
||||
self.setFormFactor('desktop');
|
||||
}
|
||||
self.autoLayout = function () {
|
||||
|
||||
// Take a guess at initial layout. The consuming app can override
|
||||
if (browser.mobile) {
|
||||
self.layout('mobile');
|
||||
} else if (browser.tv) {
|
||||
self.layout('tv');
|
||||
} else {
|
||||
self.layout('desktop');
|
||||
}
|
||||
};
|
||||
|
||||
self.autoLayout();
|
||||
};
|
||||
|
||||
return new layoutManager();
|
||||
|
|
|
|||
49
dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css
vendored
Normal file
49
dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
.smoothScrollX {
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.hiddenScrollX {
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.hiddenScrollX, .layout-tv .smoothScrollX, .layout-mobile .smoothScrollX {
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
|
||||
.hiddenScrollX::-webkit-scrollbar, .layout-tv .smoothScrollX::-webkit-scrollbar, .layout-mobile .smoothScrollX::-webkit-scrollbar {
|
||||
height: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.smoothScrollY {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.hiddenScrollY, .layout-tv .smoothScrollY, .layout-mobile .smoothScrollY {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.hiddenScrollY {
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
|
||||
.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-mobile .smoothScrollY::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue