dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-05 07:41:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix #69 and improve playbar album hover

Browse source
This commit is contained in:
Send_Nukez 2021-11-02 16:56:44 +01:00
parent b8841be47d
commit 18287d3a62
3 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -5,8 +5,9 @@ Added:
Fixed: Fixed:
- Some sidebar items hawing wrong width on hover [(this)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428) - Some sidebar items hawing wrong width on hover [(this)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428)
- Broken sidebar hover effect with unsticked items (#69)
- `Sidebar config` buttons being below the text - `Sidebar config` buttons being below the text
- Fix #87 by not showing the playing indicator above "Liked Songs" - "Liked Songs" having an playing indicator wich looks bad (#87)
- Queue icon is hidden (#73) (Temporary until a better solution is found) - Queue icon is hidden (#73) (Temporary until a better solution is found)
- Playbar album name is now white again - Playbar album name is now white again

14
src/js/main.js
View file

@ -597,8 +597,9 @@ async function songchange() {
if (!document.getElementById("main-trackInfo-year")) { if (!document.getElementById("main-trackInfo-year")) {
const el = document.createElement("div"); const el = document.createElement("div");
el.classList.add("main-trackInfo-release", "standalone-ellipsis-one-line", "main-type-finale");
el.setAttribute("as", "div");
el.id = "main-trackInfo-year"; el.id = "main-trackInfo-year";
el.classList.add("main-trackInfo-release", "ellipsis-one-line", "main-type-finale");
document.querySelector(".main-trackInfo-container").append(el); document.querySelector(".main-trackInfo-container").append(el);
} }
const albumInfoSpan = document.getElementById("main-trackInfo-year"); const albumInfoSpan = document.getElementById("main-trackInfo-year");
@ -614,8 +615,15 @@ async function songchange() {
if (album_uri !== undefined && !album_uri.includes("spotify:show")) { if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
moment.locale(Spicetify.Locale.getLocale()); moment.locale(Spicetify.Locale.getLocale());
const albumDate = moment(await getAlbumRelease(album_uri.replace("spotify:album:", ""))); const albumDate = moment(await getAlbumRelease(album_uri.replace("spotify:album:", "")));
const albumLink = `<a title="${Spicetify.Player.data.track.metadata.album_title}" href="${album_uri}" data-uri="${album_uri}" data-interaction-target="album-name" class="tl-cell__content">${Spicetify.Player.data.track.metadata.album_title}</a>`; const albumLinkElem = `
albumInfoSpan.innerHTML = `${albumLink} • ${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}`; <span>
<span draggable="true">
<a draggable="false" dir="auto" href="${album_uri}">${Spicetify.Player.data.track.metadata.album_title}</a>
</span>
</span>
`;
const albumDateElem = `<span> • <span>${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}</span></span>`;
albumInfoSpan.innerHTML = `${albumLinkElem}${albumDateElem}`;
} else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) { } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
// podcast // podcast
bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/"); bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");

11
src/styles/main.scss
View file

@ -433,7 +433,8 @@ html {
} }
#spicetify-show-list > * { #spicetify-show-list > * {
padding: 0 8px; padding: 0px;
margin: 0px 8px;
} }
.main-rootlist-statusIcons { .main-rootlist-statusIcons {
@ -679,8 +680,14 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
font-weight: 500; font-weight: 500;
} }
.main-trackInfo-release > a { .main-trackInfo-release a {
color: var(--spice-subtext); color: var(--spice-subtext);
&:hover,
&:active,
&:focus {
color: var(--spice-text);
}
} }
.main-topBar-topbarContent .main-playButton-PlayButton { .main-topBar-topbarContent .main-playButton-PlayButton {