danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: removed some classes and ids; style: added typography.css; style: added vendor folder; wip: BaseAccordion component

This commit is contained in:
Roberto Tonino 2020-11-07 19:00:34 +01:00
parent b8fbdcc9b3
commit 81f8ed0899
25 changed files with 400 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

5
src/app.js
View File

@ -5,12 +5,13 @@ window.vol = {
preview_max_volume: 100
}
import '@/styles/css/material-icons.css'
import '@/styles/css/OpenSans.css'
import '@/styles/vendor/material-icons.css'
import '@/styles/vendor/OpenSans.css'
import '@/styles/scss/style.scss'
import '@/styles/css/components.css'
import '@/styles/css/helpers.css'
import '@/styles/css/typography.css'
import App from '@/App.vue'
import i18n from '@/plugins/i18n'

2
src/components/TheSearchBar.vue
View File

@ -100,7 +100,6 @@ input[type='search']::-webkit-search-cancel-button {
<script>
import { isValidURL } from '@/utils/utils'
import { sendAddToQueue } from '@/utils/downloads'
import EventBus from '@/utils/EventBus'
import { socket } from '@/utils/socket'
export default {
@ -159,7 +158,6 @@ export default {
this.$root.$emit('QualityModal:open', term)
} else {
if (isShowingAnalyzer) {
// EventBus.$emit('linkAnalyzerTab:reset')
socket.emit('analyzeLink', term)
} else {
// ? Open downloads tab ?

33
src/components/globals/BaseAccordion.vue Normal file
View File

@ -0,0 +1,33 @@
<template functional>
<details :class="{ 'with-arrow': props.withArrow }">
<summary class="mb-6 cursor-pointer">
<slot name="title">Setting</slot>
</summary>
<slot name="default">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos distinctio sint culpa, recusandae vel fugit esse hic
tenetur autem. Debitis.
</slot>
</details>
</template>
<style>
details > summary::-webkit-details-marker {
display: none;
}
details.with-arrow > summary::-webkit-details-marker {
display: initial;
}
</style>
<script>
export default {
props: {
withArrow: {
type: Boolean,
default: false
}
}
}
</script>

10
src/components/globals/CoverContainer.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="relative cover_container group">
<div class="relative cover-container group">
<img
aria-hidden="true"
class="block w-full opacity-100 coverart"
:class="{ rounded: isRounded, circle: isCircle }"
:class="{ rounded: isRounded, 'rounded-full': isCircle }"
:src="cover"
/>
@ -21,7 +21,11 @@
</template>
<style lang="scss" scoped>
.cover_container {
.cover-container {
width: 156px;
height: 156px;
margin-bottom: 10px;
.coverart {
backface-visibility: hidden;
transition: 0.5s ease;

10
src/components/pages/Charts.vue
View File

@ -3,7 +3,7 @@
<h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
<div v-if="country === ''">
<div class="release_grid charts_grid">
<div class="release-grid">
<div
v-for="release in countries"
role="button"
@ -31,16 +31,14 @@
{{ track.position }}
</td>
<td class="table__icon table__icon--big">
<a
href="#"
<span
@click="playPausePreview"
class="rounded"
:class="{ 'single-cover': track.preview }"
class="relative inline-block rounded cursor-pointer"
:data-preview="track.preview"
>
<PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</span>
</td>
<td class="table__cell--large">
{{

15
src/components/pages/Favorites.vue
View File

@ -33,7 +33,7 @@
<div v-if="playlists.length == 0">
<h1>{{ $t('favorites.noPlaylists') }}</h1>
</div>
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<div class="release-grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<div class="release" v-for="release in playlists" :key="release.id">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
@ -72,7 +72,7 @@
<div v-if="albums.length == 0">
<h1>{{ $t('favorites.noAlbums') }}</h1>
</div>
<div class="release_grid" v-if="albums.length > 0">
<div class="release-grid" v-if="albums.length > 0">
<router-link
tag="div"
class="release clickable"
@ -91,7 +91,7 @@
<div v-if="artists.length == 0">
<h1>{{ $t('favorites.noArtists') }}</h1>
</div>
<div class="release_grid" v-if="artists.length > 0">
<div class="release-grid" v-if="artists.length > 0">
<router-link
tag="div"
class="release clickable"
@ -115,17 +115,14 @@
{{ track.position }}
</td>
<td>
<a
href="#"
class="rounded"
:class="{ 'single-cover': !!track.preview }"
<span
class="relative inline-block rounded cursor-pointer"
@click="playPausePreview"
:data-preview="track.preview"
>
<PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</span>
</td>
<td class="table__cell--large">
{{

4
src/components/pages/Home.vue
View File

@ -11,7 +11,7 @@
<section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
<div class="release_grid">
<div class="release-grid">
<router-link
tag="div"
v-for="release in playlists"
@ -37,7 +37,7 @@
<section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
<div class="release_grid">
<div class="release-grid">
<router-link
tag="div"
v-for="release in albums"

94
src/components/pages/Settings.vue
View File

@ -1,15 +1,21 @@
<template>
<div id="settings_tab" class="fixed-footer" ref="root">
<div class="fixed-footer" ref="root">
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
<img
id="settings_picture"
class="w-32 h-32 rounded-full"
:src="pictureHref"
alt="Profile Picture"
ref="userpicture"
/>
<i18n path="settings.login.loggedIn" tag="p">
<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</i18n>
<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
<button class="btn btn-primary" @click="logout">
{{ $t('settings.login.logout') }}
</button>
@ -18,10 +24,26 @@
</select>
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">person</i>{{ $t('settings.login.title') }}
<!-- <BaseAccordion>
<template v-slot:title>
<h3 class="inline-flex items-center text-2xl">
<i class="mr-4 material-icons">web</i>
{{ $t('settings.appearance.title') }}
</h3>
</template>
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimDownloads" />
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimSidebar" />
<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span>
</label>
</BaseAccordion> -->
<div class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
<div class="flex items-center">
<input
autocomplete="off"
@ -31,7 +53,7 @@
ref="loginInput"
placeholder="ARL"
/>
<button id="settings_btn_copyArl" class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
<button class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
<i class="material-icons">assignment</i>
</button>
</div>
@ -40,18 +62,16 @@
{{ $t('settings.login.arl.question') }}
</RouterLink>
<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
<a v-if="clientMode" href="#" @click="appLogin">
{{ $t('settings.login.login') }}
</a>
<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
<button class="btn btn-primary" @click="login" style="width: 100%">
{{ $t('settings.login.arl.update') }}
</button>
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">language</i>{{ $t('settings.languages') }}
</h3>
<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
<div>
<span
v-for="locale in locales"
@ -67,9 +87,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">web</i>{{ $t('settings.appearance.title') }}
</h3>
<h3 class="settings-group__header"><i class="material-icons">web</i>{{ $t('settings.appearance.title') }}</h3>
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimDownloads" />
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
@ -81,24 +99,19 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<h3 class="settings-group__header">
<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
</h3>
<div class="flex items-center">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
<button
id="select_downloads_folder"
v-if="clientMode"
class="ml-2 btn btn-primary btn-only-icon"
@click="selectDownloadFolder"
>
<button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder">
<i class="material-icons">folder</i>
</button>
</div>
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<h3 class="settings-group__header">
<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
</h3>
@ -113,7 +126,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<h3 class="settings-group__header">
<i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }}
</h3>
<div class="settings-container">
@ -168,9 +181,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}
</h3>
<h3 class="settings-group__header"><i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}</h3>
<div class="settings-container">
<div class="settings-container__third settings-container__third--only-checkbox">
@ -195,9 +206,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}
</h3>
<h3 class="settings-group__header"><i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}</h3>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.downloads.queueConcurrency') }}</p>
@ -272,9 +281,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">album</i>{{ $t('settings.covers.title') }}
</h3>
<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveArtwork" />
@ -341,7 +348,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<h3 class="settings-group__header">
<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
</h3>
@ -455,9 +462,7 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">list</i>{{ $t('settings.other.title') }}
</h3>
<h3 class="settings-group__header"><i class="material-icons">list</i>{{ $t('settings.other.title') }}</h3>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" />
@ -599,8 +604,14 @@
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<svg id="spotify_icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<h3 class="settings-group__header">
<svg
class="w-6 h-6 mr-4"
style="fill: #1db954"
enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 24c6.624 0 12-5.376 12-12s-5.376-12-12-12-12 5.376-12 12 5.376 12 12 12zm4.872-6.344v.001c-.807 0-3.356-2.828-10.52-1.36-.189.049-.436.126-.576.126-.915 0-1.09-1.369-.106-1.578 3.963-.875 8.013-.798 11.467 1.268.824.526.474 1.543-.265 1.543zm1.303-3.173c-.113-.03-.08.069-.597-.203-3.025-1.79-7.533-2.512-11.545-1.423-.232.063-.358.126-.576.126-1.071 0-1.355-1.611-.188-1.94 4.716-1.325 9.775-.552 13.297 1.543.392.232.547.533.547.953-.005.522-.411.944-.938.944zm-13.627-7.485c4.523-1.324 11.368-.906 15.624 1.578 1.091.629.662 2.22-.498 2.22l-.001-.001c-.252 0-.407-.063-.625-.189-3.443-2.056-9.604-2.549-13.59-1.436-.175.048-.393.125-.625.125-.639 0-1.127-.499-1.127-1.142 0-.657.407-1.029.842-1.155z"
/>
@ -675,7 +686,12 @@ import { toast } from '@/utils/toasts'
import { socket } from '@/utils/socket'
import { flags } from '@/utils/flags'
import BaseAccordion from '@/components/globals/BaseAccordion.vue'
export default {
components: {
BaseAccordion
},
data() {
return {
flags,

2
src/components/search/ResultsAlbums.vue
View File

@ -7,7 +7,7 @@
<h1>{{ $t('search.noResultsAlbum') }}</h1>
</div>
<div class="release_grid" v-else>
<div class="release-grid" v-else>
<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
<CoverContainer

2
src/components/search/ResultsArtists.vue
View File

@ -7,7 +7,7 @@
<h1>{{ $t('search.noResultsArtist') }}</h1>
</div>
<div v-else class="release_grid">
<div v-else class="release-grid">
<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
<CoverContainer

2
src/components/search/ResultsPlaylists.vue
View File

@ -6,7 +6,7 @@
<div v-if="viewInfo.data.length === 0">
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
</div>
<div class="release_grid" v-else>
<div class="release-grid" v-else>
<div class="w-40 release" v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
<CoverContainer

8
src/components/search/ResultsTracks.vue
View File

@ -23,17 +23,15 @@
<tbody>
<tr v-for="track in viewInfo.data.slice(0, itemsToShow)" :key="track.trackLink">
<td class="table__icon table__icon--big">
<a
href="#"
<span
@click="playPausePreview($event)"
class="rounded"
:class="{ 'single-cover': !!track.trackPreview }"
class="relative inline-block rounded cursor-pointer"
:data-preview="track.trackPreview"
>
<PreviewControls v-if="track.trackPreview" />
<img class="rounded coverart" :src="track.albumPicture" />
</a>
</span>
</td>
<td class="table__cell table__cell--large">

3
src/router.js
View File

@ -1,7 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import { socket } from '@/utils/socket'
import EventBus from '@/utils/EventBus'
// Pages
import About from '@components/pages/About.vue'
@ -85,7 +84,7 @@ const routes = [
component: About
},
{
path: '/arl',
path: '/info-arl',
name: 'ARL',
component: InfoArl
},

11
src/styles/css/typography.css Normal file
View File

@ -0,0 +1,11 @@
.primary-text {
@apply mb-1 transition-colors duration-200 ease-in-out;
}
.primary-text:hover {
@apply text-primary;
}
.secondary-text {
@apply mb-1 text-sm opacity-75;
}

14
src/styles/scss/base/_base.scss
View File

@ -42,3 +42,17 @@
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);
}
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-family: 'Open Sans', 'sans-serif';
overflow: hidden;
background: var(--main-background);
color: var(--foreground);
}

4
src/styles/scss/base/_normalize.scss
View File

@ -57,6 +57,10 @@ button,
cursor: pointer;
}
p {
word-break: break-word;
}
*,
::before,
::after {

24
src/styles/scss/globals/_globals.scss
View File

@ -53,33 +53,9 @@ select {
color: var(--foreground);
}
p {
word-break: break-word;
}
img {
&.rounded {
border-radius: 5px;
}
&.circle {
border-radius: 50%;
}
}
.single-cover {
display: inline-block;
position: relative;
color: white;
}
@layer base {
a {
color: dodgerblue;
// &:visited {
// color: dodgerblue;
// }
}
}

15
src/styles/scss/style.scss
View File

@ -3,21 +3,6 @@
@import '~tailwindcss/utilities';
@import './base/base';
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-family: 'Open Sans', 'sans-serif';
overflow: hidden;
background: var(--main-background);
color: var(--foreground);
}
@import './base/normalize';
@import './base/animations';

14
src/styles/scss/tabs/_release-grid.scss
View File

@ -1,17 +1,5 @@
.release_grid {
.release-grid {
@apply gap-4 grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.primary-text {
@apply mb-1 transition-colors duration-200 ease-in-out;
&:hover {
@apply text-primary;
}
}
.secondary-text {
@apply mb-1 text-sm opacity-75;
}

46
src/styles/scss/tabs/_settings-tab.scss
View File

@ -1,59 +1,23 @@
#settings_picture {
width: 125px;
height: 125px;
}
#log_info {
display: flex;
flex-direction: column;
align-items: center;
}
#open_login_prompt {
margin: 8px 0px;
}
.inline-flex input {
margin-bottom: 0px;
}
#spotify_icon {
width: 24px;
height: 24px;
fill: #1db954;
margin-right: 15px;
}
/* Settings group */
.settings-group {
display: flex;
flex-direction: column;
justify-content: center;
@apply flex flex-col justify-center pt-5 pb-5;
border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
padding-top: 20px;
padding-bottom: 20px;
> * {
margin-bottom: 15px;
margin-bottom: 1rem;
}
}
/* Settings group header */
.settings-group__header {
font-size: 1.5rem;
margin-bottom: 25px;
&.settings-group__header--with-icon {
display: inline-flex;
align-items: center;
margin-bottom: 1.5625rem;
font-size: 1.5rem;
i.material-icons {
margin-right: 15px;
}
}
}
/* Settings container */
.settings-container {
display: flex;
@ -67,8 +31,8 @@
&--only-checkbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
justify-content: center;
}
}

6
src/styles/scss/tabs/_tabs.scss
View File

@ -1,10 +1,4 @@
.release {
display: inline-block;
width: 156px;
.cover_container {
width: 156px;
height: 156px;
margin-bottom: 10px;
}
}

0
src/styles/css/OpenSans.css → src/styles/vendor/OpenSans.css vendored
View File

0
public/css/vendor/animate.css → src/styles/vendor/animate.css vendored
View File

0
src/styles/css/material-icons.css → src/styles/vendor/material-icons.css vendored
View File