mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Style cleanup, address suggestions and placeholders for songs in cardBuilder and listView
This commit is contained in:
ferferga
parent
d13e1acf8d
commit
f6a9f4679a
15 changed files with 167 additions and 116 deletions
|
|
@ -175,10 +175,6 @@
|
|||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.layout-mobile .btnShuffle {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
.layout-mobile .playlistSection .playlist,
|
||||
.layout-mobile .playlistSection .contextMenu {
|
||||
position: absolute;
|
||||
|
|
@ -202,62 +198,82 @@
|
|||
padding-right: 7.3%;
|
||||
}
|
||||
|
||||
.playlistSectionButton:not(>.layout-mobile) {
|
||||
background: unset !important;
|
||||
.layout-desktop .playlistSectionButton,
|
||||
.layout-tv .playlistSectionButton {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nowPlayingPlaylist:not(>.layout-mobile) {
|
||||
background: unset !important;
|
||||
.layout-desktop .nowPlayingPlaylist,
|
||||
.layout-tv .nowPlayingPlaylist {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.layout-mobile .playlistSectionButton .btnTogglePlaylist {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.layout-mobile .playlistSectionButton .btnSavePlaylist {
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.layout-mobile .playlistSectionButton .volumecontrol {
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.layout-mobile .playlistSectionButton .btnToggleContextMenu {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.layout-mobile .nowPlayingSecondaryButtons .btnShuffleQueue {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-mobile .nowPlayingSecondaryButtons .volumecontrol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-mobile .nowPlayingSecondaryButtons .btnRepeat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-desktop .nowPlayingInfoButtons .btnRepeat,
|
||||
.layout-tv .nowPlayingInfoButtons .btnRepeat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-desktop .nowPlayingInfoButtons .btnShuffleQueue,
|
||||
.layout-tv .nowPlayingInfoButtons .btnShuffleQueue{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-desktop .playlistSectionButton .volumecontrol,
|
||||
.layout-tv .playlistSectionButton .volumecontrol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nowPlayingSecondaryButtons {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 63em) {
|
||||
.nowPlayingPage {
|
||||
padding: 8em 0 0 0 !important;
|
||||
}
|
||||
|
||||
.nowPlayingSecondaryButtons {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nowPlayingPageUserDataButtonsTitle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 80em) {
|
||||
|
|
@ -275,6 +291,10 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.nowPlayingInfoContainer {
|
||||
-webkit-box-orient: vertical !important;
|
||||
-webkit-box-direction: normal !important;
|
||||
|
|
@ -362,7 +382,7 @@
|
|||
font-size: smaller;
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons .btnShuffle {
|
||||
.nowPlayingInfoButtons .btnShuffleQueue {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 0;
|
||||
|
|
@ -447,6 +467,10 @@
|
|||
background-image: url(../../assets/img/equalizer.gif) !important;
|
||||
}
|
||||
|
||||
.playlistIndexIndicatorImage > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hideVideoButtons .videoButton {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -456,7 +480,6 @@
|
|||
}
|
||||
|
||||
@media all and (max-width: 63em) {
|
||||
.nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
|
||||
.nowPlayingSecondaryButtons .repeatToggleButton,
|
||||
.nowPlayingInfoButtons .playlist .listItemMediaInfo,
|
||||
.nowPlayingInfoButtons .btnStop {
|
||||
|
|
|
|||
|
|
@ -511,11 +511,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
|||
function onShuffleQueueModeChange() {
|
||||
let shuffleMode = playbackManager.getQueueShuffleMode(this);
|
||||
let context = dlg;
|
||||
let shuffleButton = context.querySelector('.btnShuffle');
|
||||
let shuffleButton = context.querySelector('.btnShuffleQueue');
|
||||
if ('Sorted' === shuffleMode) {
|
||||
shuffleButton.classList.remove('shuffleButton-active');
|
||||
shuffleButton.classList.remove('shuffleQueue-active');
|
||||
} else if ('Shuffle' === shuffleMode) {
|
||||
shuffleButton.classList.add('shuffleButton-active');
|
||||
shuffleButton.classList.add('shuffleQueue-active');
|
||||
}
|
||||
onPlaylistUpdate();
|
||||
}
|
||||
|
|
@ -703,7 +703,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
|||
playbackManager.fastForward(currentPlayer);
|
||||
}
|
||||
});
|
||||
context.querySelector('.btnShuffle').addEventListener('click', function () {
|
||||
context.querySelector('.btnShuffleQueue').addEventListener('click', function () {
|
||||
if (currentPlayer) {
|
||||
if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
|
||||
playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
|
||||
|
|
@ -841,27 +841,23 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
|||
}
|
||||
|
||||
function init(ownerView, context) {
|
||||
let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><span class="material-icons more_vert"></span></button>`;
|
||||
let volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
|
||||
volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
|
||||
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
|
||||
volumecontrolHtml += '</div>';
|
||||
let shuffleButtonHtml = `<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${globalize.translate('ButtonShuffle')}"><span class="material-icons shuffle"></span></button>`;
|
||||
let repeatButtonHtml = `<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${globalize.translate('ButtonRepeat')}" data-command="SetRepeatMode"><span class="material-icons repeat"></span></button>`;
|
||||
let optionsSection = context.querySelector('.playlistSectionButton');
|
||||
if (!layoutManager.mobile) {
|
||||
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
|
||||
optionsSection.innerHTML += contextmenuHtml;
|
||||
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
|
||||
optionsSection.classList.remove('align-items-center', 'justify-content-center');
|
||||
optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
|
||||
context.querySelector('.playlist').classList.remove('hide');
|
||||
context.querySelector('.btnSavePlaylist').classList.remove('hide');
|
||||
} else {
|
||||
optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml;
|
||||
optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
|
||||
optionsSection.classList.add('playlistSectionButtonTransparent');
|
||||
context.querySelector('.btnTogglePlaylist').classList.remove('hide');
|
||||
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
|
||||
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
|
||||
context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
|
||||
context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
|
||||
}
|
||||
|
||||
bindEvents(context);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue