From b24e84bbdbbcdc88c11ab3ddf3304e5ae43146c7 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Fri, 8 Jan 2021 21:18:01 +0100
Subject: [PATCH] player: further styling
---
src/components/ItemSlider.vue | 4 +++
src/components/Player.vue | 67 +++++++++++++++++++++--------------
2 files changed, 44 insertions(+), 27 deletions(-)
diff --git a/src/components/ItemSlider.vue b/src/components/ItemSlider.vue
index 92fabee..70250ef 100644
--- a/src/components/ItemSlider.vue
+++ b/src/components/ItemSlider.vue
@@ -194,6 +194,10 @@ export default {
.navSlider:hover {
background: rgb(236, 236, 236);
+ background-image: var(--icon-triangle-e-000);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 80%;
}
.navNext {
diff --git a/src/components/Player.vue b/src/components/Player.vue
index eecb165..c5f445e 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -22,6 +22,15 @@
<template>
<div id="app-settings">
+ <div class="playerThumb" />
+ <input
+ class="seek"
+ type="range"
+ name="seek"
+ min="0"
+ max="1"
+ step=".05">
+ <span>Hallo Test</span>
<div
class="wrap"
:class="{ buffering: player.isBuffering }">
@@ -30,22 +39,21 @@
:class="player.isPlaying ? 'pause' : 'play'"
@click="togglePlay" />
</div>
- <div
- class="volumeIcon"
- :class="player.volume == 0 ? 'volumeMute' : 'volumeFull'"
- @click="toggleMute" />
- <input
- class="volume"
- type="range"
- name="volume"
- min="0"
- max="1"
- step=".05"
- :value="player.volume"
- @input="changeVolume($event)"
- @change="saveVolume($event)">
- <div class="playerMetadata">
- {{ player.title }}
+ <div>
+ <div
+ class="volumeIcon"
+ :class="player.volume == 0 ? 'volumeMute' : 'volumeFull'"
+ @click="toggleMute" />
+ <input
+ class="volume"
+ type="range"
+ name="volume"
+ min="0"
+ max="1"
+ step=".05"
+ :value="player.volume"
+ @input="changeVolume($event)"
+ @change="saveVolume($event)">
</div>
</div>
</template>
@@ -76,6 +84,22 @@ export default {
<style>
+ #app-settings {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .playerThumb {
+ width: 200px;
+ height: 200px;
+ background: #ddd;
+ }
+
+ .seek {
+ width: 200px;
+ }
+
.wrap {
background: var(--color-main-background);
border: 3px solid #0082c9;
@@ -121,17 +145,6 @@ export default {
}
}
- .playerMetadata{
- position: relative;
- left: 5px;
- top: -20px;
- width: 203px;
- height: 20px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
.volumeIcon {
width: 25px;
height: 25px;
--
GitLab