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", ".chevron",
".right", ".right",
".left", ".left",
".compress",
".expand",
".image",
] ]
if ":before" not in rule["lines"][0]: if ":before" not in rule["lines"][0]:
return False return False

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

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

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

@ -1,10 +1,10 @@
.queue-controls { .queue-controls {
@include media("<desktop") { @include media("<desktop") {
height: $bottom-player-height; height: $bottom-player-height;
} }
} }
.ui.clearing.segment { .ui.clearing.segment {
background-color: var(--site-background); background-color: var(--site-background);
box-shadow: var(--secondary-menu-box-shadow); box-shadow: var(--secondary-menu-box-shadow);
@ -13,14 +13,14 @@
.queue-enter-active, .queue-enter-active,
.queue-leave-active { .queue-leave-active {
transition: all 0.2s ease; transition: all 0.2s ease !important;
will-change: transform, opacity; will-change: transform, opacity !important;
} }
.queue-enter-from, .queue-enter-from,
.queue-leave-to { .queue-leave-to {
opacity: 0; opacity: 0 !important;
transform: translateY(5vh); transform: translateY(5vh) !important;
} }
.component-queue { .component-queue {
@ -292,33 +292,33 @@
.cover-container { .cover-container {
width: 50vh; width: 50vh;
max-width: 90%; max-width: 90%;
display: flex;
&.idle { &.idle {
cursor: none; cursor: none;
} }
&.fullscreen canvas {
transform: translateY(calc(50vh - 50vw));
}
.cover { .cover {
height: 0;
width: 100%; width: 100%;
padding-bottom: 100%;
position: relative; position: relative;
canvas, canvas,
img { img {
height: 100%;
width: 100%; width: 100%;
position: absolute; height: 100%;
top: 0; }
left: 0;
bottom: 0; canvas {
right: 0; aspect-ratio: 1;
z-index: 1;
margin: 0 auto;
} }
img { img {
max-width: 100vh; object-fit: contain;
max-height: 100vh; object-position: center;
} }
&:hover .cover-buttons { &:hover .cover-buttons {
@ -330,22 +330,33 @@
transform: scale(1.2); transform: scale(1.2);
filter: blur(15vh); filter: blur(15vh);
border-radius: 22vh; border-radius: 22vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
} }
.cover-buttons { .cover-buttons {
position: absolute; position: absolute;
bottom: 1em; bottom: 1em;
right: 1em; right: 1em;
z-index: 2; z-index: 3;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
transition: all 0.2s ease-in-out; pointer-events: none;
opacity: 0;
transform: translateY(0.5em); @include media(">tablet") {
transition: all 0.2s ease-in-out;
opacity: 0;
transform: translateY(0.5em);
}
button { button {
z-index: 2; z-index: 2;
padding: 0.78571429em; padding: 0.78571429em;
pointer-events: all;
&:first-child { &:first-child {
margin-right: 0 !important; margin-right: 0 !important;
@ -369,7 +380,7 @@
.track-info { .track-info {
position: absolute; position: absolute;
z-index: 3; z-index: 2;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; 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" resolved "https://registry.yarnpkg.com/buntis/-/buntis-0.2.1.tgz#a043aabc7d64f2243bfaa53e34e999c2dd790e82"
integrity sha512-5wszfQlsqJmZrfxpPkO5yQcEoBAmfUYlXxXU/IM6PhPZ8DMnMMJQ9rvAHfe5WZmnB6E1IoJYylFfTaf1e2FJbQ== integrity sha512-5wszfQlsqJmZrfxpPkO5yQcEoBAmfUYlXxXU/IM6PhPZ8DMnMMJQ9rvAHfe5WZmnB6E1IoJYylFfTaf1e2FJbQ==
butterchurn-presets@^3.0.0-beta.4: butterchurn-presets@3.0.0-beta.4:
version "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" resolved "https://registry.yarnpkg.com/butterchurn-presets/-/butterchurn-presets-3.0.0-beta.4.tgz#393d3f7863d546bdef2c52aec90da76bdbcacd3b"
integrity sha512-TbQLUPvGOYMZAtWKoCmBtludh9aQZ6NaMGQU4lvPeadBPy3Du3yNmwBjlTMLP5c5mRWElxQPjTL1PtR7FZK3OQ== integrity sha512-TbQLUPvGOYMZAtWKoCmBtludh9aQZ6NaMGQU4lvPeadBPy3Du3yNmwBjlTMLP5c5mRWElxQPjTL1PtR7FZK3OQ==
dependencies: dependencies:
"@babel/runtime" "^7.12.5" "@babel/runtime" "^7.12.5"
butterchurn@^3.0.0-beta.4: butterchurn@3.0.0-beta.4:
version "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" resolved "https://registry.yarnpkg.com/butterchurn/-/butterchurn-3.0.0-beta.4.tgz#f459d8b81decd4f28f4c90b5c0fc40611ad3d86f"
integrity sha512-hiY1ktHYHQ8MT65nnZi7GjrgZZ6sl/ipT5rBqEfaYJd90L4SvOtB6lVxtKadtzAyJo2TQJc4gJfEca4cpZo0DA== integrity sha512-hiY1ktHYHQ8MT65nnZi7GjrgZZ6sl/ipT5rBqEfaYJd90L4SvOtB6lVxtKadtzAyJo2TQJc4gJfEca4cpZo0DA==