From b7d3831b575fe5aca0e8bd674661aa25fbeed230 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 30 Jun 2022 01:12:19 -0700
Subject: [PATCH] improvements to immersive fs, moved sidebar-library-item to
its own js component
---
src/renderer/index.js | 39 ---------------
src/renderer/less/fullscreen.less | 48 +++++++++++++++++--
src/renderer/main/app.js | 1 +
.../main/components/sidebar-library-item.js | 46 ++++++++++++++++++
src/renderer/views/components/fullscreen.ejs | 2 +-
src/renderer/views/main.ejs | 9 ----
6 files changed, 92 insertions(+), 53 deletions(-)
create mode 100644 src/renderer/main/components/sidebar-library-item.js
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 66cd90c9..13caca7b 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -52,45 +52,6 @@ Vue.component("animated-number", {
},
});
-Vue.component("sidebar-library-item", {
- template: "#sidebar-library-item",
- props: {
- name: {
- type: String,
- required: true,
- },
- page: {
- type: String,
- required: true,
- },
- svgIcon: {
- type: String,
- required: false,
- default: "",
- },
- svgIconName: {
- type: String,
- required: false
- },
- cdClick: {
- type: Function,
- required: false,
- },
- },
- data: function () {
- return {
- app: app,
- svgIconData: "",
- };
- },
- async mounted() {
- if (this.svgIcon) {
- this.svgIconData = this.svgIcon;
- }
- },
- methods: {},
-});
-
function fallbackinitMusicKit() {
const request = new XMLHttpRequest();
diff --git a/src/renderer/less/fullscreen.less b/src/renderer/less/fullscreen.less
index d1f7466e..82c3bdd9 100644
--- a/src/renderer/less/fullscreen.less
+++ b/src/renderer/less/fullscreen.less
@@ -19,7 +19,7 @@
display: flex;
justify-content: center;
align-items: center;
- --chromeHeight1: 60px;
+ --chromeHeight1: 70px;
.app-content-container {
width:100%;
@@ -50,8 +50,6 @@
left: 0;
right: 0;
height: var(--chromeHeight1);
- background: var(--color1);
- backdrop-filter: var(--glassFilter);
display: flex;
justify-content: center;
align-items: center;
@@ -62,8 +60,10 @@
border : 1px solid lighten(@baseColor, 8);
border-radius: 12px;
display : flex;
- height : 42px;
+ height : 55px;
width: 90%;
+ backdrop-filter: var(--glassFilter);
+
.app-sidebar-item {
background-color: #1e1e1e00;
@@ -76,6 +76,8 @@
margin : 0px;
height : 100%;
position : relative;
+ font-size: 1.1em;
+ font-weight: 500;
&:before {
--dist : 1px;
@@ -505,11 +507,31 @@
font-weight: 380;
}
+ .cd-mediaitem-list-item .duration {
+ font-size: 1.2em;
+ }
+
.cd-mediaitem-list-item .artwork {
width: 50px;
height: 50px;
}
+ .cd-btn-seeall {
+ font-size: 1.2em;
+ }
+
+ h1 {
+ font-size: 3em;
+ }
+
+ h3 {
+ font-size: 1.5rem;
+ }
+
+ .home-page .well.artistfeed-well {
+ height: 512px;
+ }
+
.header-text {
font-size: 3em;
height: 3em;
@@ -558,6 +580,24 @@
margin-top: 40px;
}
+ .playlist-page .playlist-display .playlistInfo .playlist-hero {
+ transform: unset;
+ }
+
+ .artist-page .artist-header {
+ min-height: 60vh;
+ }
+
+ .artist-page .artist-image {
+ width: 20vh;
+ height: 20vh;
+ aspect-ratio: 1;
+ }
+
+ .artist-page.animated .artist-header {
+ min-height: 80vh;
+ }
+
.playlist-page .playlist-body {
flex: 1;
}
diff --git a/src/renderer/main/app.js b/src/renderer/main/app.js
index 058c5b25..e57fa658 100644
--- a/src/renderer/main/app.js
+++ b/src/renderer/main/app.js
@@ -8,6 +8,7 @@ import { wsapi } from "./wsapi_interop.js"
import { MusicKitTools } from "./musickittools.js"
import { spawnMica } from "./mica.js"
import { svgIcon } from './components/svg-icon.js'
+import { sidebarLibraryItem } from './components/sidebar-library-item.js'
// Define window objects
diff --git a/src/renderer/main/components/sidebar-library-item.js b/src/renderer/main/components/sidebar-library-item.js
new file mode 100644
index 00000000..adf31689
--- /dev/null
+++ b/src/renderer/main/components/sidebar-library-item.js
@@ -0,0 +1,46 @@
+import {html} from "../html.js"
+
+export const sidebarLibraryItem = Vue.component("sidebar-library-item", {
+ template: html`
+
+ `,
+ props: {
+ name: {
+ type: String,
+ required: true,
+ },
+ page: {
+ type: String,
+ required: true,
+ },
+ svgIcon: {
+ type: String,
+ required: false,
+ default: "",
+ },
+ svgIconName: {
+ type: String,
+ required: false
+ },
+ cdClick: {
+ type: Function,
+ required: false,
+ },
+ },
+ data: function () {
+ return {
+ app: app,
+ svgIconData: "",
+ };
+ },
+ async mounted() {
+ if (this.svgIcon) {
+ this.svgIconData = this.svgIcon;
+ }
+ },
+ methods: {},
+})
\ No newline at end of file
diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs
index 23704f20..66babdd8 100644
--- a/src/renderer/views/components/fullscreen.ejs
+++ b/src/renderer/views/components/fullscreen.ejs
@@ -26,7 +26,7 @@
-
+
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index e17c11d9..dc7a12bb 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -119,15 +119,6 @@
{{ component.attributes.title.stringForDisplay }}
-
-
-