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

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" />