jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix overflow after adding volume control

Browse Source
This commit is contained in:
Thomas Amland 2021-01-31 18:24:23 +01:00
parent 8b4c482efa
commit 84d62f4eee
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/player/Player.vue
View File

@ -47,32 +47,31 @@
<!-- Controls right ---> <!-- Controls right --->
<div class="col-auto col-sm p-0"> <div class="col-auto col-sm p-0">
<div class="d-flex flex-nowrap justify-content-end pr-3"> <div class="d-flex flex-nowrap justify-content-end pr-3">
<div class="m-0 d-none d-sm-inline-flex align-items-center pr-3"> <div class="m-0 d-none d-md-inline-flex align-items-center">
<b-button variant="link" @click="toggleMute"> <b-button variant="link" @click="toggleMute">
<Icon :icon="muteActive ? 'volume-mute-fill' : 'volume-up-fill'" /> <Icon :icon="muteActive ? 'volume-mute-fill' : 'volume-up-fill'" />
</b-button> </b-button>
<b-form-input type="range" min="0" max="1" step="0.05" style="width: 130px" <b-form-input type="range" min="0" max="1" step="0.05"
style="width: 120px; min-width: 0; padding-right: 0.75rem"
:title="`Volume: ${Math.round(volume * 100)}%`" :title="`Volume: ${Math.round(volume * 100)}%`"
:value="muteActive ? 0.0 : volume" @input="setVolume" /> :value="muteActive ? 0.0 : volume" @input="setVolume" />
</div>
<b-button variant="link" <b-button variant="link"
class="m-0 d-none d-sm-inline-block " class="m-0" :class="{ 'text-primary': shuffleActive }"
:class="{ 'text-primary': shuffleActive }"
@click="toggleShuffle"> @click="toggleShuffle">
<Icon icon="shuffle" /> <Icon icon="shuffle" />
</b-button> </b-button>
<b-button variant="link" <b-button variant="link"
class="m-0 d-none d-sm-inline-block " class="m-0" :class="{ 'text-primary': repeatActive }"
:class="{ 'text-primary': repeatActive }"
@click="toggleRepeat"> @click="toggleRepeat">
<Icon icon="arrow-repeat" /> <Icon icon="arrow-repeat" />
</b-button> </b-button>
<OverflowMenu class="d-sm-none"> </div>
<OverflowMenu class="d-md-none">
<b-dropdown-text> <b-dropdown-text>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong>Volume</strong> <strong>Volume</strong>
<b-form-input <b-form-input
class="px-2" style="width: 175px" class="px-2" style="width: 120px"
type="range" min="0" max="1" step="0.05" type="range" min="0" max="1" step="0.05"
:value="volume" @input="setVolume" :value="volume" @input="setVolume"
/> />