Commit cb89f31c authored by Agate's avatar Agate 💬

Merge branch 'themev2' into 'develop'

New theming system

See merge request funkwhale/funkwhale!1125
parents c505f6ff 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:
......
......@@ -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
^^^^^^^^^^^^^
......
/* 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
/* Project specific Javascript goes here. */
// 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;
}
......@@ -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",
......
......@@ -30,7 +30,7 @@
#orange-square {
width: 56px;
height: 56px;
background-color: #f2711c
background-color: #f2711c;
}
#fake-content {
height: 100vh;
......
This diff is collapsed.
#!/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
......@@ -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>
<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>
......@@ -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>
......
<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 @@