From eb775bfce53bb2462a69bac3bdb18a8ded2f20e2 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Fri, 22 Feb 2019 12:05:25 +0100
Subject: [PATCH] See #578: Improved "responsiveness" of embedded player
---
changes/changelog.d/578.enhancement | 1 +
front/src/EmbedFrame.vue | 67 ++++++++++++++++++++++++++++-
2 files changed, 67 insertions(+), 1 deletion(-)
diff --git a/changes/changelog.d/578.enhancement b/changes/changelog.d/578.enhancement
index 194ad211..073de471 100644
--- a/changes/changelog.d/578.enhancement
+++ b/changes/changelog.d/578.enhancement
@@ -1 +1,2 @@
Added twitter:* meta tags to detect tracks and albums players automatically on more sites (#578)
+Improved responsiveness of embedded player
\ No newline at end of file
diff --git a/front/src/EmbedFrame.vue b/front/src/EmbedFrame.vue
index 7987b054..50219204 100644
--- a/front/src/EmbedFrame.vue
+++ b/front/src/EmbedFrame.vue
@@ -395,6 +395,7 @@ a:hover {
}
section.controls {
display: flex;
+ width: 100%;
}
.cover {
max-width: 120px;
@@ -405,6 +406,9 @@ section.controls {
flex: 1;
align-self: flex-end;
}
+.player .plyr {
+ min-width: inherit;
+}
article .content {
flex: 1;
display: flex;
@@ -484,10 +488,16 @@ section .plyr--audio .plyr__controls {
@media screen and (max-width: 460px) {
article,
article .content {
+ position: relative;
display: block;
}
+ .content header {
+ padding-right: 80px;
+ }
.cover.main {
- float: right;
+ position: absolute;
+ right: 0;
+ top: 0;
img {
height: 60px;
width: 60px;
@@ -496,12 +506,67 @@ section .plyr--audio .plyr__controls {
}
@media screen and (max-width: 320px) {
+ .content header {
+ font-size: 14px;
+ }
+ .content h3 {
+ font-size: 15px;
+ }
.logo-wrapper,
.position-cell {
display: none;
}
+ .plyr__volume {
+ min-width: 70px;
+ }
+ .queue .artist {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 200px) {
+ .content header {
+ padding-right: 1em;
+ font-size: 13px;
+ }
+ .content h3 {
+ font-size: 14px;
+ }
+ .cover.main {
+ display: none;
+ }
+ .plyr__progress {
+ display: none;
+ }
+ .controls .plyr__control,
+ .player .plyr__control {
+ padding: 3px;
+ }
+ .queue td:last-child {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 170px) {
+ .plyr__volume {
+ min-width: inherit;
+ }
}
+@media screen and (max-height: 180px) {
+ .queue-wrapper {
+ display: none;
+ }
+ article .content {
+ display: flex;
+ align-items: flex-start;
+ width: 100%;
+ height: 100vh;
+ }
+ article .content header {
+ flex-grow: 1;
+ }
+}
// themes
.dark {
--
GitLab