Fix some layout issues on IE

The compatibility is not prefect but at least the app can be used and it looks somewhat correct again. Most notably, the actions menus on the navigation pane are not accessible. Furthermore, expanding the collapsed navigation pane on narrow browser window doesn't play well along with the controls pane.
paulijar · Feb 8, 2025 · 7812ef6 · 7812ef6
1 parent a132d6c
commit 7812ef6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 10 deletions.
diff --git a/css/app/music-actions-menu.css b/css/app/music-actions-menu.css
@@ -63,3 +63,15 @@
 .app-music #app .popovermenu.submenu span {
 	margin-left: 16px;
 }
+
+/* Compatibility for Internet Explorer which doesn't support the var() syntax; IE is supported on OC but not on NC */
+.ie .app-music #app .popovermenu ul li,
+.ie .app-music #app .popovermenu ul li a {
+	line-height: 44px;
+}
+
+.ie .app-music #app .popovermenu ul li a .icon {
+	padding-top: 22px;
+	padding-bottom: 22px;
+	padding-left: 44px;
+}
diff --git a/css/app/music-controls.css b/css/app/music-controls.css
@@ -24,6 +24,10 @@ body:not(.snapjs-left) .app-music.nc14to24 #controls {
 	top: 50px;
 }
 
+.ie #controls {
+	top: 45px;
+}
+
 #controls, #controls * {
 	display: none;
 }

diff --git a/css/app/music-navigation.css b/css/app/music-navigation.css
@@ -58,11 +58,6 @@
 	opacity: 0.15;
 }
 
-.ie #app-navigation .app-navigation-separator {
-	/* IE doesn't support the var() syntax */
-	border-color: #222;
-}
-
 #app-navigation .music-navigation-item {
 	position: relative;
 	height: var(--music-nav-item-height);
@@ -180,11 +175,6 @@ body:not(.snapjs-left) .app-music.nc14to24 #app-navigation-toggle {
 	background-color: var(--color-background-dark, #ededed);
 }
 
-/* IE doesn't support the var() syntax */
-.ie #app-navigation li.drag-hover {
-	background-color: #ededed;
-}
-
 #app-navigation .actions {
 	position: absolute;
 	right: 0;
@@ -329,3 +319,46 @@ body:not(.snapjs-left) .app-music.nc14to24 #app-navigation-toggle {
 	margin-top: 1.5px;
 	margin-left: 0;
 }
+
+/* Compatibility for Internet Explorer which doesn't support the var() syntax; IE is supported on OC but not on NC */
+.ie #app-navigation .music-navigation-item,
+.ie #app-navigation .music-navigation-item-content,
+.ie #app-navigation .music-navigation-item-content > *,
+.ie #app-navigation .music-navigation-item-content [class^="icon-"],
+.ie #app-navigation #music-nav-settings > a {
+	height: 44px;
+	line-height: 44px;
+}
+
+.ie #app-navigation #new-playlist .track-count-badge {
+	background-color: #1d2d44;
+	color: #fff;
+	width: 32px;
+	height: 32px;
+	line-height: 32px;
+}
+
+.ie #app-navigation .action.icon-checkmark, 
+.ie #app-navigation .action.icon-close {
+	margin-top: 10px;
+}
+
+.ie #app-navigation .app-navigation-separator {
+	border-color: #222;
+}
+
+.ie #app-navigation li.drag-hover {
+	background-color: #ededed;
+}
+
+.ie #app-navigation-toggle {
+	top: 45px;
+}
+
+.ie #app-navigation #music-nav-search {
+	bottom: 44px;
+}
+
+.ie .app-music #app-navigation {
+	padding-bottom: 88px !important;
+}