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
parent
301c6f0ebe
commit
482f54bf07
8
package-lock.json
generated
8
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deemix-webui",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -5542,9 +5542,9 @@
|
||||
}
|
||||
},
|
||||
"toastify-js": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.8.0.tgz",
|
||||
"integrity": "sha512-0Zf1sQ6Cs5RrRRDox00+6XdgS2tOtn01P9zhxDcJIpDS0KbXg/dFE1F0Mo6b/o63oJsxIhleeZv9LeZb31yKSg=="
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.9.3.tgz",
|
||||
"integrity": "sha512-v0aXGUy6IbEBWxmoKx7ZCou00dQqEAsjJF86f8b8dNCH4O4L6iEkX3d3WRMVDirBJ+8CxQcHDZuAFD47J/imEw=="
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.5.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deemix-webui",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.1",
|
||||
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -22,7 +22,7 @@
|
||||
"flag-icon-css": "^3.5.0",
|
||||
"lodash-es": "^4.17.15",
|
||||
"svg-country-flags": "^1.2.7",
|
||||
"toastify-js": "^1.8.0",
|
||||
"toastify-js": "^1.9.3",
|
||||
"vue": "^2.6.12",
|
||||
"vue-i18n": "^8.18.2",
|
||||
"vue-router": "^3.3.4",
|
||||
|
||||
78
public/css/vendor/toastify.css
vendored
78
public/css/vendor/toastify.css
vendored
@ -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;
|
||||
}
|
||||
}
|
||||
@ -4,10 +4,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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/OpenSans.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/vendor/toastify.css">
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<meta name="viewport"
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -7,7 +7,6 @@ window.vol = {
|
||||
|
||||
import '@/styles/scss/style.scss'
|
||||
import '@/styles/css/components.css'
|
||||
import '@/styles/css/toasts.css'
|
||||
|
||||
import App from '@/App.vue'
|
||||
import i18n from '@/plugins/i18n'
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<aside
|
||||
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"
|
||||
aria-label="sidebar"
|
||||
>
|
||||
@ -9,15 +9,19 @@
|
||||
tag="a"
|
||||
v-for="link in links"
|
||||
: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"
|
||||
:class="{ active: activeTablink === link.name }"
|
||||
:class="{ 'bg-background-main': activeTablink === link.name }"
|
||||
:aria-label="link.ariaLabel"
|
||||
:to="{ name: link.routerName }"
|
||||
@click.native="activeTablink = link.name"
|
||||
>
|
||||
<!-- style="color: inherit" -->
|
||||
<i class="p-2 text-3xl material-icons side_icon">{{ link.icon }}</i>
|
||||
<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">
|
||||
{{ $t(link.label) }}
|
||||
</span>
|
||||
@ -30,7 +34,7 @@
|
||||
|
||||
<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">
|
||||
palette
|
||||
brush
|
||||
</i>
|
||||
<div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
|
||||
<div
|
||||
@ -57,7 +61,7 @@
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
#network-status {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -82,6 +86,26 @@
|
||||
left: 30px;
|
||||
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>
|
||||
|
||||
<script>
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -17,8 +17,6 @@
|
||||
--secondary-background: theme('colors.grayscale.930');
|
||||
--foreground: theme('colors.grayscale.200');
|
||||
--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-zebra: theme('colors.grayscale.900');
|
||||
@ -30,8 +28,6 @@
|
||||
--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
|
||||
--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
|
||||
--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-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
|
||||
@ -43,8 +39,6 @@
|
||||
--secondary-background: hsl(257, 61%, 10%);
|
||||
--foreground: theme('colors.grayscale.930');
|
||||
--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-zebra: hsl(257, 61%, 10%);
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
@mixin remove-selection-background {
|
||||
&::selection {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@ -4,5 +4,4 @@ $small: 601px;
|
||||
$medium: 993px;
|
||||
|
||||
// Static variables (not an oxymoron)
|
||||
$sidebar-width: 48px;
|
||||
$explicit-separator: 0.3125em;
|
||||
|
||||
@ -111,16 +111,20 @@ span {
|
||||
}
|
||||
|
||||
a {
|
||||
color: dodgerblue;
|
||||
|
||||
&.single-cover {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
@layer base {
|
||||
a {
|
||||
color: dodgerblue;
|
||||
|
||||
// &:visited {
|
||||
// color: dodgerblue;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,8 +178,7 @@ a {
|
||||
.checkbox_text {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
@include remove-selection-background;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
@import './base/base';
|
||||
|
||||
@import '~tailwindcss/base';
|
||||
@import '~tailwindcss/components';
|
||||
@import '~tailwindcss/utilities';
|
||||
|
||||
@import './base/base';
|
||||
@import './base/variables';
|
||||
|
||||
html {
|
||||
@ -21,7 +20,6 @@ body {
|
||||
}
|
||||
|
||||
@import './base/normalize';
|
||||
@import './base/mixins';
|
||||
@import './base/animations';
|
||||
|
||||
@import './globals/globals';
|
||||
@ -33,5 +31,4 @@ body {
|
||||
@import './tabs/tabs';
|
||||
|
||||
@import './middle-section';
|
||||
@import './sidebar';
|
||||
@import './stackedTabs';
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
import Toastify from 'toastify-js'
|
||||
import 'toastify-js/src/toastify.css'
|
||||
import '@/styles/css/toasts.css'
|
||||
|
||||
import { socket } from '@/utils/socket'
|
||||
|
||||
const sharedOptions = {
|
||||
gravity: 'bottom',
|
||||
position: 'left',
|
||||
offset: {
|
||||
x: '14rem'
|
||||
}
|
||||
}
|
||||
|
||||
let toastsWithId = {}
|
||||
|
||||
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({
|
||||
...sharedOptions,
|
||||
text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
|
||||
duration: dismiss ? 3000 : 0,
|
||||
gravity: 'bottom',
|
||||
position: 'left',
|
||||
className: dismiss ? 'dismissable' : '',
|
||||
onClick: function() {
|
||||
let dismissable = true
|
||||
|
||||
@ -47,7 +47,9 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
},
|
||||
variants: {},
|
||||
variants: {
|
||||
textColor: ({ after }) => after(['group-hover'])
|
||||
},
|
||||
corePlugins: {
|
||||
preflight: false
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user