thm/noise-maker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move channel title to top; fix vertical range input layout

Browse source
This commit is contained in:
Tomáš Mládek 2020-01-11 10:59:55 +01:00
parent 3ae972d09e
commit e05a203867
1 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Channel.vue
View file

@ -1,14 +1,12 @@
<template> <template>
<div :class="['channel', `channel-${loadingState}`]"> <div :class="['channel', `channel-${loadingState}`]">
<div class="name">{{name}}</div>
<div class="volume-wrapper"> <div class="volume-wrapper">
<!--suppress HtmlFormInputWithoutLabel --> <!--suppress HtmlFormInputWithoutLabel -->
<input class="volume" :disabled="loadingState === 'unloaded'" <input class="volume" :disabled="loadingState === 'unloaded'"
type="range" min="0" max="100" v-model="volume"/> type="range" min="0" max="100" v-model="volume"/>
</div> </div>
<div class="description"> <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
<div class="name">{{name}}</div>
<div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
</div>
<div class="youtube-player" ref="ytpl"/> <div class="youtube-player" ref="ytpl"/>
</div> </div>
</template> </template>
@ -177,27 +175,28 @@ export default class Channel extends Vue {
background: lightgray; background: lightgray;
} }
.volume-wrapper { .volume-wrapper {
--height: 180px; --height: 180px;
--width: 30px; --width: 30px;
height: var(--height); height: var(--height);
width: var(--width); width: var(--width);
display: block; display: flex;
align-items: center;
} }
.volume { .volume {
position: relative; position: relative;
width: var(--height); width: var(--height);
height: var(--width); height: var(--width);
top: calc(var(--height) / 2);
left: calc(var(--height) / 2 * -1 + var(--width) / 2); left: calc(var(--height) / 2 * -1 + var(--width) / 2);
transform: rotate(270deg); transform: rotate(270deg);
margin: 0;
} }
.name { .name {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding: 2px 0;
} }
.title { .title {