evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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>
<!-- <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 settings-group__header--with-icon">
<i class="material-icons">person</i>{{ $t('settings.login.title') }}
</h3>
<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">