okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix overlapping items in playback-info

Browse source
This commit is contained in:
yazninja 2022-01-24 18:19:17 +08:00
parent 0a947257b2
commit db80697a8f
2 changed files with 40 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/renderer/style.less
View file

@ -1112,27 +1112,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
font-weight: 400;
font-size: 12px;
text-align: center;
/*height: 1.2em;
line-height: 1.2em;*/
z-index: 1;
max-width: 360px;
.song-artist-normal {
height: inherit;
}
&.song-artist-marquee {
> marquee {
margin-bottom: -3px;
}
}
}
.app-chrome .app-chrome-item > .app-playback-controls .song-progress { .app-chrome .app-chrome-item > .app-playback-controls .song-progress {
@bgColor: transparent; @bgColor: transparent;
@ -1256,7 +1236,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
overflow: hidden; overflow: hidden;
} }
.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div { .app-chrome .app-chrome-item > .app-playback-controls .playback-info > .song-progress{
width: 100%; width: 100%;
} }
@ -1267,6 +1247,31 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
display: flex; display: flex;
position: relative; position: relative;
} }
.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album {
font-weight: 400;
font-size: 12px;
text-align: center;
/*height: 1.2em;
line-height: 1.2em;*/
z-index: 1;
align-items: center;
justify-content: center;
width: 80%;
max-width: 340px;
overflow: hidden;
.song-artist-normal {
height: inherit;
}
&.song-artist-marquee {
> marquee {
margin-bottom: -3px;
}
}
}
.display--small { .display--small {
display: none !important; display: none !important;

15
src/renderer/views/main.ejs
View file

@ -96,7 +96,7 @@
style="display: inline-block"></div> style="display: inline-block"></div>
</div> </div>
<!-- :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']" --> <!-- :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']" -->
<div class="song-artist" <div class="song-artist-album"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;"> style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block" <div class="item-navigate song-artist" style="display: inline-block"
@click="getNowPlayingItemDetailed(`artist`)"> @click="getNowPlayingItemDetailed(`artist`)">
@ -788,6 +788,19 @@
<!-- Miniplayer View --> <!-- Miniplayer View -->
<%- include('components/miniplayer') <%- include('components/miniplayer')
%> %>
<script>
function checkMarquee(){
if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') == true) {
document.getElementsByClassName('song-artist')[0].classList.add('marquee');
document.getElementsByClassName('song-artist')[1].classList.add('marquee-after');
}
if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') == true) {
document.getElementsByClassName('song-name')[0].classList.add('marquee');
document.getElementsByClassName('song-name')[1].classList.add('marquee-after');
}
}
</script>
<script <script
src="musickit.js?v=1"></script> src="musickit.js?v=1"></script>