Skip to content
Snippets Groups Projects
Commit cd422832 authored by Agate's avatar Agate :speech_balloon:
Browse files

New theming system

parent c505f6ff
Branches
Tags
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 965 additions and 613 deletions
.gitlab-ci.yml
+ 1
− 1
View file @ cd422832
......@@ -108,7 +108,7 @@ flake8:
variables:
GIT_STRATEGY: fetch
before_script:
- pip install flake8
- pip install 'flake8<3.7'
script:
- flake8 -v api
cache:
......
CONTRIBUTING.rst
+ 15
− 0
View file @ cd422832
......@@ -704,6 +704,21 @@ Views: you can find some readable views tests in file: ``api/tests/users/test_vi
Contributing to the front-end
-----------------------------
Styles and themes
^^^^^^^^^^^^^^^^^
Our UI framework is Fomantic UI (https://fomantic-ui.com/), and Funkwhale's custom styles are written in SCSS. All the styles are configured in ``front/src/styles/_main.scss``,
including imporing of Fomantic UI styles and components.
We're applying several changes on top of the Fomantic CSS files, before they are imported:
1. Many hardcoded color values are replaced by CSS vars: e.g ``color: orange`` is replaced by ``color: var(--vibrant-color)``. This makes theming way easier.
2. Unused components variations and icons are stripped from the source files, in order to reduce the final size of our CSS files
This changes are applied automatically when running ``yarn install``, through a ``postinstall`` hook. Internally, ``front/scripts/fix-fomantic-css.py`` is called
and handle both kind of modifications. Please refer to this script if you need to use new icons to the project, or restore some components variations that
were stripped in order to use them.
Running tests
^^^^^^^^^^^^^
......
api/funkwhale_api/static/css/project.css deleted 100644 → 0
+ 0
− 38
View file @ c505f6ff
/* These styles are generated from project.scss. */
.alert-debug {
color: black;
background-color: white;
border-color: #d6e9c6;
}
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
/* This is a fix for the bootstrap4 alpha release */
@media (max-width: 47.9em) {
.navbar-nav .nav-item {
float: none;
width: 100%;
display: inline-block;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.nav.navbar-nav.pull-right {
float: none !important;
}
}
/* Display django-debug-toolbar.
See https://github.com/django-debug-toolbar/django-debug-toolbar/issues/742
and https://github.com/pydanny/cookiecutter-django/issues/317
*/
[hidden][style="display: block;"] {
display: block !important;
}
\ No newline at end of file
api/funkwhale_api/static/fonts/.gitkeep deleted 100644 → 0
+ 0
− 0
View file @ c505f6ff
api/funkwhale_api/static/images/favicon.ico deleted 100644 → 0
+ 0
− 0
View file @ c505f6ff
api/funkwhale_api/static/images/favicon.ico

8.15 KiB

api/funkwhale_api/static/js/project.js deleted 100644 → 0
+ 0
− 1
View file @ c505f6ff
/* Project specific Javascript goes here. */
api/funkwhale_api/static/sass/project.scss deleted 100644 → 0
+ 0
− 51
View file @ c505f6ff
// project specific CSS goes here
// Alert colors
$white: #fff;
$mint-green: #d6e9c6;
$black: #000;
$pink: #f2dede;
$dark-pink: #eed3d7;
$red: #b94a48;
// bootstrap alert CSS, translated to the django-standard levels of
// debug, info, success, warning, error
.alert-debug {
background-color: $white;
border-color: $mint-green;
color: $black;
}
.alert-error {
background-color: $pink;
border-color: $dark-pink;
color: $red;
}
// This is a fix for the bootstrap4 alpha release
@media (max-width: 47.9em) {
.navbar-nav .nav-item {
display: inline-block;
float: none;
width: 100%;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.nav.navbar-nav.pull-right {
float: none !important;
}
}
// Display django-debug-toolbar.
// See https://github.com/django-debug-toolbar/django-debug-toolbar/issues/742
// and https://github.com/pydanny/cookiecutter-django/issues/317
[hidden][style="display: block;"] {
display: block !important;
}
front/package.json
+ 4
− 2
View file @ cd422832
......@@ -10,7 +10,9 @@
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"i18n-compile": "scripts/i18n-compile.sh",
"i18n-extract": "scripts/i18n-extract.sh"
"i18n-extract": "scripts/i18n-extract.sh",
"fix-fomantic-css": "scripts/fix-fomantic-css.sh",
"postinstall": "yarn run fix-fomantic-css"
},
"dependencies": {
"axios": "^0.18.0",
......@@ -25,6 +27,7 @@
"qs": "^6.7.0",
"register-service-worker": "^1.6.2",
"sanitize-html": "^1.20.1",
"sass": "^1.26.5",
"showdown": "^1.8.6",
"text-clipper": "^1.3.0",
"vue": "^2.6.10",
......@@ -54,7 +57,6 @@
"glob-all": "^3.1.0",
"mocha": "^5.2.0",
"moxios": "^0.4.0",
"node-sass": "^4.9.3",
"preload-webpack-plugin": "^3.0.0-beta.4",
"purgecss-webpack-plugin": "^1.6.0",
"sass-loader": "^8.0.2",
......
front/public/index.html
+ 1
− 1
View file @ cd422832
......@@ -30,7 +30,7 @@
#orange-square {
width: 56px;
height: 56px;
background-color: #f2711c
background-color: #f2711c;
}
#fake-content {
height: 100vh;
......
front/scripts/fix-fomantic-css.py 0 → 100755
+ 897
− 0
View file @ cd422832
This diff is collapsed.
front/scripts/fix-fomantic-css.sh 0 → 100755
+ 8
− 0
View file @ cd422832
#!/bin/bash -eux
find node_modules/fomantic-ui-css/components -name "*.min.css" -delete
mkdir -p node_modules/fomantic-ui-css/tweaked
echo 'Removing google font…'
sed -i '/@import url(/d' node_modules/fomantic-ui-css/components/site.css
echo "Replacing hardcoded values by CSS vars…"
scripts/fix-fomantic-css.py node_modules/fomantic-ui-css node_modules/fomantic-ui-css/tweaked
front/src/App.vue
+ 0
− 190
View file @ cd422832
......@@ -444,194 +444,4 @@ export default {
<style lang="scss">
@import "style/_main";
.ui.bottom-player {
z-index: 999999;
width: 100%;
width: 100vw;
.ui.top.attached.progress {
top: 0;
}
}
.dimmed {
.ui.bottom-player {
@include media("<desktop") {
z-index: 0;
}
}
}
#app.queue-focused {
.queue-not-focused {
@include media("<desktop") {
display: none;
}
}
}
.when-queue-focused {
.group {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1em;
> * {
margin-left: 0.5em;
}
}
@include media("<desktop") {
width: 100%;
justify-content: space-between !important;
}
}
#app:not(.queue-focused) {
.when-queue-focused {
@include media("<desktop") {
display: none;
}
}
}
.ui.bottom-player > .segment.fixed-controls {
width: 100%;
width: 100vw;
border-radius: 0;
padding: 0em;
position: fixed;
bottom: 0;
left: 0;
margin: 0;
z-index: 1001;
height: $bottom-player-height;
.controls-row {
height: $bottom-player-height;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
@include media(">desktop") {
padding: 0 1em;
justify-content: space-around;
}
}
cursor: pointer;
.indicating.progress {
overflow: hidden;
}
.ui.progress .bar {
transition: none;
}
.ui.progress .buffer.bar {
position: absolute;
}
@keyframes MOVE-BG {
from {
transform: translateX(0px);
}
to {
transform: translateX(46px);
}
}
.discrete.link {
color: inherit;
}
.indicating.progress .bar {
left: -46px;
width: 200% !important;
color: grey;
background: repeating-linear-gradient(
-55deg,
grey 1px,
grey 10px,
transparent 10px,
transparent 20px
) !important;
animation-name: MOVE-BG;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) {
background: #ff851b;
min-width: 0;
}
.track-controls {
display: flex;
align-items: center;
justify-content: start;
flex-grow: 1;
.image {
padding: 0.5em;
width: auto;
margin-right: 0.5em;
> img {
max-height: 3.7em;
max-width: 4.7em;
}
}
}
.controls {
min-width: 8em;
font-size: 1.1em;
@include media(">desktop") {
&:not(.fluid) {
width: 20%;
}
&.queue-controls {
width: 32.5%;
}
&.progress-controls {
width: 10%;
}
&.player-controls {
width: 15%;
}
}
&.small, .small {
@include media(">desktop") {
font-size: 0.9em;
}
}
.icon {
font-size: 1.1em;
}
.icon.large {
font-size: 1.4em;
}
&:not(.track-controls) {
@include media(">desktop") {
line-height: 1em;
}
justify-content: center;
align-items: center;
&.align-right {
justify-content: flex-end;
}
&.align-left {
justify-content: flex-start;
}
> * {
padding: 0.5em;
}
}
&.player-controls {
.icon {
margin: 0;
}
}
}
}
.queue-enter-active, .queue-leave-active {
transition: all 0.2s ease-in-out;
.current-track, .queue-column {
opacity: 0;
}
}
.queue-enter, .queue-leave-to {
transform: translateY(100vh);
opacity: 0;
}
</style>
front/src/components/About.vue
+ 7
− 42
View file @ cd422832
<template>
<main class="main pusher">
<main class="main pusher page-about">
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content">
<h1 class="ui center aligned large header">
......@@ -173,22 +173,22 @@
<translate translate-context="Content/Home/Header">Statistics</translate>
</h3>
<p>
<i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
<i class="user really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
</p>
<p>
<i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
<i class="music really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
</p>
<p v-if="stats.artists">
<i class="users grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
<i class="users really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
</p>
<p v-if="stats.albums">
<i class="headphones grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
<i class="headphones really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
</p>
<p v-if="stats.tracks">
<i class="file grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
<i class="file really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
</p>
<p v-if="stats.listenings">
<i class="play grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
<i class="play really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
</p>
</template>
</div>
......@@ -285,38 +285,3 @@ export default {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ui.list .list.icon {
padding: 0;
}
h1.header, h1 .sub.header {
text-shadow: 0 2px 0 rgba(0,0,0,.8);
color: #fff !important;
}
h1.ui.header {
font-size: 3em;
}
h1.ui.header .sub.header {
font-size: 0.8em;
}
.main.pusher {
margin-top: 0;
min-height: 10em;
}
section.segment.head {
padding: 8em 3em;
background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
background-repeat: no-repeat;
background-size: cover;
}
#pod {
font-size: 110%;
display: block;
}
</style>
front/src/components/Footer.vue
+ 17
− 17
View file @ cd422832
......@@ -9,16 +9,16 @@
<h4 v-else class="ui header ellipsis">
<span v-translate="{instanceUrl: instanceHostname}" translate-context="Footer/About/Title">About %{instanceUrl}</span>
</h4>
<div class="ui link list">
<router-link class="item" to="/about">
<div class="ui list">
<router-link class="link item" to="/about">
<translate translate-context="Footer/About/List item.Link">About page</translate>
</router-link>
<a v-if="version" class="item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
<a v-if="version" class="link item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
<translate translate-context="Footer/*/List item" :translate-params="{version: version}" >Version %{version}</translate>
</a>
<div role="button" class="item" @click="$emit('show:set-instance-modal')" >
<a role="button" class="link item" @click.prevent="$emit('show:set-instance-modal')" >
<translate translate-context="Footer/*/List item.Link">Use another instance</translate>
</div>
</a>
</div>
<div class="ui form">
<div class="ui field">
......@@ -31,10 +31,10 @@
</section>
<section class="four wide column">
<h4 v-translate class="ui header" translate-context="Footer/*/Title">Using Funkwhale</h4>
<div class="ui link list">
<a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
<a href="https://funkwhale.audio/apps" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
<div role="button" class="item" @click="$emit('show:shortcuts-modal')"><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></div>
<div class="ui list">
<a href="https://docs.funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
<a href="https://funkwhale.audio/apps" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
<a role="button" class="link item" @click.prevent="$emit('show:shortcuts-modal')"><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></a>
</div>
<div class="ui form">
<div class="ui field">
......@@ -47,18 +47,18 @@
</section>
<section class="four wide column">
<h4 v-translate translate-context="Footer/*/Link" class="ui header">Getting help</h4>
<div class="ui link list">
<a href="https://governance.funkwhale.audio/g/kQgxNq15/funkwhale" class="item" target="_blank"><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
<a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
<div class="ui list">
<a href="https://governance.funkwhale.audio/g/kQgxNq15/funkwhale" class="link item" target="_blank"><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
<a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
</div>
</section>
<section class="four wide column">
<h4 v-translate class="ui header" translate-context="Footer/*/Title/Short">About Funkwhale</h4>
<div class="ui link list">
<a href="https://funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
<a href="https://contribute.funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
<div class="ui list">
<a href="https://funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
<a href="https://contribute.funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
</div>
<div class="ui hidden divider"></div>
<p>
......
front/src/components/Home.vue
+ 8
− 44
View file @ cd422832
<template>
<main class="main pusher" v-title="labels.title">
<main class="main pusher page-home" v-title="labels.title">
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content">
<h1 class="ui center aligned large header">
......@@ -32,7 +32,7 @@
<div v-if="truncatedDescription" class="ui hidden divider"></div>
<div class="ui relaxed list">
<div class="item" v-if="truncatedDescription">
<i class="arrow right grey icon"></i>
<i class="arrow right icon"></i>
<div class="content">
<router-link class="ui link" :to="{name: 'about'}">
<translate translate-context="Content/Home/Link">Learn more</translate>
......@@ -40,7 +40,7 @@
</div>
</div>
<div class="item" v-if="rules">
<i class="book open grey icon"></i>
<i class="book open icon"></i>
<div class="content">
<router-link class="ui link" v-if="rules" :to="{name: 'about', hash: '#rules'}">
<translate translate-context="Content/Home/Link">Server rules</translate>
......@@ -56,10 +56,10 @@
<translate translate-context="Content/Home/Header">Statistics</translate>
</h3>
<p>
<i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
<i class="user icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
</p>
<p>
<i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
<i class="music icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
</p>
</template>
......@@ -67,7 +67,7 @@
<h3 class="sub header">
<translate translate-context="Content/Home/Header/Name">Contact</translate>
</h3>
<i class="at grey icon"></i>
<i class="at icon"></i>
<a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
</template>
......@@ -98,7 +98,7 @@
<h3 class="header">
<translate translate-context="Head/Login/Title">Log In</translate>
</h3>
<login-form button-classes="basic green" :show-signup="false"></login-form>
<login-form button-classes="basic success" :show-signup="false"></login-form>
<div class="ui hidden clearing divider"></div>
</div>
<div class="four wide column">
......@@ -112,7 +112,7 @@
<p v-if="defaultUploadQuota">
<translate translate-context="Content/Home/Paragraph" :translate-params="{quota: humanSize(defaultUploadQuota * 1000 * 1000)}">Users on this pod also get %{ quota } of free storage to upload their own content!</translate>
</p>
<signup-form button-classes="basic green" :show-login="false"></signup-form>
<signup-form button-classes="basic success" :show-login="false"></signup-form>
</template>
<div v-else>
<p translate-context="Content/Home/Paragraph">Registrations are closed on this pod. You can signup on another pod using the link below.</p>
......@@ -288,39 +288,3 @@ export default {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../style/vendor/media";
.ui.list .list.icon {
padding: 0;
}
h1.header, h1 .sub.header {
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
color: #fff !important;
}
h1.ui.header {
@include media(">tablet") {
font-size: 3em;
}
}
h1.ui.header .sub.header {
font-size: 0.8em;
}
.main.pusher {
margin-top: 0;
min-height: 10em;
}
section.segment.head {
padding: 8em 3em;
background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
background-repeat: no-repeat;
background-size: cover;
}
#pod {
font-size: 110%;
display: block;
}
</style>
front/src/components/PageNotFound.vue
+ 0
− 4
View file @ cd422832
......@@ -36,7 +36,3 @@ export default {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
front/src/components/Pagination.vue
+ 1
− 8
View file @ cd422832
<template>
<div v-if='maxPage > 1' class="ui pagination menu" role="navigation" :aria-label="labels.pagination">
<div v-if='maxPage > 1' class="ui pagination menu component-pagination" role="navigation" :aria-label="labels.pagination">
<a href
:disabled="current - 1 < 1"
@click.prevent.stop="selectPage(current - 1)"
......@@ -95,10 +95,3 @@ export default {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ui.pagination.menu .item {
cursor: pointer;
}
</style>
front/src/components/Queue.vue
+ 6
− 207
View file @ cd422832
<template>
<section class="main with-background" :aria-label="labels.queue">
<section class="main with-background component-queue" :aria-label="labels.queue">
<div :class="['ui vertical stripe queue segment', playerFocused ? 'player-focused' : '']">
<div class="ui fluid container">
<div class="ui stackable grid" id="queue-grid">
<div class="ui six wide column current-track">
<div class="ui six wide column current-track">
<div class="ui basic segment" id="player">
<template v-if="currentTrack">
<img class="ui image" v-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.square_crop)">
......@@ -55,7 +55,7 @@
<div class="progress-area" v-if="currentTrack && !errored">
<div
ref="progress"
:class="['ui', 'small', 'orange', {'indicating': isLoadingAudio}, 'progress']"
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
@click="touchProgress">
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
<div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
......@@ -64,7 +64,7 @@
<div class="progress-area" v-else>
<div
ref="progress"
:class="['ui', 'small', 'orange', 'progress']">
:class="['ui', 'small', 'vibrant', 'progress']">
<div class="buffer bar"></div>
<div class="position bar"></div>
</div>
......@@ -124,7 +124,7 @@
</template>
</div>
</div>
<div class="ui sixteen wide mobile ten wide computer column queue-column">
<div class="ui ten wide column queue-column">
<div class="ui basic clearing fixed-header segment">
<h2 class="ui header">
<div class="content">
......@@ -155,7 +155,7 @@
:key="index"
:class="['queue-item', {'active': index === queue.currentIndex}]">
<td class="handle">
<i class="grip lines grey icon"></i>
<i class="grip lines icon"></i>
</td>
<td class="image-cell" @click="$store.dispatch('queue/currentIndex', index)">
<img class="ui mini image" v-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.square_crop)">
......@@ -374,204 +374,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
@import "../style/vendor/media";
.main {
position: absolute;
min-height: 100vh;
width: 100vw;
z-index: 1000;
padding-bottom: 3em;
}
.main > .button {
position: fixed;
top: 1em;
right: 1em;
z-index: 9999999;
@include media("<desktop") {
display: none;
}
}
.queue.segment:not(.player-focused) {
#player {
@include media("<desktop") {
height: 0;
display: none;
}
}
}
.queue.segment #player {
padding: 0em;
> * {
padding: 0.5em;
}
}
.player-focused .grid > .ui.queue-column {
@include media("<desktop") {
display: none;
}
}
.queue-column {
overflow-y: auto;
}
.queue-column .table {
margin-top: 4em !important;
margin-bottom: 4rem;
}
.ui.table > tbody > tr > td.controls {
text-align: right;
}
.ui.table > tbody > tr > td {
border: none;
}
td:first-child {
padding-left: 1em !important;
}
td:last-child {
padding-right: 1em !important;
}
.image-cell {
width: 4em;
}
.queue.segment {
@include media("<desktop") {
padding: 0;
}
> .container {
margin: 0 !important;
}
}
.handle {
@include media("<desktop") {
display: none;
}
}
.duration-cell {
@include media("<tablet") {
display: none;
}
}
.fixed-header {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 9;
@include media("<desktop") {
padding: 1em;
}
@include media(">desktop") {
right: 1em;
left: 38%;
}
.header .content {
display: block;
}
}
.current-track #player {
font-size: 1.8em;
padding: 1em;
text-align: center;
display: flex;
position: fixed;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
bottom: 0;
top: 0;
width: 32%;
@include media("<desktop") {
padding: 0.5em;
font-size: 1.5em;
width: 100%;
width: 100vw;
left: 0;
right: 0;
> .image {
max-height: 50vh;
}
}
> *:not(.image) {
width: 100%;
}
h1 {
margin: 0;
min-height: auto;
}
}
.progress-area {
overflow: hidden;
}
.progress-wrapper, .warning.message {
max-width: 25em;
margin: 0 auto;
}
.ui.progress .buffer.bar {
position: absolute;
background-color: rgba(255, 255, 255, 0.15);
}
.ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) {
background: #ff851b;
}
.indicating.progress .bar {
left: -46px;
width: 200% !important;
color: grey;
background: repeating-linear-gradient(
-55deg,
grey 1px,
grey 10px,
transparent 10px,
transparent 20px
) !important;
animation-name: MOVE-BG;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.ui.progress {
margin: 0.5rem 0;
}
.timer {
font-size: 0.7em;
}
.progress {
cursor: pointer;
.bar {
min-width: 0 !important;
}
}
.player-controls {
.control:not(:first-child) {
margin-left: 1em;
}
.icon {
font-size: 1.1em;
}
}
.handle {
cursor: grab;
}
.sortable-chosen {
cursor: grabbing;
}
.queue-item.sortable-ghost {
td {
border-top: 3px dashed rgba(0, 0, 0, 0.15) !important;
border-bottom: 3px dashed rgba(0, 0, 0, 0.15) !important;
&:first-child {
border-left: 3px dashed rgba(0, 0, 0, 0.15) !important;
}
&:last-child {
border-right: 3px dashed rgba(0, 0, 0, 0.15) !important;
}
}
}
</style>
front/src/components/SetInstanceModal.vue
+ 0
− 3
View file @ cd422832
......@@ -142,6 +142,3 @@ export default {
},
}
</script>
<style scoped>
</style>
front/src/components/ShortcutsModal.vue
+ 0
− 4
View file @ cd422832
......@@ -157,7 +157,3 @@ export default {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment