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

style: started removing globals.scss; style: removed loading placeholder classes

Browse Source
This commit is contained in:
Roberto Tonino 2020-10-28 22:21:41 +01:00
parent e950a59e1f
commit 4e652b65cc
16 changed files with 100 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -5,8 +5,6 @@ If you are a web developer and want to contribute to this project, please read t
## Related projects
You can find more informations about deemix at https://deemix.app/
- [deemix](https://codeberg.org/RemixDev/deemix)
- [deemix-pyweb](https://codeberg.org/RemixDev/deemix-pyweb)
- [deemix-tools](https://codeberg.org/RemixDev/deemix-tools)

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

20
src/App.vue
View File

@ -11,7 +11,11 @@
<TheDownloadBar />
</div>
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<BaseLoadingPlaceholder
:hidden="isSocketConnected"
text="Connecting to the server..."
additionalClasses="absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-50"
/>
<TheTrackPreview />
<TheQualityModal />
@ -30,12 +34,11 @@
width: 100%;
display: flex;
flex-direction: column;
/* margin-left: 48px; */
}
</style>
<script>
import TheDownloadBar from '@components/downloads/TheDownloadBar.vue'
import { socket } from '@/utils/socket'
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
import TheContextMenu from '@components/globals/TheContextMenu.vue'
@ -46,8 +49,14 @@ import ConfirmModal from '@components/globals/ConfirmModal.vue'
import TheSidebar from '@components/TheSidebar.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
import TheContent from '@components/TheContent.vue'
import TheDownloadBar from '@components/downloads/TheDownloadBar.vue'
export default {
data() {
return {
isSocketConnected: false
}
},
components: {
TheSidebar,
TheSearchBar,
@ -58,6 +67,11 @@ export default {
TheContextMenu,
TheContent,
ConfirmModal
},
mounted() {
socket.on('connect', () => {
this.isSocketConnected = true
})
}
}
</script>

2
src/components/TheContent.vue
View File

@ -6,7 +6,7 @@
aria-label="main content"
>
<div id="container">
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
<BaseLoadingPlaceholder text="Searching..." :hidden="!loading" />
<BackButton v-if="showBackButton" class="sticky -ml-20" style="top: 1rem" />
<keep-alive>

26
src/components/TheSearchBar.vue
View File

@ -25,6 +25,15 @@
$icon-dimension: 2rem;
$searchbar-height: 45px;
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
#search {
background-color: var(--secondary-background);
padding: 0 1em;
@ -35,10 +44,6 @@ $searchbar-height: 45px;
border-radius: 15px;
margin: 10px 10px 20px 10px;
&:focus-within {
border: 1px solid var(--foreground);
}
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
@ -69,15 +74,26 @@ $searchbar-height: 45px;
outline: none;
}
&::-webkit-search-cancel-button {
appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
// Removing Chrome autofill color
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
}
}
&:focus-within {
border: 1px solid var(--foreground);
}
}
</style>

14
src/components/globals/BaseLoadingPlaceholder.vue
View File

@ -1,6 +1,12 @@
<template functional>
<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
<span class="loading_placeholder__text">{{ props.text }}</span>
<div
:id="props.id"
class="flex justify-center items-center flex-col flex-1 h-full"
:class="props.additionalClasses"
v-show="!props.hidden"
>
<span class="mb-5">{{ props.text }}</span>
<div class="lds-ring">
<div></div>
<div></div>
@ -70,6 +76,10 @@ export default {
type: Boolean,
required: false,
default: false
},
additionalClasses: {
type: String,
required: false
}
}
}

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

@ -19,9 +19,9 @@
<h2>{{ $t('about.titles.usefulLinks') }}</h2>
<ul class="no-dots">
<li>
<!-- <li>
<a href="https://deemix.app" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
</li>
</li> -->
<li>
<a href="https://codeberg.org/RemixDev/deemix" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
</li>

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

@ -9,8 +9,14 @@
>
<h1 class="m-0">{{ title }}</h1>
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="link"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center right"
>
<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i>
</div>
</header>

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

@ -68,9 +68,9 @@
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="link"
class="fab right"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center right"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i>
</div>
</header>
<table class="table">

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

@ -1,5 +1,5 @@
<template>
<div id="settings_tab" class="fixed_footer" ref="root">
<div id="settings_tab" 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">
@ -617,7 +617,7 @@
</div>
</div>
<footer>
<footer class="bg-background-main">
<button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
</footer>

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

@ -1,5 +1,5 @@
<template>
<div class="relative fixed_footer image-header" ref="root">
<div class="relative fixed-footer bg-background-main image-header" ref="root">
<header
:style="{
'background-image':
@ -139,7 +139,7 @@
</tbody>
</table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
<footer>
<footer class="bg-background-main">
<button class="mr-2 btn btn-primary" @click.stop="addToQueue" :data-link="link">
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
</button>

13
src/components/search/ResultsAll.vue
View File

@ -214,6 +214,19 @@
</div>
</div>
</template>
<style lang="scss" scoped>
.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
text-transform: capitalize;
}
</style>
<script>
import { convertDuration } from '@/utils/utils'
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'

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

@ -22,7 +22,8 @@
<a
href="#"
@click="playPausePreview"
:class="'rounded' + (track.preview ? ' single-cover' : '')"
class="rounded"
:class="{ 'single-cover': !!track.preview }"
:data-preview="track.preview"
>
<PreviewControls v-if="track.preview" />

5
src/styles/css/components.css
View File

@ -53,4 +53,9 @@
background-position: 0% 35%;
}
/* Fixed footer */
.fixed-footer footer {
@apply sticky items-center flex flex-row justify-end bottom-0 h-16 w-full mt-6;
}
}

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

@ -1,9 +1,7 @@
input[type='text'],
input[type='password'],
input[type='number']/* ,
input[type='search'] */ {
// -webkit-appearance: none;
// appearance: none;
input[type='number'] {
appearance: none;
width: calc(100% - 16px);
border: 0px solid black;
line-height: 36px;
@ -14,18 +12,8 @@ input[type='search'] */ {
margin-bottom: 8px;
}
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
input[type='checkbox'] {
// -webkit-appearance: none;
// appearance: none;
appearance: none;
background-color: none;
border: 2px solid gray;
opacity: 0.5;
@ -49,8 +37,7 @@ input[type='checkbox'] {
}
select {
// -webkit-appearance: none;
// appearance: none;
appearance: none;
width: 100%;
border: 0px solid black;
line-height: 36px;
@ -98,24 +85,10 @@ i {
}
}
span {
&.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
text-transform: capitalize;
}
}
a {
&.single-cover {
.single-cover {
position: relative;
display: inline-block;
color: white;
}
}
@layer base {
@ -137,36 +110,6 @@ a {
text-decoration: underline;
}
.fixed_footer {
footer {
position: sticky;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
background-color: var(--main-background);
bottom: 0px;
height: 64px;
width: 100%;
margin-top: 24px;
}
}
.fab {
width: 56px;
height: 56px;
border-radius: 28px;
display: inline-block;
background-color: var(--primary-color);
color: var(--primary-text);
cursor: pointer;
i {
font-size: 24px;
padding: 16px;
}
}
.with_checkbox {
display: flex;
align-items: center;
@ -182,37 +125,6 @@ a {
}
}
.loading_placeholder {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1;
height: 100%;
&.loading_placeholder--hidden {
display: none;
}
&__text {
margin-bottom: 20px;
}
&#search_placeholder {
height: calc(100% - 93px);
}
&#start_app_placeholder {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: hsla(0, 0, 0, 50%);
z-index: 1000;
}
}
.coverart {
background-color: var(--secondary-background);
}

4
src/utils/socket.js
View File

@ -2,10 +2,6 @@ import store from '@/store'
export const socket = io.connect(window.location.href)
socket.on('connect', () => {
document.getElementById('start_app_placeholder').classList.add('loading_placeholder--hidden')
})
socket.on('init_update', data => {
store.dispatch('setAboutInfo', data)
})