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

build: v1.2.1; style: changed theme icon; style: sidebar link active bg color; style: updated toastify-js to v1.9.3; style: used toastify-js styles instead of local ones; style: removed inclusion of animate.css styles (but kept the file for future usage)

This commit is contained in:
Roberto Tonino 2020-10-17 17:52:31 +02:00
parent 301c6f0ebe
commit 482f54bf07
15 changed files with 66 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "deemix-webui", "name": "deemix-webui",
"version": "1.2.0", "version": "1.2.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -5542,9 +5542,9 @@
} }
}, },
"toastify-js": { "toastify-js": {
"version": "1.8.0", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.8.0.tgz", "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.9.3.tgz",
"integrity": "sha512-0Zf1sQ6Cs5RrRRDox00+6XdgS2tOtn01P9zhxDcJIpDS0KbXg/dFE1F0Mo6b/o63oJsxIhleeZv9LeZb31yKSg==" "integrity": "sha512-v0aXGUy6IbEBWxmoKx7ZCou00dQqEAsjJF86f8b8dNCH4O4L6iEkX3d3WRMVDirBJ+8CxQcHDZuAFD47J/imEw=="
}, },
"tough-cookie": { "tough-cookie": {
"version": "2.5.0", "version": "2.5.0",

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "deemix-webui", "name": "deemix-webui",
"version": "1.2.0", "version": "1.2.1",
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md", "homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
"repository": { "repository": {
"type": "git", "type": "git",
@ -22,7 +22,7 @@
"flag-icon-css": "^3.5.0", "flag-icon-css": "^3.5.0",
"lodash-es": "^4.17.15", "lodash-es": "^4.17.15",
"svg-country-flags": "^1.2.7", "svg-country-flags": "^1.2.7",
"toastify-js": "^1.8.0", "toastify-js": "^1.9.3",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-i18n": "^8.18.2", "vue-i18n": "^8.18.2",
"vue-router": "^3.3.4", "vue-router": "^3.3.4",

78
public/css/vendor/toastify.css vendored
View File

@ -1,78 +0,0 @@
/*!
* Toastify js 1.7.0
* https://github.com/apvarun/toastify-js
* @license MIT licensed
*
* Copyright (C) 2018 Varun A P
*/
.toastify {
padding: 12px 20px;
color: #ffffff;
display: inline-block;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
background: linear-gradient(135deg, #73a5ff, #5477f5);
position: fixed;
opacity: 0;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border-radius: 2px;
cursor: pointer;
text-decoration: none;
max-width: calc(50% - 20px);
z-index: 2147483647;
}
.toastify.on {
opacity: 1;
}
.toast-close {
opacity: 0.4;
padding: 0 5px;
}
.toastify-right {
right: 15px;
}
.toastify-left {
left: 64px;
}
.toastify-top {
top: -150px;
}
.toastify-bottom {
bottom: -150px;
}
.toastify-rounded {
border-radius: 25px;
}
.toastify-avatar {
width: 1.5em;
height: 1.5em;
margin: 0 5px;
border-radius: 2px;
}
.toastify-center {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
}
@media only screen and (max-width: 360px) {
.toastify-right, .toastify-left {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
}
}

2
public/index.html
View File

@ -4,10 +4,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>deemix</title> <title>deemix</title>
<link rel="stylesheet" type="text/css" href="/css/vendor/animate.css">
<link rel="stylesheet" type="text/css" href="/css/vendor/material-icons.css"> <link rel="stylesheet" type="text/css" href="/css/vendor/material-icons.css">
<link rel="stylesheet" type="text/css" href="/css/vendor/OpenSans.css"> <link rel="stylesheet" type="text/css" href="/css/vendor/OpenSans.css">
<link rel="stylesheet" type="text/css" href="/css/vendor/toastify.css">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" <meta name="viewport"

12
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

1
src/app.js
View File

@ -7,7 +7,6 @@ window.vol = {
import '@/styles/scss/style.scss' import '@/styles/scss/style.scss'
import '@/styles/css/components.css' import '@/styles/css/components.css'
import '@/styles/css/toasts.css'
import App from '@/App.vue' import App from '@/App.vue'
import i18n from '@/plugins/i18n' import i18n from '@/plugins/i18n'

38
src/components/TheSidebar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<aside <aside
id="sidebar" id="sidebar"
class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-foreground" class="top-0 left-0 flex flex-col w-64 h-screen bg-panels-bg text-foreground"
role="navigation" role="navigation"
aria-label="sidebar" aria-label="sidebar"
> >
@ -9,15 +9,19 @@
tag="a" tag="a"
v-for="link in links" v-for="link in links"
:key="link.id" :key="link.id"
class="relative flex items-center h-16 no-underline main_tablinks" class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
:id="link.id" :id="link.id"
:class="{ active: activeTablink === link.name }" :class="{ 'bg-background-main': activeTablink === link.name }"
:aria-label="link.ariaLabel" :aria-label="link.ariaLabel"
:to="{ name: link.routerName }" :to="{ name: link.routerName }"
@click.native="activeTablink = link.name" @click.native="activeTablink = link.name"
> >
<!-- style="color: inherit" --> <i
<i class="p-2 text-3xl material-icons side_icon">{{ link.icon }}</i> class="p-2 text-3xl material-icons side_icon group-hover:text-primary"
:class="{ 'text-primary': activeTablink === link.name }"
>
{{ link.icon }}
</i>
<span class="ml-5 overflow-hidden capitalize whitespace-no-wrap main_tablinks_text" style="letter-spacing: 1.3px"> <span class="ml-5 overflow-hidden capitalize whitespace-no-wrap main_tablinks_text" style="letter-spacing: 1.3px">
{{ $t(link.label) }} {{ $t(link.label) }}
</span> </span>
@ -30,7 +34,7 @@
<span class="flex h-12 mt-5" role="link" aria-label="theme selector"> <span class="flex h-12 mt-5" role="link" aria-label="theme selector">
<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme"> <i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
palette brush
</i> </i>
<div id="theme_togglers" class="relative flex items-center w-full justify-evenly"> <div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
<div <div
@ -57,7 +61,7 @@
</aside> </aside>
</template> </template>
<style scoped> <style lang="scss" scoped>
#network-status { #network-status {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -82,6 +86,26 @@
left: 30px; left: 30px;
top: 12px; top: 12px;
} }
.theme_toggler {
transition: border 200ms ease-in-out;
&--active {
border-width: 3px;
}
&--light {
background-color: #fff;
}
&--dark {
background-color: hsl(0, 0%, 8%);
}
&--purple {
background: hsl(261, 85%, 37%);
}
}
</style> </style>
<script> <script>

40
src/styles/scss/_sidebar.scss
View File

@ -1,40 +0,0 @@
$sidebar-timing: 125ms;
$sidebar-delay: 75ms;
#sidebar {
width: 15.625rem;
height: 100vh;
.main_tablinks {
@apply text-foreground;
&.active,
&:hover {
background: var(--sidebar-link-bg);
.side_icon {
@apply text-primary;
}
}
}
.theme_toggler {
transition: border 200ms ease-in-out;
&--active {
border-width: 3px;
}
&--light {
@apply bg-white;
}
&--dark {
@apply bg-grayscale-80;
}
&--purple {
background: hsl(261, 85%, 37%);
}
}
}

6
src/styles/scss/base/_base.scss
View File

@ -17,8 +17,6 @@
--secondary-background: theme('colors.grayscale.930'); --secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200'); --foreground: theme('colors.grayscale.200');
--panels-background: hsl(216, 4%, 78%); --panels-background: hsl(216, 4%, 78%);
// --sidebar-link-bg: theme('colors.grayscale.600');
--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
--table-bg: theme('colors.white'); --table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900'); --table-zebra: theme('colors.grayscale.900');
@ -30,8 +28,6 @@
--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg --secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search --foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
--panels-background: hsl(240, 15%, 12%); // panel left + right bg --panels-background: hsl(240, 15%, 12%); // panel left + right bg
// --sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row --table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate --table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
@ -43,8 +39,6 @@
--secondary-background: hsl(257, 61%, 10%); --secondary-background: hsl(257, 61%, 10%);
--foreground: theme('colors.grayscale.930'); --foreground: theme('colors.grayscale.930');
--panels-background: hsl(257, 70%, 9%); --panels-background: hsl(257, 70%, 9%);
// --sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
--table-bg: hsl(261, 74%, 6%); --table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%); --table-zebra: hsl(257, 61%, 10%);

5
src/styles/scss/base/_mixins.scss
View File

@ -1,5 +0,0 @@
@mixin remove-selection-background {
&::selection {
background: none;
}
}

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

@ -4,5 +4,4 @@ $small: 601px;
$medium: 993px; $medium: 993px;
// Static variables (not an oxymoron) // Static variables (not an oxymoron)
$sidebar-width: 48px;
$explicit-separator: 0.3125em; $explicit-separator: 0.3125em;

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

@ -111,16 +111,20 @@ span {
} }
a { a {
color: dodgerblue;
&.single-cover { &.single-cover {
position: relative; position: relative;
display: inline-block; display: inline-block;
color: white; color: white;
} }
}
&:visited { @layer base {
a {
color: dodgerblue; color: dodgerblue;
// &:visited {
// color: dodgerblue;
// }
} }
} }
@ -174,8 +178,7 @@ a {
.checkbox_text { .checkbox_text {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
user-select: none;
@include remove-selection-background;
} }
} }

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

@ -1,9 +1,8 @@
@import './base/base';
@import '~tailwindcss/base'; @import '~tailwindcss/base';
@import '~tailwindcss/components'; @import '~tailwindcss/components';
@import '~tailwindcss/utilities'; @import '~tailwindcss/utilities';
@import './base/base';
@import './base/variables'; @import './base/variables';
html { html {
@ -21,7 +20,6 @@ body {
} }
@import './base/normalize'; @import './base/normalize';
@import './base/mixins';
@import './base/animations'; @import './base/animations';
@import './globals/globals'; @import './globals/globals';
@ -33,5 +31,4 @@ body {
@import './tabs/tabs'; @import './tabs/tabs';
@import './middle-section'; @import './middle-section';
@import './sidebar';
@import './stackedTabs'; @import './stackedTabs';

13
src/utils/toasts.js
View File

@ -1,7 +1,17 @@
import Toastify from 'toastify-js' import Toastify from 'toastify-js'
import 'toastify-js/src/toastify.css'
import '@/styles/css/toasts.css'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
const sharedOptions = {
gravity: 'bottom',
position: 'left',
offset: {
x: '14rem'
}
}
let toastsWithId = {} let toastsWithId = {}
export const toast = function(msg, icon = null, dismiss = true, id = null) { export const toast = function(msg, icon = null, dismiss = true, id = null) {
@ -56,10 +66,9 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
} }
let toastObj = Toastify({ let toastObj = Toastify({
...sharedOptions,
text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`, text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
duration: dismiss ? 3000 : 0, duration: dismiss ? 3000 : 0,
gravity: 'bottom',
position: 'left',
className: dismiss ? 'dismissable' : '', className: dismiss ? 'dismissable' : '',
onClick: function() { onClick: function() {
let dismissable = true let dismissable = true

4
tailwind.config.js
View File

@ -47,7 +47,9 @@ module.exports = {
} }
} }
}, },
variants: {}, variants: {
textColor: ({ after }) => after(['group-hover'])
},
corePlugins: { corePlugins: {
preflight: false preflight: false
}, },