danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: removed some global styles; chore: removed useless type="text/javascript" from socket.io script tag; moved Settings page styles into its component; fix: play button color on PreviewControls component

This commit is contained in:
Roberto Tonino 2020-11-10 19:48:02 +01:00
parent 4fa4d7ca7a
commit cbaca5bece
14 changed files with 216 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -21,7 +21,7 @@
<div id="app"></div> <div id="app"></div>
</body> </body>
<script type="text/javascript" src="/js/vendor/socket.io.js"></script> <script src="/js/vendor/socket.io.js"></script>
<script src="/js/bundle.js"></script> <script src="/js/bundle.js"></script>
</html> </html>

8
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
src/app.js
View File

@ -9,6 +9,8 @@ import '@/styles/vendor/material-icons.css'
import '@/styles/vendor/OpenSans.css' import '@/styles/vendor/OpenSans.css'
import '@/styles/scss/style.scss' import '@/styles/scss/style.scss'
import '@/styles/css/normalize.css'
import '@/styles/css/base.css'
import '@/styles/css/components.css' import '@/styles/css/components.css'
import '@/styles/css/helpers.css' import '@/styles/css/helpers.css'
import '@/styles/css/typography.css' import '@/styles/css/typography.css'

2
src/components/globals/PreviewControls.vue
View File

@ -2,7 +2,7 @@
<i <i
@mouseenter="previewMouseEnter" @mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave" @mouseleave="previewMouseLeave"
class="absolute top-0 right-0 flex items-center justify-center w-full h-full text-center transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls" class="absolute top-0 right-0 flex items-center justify-center w-full h-full text-center text-white transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls"
:title="$t('globals.play_hint')" :title="$t('globals.play_hint')"
> >
play_arrow play_arrow

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

@ -130,7 +130,7 @@
</h3> </h3>
</template> </template>
<div class="settings-container"> <div class="space-x-5 settings-container">
<div class="settings-container__third"> <div class="settings-container__third">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createPlaylistFolder" /> <input type="checkbox" v-model="settings.createPlaylistFolder" />
@ -188,7 +188,7 @@
</h3> </h3>
</template> </template>
<div class="settings-container"> <div class="space-x-5 settings-container">
<div class="settings-container__third settings-container__third--only-checkbox"> <div class="settings-container__third settings-container__third--only-checkbox">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.padTracks" /> <input type="checkbox" v-model="settings.padTracks" />
@ -286,7 +286,7 @@
</h3> </h3>
</template> </template>
<div class="settings-container"> <div class="space-x-5 settings-container">
<div class="settings-container__half"> <div class="settings-container__half">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.title" /> <input type="checkbox" v-model="settings.tags.title" />
@ -427,7 +427,7 @@
</select> </select>
</div> </div>
<div class="settings-container"> <div class="space-x-5 settings-container">
<div class="settings-container__third settings-container__third--only-checkbox"> <div class="settings-container__third settings-container__third--only-checkbox">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.fallbackBitrate" /> <input type="checkbox" v-model="settings.fallbackBitrate" />
@ -663,7 +663,7 @@
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss" scoped>
#logged_in_info { #logged_in_info {
height: 250px; height: 250px;
display: flex; display: flex;
@ -687,12 +687,75 @@
} }
} }
svg { &::v-deep svg {
width: 40px !important; width: 40px !important;
height: 40px !important; height: 40px !important;
filter: brightness(0.5); filter: brightness(0.5);
} }
} }
.settings-group {
border-top-width: 1px;
border-color: hsl(0, 0%, 50%);
}
.settings-group__header {
display: inline-flex;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
font-size: 1.5rem;
i.material-icons {
margin-right: 1rem;
}
}
.settings-container {
display: flex;
&__half {
width: 50%;
}
&__third {
width: 33%;
&--only-checkbox {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
}
}
&__half > *,
&__third > * {
margin-bottom: 1rem;
}
}
.with-checkbox {
display: flex;
align-items: center;
[type='checkbox'] {
cursor: pointer;
}
.checkbox-text {
margin-left: 10px;
cursor: pointer;
user-select: none;
}
}
/* Input group */
.input-group {
.input-group-text {
margin-bottom: 0.5rem;
}
}
</style> </style>
<script> <script>

53
src/styles/css/base.css Normal file
View File

@ -0,0 +1,53 @@
@layer base {
input[type='text'],
input[type='password'],
input[type='number'],
select {
border-radius: 4px;
background-color: var(--secondary-background);
padding: 0 1rem;
width: 100%;
min-height: 3rem;
color: var(--foreground);
}
input[type='text'],
input[type='password'],
input[type='number'] {
padding: 0 16px;
}
input[type='checkbox'] {
display: inline-block;
position: relative;
opacity: 0.5;
margin: 3px;
border: 2px solid gray;
border-radius: 2px;
background-color: none;
padding: 7px;
}
input[type='checkbox']:checked {
opacity: 1;
border-width: 0;
background-color: var(--primary-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
padding: 9px;
color: var(--primary-text);
}
select {
background-clip: border-box;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill:gray;fill-opacity:0.5' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: calc(100% - 8px) center;
background-repeat: no-repeat;
background-size: 24px;
padding-right: 40px;
}
a {
color: dodgerblue;
}
}

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

@ -49,13 +49,20 @@
/* Image header */ /* Image header */
.image-header header { .image-header header {
@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg; @apply px-6 pt-56 pb-2 bg-cover rounded-t-lg;
background-position: 0% 35%; background-position: 0% 35%;
} }
/* Fixed footer */ /* Fixed footer */
.fixed-footer footer { .fixed-footer footer {
@apply sticky items-center flex flex-row justify-end bottom-0 h-16 w-full mt-6; @apply sticky bottom-0 flex flex-row items-center justify-end w-full h-16 mt-6;
}
/* Release grid */
.release-grid {
@apply grid gap-4;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
} }
} }

11
src/styles/css/helpers.css
View File

@ -1,7 +1,18 @@
.changing-theme { .changing-theme {
/* Applied to ALL elements when changing theme */
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
} }
[v-cloak] { [v-cloak] {
/* Attribute removed after that a component finished loading */
display: none; display: none;
} }
.clickable {
cursor: pointer !important;
}
.coverart {
/* ? Why? */
background-color: var(--secondary-background);
}

66
src/styles/css/normalize.css vendored Normal file
View File

@ -0,0 +1,66 @@
@layer base {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
border: 0;
padding: 0;
vertical-align: baseline;
font: inherit;
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Taken from Tailwind's Preflight */
button,
[type='button'],
[type='reset'],
[type='submit'] {
appearance: button;
}
input[type='text'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='checkbox'],
select {
appearance: none;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
button,
[role='button'] {
cursor: pointer;
}
p {
word-break: break-word;
}
*,
::before,
::after {
border-width: 0;
border-style: solid;
}
}

64
src/styles/scss/base/_normalize.scss
View File

@ -1,64 +0,0 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
border: 0;
padding: 0;
vertical-align: baseline;
font: inherit;
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Taken from Tailwind Preflight */
button,
[type='button'],
[type='reset'],
[type='submit'] {
appearance: button;
}
input[type='text'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='checkbox'],
select {
appearance: none;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
button,
[role='button'] {
cursor: pointer;
}
p {
word-break: break-word;
}
*,
::before,
::after {
border-width: 0;
border-style: solid;
}

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

@ -1,69 +0,0 @@
input[type='text'],
input[type='password'],
input[type='number'] {
appearance: none;
margin-bottom: 8px;
border: 0px solid black;
border-radius: 4px;
background-color: var(--secondary-background);
padding: 0px 8px;
width: calc(100% - 16px);
line-height: 36px;
color: var(--foreground);
}
input[type='checkbox'] {
appearance: none;
display: inline-block;
position: relative;
opacity: 0.5;
margin: 3px;
border: 2px solid gray;
border-radius: 2px;
background-color: none;
padding: 7px;
&:checked {
opacity: 1;
margin: 3px;
border: 0px solid var(--primary-color);
border-radius: 2px;
background-color: var(--primary-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
padding: 9px;
color: var(--primary-text);
}
}
select {
appearance: none;
margin-bottom: 8px;
border: 0px solid black;
border-radius: 4px;
background-clip: border-box;
background-color: var(--secondary-background);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: calc(100% - 8px) center;
background-repeat: no-repeat;
background-size: 24px;
padding: 0px 40px 0px 8px;
width: 100%;
line-height: 36px;
color: var(--foreground);
}
@layer base {
a {
color: dodgerblue;
}
}
.clickable {
cursor: pointer !important;
}
.coverart {
// ? Why?
background-color: var(--secondary-background);
}

4
src/styles/scss/style.scss
View File

@ -3,12 +3,8 @@
@import '~tailwindcss/utilities'; @import '~tailwindcss/utilities';
@import './base/base'; @import './base/base';
@import './base/normalize';
@import './base/animations'; @import './base/animations';
@import './globals/globals';
@import './globals/tables'; @import './globals/tables';
@import './tabs/release-grid';
@import './tabs/settings-tab';
@import './tabs/tabs'; @import './tabs/tabs';

5
src/styles/scss/tabs/_release-grid.scss
View File

@ -1,5 +0,0 @@
.release-grid {
@apply gap-4 grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

54
src/styles/scss/tabs/_settings-tab.scss
View File

@ -1,54 +0,0 @@
.settings-group {
@apply border-t border-grayscale-500;
}
.settings-group__header {
@apply inline-flex items-center py-8 text-2xl;
i.material-icons {
@apply mr-4;
}
}
.settings-container {
display: flex;
&__half {
width: 50%;
}
&__third {
width: 33%;
&--only-checkbox {
@apply flex flex-col items-start justify-center;
}
}
&__half > *,
&__third > * {
@apply mb-4;
}
}
.with-checkbox {
display: flex;
align-items: center;
[type='checkbox'] {
cursor: pointer;
}
.checkbox-text {
margin-left: 10px;
cursor: pointer;
user-select: none;
}
}
/* Input group */
.input-group {
.input-group-text {
@apply mb-2;
}
}