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

replaced some old HTML with the right components; added quality modal functional component

Browse Source
This commit is contained in:
Roberto Tonino 2020-07-06 18:34:43 +02:00
parent 77c875d932
commit b716e89560
8 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

6
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

29
src/js/App.vue
View File

@ -1,31 +1,12 @@
<template>
<div style="height: inherit;">
<div id="start_app_placeholder" class="loading_placeholder">
<span class="loading_placeholder__text">Connecting to the server...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<TheSidebar />
<TheMainContent />
<TheTrackPreview />
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button><br />
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br />
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br />
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br />
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br />
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br />
</div>
</div>
<TheQualityModal />
</div>
</template>
@ -33,12 +14,16 @@
import TheSidebar from '@components/TheSidebar.vue'
import TheMainContent from '@components/TheMainContent.vue'
import TheTrackPreview from '@components/TheTrackPreview.vue'
import TheQualityModal from '@components/TheQualityModal.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
components: {
TheSidebar,
TheMainContent,
TheTrackPreview
TheTrackPreview,
TheQualityModal,
BaseLoadingPlaceholder
}
}
</script>

23
src/js/components/BaseLoadingPlaceholder.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="loading_placeholder">
<span class="loading_placeholder__text">Loading...</span>
<template functional>
<div :id="props.id" class="loading_placeholder">
<span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring">
<div></div>
<div></div>
@ -9,15 +9,18 @@
</div>
</div>
</template>
<script>
export default {
name: 'base-loading-placeholder',
// Without this empty data rollup watcher throws an error
data() {
return {}
props: {
text: {
type: String,
required: false,
default: 'Loading...'
},
id: {
type: String,
required: false
}
}
}
</script>
<style>
</style>

40
src/js/components/TheQualityModal.vue Normal file
View File

@ -0,0 +1,40 @@
<template functional>
<div id="modal_quality" class="smallmodal">
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button>
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button>
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button>
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button>
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button>
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button>
</div>
</div>
</template>
<style>
.smallmodal {
display: none;
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
animation-duration: 0.3s;
}
.smallmodal-content {
background-color: transparent;
margin: auto;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.smallmodal-content button {
width: 100%;
margin-bottom: 8px;
}
</style>

29
src/styles/scss/_middle-section.scss
View File

@ -106,21 +106,6 @@ $searchbar-height: calc(2rem + 1em);
width: var(--container-width);
}
/* The Modal (background) */
.smallmodal {
display: none;
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
animation-duration: 0.3s;
}
/* Modal Content */
.smallmodal-content {
--modal-content-width: 95%;
@ -133,17 +118,3 @@ $searchbar-height: calc(2rem + 1em);
--modal-content-width: 70%;
}
}
.smallmodal-content {
background-color: transparent;
margin: auto;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
button {
width: 100%;
margin-bottom: 8px;
}
}

3
src/styles/scss/base/_variables.scss
View File

@ -1,4 +1,5 @@
// Breakpoints (@todo change them in more proper values)
// Breakpoints
// TODO Change them in more proper values
$small: 601px;
$medium: 993px;

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

@ -306,7 +306,7 @@ a {
display: flex;
}
// @todo Remove
// TODO Remove
.inline-flex {
display: flex;
align-items: center;
@ -316,7 +316,7 @@ a {
}
}
// @todo Remove
// TODO Remove
.right {
float: right;
}