style: started removing globals.scss; style: removed loading placeholder classes
This commit is contained in:
Roberto Tonino
parent
e950a59e1f
commit
4e652b65cc
|
|
@ -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)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
20
src/App.vue
20
src/App.vue
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue