MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Responsivity and accessibility fixes

This commit is contained in:
wvffle 2022-11-04 12:44:26 +00:00 committed by Kasper Seweryn
parent ed9cb97ba6
commit 315e5ef766
4 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/scripts/fix-fomantic-css.py
View File

@ -175,6 +175,9 @@ def discard_unused_icons(rule):
".chevron",
".right",
".left",
".compress",
".expand",
".image",
]
if ":before" not in rule["lines"][0]:
return False

98
front/src/components/Queue.vue
View File

@ -62,7 +62,11 @@ const labels = computed(() => ({
previous: $pgettext('*/*/*', 'Previous track'),
next: $pgettext('*/*/*', 'Next track'),
pause: $pgettext('*/*/*', 'Pause'),
play: $pgettext('*/*/*', 'Play')
play: $pgettext('*/*/*', 'Play'),
fullscreen: $pgettext('*/*/*', 'Fullscreen'),
exitFullscreen: $pgettext('*/*/*', 'Exit fullscreen'),
showCoverArt: $pgettext('*/*/*', 'Show cover art'),
showVisualizer: $pgettext('*/*/*', 'Show visualizer')
}))
watchEffect(async () => {
@ -204,41 +208,61 @@ const coverType = ref(CoverType.COVER_ART)
ref="milkdrop"
/>
<div class="cover-buttons">
<button
v-if="coverType === CoverType.COVER_ART"
class="ui secondary button"
@click="coverType = CoverType.MILK_DROP"
<Transition name="queue">
<div
v-if="!fullscreen || !idle"
class="cover-buttons"
>
<i class="icon signal" />
</button>
<button
v-else-if="coverType === CoverType.MILK_DROP"
class="ui secondary button"
@click="coverType = CoverType.COVER_ART"
>
<i class="icon image outline" />
</button>
<button
v-if="!fullscreen"
class="ui secondary button"
@click="enter"
>
<i class="icon expand arrows alternate" />
</button>
</div>
</div>
<button
v-if="coverType === CoverType.COVER_ART"
class="ui secondary button"
:aria-title="labels.showVisualizer"
:title="labels.showVisualizer"
@click="coverType = CoverType.MILK_DROP"
>
<i class="icon signal" />
</button>
<button
v-else-if="coverType === CoverType.MILK_DROP"
class="ui secondary button"
:aria-title="labels.showCoverArt"
:title="labels.showCoverArt"
@click="coverType = CoverType.COVER_ART"
>
<i class="icon image outline" />
</button>
<Transition name="queue">
<div
v-if="fullscreen && (!idle || showTrackInfo)"
class="track-info"
@click="loadRandomPreset()"
>
<h1>{{ currentTrack.title }}</h1>
<h2>{{ currentTrack.artistName }} &mdash; {{ currentTrack.albumTitle }}</h2>
</div>
</Transition>
<button
v-if="!fullscreen"
class="ui secondary button"
:aria-title="labels.fullscreen"
:title="labels.fullscreen"
@click="enter"
>
<i class="icon expand" />
</button>
<button
v-else
class="ui secondary button"
:aria-title="labels.exitFullscreen"
:title="labels.exitFullscreen"
@click="exit"
>
<i class="icon compress" />
</button>
</div>
</Transition>
<Transition name="queue">
<div
v-if="fullscreen && (!idle || showTrackInfo)"
class="track-info"
@click="loadRandomPreset()"
>
<h1>{{ currentTrack.title }}</h1>
<h2>{{ currentTrack.artistName }} &mdash; {{ currentTrack.albumTitle }}</h2>
</div>
</Transition>
</div>
</div>
<h1 class="ui header">
<div class="content ellipsis">
@ -475,9 +499,3 @@ const coverType = ref(CoverType.COVER_ART)
</div>
</section>
</template>
<style scoped>
.icon.image::before {
content: "\f03e";
}
</style>

55
front/src/style/components/_queue.scss
View File

@ -1,10 +1,10 @@
.queue-controls {
@include media("<desktop") {
height: $bottom-player-height;
}
}
.ui.clearing.segment {
background-color: var(--site-background);
box-shadow: var(--secondary-menu-box-shadow);
@ -13,14 +13,14 @@
.queue-enter-active,
.queue-leave-active {
transition: all 0.2s ease;
will-change: transform, opacity;
transition: all 0.2s ease !important;
will-change: transform, opacity !important;
}
.queue-enter-from,
.queue-leave-to {
opacity: 0;
transform: translateY(5vh);
opacity: 0 !important;
transform: translateY(5vh) !important;
}
.component-queue {
@ -292,33 +292,33 @@
.cover-container {
width: 50vh;
max-width: 90%;
display: flex;
&.idle {
cursor: none;
}
&.fullscreen canvas {
transform: translateY(calc(50vh - 50vw));
}
.cover {
height: 0;
width: 100%;
padding-bottom: 100%;
position: relative;
canvas,
img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
margin: 0 auto;
height: 100%;
}
canvas {
aspect-ratio: 1;
}
img {
max-width: 100vh;
max-height: 100vh;
object-fit: contain;
object-position: center;
}
&:hover .cover-buttons {
@ -330,22 +330,33 @@
transform: scale(1.2);
filter: blur(15vh);
border-radius: 22vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.cover-buttons {
position: absolute;
bottom: 1em;
right: 1em;
z-index: 2;
z-index: 3;
display: flex;
flex-direction: row-reverse;
transition: all 0.2s ease-in-out;
opacity: 0;
transform: translateY(0.5em);
pointer-events: none;
@include media(">tablet") {
transition: all 0.2s ease-in-out;
opacity: 0;
transform: translateY(0.5em);
}
button {
z-index: 2;
padding: 0.78571429em;
pointer-events: all;
&:first-child {
margin-right: 0 !important;
@ -369,7 +380,7 @@
.track-info {
position: absolute;
z-index: 3;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;

4
front/yarn.lock
View File

@ -2191,14 +2191,14 @@ buntis@0.2.1:
resolved "https://registry.yarnpkg.com/buntis/-/buntis-0.2.1.tgz#a043aabc7d64f2243bfaa53e34e999c2dd790e82"
integrity sha512-5wszfQlsqJmZrfxpPkO5yQcEoBAmfUYlXxXU/IM6PhPZ8DMnMMJQ9rvAHfe5WZmnB6E1IoJYylFfTaf1e2FJbQ==
butterchurn-presets@^3.0.0-beta.4:
butterchurn-presets@3.0.0-beta.4:
version "3.0.0-beta.4"
resolved "https://registry.yarnpkg.com/butterchurn-presets/-/butterchurn-presets-3.0.0-beta.4.tgz#393d3f7863d546bdef2c52aec90da76bdbcacd3b"
integrity sha512-TbQLUPvGOYMZAtWKoCmBtludh9aQZ6NaMGQU4lvPeadBPy3Du3yNmwBjlTMLP5c5mRWElxQPjTL1PtR7FZK3OQ==
dependencies:
"@babel/runtime" "^7.12.5"
butterchurn@^3.0.0-beta.4:
butterchurn@3.0.0-beta.4:
version "3.0.0-beta.4"
resolved "https://registry.yarnpkg.com/butterchurn/-/butterchurn-3.0.0-beta.4.tgz#f459d8b81decd4f28f4c90b5c0fc40611ad3d86f"
integrity sha512-hiY1ktHYHQ8MT65nnZi7GjrgZZ6sl/ipT5rBqEfaYJd90L4SvOtB6lVxtKadtzAyJo2TQJc4gJfEca4cpZo0DA==