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

README.md

@@ -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)

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>

src/components/TheContent.vue

@@ -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>

src/components/TheSearchBar.vue

@@ -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>
 

src/components/globals/BaseLoadingPlaceholder.vue

@@ -1,6 +1,12 @@
 <template functional>
-	<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
+	<div
-		<span class="loading_placeholder__text">{{ props.text }}</span>
+		: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
 		}
 	}
 }

src/components/pages/About.vue

@@ -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>

src/components/pages/Artist.vue

@@ -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">
+			<div
-				<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+				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>
 

src/components/pages/LinkAnalyzer.vue

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

src/components/pages/Settings.vue

@@ -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>

src/components/pages/Tracklist.vue

@@ -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>

src/components/search/ResultsAll.vue

@@ -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'

src/components/search/ResultsTracks.vue

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

src/styles/css/components.css

@@ -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;
+	}
 }

src/styles/scss/globals/_globals.scss

@@ -1,9 +1,7 @@
 input[type='text'],
 input[type='password'],
-input[type='number']/* ,
+input[type='number'] {
-input[type='search'] */ {
+	appearance: none;
-	// -webkit-appearance: none;
-	// 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 {
+.single-cover {
-	&.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;
-	}
 }
 
 @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);
 }

src/utils/socket.js

@@ -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)
 })