Students
/
ITRadio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of git.flexites.org:Students/ITRadio

This commit is contained in:
Mike0001-droid 2024-07-22 10:19:48 +05:00
parent 27253c2ed2 8c979c7c2a
commit 2a231edd46
71 changed files with 3607 additions and 2231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/.prettierrc.cjs
View File

@ -1,3 +1,11 @@
module.exports = {
printWidth: 120,
tabWidth: 2,
tabs: false,
semi: true,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
arrowParens: 'always',
endOfLine: 'auto',
};

7
client/.stylelintrc.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
"rules": {
"selector-class-pattern": null,
"scss/load-partial-extension": "always"
}
}

8
client/README.md
View File

@ -3,6 +3,7 @@
A Al project
## Install the dependencies
```bash
yarn
# or
@ -10,24 +11,25 @@ npm install
```
### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
quasar dev
```
### Lint the files
```bash
yarn lint
# or
npm run lint
```
### Build the app for production
```bash
quasar build
```
### Customize the configuration
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

4
client/babel.config.cjs
View File

@ -5,9 +5,7 @@ module.exports = (api) => {
presets: [
[
'@quasar/babel-preset-app',
api.caller((caller) => caller && caller.target === 'node')
? { targets: { node: 'current' } }
: {},
api.caller((caller) => caller && caller.target === 'node') ? { targets: { node: 'current' } } : {},
],
],
};

42
client/jsconfig.json
View File

@ -2,38 +2,16 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": [
"src/*"
],
"app/*": [
"*"
],
"components/*": [
"src/components/*"
],
"layouts/*": [
"src/layouts/*"
],
"pages/*": [
"src/pages/*"
],
"assets/*": [
"src/assets/*"
],
"boot/*": [
"src/boot/*"
],
"stores/*": [
"src/stores/*"
],
"vue$": [
"node_modules/vue/dist/vue.runtime.esm-bundler.js"
]
"src/*": ["src/*"],
"app/*": ["*"],
"components/*": ["src/components/*"],
"layouts/*": ["src/layouts/*"],
"pages/*": ["src/pages/*"],
"assets/*": ["src/assets/*"],
"boot/*": ["src/boot/*"],
"stores/*": ["src/stores/*"],
"vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
}
},
"exclude": [
"dist",
".quasar",
"node_modules"
]
"exclude": ["dist", ".quasar", "node_modules"]
}

1240
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
client/package.json
View File

@ -7,7 +7,9 @@
"private": true,
"scripts": {
"lint": "eslint --ext .js,.vue ./",
"lint:fix": "eslint --ext .js,.vue --fix ./",
"lint:fix": "eslint --ext .js,.vue, --fix ./",
"lint:css": "stylelint '**/*.scss'",
"lint:css:fix": "npm run lint:css -- --fix",
"test": "echo \"No test specified\" && exit 0",
"serve": "npx cross-env NODE_ENV=development quasar dev",
"serve:ssr": "quasar dev -m ssr",
@ -64,6 +66,10 @@
"postcss-simple-vars": "^7.0.1",
"prettier": "^3.3.2",
"sass-loader": "^13.3.2",
"stylelint": "^16.7.0",
"stylelint-config-clean-order": "^6.1.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^13.1.0",
"vue-loader": "^17.3.0"
},
"browserslist": [

20
client/quasar.config.js
View File

@ -80,9 +80,7 @@ module.exports = configure(function (ctx) {
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
// chain.plugin('normal-module-replacement').use(
// new webpack.NormalModuleReplacementPlugin(/settings$/, function(resource) {
// resource.request = resource.request.replace(/settings$/, `settings/${process.env.NODE_ENV}`);
@ -193,9 +191,7 @@ module.exports = configure(function (ctx) {
// Tell browser when a file from the server should expire from cache (in ms)
chainWebpackWebserver(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
middlewares: [
@ -213,9 +209,7 @@ module.exports = configure(function (ctx) {
// if using workbox in InjectManifest mode
chainWebpackCustomSW(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
manifest: {
@ -290,15 +284,11 @@ module.exports = configure(function (ctx) {
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackMain(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
chainWebpackPreload(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
},
};

10
client/src/App.vue
View File

@ -23,15 +23,7 @@ import Player from '@/components/player.vue';
import ChangingUser from '@/components/modal/сhanging-user.vue';
export default {
async preFetch({
store,
currentRoute,
previousRoute,
redirect,
ssrContext,
urlPath,
publicPath,
}) {},
async preFetch({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {},
components: {
ChangingUser,
Player,

40
client/src/assets/css/common.scss
View File

@ -4,19 +4,23 @@
box-sizing: border-box;
outline: none !important;
}
h1{
margin: 0;
h1 {
position: relative;
z-index: 2;
margin: 0;
}
.text{
.text {
@mixin p;
}
.h1 {
@mixin h1;
}
.h2, h2 {
.h2,
h2 {
@mixin h2;
}
@ -34,11 +38,13 @@ h1{
.title {
@mixin p;
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
font-size: 34px;
&.m--white{
color: transparent;
background-image: var(--linear-gradient);
background-clip: text;
&.m--white {
color: var(--color-white);
}
}
@ -58,21 +64,25 @@ h1{
.a,
a {
@mixin a;
/*@mixin a--color $color-base;*/
/* @mixin a--color $color-base; */
}
html{
html {
scrollbar-color: var(--color-black) var(--bg-opacity);
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
body{
body {
padding: 0 !important;
font-family: var(--font-family-base);
font-size: var(--base-fz);
line-height: var(--base-lh);
background: var(--color-black);
font-family: var(--font-family-base);
color: var(--color-white);
padding: 0 !important;
background: var(--color-black);
}
.button {

58
client/src/assets/css/index.scss
View File

@ -1,31 +1,29 @@
@import "./mixins/responsive.scss";
@import "./setting.scss";
@import "./lib/reset.css";
@import './mixins/responsive.scss';
@import './setting.scss';
@import './lib/reset.css';
@import './lib/fonts.css';
@import "./mixins/form.scss";
@import "./mixins/text.scss";
@import "./common.scss";
@import "./module/app.scss";
@import "./module/app-header.scss";
@import "./module/app-footer.scss";
@import "./module/app-breadcrumbs.scss";
@import "./module/modal.scss";
@import "./module/fiald.scss";
@import "./module/pagination.scss";
@import "./module/home.scss";
@import "./module/team.scss";
@import "./module/rubric.scss";
@import "./module/blog.scss";
@import "./module/authentication.scss";
@import "./module/tabs.scss";
@import "./module/about.scss";
@import "./module/playlists.scss";
@import "./module/playlist.scss";
@import "./module/contacts.scss";
@import "./module/support.scss";
@import "./module/player.scss";
@import "./module/loader.scss";
@import "./module/profile.scss";
@import "./module/song.scss";
@import './mixins/form.scss';
@import './mixins/text.scss';
@import './common.scss';
@import './module/app.scss';
@import './module/app-header.scss';
@import './module/app-footer.scss';
@import './module/app-breadcrumbs.scss';
@import './module/modal.scss';
@import './module/fiald.scss';
@import './module/pagination.scss';
@import './module/home.scss';
@import './module/team.scss';
@import './module/rubric.scss';
@import './module/blog.scss';
@import './module/authentication.scss';
@import './module/tabs.scss';
@import './module/about.scss';
@import './module/playlists.scss';
@import './module/playlist.scss';
@import './module/contacts.scss';
@import './module/support.scss';
@import './module/player.scss';
@import './module/loader.scss';
@import './module/profile.scss';
@import './module/song.scss';

1
client/src/assets/css/lib/fonts.css
View File

@ -68,4 +68,3 @@
font-style: normal;
font-display: swap;
}

125
client/src/assets/css/lib/reset.css
View File

@ -1,16 +1,84 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
@ -18,8 +86,17 @@ time, mark, audio, video {
font-size: 100%;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
@ -27,16 +104,20 @@ body {
line-height: 1;
}
ol, ul {
ol,
ul {
list-style: none;
}
blockquote, q {
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none;
}
@ -45,13 +126,15 @@ table {
border-spacing: 0;
}
input, textarea, select {
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
img{
img {
width: 100%;
max-width: 100%;
}

142
client/src/assets/css/mixins/form.scss
View File

@ -1,53 +1,66 @@
@define-mixin input {
width: 100%;
margin-bottom: 10px;
padding: 1rem 1.2rem;
color: var(--color-white);
background: transparent;
border: 1px solid var(--color-white);
border-radius: 40px;
padding: 1rem 1.2rem;
width: 100%;
color: var(--color-white);
margin-bottom: 10px;
}
@define-mixin button {
font-family: var(--font-family-base);
color: var(--color-white);
min-width: 220px;
@define-mixin button {
cursor: pointer;
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
vertical-align: middle;
min-width: 220px;
min-height: 3rem;
font-family: var(--font-family-base);
font-size: 1rem;
font-weight: 500;
line-height: 1rem;
color: var(--color-white);
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
line-height: 1rem;
border-radius: 100px;
cursor: pointer;
border: 1px solid var(--color-white);
min-height: 3rem;
transition: border 0.5s ease, background 0.5s ease, color 0.5s ease;
background: transparent;
position: relative;
z-index: 2;
vertical-align: middle;
background: transparent;
border: 1px solid var(--color-white);
border-radius: 100px;
transition:
border 0.5s ease,
background 0.5s ease,
color 0.5s ease;
&:hover {
cursor: url("./assets/img/icon/cursor.svg"), auto;
cursor: url('./assets/img/icon/cursor.svg'), auto;
color: var(--color-black);
background: var(--color-white);
}
&-violet{
border-color: var(--color-primary);
&-violet {
color: var(--color-primary);
border-color: var(--color-primary);
&:hover {
border-color: transparent;
}
}
&.is-active,
&:active {
cursor: url("./assets/img/icon/cursor.svg"), auto;
cursor: url('./assets/img/icon/cursor.svg'), auto;
color: var(--color-black);
background: var(--color-white-darker);
}
@ -67,9 +80,10 @@
&.m--blur {
min-width: 0;
padding: 1rem 1.5rem;
background: var(--bg-opacity);
border: none;
backdrop-filter: blur(5px);
border: none;
&:hover {
background: var(--color-white);
@ -84,25 +98,30 @@
&.m--arrow {
&::after {
margin-left: 10px;
content: '';
width: 20px;
height: 20px;
margin-left: 10px;
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
background-size: cover;
transition: background 0.3s ease, width 0.3s ease;
transition:
background 0.3s ease,
width 0.3s ease;
}
&:hover::after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
width: 45px;
height: 20px;
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
}
&.m--active,
&:active {
background:transparent;
color: var(--color-white);
background: transparent;
}
}
@ -124,7 +143,9 @@
content: '';
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
background-size: cover;
transition: background 0.3s ease, width 0.3s ease;
transition:
background 0.3s ease,
width 0.3s ease;
}
&:hover::after {
@ -132,58 +153,65 @@
}
}
}
&.m--text-link{
border: none;
pad: 0;
&.m--text-link {
@mixin a;
min-width: 0;
min-height: 0;
padding: 0;
&:hover{
border: none;
pad: 0;
&:hover {
background: transparent;
}
@mixin a;
}
&.m--circle {
width: 56px;
height: 56px;
min-width: 0;
border-color: var(--color-white-opacity);
overflow: hidden;
&:before {
background: var(--linear-gradient);
width: 56px;
min-width: 0;
height: 56px;
border-color: var(--color-white-opacity);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
inset: 0;
opacity: 0;
transition: opacity .3s ease;
background: var(--linear-gradient);
transition: opacity 0.3s ease;
}
&:after {
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
inset: 0;
transform: rotate(-45deg);
width: 18px;
height: 18px;
margin: auto auto;
margin: auto;
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#404145FF) no-repeat 100%;
transform: rotate(-45deg);
}
&:hover:before {
&:hover::before {
cursor: url('./assets/img/icon/cursor.svg'), auto;
opacity: 1;
cursor: url("./assets/img/icon/cursor.svg"), auto;
}
&:hover:after {
&:hover::after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
}
}
}

10
client/src/assets/css/mixins/responsive.scss
View File

@ -1,7 +1,6 @@
@define-mixin responsive-xl{
@define-mixin responsive-xl {
@media (max-width: $document-width-xl) {
@mixin-content;
}
}
@ -11,31 +10,26 @@
}
}
@define-mixin responsive-m {
@media (max-width: $document-width-m) {
@mixin-content;
}
}
@define-mixin responsive-s {
@media (max-width: $document-width-s) {
@mixin-content;
}
}
@define-mixin responsive-xs {
@media (max-width: $document-width-xs) {
@mixin-content;
}
}
@define-mixin responsive-xxs {
@define-mixin responsive-xxs {
@media (max-width: $document-width-xxs) {
@mixin-content;
}
}

133
client/src/assets/css/mixins/text.scss
View File

@ -1,6 +1,7 @@
@define-mixin __p {
position: relative;
z-index: 2;
&:first-child {
margin-top: 0;
}
@ -33,67 +34,79 @@
@define-mixin h1 {
@mixin __p;
/*margin-top: 32px;*/
margin-bottom: 1.5rem;
font-size: 100px;
line-height: 1.2;
font-weight: 500;
color: var(--color-white);
padding-bottom: 6px;
@mixin responsive-l {
font-size: 84px;
}
@mixin responsive-m {
font-size: 48px;
}
@mixin responsive-s {
font-size: 36px;
}
/* margin-top: 32px; */
margin-bottom: 1.5rem;
padding-bottom: 6px;
font-size: 100px;
font-weight: 500;
line-height: 1.2;
color: var(--color-white);
}
@define-mixin h2 {
@mixin __p;
margin: 2.5rem 0;
font-size: 3.375rem;
line-height: 1.3;
font-weight: 500;
color: transparent;
padding-bottom: 6px;
background-clip: text;
background-image: var(--linear-gradient);
text-transform: uppercase;
@mixin responsive-l {
font-size:40px;
font-size: 40px;
line-height: 1.1;
}
@mixin responsive-m {
font-size:32px;
font-size: 32px;
}
/*@mixin responsive-s {
margin: 2.5rem 0;
padding-bottom: 6px;
font-size: 3.375rem;
font-weight: 500;
line-height: 1.3;
color: transparent;
text-transform: uppercase;
background-image: var(--linear-gradient);
background-clip: text;
/* @mixin responsive-s {
font-size: 36px;
}*/
} */
&.m--white {
color: var(--color-white);
margin: 1.5rem 0;
color: var(--color-white);
}
&.m--border {
&:after {
margin-top: 10px;
&::after {
content: '';
display: block;
background: url("./assets/img/icon/borderLine.svg");
max-width: 260px;
width: 100%;
max-width: 260px;
height: 10px;
margin-top: 10px;
background: url('./assets/img/icon/borderLine.svg');
}
}
a {
text-decoration: none;
font-weight: 500;
color: var(--color-white);
text-decoration: none;
transition: color 0.5s ease;
&:hover {
@ -107,8 +120,9 @@
margin-top: 24px;
margin-bottom: 16px;
font-weight: 700;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
@ -117,13 +131,15 @@
margin-top: 16px;
margin-bottom: 8px;
font-weight: 500;
font-size: 18px;
font-weight: 500;
line-height: 1.2;
}
@define-mixin p {
@mixin __p;
margin-top: 8px;
margin-bottom: 8px;
}
@ -131,13 +147,13 @@
@define-mixin ul {
@mixin p;
list-style: none;
padding: 0;
list-style: none;
li {
padding-left: 15px;
position: relative;
margin-bottom: 16px;
padding-left: 15px;
/* &:before {
content: '';
@ -150,14 +166,17 @@
background-position: center;
background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
background-repeat: no-repeat;
}*/
&:before {
} */
&::before {
content: '';
position: absolute;
top: 7px;
left: 0;
width: 5px;
height: 5px;
top: 7px;
background: var(--color-white);
border-radius: 50%;
}
@ -171,11 +190,14 @@
li {
padding-left: 1rem;
&:before {
&::before {
content: '•';
top: 0;
height: auto;
width: auto;
height: auto;
background: none;
}
}
@ -185,18 +207,21 @@
@define-mixin ol {
@mixin p;
list-style: none;
counter-reset: item;
list-style: none;
li {
counter-increment: item;
margin-bottom: 16px;
vertical-align: middle;
&:before {
&::before {
content: counter(item);
padding-left: 12px;
font-weight: 500;
font-size: 18px;
font-weight: 500;
line-height: 24px;
color: var(--color-white);
}
@ -208,18 +233,23 @@
}
@define-mixin a {
text-decoration: none;
font-weight: 500;
transition: all 0.5s ease;
color: var(--color-white);
position: relative;
z-index: 2;
&:hover {
color: transparent;
-webkit-background-clip: text;
background-image: var(--linear-gradient);
cursor: url("./assets/img/icon/cursor.svg"), auto;
font-weight: 500;
color: var(--color-white);
text-decoration: none;
transition: all 0.5s ease;
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
color: transparent;
text-decoration: none;
background-image: var(--linear-gradient);
background-clip: text;
}
&.m--link {
@ -228,13 +258,18 @@
border-bottom: 1px solid transparent;
&::after {
margin-left: 10px;
content: '';
width: 20px;
height: 20px;
margin-left: 10px;
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
background-size: cover;
transition: background 0.3s ease, width 0.3s ease;
transition:
background 0.3s ease,
width 0.3s ease;
}
&:hover {

31
client/src/assets/css/module/about.scss
View File

@ -13,10 +13,10 @@
}
&-right {
flex: 1 1 auto;
background: url("./assets/img/bg/about-banner.svg") no-repeat 50% 60%;
position: relative;
z-index: 2;
flex: 1 1 auto;
background: url('./assets/img/bg/about-banner.svg') no-repeat 50% 60%;
}
&-description {
@ -60,24 +60,25 @@
margin-bottom: var(--space-between-sections);
&-item {
width: calc(100% / 3 - 20px / 3);
min-height: 725px;
position: relative;
z-index: 2;
background-size: cover;
width: calc(100% / 3 - 20px / 3);
min-height: 725px;
background-repeat: no-repeat;
background-size: cover;
&.m--gallery-item-one {
background-image: url("./assets/img/bg/gallery-item-one.svg");
background-image: url('./assets/img/bg/gallery-item-one.svg');
}
&.m--gallery-item-two {
background-image: url("./assets/img/bg/gallery-item-two.svg");
background-image: url('./assets/img/bg/gallery-item-two.svg');
}
&.m--gallery-item-three {
background-image: url("./assets/img/bg/gallery-item-three.svg");
background-image: url('./assets/img/bg/gallery-item-three.svg');
}
}
}
@ -101,16 +102,18 @@
}
&-list {
}
&-item {
display: flex;
align-items: center;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-white-opacity);
}
}

20
client/src/assets/css/module/app-breadcrumbs.scss
View File

@ -1,18 +1,22 @@
.breadcrumbs{
.breadcrumbs {
display: flex;
margin-top: 80px;
margin-bottom: var(--space-between-block);
&__item{
&__item {
display: flex;
align-items: center;
&:last-child:after{
&::after {
content: '/';
margin: 0 10px;
}
&:last-child::after {
display: none;
}
&:after{
margin: 0 10px;
content: '/';
}
&-link{
&-link {
font-size: 0.875rem;
}
}

54
client/src/assets/css/module/app-footer.scss
View File

@ -1,22 +1,23 @@
.footer {
padding-bottom: var(--space-between-block);
width: 100%;
padding-bottom: var(--space-between-block);
&__top {
padding-bottom: 80px;
margin-bottom: 80px;
padding-bottom: 80px;
border-bottom: 1px solid var(--color-white-opacity);
}
&__question {
@mixin responsive-xs {
flex-direction: column;
align-items: flex-start;
}
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
gap: 10px;
@mixin responsive-xs {
align-items: flex-start;
flex-direction: column;
}
&-button {
margin-left: auto;
@ -25,27 +26,30 @@
&__bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: space-between;
}
&__menu {
display: grid;
grid-template-columns: var(--space-between-sections) var(--space-between-sections);
grid-template-rows: fit-content fit-content;
grid-column-gap: var(--space-between-sections);
grid-row-gap: var(--space-between-block);
@mixin responsive-m {
width: 100%;
grid-row-gap: 10px;
grid-template-rows: min-content;
grid-template-columns: min-content min-content min-content;
grid-template-rows: min-content;
width: 100%;
margin-bottom: var(--space-between-block);
}
@mixin responsive-s {
display: flex;
flex-wrap: wrap;
}
display: grid;
grid-gap: var(--space-between-block) var(--space-between-sections);
grid-template-columns: var(--space-between-sections) var(--space-between-sections);
grid-template-rows: fit-content fit-content;
&-item {
@mixin responsive-s {
width: 100%;
@ -58,24 +62,26 @@
}
&__social {
@mixin responsive-m {
grid-row-gap: 10px;
margin-bottom: var(--space-between-block);
}
display: flex;
flex-wrap: wrap;
gap: var(--space-between-block);
@mixin responsive-m {
margin-bottom: var(--space-between-block);
grid-row-gap: 10px;
}
}
&__connection {
@mixin responsive-m {
align-items: flex-start;
width: 100%;
}
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
@mixin responsive-m {
width: 100%;
align-items: flex-start;
}
}
}

160
client/src/assets/css/module/app-header.scss
View File

@ -1,21 +1,25 @@
.header {
position: sticky;
top: -30px;
z-index: 11;
width: 100%;
backdrop-filter: blur(100px);
@mixin responsive-l {
top: 0;
}
&__wrapper {
padding: 40px 20px 10px;
position: sticky;
z-index: 11;
top: -30px;
width: 100%;
display: flex;
align-items: center;
backdrop-filter: blur(100px);
&__wrapper {
@mixin responsive-l {
padding: 10px 20px;
}
display: flex;
align-items: center;
width: 100%;
padding: 40px 20px 10px;
}
&__logo {
@ -25,59 +29,66 @@
margin-right: auto;
&.m--menu {
display: none;
margin-bottom: var(--space-between-block);
@mixin responsive-l {
display: block;
}
display: none;
margin-bottom: var(--space-between-block);
}
&:hover {
cursor: url("./assets/img/icon/cursor.svg"), auto;
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
}
&__menu {
display: flex;
align-items: center;
transition: transform .3s ease;
@mixin responsive-xl {
gap: 20px;
}
@mixin responsive-l {
position: fixed;
z-index: 10;
top: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
flex-direction: column;
align-items: start;
top: 0;
left: 0;
width: 320px;
bottom: 0;
min-height: calc(100vh + 30px);
transform: translateX(-100%);
background: var(--color-black);
padding: 40px 20px 0;
z-index: 10;
background: var(--color-black);
&.m--active {
transform: translateX(0);
}
}
display: flex;
align-items: center;
transition: transform 0.3s ease;
&-item {
margin: 0 25px;
&.m--tools {
margin: 0 10px 0 25px;
}
@mixin responsive-xl {
margin: 0 10px;
&.m--tools {
margin: 0 5px 0 10px;
}
}
@mixin responsive-l {
@mixin responsive-l {
}
margin: 0 25px;
&.m--tools {
margin: 0 10px 0 25px;
}
}
@ -86,18 +97,21 @@
&.is-subactive {
color: transparent;
-webkit-background-clip: text;
background-image: var(--linear-gradient);
background-clip: text;
}
}
&-icon {
background: none;
border: none;
cursor: url('./assets/img/icon/cursor.svg'), auto;
width: 24px;
height: 24px;
cursor: url("./assets/img/icon/cursor.svg"), auto;
transition: all .3s ease;
background: none;
border: none;
transition: all 0.3s ease;
&.m--profile {
background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%;
@ -125,62 +139,66 @@
}
&__burger {
width: 38px;
height: 24px;
position: relative;
display: none;
&:hover {
cursor: url("./assets/img/icon/cursor.svg"), auto;
}
&.m--menu {
position: absolute;
right: 15px;
top: 15px;
}
&.m--active {
span {
display: none;
}
&:after {
transform: rotate(45deg);
bottom: 10px;
}
&:before {
transform: rotate(-45deg);
top: 10px;
}
}
@mixin responsive-l {
display: block;
}
&:after, &:before, span {
position: relative;
display: none;
width: 38px;
height: 24px;
&::after,
&::before,
span {
content: '';
position: absolute;
width: 100%;
height: 4px;
background: var(--color-white);
border-radius: 20px;
transition: all 0.3s ease;
}
&:before {
&::before {
top: 0;
}
&::after {
bottom: 0;
}
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
&.m--menu {
position: absolute;
top: 15px;
right: 15px;
}
&.m--active {
&::after {
bottom: 10px;
transform: rotate(45deg);
}
&::before {
top: 10px;
transform: rotate(-45deg);
}
span {
display: none;
}
}
span {
top: 10px;
}
&:after {
bottom: 0;
}
}
}

40
client/src/assets/css/module/app.scss
View File

@ -1,39 +1,43 @@
.app{
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-bottom: 100px;
&:after{
&::after {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url("./assets/img/bg/bg.svg");
z-index: 1;
inset: 0;
background: url('./assets/img/bg/bg.svg');
}
&__block{
&__block {
flex: 1 1 auto;
}
&__overlay{
&__overlay {
position: fixed;
z-index: 5;
inset: 0;
min-height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-black-cc);
}
&__content{
max-width: var(--container);
margin: 0 auto;
padding: 0 50px;
&__content {
@mixin responsive-l {
padding: 0 20px;
}
.m--indentation{
max-width: var(--container);
margin: 0 auto;
padding: 0 50px;
.m--indentation {
}
}
}

88
client/src/assets/css/module/blog.scss
View File

@ -3,77 +3,94 @@
&__header {
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
margin-bottom: var(--space-between-block);
row-gap: var(--space-between-block);
&-title{
align-items: start;
justify-content: space-between;
margin-bottom: var(--space-between-block);
&-title {
margin-bottom: 0;
}
&-btn{
margin-left: auto;
&-btn {
@mixin responsive-xxs {
width: 100%;
}
margin-left: auto;
}
}
&__content {
display: flex;
gap: 80px;
@mixin responsive-m {
flex-direction: column;
}
display: flex;
gap: 80px;
}
&__cover {
width: 100%;
max-height: 640px;
background: url("./assets/img/bg/blog.svg") no-repeat center;
position: relative;
z-index: 2;
background-size: cover;
@mixin responsive-m {
height: calc(var(--base-content-size) / 2);
max-height: none;
}
position: relative;
z-index: 2;
width: 100%;
max-height: 640px;
background: url('./assets/img/bg/blog.svg') no-repeat center;
background-size: cover;
}
&__list {
}
&__item {
border-bottom: 1px solid var(--color-white-opacity);
color: var(--color-white-opacity);
padding: 2rem 0;
position: relative;
z-index: 2;
transition: all .3s ease;
&:after, &:before {
position: absolute;
padding: 2rem 0;
color: var(--color-white-opacity);
border-bottom: 1px solid var(--color-white-opacity);
transition: all 0.3s ease;
&::after,
&::before {
content: '';
left: 0;
position: absolute;
right: 0;
background: var(--color-white-opacity);
height: 1px;
left: 0;
display: none;
transition: background .3s ease;
height: 1px;
background: var(--color-white-opacity);
transition: background 0.3s ease;
}
&:before {
&::before {
top: -1px;
}
&:after {
display: block;
&::after {
bottom: -1px;
display: block;
}
&:first-child {
&:before {
&::before {
display: block;
}
}
@ -81,33 +98,34 @@
&:hover {
color: var(--color-white);
&:after, &:before {
&::after,
&::before {
display: block;
background: var(--linear-gradient);
}
}
&:hover &-btn {
&:before {
&::before {
opacity: 1;
}
&:after {
&::after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
}
}
&-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
&-title {
font-size: 2rem;
width: calc(100% - 56px - 1rem);
margin-bottom: 2rem;
font-size: 2rem;
}
}

65
client/src/assets/css/module/contacts.scss
View File

@ -1,65 +1,84 @@
.contacts{
&__content{
.contacts {
&__content {
display: flex;
gap: var(--space-between-block);
margin-bottom: var(--space-between-sections);
}
&__info{
&:before {
&__info {
&::before {
content: '';
display: block;
height: 50px;
position: relative;
z-index: 2;
display: block;
width: 50px;
background: url("./assets/img/icon/one-circle.svg") no-repeat center;
height: 50px;
margin-bottom: 20px;
background: url('./assets/img/icon/one-circle.svg') no-repeat center;
}
}
&__item{
&__item {
display: flex;
flex-direction: column;
&:not(&:last-child){
&:not(&:last-child) {
margin-bottom: 20px;
}
}
&__social{
&__social {
display: flex;
gap: 10px;
&.m--telegram, &.m--vk{
&.m--telegram,
&.m--vk {
width: 25px;
height: 25px;
}
&.m--telegram{
background: url("./assets/img/icon/telegram.svg") no-repeat;
&.m--telegram {
background: url('./assets/img/icon/telegram.svg') no-repeat;
}
&.m--vk{
background: url("./assets/img/icon/vk.svg") no-repeat;
&.m--vk {
background: url('./assets/img/icon/vk.svg') no-repeat;
}
}
&__map{
&__map {
position: relative;
z-index: 2;
flex: 1 1 auto;
&-frame{
&-frame {
height: 100%;
}
}
&__form{
&__form {
position: relative;
z-index: 2;
max-width: 360px;
width: 100%;
&:before {
max-width: 360px;
&::before {
content: '';
display: block;
height: 50px;
position: relative;
z-index: 2;
display: block;
width: 100px;
background: url("./assets/img/icon/two-circle.svg") no-repeat center;
height: 50px;
margin-bottom: 20px;
background: url('./assets/img/icon/two-circle.svg') no-repeat center;
}
}
}

102
client/src/assets/css/module/fiald.scss
View File

@ -1,16 +1,18 @@
.field {
position: relative;
display: flex;
flex-direction: column;
padding-bottom: 28px;
margin-bottom: 8px;
padding-bottom: 28px;
padding-bottom: 0;
&&.m--100 {
width: 100%;
margin-right: 0;
}
&__inner {
display: flex;
flex-direction: column;
@ -18,7 +20,6 @@
height: 100%;
}
&__label {
display: none;
}
@ -26,92 +27,121 @@
.input {
@mixin input;
}
&__input{
&__input {
&.m--search {
position: relative;
&:before{
&::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
top: 16px;
left: 16px;
position: absolute;
width: 24px;
height: 24px;
background: svg-load('./assets/img/icon/search-icon.svg') no-repeat 100%;
}
.input{
.input {
padding: 1rem 1.2rem 1rem 3rem;
border: 1px solid var(--color-primary);
}
}
&.m--hidden{
&.m--hidden {
display: none;
}
}
&__checkbox {
&-label{
padding-left: 50px;
&-label {
display: flex;
padding-left: 50px;
font-size: 1rem;
color: var(--color-white-opacity);
&:hover {
cursor: url("./assets/img/icon/cursor.svg"), auto;
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
&:before{
content: "";
&::before {
cursor: pointer;
content: '';
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
position: absolute;
left: 0;
text-indent: -9999px;
display: block;
width: 40px;
height: 24px;
text-indent: -9999px;
background: var(--color-white-opacity);
display: block;
border-radius: 100px;
transition: all .3s ease;
transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&:after{
content: "";
&::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 90px;
transition: all .3s ease;
transition: all 0.3s ease;
}
}
&-input{
&-input {
display: none;
}
&-input:checked + &-label{
&:before{
&-input:checked + &-label {
&::before {
background: var(--color-primary);
}
&:after{
&::after {
left: 37px;
transform: translateX(-100%);
}
}
}
textarea{
border-radius: 30px !important;
textarea {
resize: none;
min-height: 80px;
scrollbar-color: var(--color-black) var(--color-white-opacity);
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-margin-right: 20px;
min-height: 80px;
border-radius: 30px !important;
}
&__comment{
font-size: 1rem;
&__comment {
margin-bottom: 1rem;
font-size: 1rem;
}
}

273
client/src/assets/css/module/home.scss
View File

@ -1,276 +1,335 @@
.home {
overflow-x: hidden;
&__meaning {
min-height: var(--base-content-size);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
&:after, &:before {
min-height: var(--base-content-size);
&::after,
&::before {
content: '';
position: absolute;
background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
background-size: 100%;
z-index: 1;
background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
background-size: 100%;
}
&:after {
&::after {
right: 50vh;
bottom: 10vh;
width: 300px;
height: 300px;
animation: moving-circle-2 9s infinite linear;
@keyframes moving-circle-2 {
0%{
-webkit-transform: rotate(360deg) translatex(100%) translatey(100%) scale(1.5);
0% {
transform: rotate(360deg) translateX(100%) translateY(100%) scale(1.5);
}
100%{
-webkit-transform: rotate(0deg) translatex(100%) translatey(100%) scale(1.5);
100% {
transform: rotate(0deg) translateX(100%) translateY(100%) scale(1.5);
}
}
}
&:before {
&::before {
bottom: 10vh;
left: 10vh;
width: 250px;
height: 250px;
left: 10vh;
bottom: 10vh;
animation: moving-circle-3 8s infinite linear;
@keyframes moving-circle-3 {
0%{
-webkit-transform: rotate(360deg) translatex(-100%) translatey(150%) scale(1.5);
0% {
transform: rotate(360deg) translateX(-100%) translateY(150%) scale(1.5);
}
100%{
-webkit-transform:rotate(0deg) translatex(-100%) translatey(200%) scale(1.5);
100% {
transform: rotate(0deg) translateX(-100%) translateY(200%) scale(1.5);
}
}
}
}
&__subtitle {
text-align: center;
max-width: 600px;
margin: 0 auto;
@mixin responsive-l {
padding: 0 20px;
}
span {
font-weight: 700;
}
&:after{
max-width: 600px;
margin: 0 auto;
text-align: center;
&::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
width: 400px;
height: 400px;
background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
background-size: 100%;
animation: moving-circle 10s infinite linear;
z-index: -1;
@keyframes moving-circle {
0%{
-webkit-transform: rotate(0) translatex(-400px) translatey(-100px) scale(1.5);
0% {
transform: rotate(0) translateX(-400px) translateY(-100px) scale(1.5);
}
50%{
-webkit-transform: rotate(180deg) translatex(-200px) translatey(-200px) scale(1);
50% {
transform: rotate(180deg) translateX(-200px) translateY(-200px) scale(1);
}
100%{
-webkit-transform: rotate(360deg) translatex(-400px) translatey(-100px) scale(1.5);
100% {
transform: rotate(360deg) translateX(-400px) translateY(-100px) scale(1.5);
}
}
}
span {
font-weight: 700;
}
}
&__title {
@mixin h1;
-webkit-background-clip: text;
text-align: center;
background-clip: text;
background-image: linear-gradient(91.17deg, var(--color-white) -4.01%, var(--color-white) 36.14%, var(--color-white) 77.44%, var(--color-white) 106.11%);
padding: 0 20px;
text-align: center;
background-image: linear-gradient(
91.17deg,
var(--color-white) -4.01%,
var(--color-white) 36.14%,
var(--color-white) 77.44%,
var(--color-white) 106.11%
);
background-clip: text;
background-clip: text;
span {
color: var(--color-black);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 3px transparent;
}
}
&__banner {
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("./assets/img/bg/home-banner.png") no-repeat center;
inset: 0;
scale: 0.8;
width: 1920px;
max-height: var(--base-content-size);
background-size: contain;
scale: 0.8;
margin-left: calc((100vw + -1 * 1920px) / 2);
background: url('./assets/img/bg/home-banner.png') no-repeat center;
background-size: contain;
}
&__description {
margin-top: calc(var(--space-between-sections) / 2);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: var(--space-between-sections);
@mixin responsive-m {
gap: var(--space-between-block);
}
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: calc(var(--space-between-sections) / 2);
margin-bottom: var(--space-between-sections);
}
&__info {
width: 60%;
@mixin responsive-m {
width: 100%;
}
width: 60%;
&--item {
display: flex;
justify-content: space-between;
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
@mixin responsive-s {
flex-direction: column;
gap: 10px;
}
display: flex;
justify-content: space-between;
color: transparent;
background-image: var(--linear-gradient);
background-clip: text;
&.m--circle {
align-items: end;
&:before {
content: '';
display: block;
width: 130px;
height: 130px;
background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
&::before {
@mixin responsive-s {
margin-right: auto;
width: 80px;
height: 80px;
margin-right: auto;
background-size: contain;
}
content: '';
display: block;
width: 130px;
height: 130px;
background: url('./assets/img/icon/circleGradient.svg') no-repeat center;
}
}
span {
font-weight: 400;
color: var(--color-white);
width: 57%;
@mixin responsive-m {
width: 75%;
}
@mixin responsive-s {
width: 100%;
}
width: 57%;
font-weight: 400;
color: var(--color-white);
}
}
}
&__content {
max-width: 360px;
@mixin responsive-m {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: calc(var(--space-between-block) / 2);
align-items: flex-start;
max-width: none;
}
max-width: 360px;
&--item {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 16px;
position: relative;
z-index: 2;
&:not(&:last-child){
margin-bottom: var(--space-between-block);
}
@mixin responsive-m {
width: calc((100% - var(--space-between-block)) / 3);
}
@mixin responsive-s {
width: 100%;
}
&:before {
content: '';
height: 50px;
margin-bottom: 10px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 16px;
&::before {
content: '';
position: relative;
z-index: 2;
height: 50px;
margin-bottom: 10px;
}
&.m--one-circle:before {
&:not(&:last-child) {
margin-bottom: var(--space-between-block);
}
&.m--one-circle::before {
width: 50px;
background: url("./assets/img/icon/one-circle.svg") no-repeat center;
background: url('./assets/img/icon/one-circle.svg') no-repeat center;
}
&.m--two-circle:before {
&.m--two-circle::before {
width: 100px;
background: url("./assets/img/icon/two-circle.svg") no-repeat center;
background: url('./assets/img/icon/two-circle.svg') no-repeat center;
}
&.m--three-circle:before {
&.m--three-circle::before {
width: 150px;
background: url("./assets/img/icon/three-circle.svg") no-repeat center;
background: url('./assets/img/icon/three-circle.svg') no-repeat center;
}
span {
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
background-clip: text;
}
}
}
&__social {
height: var(--base-content-size);
max-height: 900px;
background: url("./assets/img/bg/bg-social.svg") no-repeat center;
padding: 3rem 2.5rem;
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
z-index: 2;
height: var(--base-content-size);
max-height: 900px;
margin-bottom: var(--space-between-sections);
padding: 3rem 2.5rem;
background: url('./assets/img/bg/bg-social.svg') no-repeat center;
background-size: cover;
&:after {
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(179.74deg, rgba(0, 0, 0, 0) 0.23%, rgba(0, 0, 0, 0.66) 99.77%);
inset: 0;
background: linear-gradient(179.74deg, rgb(0 0 0 / 0%) 0.23%, rgb(0 0 0 / 66%) 99.77%);
}
&--tools {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
row-gap: var(--space-between-block);
align-items: flex-end;
justify-content: space-between;
}
&--description {
max-width: 45%;
@mixin responsive-xs {
max-width: 100%;
}
max-width: 45%;
}
&--btns {
display: grid;
grid-gap: 8px;
grid-template-columns: min-content min-content;
grid-template-rows: min-content min-content;
grid-column-gap: 8px;
grid-row-gap: 8px;
}
}
}

62
client/src/assets/css/module/loader.scss
View File

@ -1,63 +1,83 @@
.loader {
position: relative;
z-index: 2;
display: flex;
gap: 1rem;
align-items: center;
margin: 0.75rem 0;
font-size: 1.25rem;
font-weight: 600;
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
margin: 0.75rem 0;
gap: 1rem;
position: relative;
z-index: 2;
background-clip: text;
.spinner {
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
position: relative;
animation: rotate 1s linear infinite;
&:before, &:after {
content: "";
box-sizing: border-box;
&::before,
&::after {
content: '';
position: absolute;
inset: 0px;
border-radius: 50%;
inset: 0;
box-sizing: border-box;
border: 5px solid var(--color-primary);
border-radius: 50%;
animation: prixClipFix 5s linear infinite;
}
&:after {
border-color: var(--color-white);
animation: prixClipFix 5s linear infinite, rotate 0.5s linear infinite reverse;
&::after {
inset: 6px;
border-color: var(--color-white);
animation:
prixClipFix 5s linear infinite,
rotate 0.5s linear infinite reverse;
}
}
}
@keyframes rotate {
0% {
transform: rotate(0deg)
transform: rotate(0deg);
}
100% {
transform: rotate(360deg)
transform: rotate(360deg);
}
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}
100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
}

80
client/src/assets/css/module/modal.scss
View File

@ -1,38 +1,45 @@
.modal {
&__container {
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
.vfm__overlay {
background: var(--bg-wrapper-modal);
}
&.m--right{
justify-content: flex-end;
&.m--right {
align-items: stretch;
justify-content: flex-end;
}
}
&__container.m--right &__block{
margin: 0;
&__container.m--right &__block {
max-height: none;
margin: 0;
}
&__block {
position: relative;
display: flex;
flex-direction: column;
margin: 0 1.5rem;
padding: 2.5rem;
background: var(--color-black);
min-width: 360px;
max-width: 90vw;
min-height: 96px;
max-height: 90vh;
max-width: 90vw;
min-width: 360px;
&.m--half{
max-width: 950px;
margin: 0 1.5rem;
padding: 2.5rem;
background: var(--color-black);
&.m--half {
width: 50%;
max-width: 950px;
}
&.m--long {
width: 100%;
max-width: 950px;
@ -48,41 +55,56 @@
max-width: 420px;
}
}
&__content{
&__content {
min-width: 360px;
}
&__title{
font-size: 2rem;
&__title {
margin-bottom: 2.5rem;
font-size: 2rem;
}
&__close{
width: 30px;
height: 30px;
&__close {
position: absolute;
top: 5px;
right: 5px;
background: transparent;
border: none;
width: 30px;
min-width: 0;
height: 30px;
min-height: 0;
padding: 0;
&:after,&:before{
background: transparent;
border: none;
&::after,
&::before {
content: '';
position: absolute;
background: var(--color-white);
left: 5px;
right: 5px;
left: 5px;
height: 2px;
background: var(--color-white);
border-radius: 20px;
transition: all .3s ease;
transition: all 0.3s ease;
}
&:after{
&::after {
transform: rotate(45deg);
}
&:before{
&::before {
transform: rotate(-45deg);
}
&:hover:after, &:hover:before{
&:hover::after,
&:hover::before {
background: var(--color-black);
}
}

38
client/src/assets/css/module/pagination.scss
View File

@ -3,52 +3,58 @@
justify-content: center;
margin-top: var(--space-between-block);
margin-bottom: var(--space-between-sections);
&__list {
display: flex;
}
&__item {
margin: 0 5px;
}
&__link {
padding: 0 5px;
&.m--current{
&.m--current {
color: transparent;
-webkit-background-clip: text;
background-image: var(--linear-gradient);
background-clip: text;
}
}
&__btn {
min-height: 25px;
min-width: 25px;
position: relative;
min-width: 25px;
min-height: 25px;
border-radius: 50%;
&:after {
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
margin: 5px;
}
&:hover{
&:hover {
background: var(--color-white);
}
&.m--prev:after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
&.m--prev::after {
transform: rotate(180deg);
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
}
&.m--prev:hover:after{
&.m--prev:hover::after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
}
&.m--next:after {
&.m--next::after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
}
&.m--next:hover:after{
&.m--next:hover::after {
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
}
}

172
client/src/assets/css/module/player.scss
View File

@ -1,13 +1,17 @@
.player {
position: fixed;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: blur(100px);
z-index: 3;
padding: 10px var(--space-between-block);
display: flex;
gap: var(--space-between-block);
padding: 10px var(--space-between-block);
backdrop-filter: blur(100px);
//display: none;
&__cover {
width: 80px;
@ -20,20 +24,24 @@
}
&__top {
margin-bottom: 10px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
&__executor {
font-size: 1rem;
display: flex;
flex-direction: column;
margin-left: 20px;
gap: 0.25rem;
margin-left: 20px;
font-size: 1rem;
span {
color: var(--color-white-opacity);
}
&.m--skeleton {
min-width: 135px;
}
@ -42,179 +50,204 @@
&__favorites {
width: 27px;
height: 27px;
background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF)
no-repeat 100%;
margin-left: var(--space-between-block);
background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%;
&.m--skeleton {
background: none;
}
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
&.m--active {
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF)
no-repeat 100%;
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
}
}
&__bottom {
display: flex;
align-items: center;
gap: 20px;
align-items: center;
}
&__time {
font-size: 1rem;
color: var(--color-white-opacity);
font-weight: 500;
position: relative;
min-width: 105px;
font-size: 1rem;
font-weight: 500;
color: var(--color-white-opacity);
&.m--ether {
padding-right: 10px;
&:after {
&::after {
content: '';
animation: blink 1s infinite;
position: absolute;
border-radius: 50%;
left: 40px;
top: 0;
left: 40px;
width: 5px;
height: 5px;
background: var(--color-emmit);
border-radius: 50%;
animation: blink 1s infinite;
}
}
}
&__tools {
display: flex;
gap: var(--space-between-block);
align-items: center;
margin-left: auto;
&.m--skeleton {
min-width: 200px;
}
}
&__volume {
display: flex;
align-items: center;
position: relative;
display: flex;
gap: 10px;
align-items: center;
&-on {
width: 24px;
height: 24px;
background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat
100%;
background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat 100%;
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
}
&-off {
width: 24px;
height: 24px;
background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF)
no-repeat 100%;
background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) no-repeat 100%;
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
}
input {
position: relative;
appearance: none;
overflow: hidden;
display: block;
width: calc(100% - 34px);
height: 5px;
border-radius: 10px;
display: block;
background: var(--color-white-opacity);
overflow: hidden;
margin: 0;
appearance: none;
background: var(--color-white-opacity);
border-radius: 10px;
&::-webkit-slider-thumb,
&::-webkit-slider-thumb {
width: 1px;
height: 5px;
appearance: none;
box-shadow: -100vmax 0 0 100vmax var(--color-white);
}
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
}
}
&::-webkit-slider-thumb,
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1px;
height: 5px;
box-shadow: -100vmax 0 0 100vmax var(--color-white);
}
}
}
&__progress {
flex: 1 1 auto;
position: relative;
flex: 1 1 auto;
input {
position: relative;
appearance: none;
overflow: hidden;
display: block;
width: 100%;
height: 5px;
border-radius: 10px;
display: block;
background: var(--color-white-opacity);
margin-bottom: 20px;
overflow: hidden;
margin: 0;
margin-bottom: 20px;
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
appearance: none;
background: var(--color-white-opacity);
border-radius: 10px;
&::-webkit-slider-thumb,
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1px;
height: 5px;
appearance: none;
box-shadow: -100vmax 0 0 100vmax var(--color-primary);
}
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
}
}
&__btn {
min-height: 0;
min-width: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: var(--color-primary);
position: relative;
width: 50px;
min-width: 0;
height: 50px;
min-height: 0;
background: var(--color-primary);
border: none;
border-radius: 50%;
&.m--play {
&:after {
&::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
margin: auto;
background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat
100%;
background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
background-size: contain;
}
&:hover:after {
background: svg-load('./assets/img/icon/play.svg', fill=$color-primary)
no-repeat 100%;
&:hover::after {
background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
background-size: contain;
}
}
&.m--pause {
&:after {
&::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
margin: auto;
background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF)
no-repeat 100%;
background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
background-size: contain;
}
&:hover:after {
background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary)
no-repeat 100%;
&:hover::after {
background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
background-size: contain;
}
}
@ -229,6 +262,7 @@
from {
opacity: 1;
}
to {
opacity: 0;
}

144
client/src/assets/css/module/playlist.scss
View File

@ -1,133 +1,173 @@
.playlist {
position: relative;
z-index: 2;
&__header{
&__header {
display: flex;
align-items: center;
gap: calc(var(--space-between-block) / 2);
align-items: center;
margin-bottom: var(--space-between-block);
}
&__title{
font-size: 32px;
&__title {
margin: 0;
padding: 0;
&.m--margin{
font-size: 32px;
&.m--margin {
margin-bottom: 1rem;
}
}
&__back{
&__back {
cursor: url('./assets/img/icon/cursor.svg'), auto;
width: 30px;
height: 30px;
background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%;
cursor: url("./assets/img/icon/cursor.svg"), auto;
transition: all .3s ease;
&:hover{
transition: all 0.3s ease;
&:hover {
background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
}
}
&__edit{
&__edit {
cursor: url('./assets/img/icon/cursor.svg'), auto;
width: 30px;
height: 30px;
background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%;
cursor: url("./assets/img/icon/cursor.svg"), auto;
transition: all .3s ease;
&:hover{
transition: all 0.3s ease;
&:hover {
background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%;
}
}
&-roster {
display: flex;
flex-wrap: wrap;
gap: calc(var(--space-between-block) / 2);
width: 100%;
}
&-edit{
&-edit {
position: relative;
z-index: 2;
&__search{
&__search {
margin-bottom: var(--space-between-block);
}
&__search{
min-width: 320px;
&__search {
width: 40%;
min-width: 320px;
}
&__list{
&__list {
display: flex;
gap: var(--space-between-block);
}
&__item{
width: calc(50% - var(--space-between-block) / 2) ;
&__item {
width: calc(50% - var(--space-between-block) / 2);
}
&__title{
color: transparent;
font-size: 2rem;
background-clip: text;
background-image: var(--linear-gradient);
&__title {
margin-bottom: 1rem;
}
&__upload{
cursor: url("./assets/img/icon/cursor.svg"), auto;
border: none;
padding: 0;
background-clip: text;
font-size: 2rem;
color: transparent;
background-image: var(--linear-gradient-highlight);
margin: 0 0 var(--space-between-block);
transition: all .3s ease;
background-image: var(--linear-gradient);
background-clip: text;
}
&__upload {
cursor: url('./assets/img/icon/cursor.svg'), auto;
display: flex;
gap: 10px;
&:before{
margin: 0 0 var(--space-between-block);
padding: 0;
color: transparent;
background-image: var(--linear-gradient-highlight);
background-clip: text;
border: none;
transition: all 0.3s ease;
&::before {
content: '';
width: 20px;
height: 20px;
background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%;
}
&:hover{
&:hover {
color: var(--color-white);
}
}
}
&-item {
z-index: 2;
cursor: url('./assets/img/icon/cursor.svg'), auto;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-width: 220px;
cursor: url("./assets/img/icon/cursor.svg"), auto;
&__cover {
min-height: 220px;
margin-bottom: 10px;
background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%;
border-radius: 10px;
transition: all 0.3s ease;
&:hover {
margin-bottom: 10px;
transition: all .3s ease;
min-height: 220px;
&:hover{
background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%;
border-radius: 10px;
margin-bottom: 10px;
}
}
&.m--create &__cover {
position: relative;
background: var(--bg-opacity);
&:after {
&::after {
content: '';
position: absolute;
inset: 0;
width: 63px;
height: 63px;
background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
transition: all .3s ease;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
transition: all 0.3s ease;
}
&:hover{
&:hover {
background: var(--color-primary);
&:after{
&::after {
background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
}
}

32
client/src/assets/css/module/playlists.scss
View File

@ -1,37 +1,43 @@
.playlists {
&__content {
}
&__list {
}
&__item {
display: flex;
position: relative;
padding-bottom: 1rem;
align-items: center;
gap: 20px;
padding-top: 1rem;
&:after{
display: flex;
gap: 20px;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
&::after {
content: '';
position: absolute;
bottom: 0;
content: '';
width: 100%;
height: 1px;
background: var(--linear-gradient);
}
}
&__time{
&__time {
width: 100px;
margin: 0;
}
&__param{
margin: 0;
&__param {
width: 25%;
&.m--long{
margin: 0;
&.m--long {
flex: 1 1 auto;
}
}

3
client/src/assets/css/module/profile.scss
View File

@ -4,7 +4,8 @@
padding: 0;
font-size: 1.5rem;
}
&__tabs{
&__tabs {
margin-top: var(--space-between-block);
}
}

82
client/src/assets/css/module/rubric.scss
View File

@ -1,110 +1,142 @@
.rubric {
&-block {
margin-bottom: var(--space-between-sections);
&__header {
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
align-items: start;
justify-content: space-between;
&-title{
margin-bottom: 0;
}
}
&__description{
max-width: 60%;
margin-bottom: 2.5rem;
@mixin responsive-xxs {
max-width: none;
}
max-width: 60%;
margin-bottom: 2.5rem;
&.m--50{
margin-bottom: 0;
max-width: 50%;
width: 100%;
max-width: 50%;
margin-bottom: 0;
}
}
&__link{
@mixin responsive-xxs {
order: 1;
margin: var(--space-between-block) 0;
width: 100%;
margin: var(--space-between-block) 0;
}
}
&__list{
position: relative;
padding-bottom: 10px;
&:before{
&::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100%;
position: absolute;
content: '';
background: url("./assets/img/bg/rubric-list.svg") no-repeat;
background-position: 25%;
background-size: 35%;
}
}
&__item{
position: relative;
z-index: 2;
display: flex;
align-items: center;
position: relative;
padding: 20px 0;
z-index: 2;
&:hover{
cursor: url("./assets/img/icon/cursor.svg"), auto;
}
&:after{
&::after{
content: '';
position: absolute;
bottom: 0;
content: '';
background: #000;
width: 100%;
height: 1px;
background: #000;
background: var(--linear-gradient);
}
}
&__title{
transition: all .3s ease;
margin-right: auto;
padding-right: 10px;
color: var(--color-white);
text-wrap: nowrap;
padding-right: 10px;
transition: all .3s ease;
}
&__btn{
transition: all .35s ease, visibility .0s ease;
visibility: hidden;
text-wrap: nowrap;
min-width: 0;
width: 0;
min-width: 0;
text-wrap: nowrap;
visibility: hidden;
transition: all .35s ease, visibility .0s ease;
}
&__item:hover &__btn{
visibility: visible;
min-width: 240px;
width: 240px;
min-width: 240px;
margin-left: 20px;
visibility: visible;
}
&__item:hover &__title{
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
background-clip: text;
}
}
&-modal{
&__header{
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
&__title{
margin-bottom: 0;
}
&__close{
position: relative;
}
&__cover{
margin-bottom: 1.5rem;
}
&__description{
margin-bottom: 1.5rem;
}

105
client/src/assets/css/module/song.scss
View File

@ -4,26 +4,34 @@
flex-wrap: wrap;
gap: 0 var(--space-between-block);
}
.m--column &-item{
width: 100%;
}
&-item {
width: calc(50% - var(--space-between-block) / 2);
position: relative;
display: flex;
align-items: center;
z-index: 2;
border-left: 3px solid transparent;
padding: 10px;
transition: border .5s ease, background .5s ease;
background: transparent;
@mixin responsive-m {
width: 100%;
}
position: relative;
z-index: 2;
display: flex;
align-items: center;
width: calc(50% - var(--space-between-block) / 2);
padding: 10px;
background: transparent;
border-left: 3px solid transparent;
transition: border .5s ease, background .5s ease;
&.m--select &__selected {
margin-right: 20px;
width: 35px;
height: 33px;
margin-right: 20px;
&.m--stop {
path {
@ -33,8 +41,8 @@
}
&__selected {
width: 0;
overflow: hidden;
width: 0;
transition: all .2s ease;
path:nth-child(n) {
@ -53,110 +61,133 @@
&:hover {
cursor: url("./assets/img/icon/cursor.svg"), auto;
background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%);
border-color: var(--color-primary);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}
&__btn {
min-height: 0;
min-width: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: var(--color-primary);
position: relative;
width: 50px;
min-width: 0;
height: 50px;
min-height: 0;
background: var(--color-primary);
border: none;
border-radius: 50%;
&.m--small {
background: transparent;
width: 25px;
height: 25px;
background: transparent;
}
&.m--favorites {
&:after {
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
margin: auto;
background: svg-load('./assets/img/icon/favorites.svg', fill=$color-primary) no-repeat 100%;
background-size: contain;
transition: all .3s ease;
}
&:hover:after {
&:hover::after {
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
background-size: contain;
}
}
&.m--add {
&:after {
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
margin: auto;
background: svg-load('./assets/img/icon/add-icon.svg', fill=$color-primary) no-repeat 100%;
background-size: contain;
transition: all .3s ease;
}
&:hover:after {
&:hover::after {
background: svg-load('./assets/img/icon/add-icon.svg', fill=#FFF) no-repeat 100%;
background-size: contain;
}
}
&.m--already{
&:after {
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
margin: auto;
background: svg-load('./assets/img/icon/icon-trash.svg', stroke=$color-primary) no-repeat 100%;
background-size: contain;
transition: all .3s ease;
}
&:hover:after {
&:hover::after {
background: svg-load('./assets/img/icon/icon-trash.svg', stroke=#FFF) no-repeat 100%;
background-size: contain;
}
}
&.m--play {
&:after {
&::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
margin: auto;
background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
background-size: contain;
transition: all .3s ease;
}
&:hover:after {
&:hover::after {
background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
background-size: contain;
}
}
&.m--pause {
&:after {
&::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
margin: auto;
background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
background-size: contain;
transition: all .3s ease;
}
&:hover:after {
&:hover::after {
background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
background-size: contain;
}
@ -166,21 +197,23 @@
&__info {
display: flex;
flex-direction: column;
font-size: 1rem;
color: var(--color-white-opacity);
line-height: 21px;
margin-left: 20px;
font-size: 1rem;
line-height: 21px;
color: var(--color-white-opacity);
span {
color: var(--color-white);
}
}
&__tools {
margin-left: auto;
display: flex;
align-items: center;
gap: 20px;
align-items: center;
margin-left: auto;
}
}
}
@ -189,9 +222,11 @@
0% {
transform: translateY(0);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(0);
}

26
client/src/assets/css/module/support.scss
View File

@ -1,38 +1,46 @@
.support{
&-block{
margin-bottom: var(--space-between-sections);
&__item {
width: calc(100% / 3);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 16px;
width: calc(100% / 3);
margin-bottom: 2.5rem;
font-size: 16px;
&::before {
content: '';
position: relative;
z-index: 2;
&:before {
content: '';
height: 50px;
margin-bottom: 10px;
position: relative;
z-index: 2;
}
&.m--one-circle:before {
&.m--one-circle::before {
width: 50px;
background: url("./assets/img/icon/one-circle.svg") no-repeat center;
}
&.m--two-circle:before {
&.m--two-circle::before {
width: 100px;
background: url("./assets/img/icon/two-circle.svg") no-repeat center;
}
&.m--three-circle:before {
&.m--three-circle::before {
width: 150px;
background: url("./assets/img/icon/three-circle.svg") no-repeat center;
}
}
&__list{
display: flex;
gap: var(--space-between-block);

43
client/src/assets/css/module/tabs.scss
View File

@ -2,50 +2,61 @@
display: flex;
flex-wrap: wrap;
margin-bottom: var(--space-between-block);
&.m--btns{
gap: 10px;
@mixin responsive-xs {
.button{
width: 100%;
}
}
gap: 10px;
}
&__item {
border: none;
background: none;
position: relative;
display: flex;
margin-right: 10px;
padding: 0;
font-size: 2rem;
color: var(--color-white);
text-transform: uppercase;
font-size: 2rem;
margin-right: 10px;
position: relative;
display: flex;
padding: 0;
background: none;
border: none;
transition: all 0.5s ease;
&:after {
&::after {
content: '';
display: block;
width: 3px;
height: 100%;
margin-left: 10px;
background: var(--color-white);
border-radius: 20px;
height: 100%;
width: 3px;
margin-left: 10px;
}
&:last-child {
margin: 0;
&:after {
&::after {
display: none;
}
}
&.is-active, &:hover {
color: transparent;
-webkit-background-clip: text;
background-image: var(--linear-gradient);
cursor: url("./assets/img/icon/cursor.svg"), auto;
color: transparent;
background-image: var(--linear-gradient);
background-clip: text;
}
}
}

97
client/src/assets/css/module/team.scss
View File

@ -1,31 +1,36 @@
.team {
margin-left: auto;
max-width: calc(100vw - ((100vw - var(--container)) / 2));
margin-bottom: var(--space-between-sections);
position: relative;
z-index: 2;
@mixin responsive-xl {
padding: 0 0 0 20px;
}
position: relative;
z-index: 2;
max-width: calc(100vw - ((100vw - var(--container)) / 2));
margin-bottom: var(--space-between-sections);
margin-left: auto;
&__header {
display: flex;
max-width: var(--container);
margin-right: auto;
padding: 0 50px 0;
margin-bottom: var(--space-between-block);
@mixin responsive-xl {
padding: 0 40px 0 0;
column-gap: var(--space-between-block);
padding: 0 40px 0 0;
}
@mixin responsive-s {
flex-wrap: wrap;
}
display: flex;
max-width: var(--container);
margin-right: auto;
margin-bottom: var(--space-between-block);
padding: 0 50px;
}
&__title {
margin-bottom: 0;
margin-right: auto;
margin-bottom: 0;
text-wrap: nowrap;
}
@ -44,79 +49,93 @@
}
&__tools {
margin-top: 65px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
max-width: var(--container);
margin-right: auto;
row-gap: 1.5rem;
padding: 0 50px 0;
@mixin responsive-xl {
padding: 0 80px 0 35px;
}
@mixin responsive-l {
padding: 0 40px 0 0;
}
display: flex;
flex-wrap: wrap;
row-gap: 1.5rem;
align-items: center;
justify-content: space-between;
max-width: var(--container);
margin-top: 65px;
margin-right: auto;
padding: 0 50px;
.m--link{
@mixin responsive-s {
width: 100%;
display: flex;
justify-content: flex-end;
width: 100%;
}
}
}
&__progress {
width: 100%;
height: 4px;
position: relative;
max-width: 460px;
background: var(--color-white-opacity);
border-radius: 20px;
overflow: hidden;
@mixin responsive-s {
max-width: none;
}
position: relative;
overflow: hidden;
width: 100%;
max-width: 460px;
height: 4px;
background: var(--color-white-opacity);
border-radius: 20px;
span {
background: var(--color-white);
position: absolute;
left: 0;
top: 0;
left: 0;
transform-origin: left top;
width: 100%;
height: 100%;
transform-origin: left top;
background: var(--color-white);
}
}
&__cover {
margin-bottom: 0.5rem;
height: 450px;
overflow: hidden;
height: 450px;
margin-bottom: 0.5rem;
}
&__name {
font-weight: 500;
font-size: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 500;
span {
font-weight: 400;
font-size: 1.125rem;
font-weight: 400;
}
}
&__description {
max-width: 820px;
@mixin responsive-xl {
max-width: calc(100% - var(--space-between-block));
}
@mixin responsive-s {
max-width: none;
width: 100%;
max-width: none;
}
max-width: 820px;
}
}

22
client/src/assets/css/setting.scss
View File

@ -5,8 +5,9 @@ $document-width-s: 730px;
$document-width-xs: 640px;
$document-width-xxs: 480px;
$color-primary: #5e5bfc;
$color-white: #ffffff;
$color-white: #fff;
$color-white-opacity: #bbb9ca;
:root {
--color-black: #232323;
--color-white: $color-white;
@ -14,24 +15,14 @@ $color-white-opacity: #bbb9ca;
--color-white-opacity: $color-white-opacity;
--bg-wrapper-modal: #000000e5;
--color-primary: $color-primary;
--color-black-cc: #000000cc;
--color-black-cc: #000c;
--color-emmit: #e81717;
--bg-opacity: #74767d;
--base-fz: 18px;
--base-lh: 1.3;
--font-family-base: 'Manrope', 'Tahoma', sans-serif;
--linear-gradient-highlight: linear-gradient(
259.3deg,
#5e5bfc 0.44%,
#871df0 97.88%
);
--linear-gradient: linear-gradient(
91.17deg,
#c6f1f7 -4.01%,
#f983e9 36.14%,
#b877ff 77.44%,
#c2e9cd 106.11%
);
--linear-gradient-highlight: linear-gradient(259.3deg, #5e5bfc 0.44%, #871df0 97.88%);
--linear-gradient: linear-gradient(91.17deg, #c6f1f7 -4.01%, #f983e9 36.14%, #b877ff 77.44%, #c2e9cd 106.11%);
--container: $document-width-xl;
--space-between-block: calc(var(--base-fz) * 2.25);
--space-between-sections: calc(var(--base-fz) * 7);
@ -40,13 +31,16 @@ $color-white-opacity: #bbb9ca;
@media (max-width: $document-width-xl) {
--container: $document-width-l;
}
@media (max-width: $document-width-l) {
--container: $document-width-m;
}
@media (max-width: $document-width-m) {
--container: $document-width-s;
--space-between-sections: calc(var(--base-fz) * 2.7);
}
@media (max-width: $document-width-s) {
--container: $document-width-xs;
}

13
client/src/assets/img/favicon/fav-1.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6499 10.4707L36.2205 21.7959C37.8587 22.8014 37.9651 24.941 36.4308 26.07L19.8603 37.1358C17.9201 38.5687 15 37.326 15 35.0679V12.6794C15 10.53 17.6776 9.25767 19.6499 10.4707Z" fill="url(#paint0_linear_764_558)" stroke="url(#paint1_linear_764_558)" stroke-width="7.67085" stroke-miterlimit="10" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_764_558" x1="16.5052" y1="11.6349" x2="37.4699" y2="31.8231" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E00FE"/>
<stop offset="1" stop-color="#6800FF"/>
</linearGradient>
<linearGradient id="paint1_linear_764_558" x1="16.5052" y1="11.6349" x2="37.4699" y2="31.8231" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E00FE"/>
<stop offset="1" stop-color="#6800FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 881 B

13
client/src/assets/img/favicon/fav-2.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8909 7.29266L23.1931 14.3337C24.2116 14.9589 24.2778 16.289 23.3239 16.991L13.0217 23.8708C11.8155 24.7616 10 23.989 10 22.5851V8.66585C10 7.32952 11.6647 6.53848 12.8909 7.29266Z" fill="url(#paint0_linear_764_557)" stroke="url(#paint1_linear_764_557)" stroke-width="4.76909" stroke-miterlimit="10" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_764_557" x1="10.9358" y1="8.01644" x2="23.9699" y2="20.5678" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E00FE"/>
<stop offset="1" stop-color="#6800FF"/>
</linearGradient>
<linearGradient id="paint1_linear_764_557" x1="10.9358" y1="8.01644" x2="23.9699" y2="20.5678" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E00FE"/>
<stop offset="1" stop-color="#6800FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 884 B

13
client/src/assets/img/favicon/fav.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.44547 3.4592L11.5966 6.97972C12.1058 7.29229 12.1389 7.95738 11.6619 8.30836L6.51086 11.7482C5.90775 12.1937 5 11.8074 5 11.1054V4.14579C5 3.47763 5.83236 3.08211 6.44547 3.4592Z" fill="url(#paint0_linear_764_556)" stroke="url(#paint1_linear_764_556)" stroke-width="2.38454" stroke-miterlimit="10" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_764_556" x1="5.46789" y1="3.82109" x2="11.9849" y2="10.0968" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E00FE"/>
<stop offset="1" stop-color="#6800FF"/>
</linearGradient>
<linearGradient id="paint1_linear_764_556" x1="5.46789" y1="3.82109" x2="11.9849" y2="10.0968" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E00FE"/>
<stop offset="1" stop-color="#6800FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 882 B

BIN
client/src/assets/img/mock/template-artist.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

8
client/src/components/app-breadcrumbs.vue
View File

@ -1,12 +1,6 @@
<template>
<div class="app__breadcrumbs breadcrumbs">
<router-link
v-for="(item, key) in breadcrumbs"
:key="key"
v-slot="{ href, navigate }"
:to="item.route"
custom
>
<router-link v-for="(item, key) in breadcrumbs" :key="key" v-slot="{ href, navigate }" :to="item.route" custom>
<div v-if="item.name" class="breadcrumbs__item">
<a :href="href" class="breadcrumbs__item-link" @click="navigate">
{{ item.name }}

29
client/src/components/app-footer.vue
View File

@ -4,33 +4,20 @@
<h2 class="h2 m--white">Напишите нам</h2>
<div class="footer__question">
<div class="text">Остались вопросы? Мы с радостью вам ответим!</div>
<button class="button m--white m--arrow footer__question-button">
Написать
</button>
<button class="button m--white m--arrow footer__question-button">Написать</button>
</div>
</div>
<div class="footer__bottom">
<ul class="footer__menu">
<li
v-for="(item, key) in menu"
:key="key"
:class="['footer__menu-item', item.class]"
>
<router-link
:to="{ name: item.name, params: item.params }"
class="footer__menu-link"
>
<li v-for="(item, key) in menu" :key="key" :class="['footer__menu-item', item.class]">
<router-link :to="{ name: item.name, params: item.params }" class="footer__menu-link">
{{ item.title }}
</router-link>
</li>
</ul>
<div class="footer__connection">
<ul class="footer__social">
<li
v-for="(item, key) in socialMenu"
:key="key"
:class="['footer__menu-item', item.class]"
>
<li v-for="(item, key) in socialMenu" :key="key" :class="['footer__menu-item', item.class]">
<router-link :to="item.link" class="footer__menu-link">
{{ item.title }}
</router-link>
@ -38,14 +25,10 @@
</ul>
<ul class="footer__connection">
<li class="footer__menu-item">
<router-link to="#" class="m--underline">
it@radio.org
</router-link>
<router-link to="#" class="m--underline"> it@radio.org </router-link>
</li>
<li class="footer__menu-item">
<router-link to="#" class="m--underline">
+7 (900) 000-01-12
</router-link>
<router-link to="#" class="m--underline"> +7 (900) 000-01-12 </router-link>
</li>
</ul>
</div>

19
client/src/components/app-header.vue
View File

@ -11,16 +11,8 @@
<li class="header__logo m--menu" @click="next('home')">
<img src="@/assets/img/icon/logo.svg" alt="logo" />
</li>
<li
v-for="(item, key) in menu"
:key="key"
:class="['header__menu-item', item.class]"
>
<router-link
v-if="!item.action"
:to="{ name: item.name, params: item.params }"
class="header__menu-link"
>
<li v-for="(item, key) in menu" :key="key" :class="['header__menu-item', item.class]">
<router-link v-if="!item.action" :to="{ name: item.name, params: item.params }" class="header__menu-link">
{{ item.title }}
</router-link>
<button
@ -31,12 +23,7 @@
>
{{ item.title }}
</button>
<button
v-else
class="header__menu-icon"
:class="[item.icon]"
@click="handlerClick(item.action)"
></button>
<button v-else class="header__menu-icon" :class="[item.icon]" @click="handlerClick(item.action)"></button>
</li>
</ul>
<div class="header__burger" @click="handlerShowMenu">

6
client/src/components/blog.vue
View File

@ -36,15 +36,13 @@ export default {
},
{
id: 2,
title:
'Искусственный интеллект меняет мир технологий: возможности и вызовы',
title: 'Искусственный интеллект меняет мир технологий: возможности и вызовы',
time: '2',
data: '21 октября',
},
{
id: 3,
title:
'Как кибербезопасность становится ключевым фактором успеха в IT',
title: 'Как кибербезопасность становится ключевым фактором успеха в IT',
time: '2',
data: '21 октября',
},

5
client/src/components/modal/authentication.vue
View File

@ -161,10 +161,7 @@ export default {
node.setErrors([err.detail], err.error);
});
} else {
if (
this.formRegistration.password ===
this.formRegistration.repeatPassword
) {
if (this.formRegistration.password === this.formRegistration.repeatPassword) {
app
.createUser(this.formRegistration)
.then((res) => {

9
client/src/components/modal/rubric-modal.vue
View File

@ -19,10 +19,7 @@
<div class="title m--white rubric-modal__title">
{{ rubrik.name }}
</div>
<button
class="button modal__close rubric-modal__close"
@click="$emit('hideModal')"
></button>
<button class="button modal__close rubric-modal__close" @click="$emit('hideModal')"></button>
</div>
<div class="rubric-modal__cover">
<img :src="`${selfUrl}${rubrik.img}`" alt="" />
@ -30,9 +27,7 @@
<div class="rubric-modal__description">
{{ rubrik.description }}
</div>
<button class="button m--fit-content m--white m--arrow" v-if="user?.id">
Написать
</button>
<button class="button m--fit-content m--white m--arrow" v-if="user?.id">Написать</button>
</template>
</vue-final-modal>
</template>

18
client/src/components/pagination.vue
View File

@ -97,28 +97,16 @@ export default {
if (count <= 4) {
items.push({ text: item, value: item });
} else {
if (
item === 1 &&
this.currentPage !== item &&
this.currentPage - 1 !== 1 &&
this.currentPage - 2 !== 1
) {
if (item === 1 && this.currentPage !== item && this.currentPage - 1 !== 1 && this.currentPage - 2 !== 1) {
items.push({ text: '1', value: 1 });
items.push({ text: '...', value: null });
} else if (
item === count &&
this.currentPage + 1 !== count &&
this.currentPage + 2 !== count
) {
} else if (item === count && this.currentPage + 1 !== count && this.currentPage + 2 !== count) {
items.push({ text: '...', value: null });
items.push({ text: count, value: count });
} else {
let deltaPrev = count - this.currentPage <= 3 ? 3 : 2;
let deltaAfter = this.currentPage <= 3 ? 4 - this.currentPage : 2;
if (
item > this.currentPage - deltaPrev &&
item < this.currentPage + deltaAfter
) {
if (item > this.currentPage - deltaPrev && item < this.currentPage + deltaAfter) {
console.log(item);
items.push({ text: item, value: item });
}

84
client/src/components/player.vue
View File

@ -2,26 +2,17 @@
<div class="player">
<div class="player__cover">
<q-skeleton v-if="loaderPlay" height="100%" />
<img v-else :src="currentPlay.art" alt="player" />
<template v-else>
<img v-if="currentPlay.art" :src="currentPlay.art" alt="player" />
<img v-else :src="require('@/assets/img/mock/template-artist.png')" alt="player" />
</template>
</div>
<div class="player__content">
<div class="player__top">
<q-skeleton
v-if="loaderPlay"
type="circle"
class="player__btn m--skeleton"
/>
<q-skeleton v-if="loaderPlay" type="circle" class="player__btn m--skeleton" />
<template v-else>
<button
v-if="currentPlay.isPlay"
@click="handlerPause"
class="button player__btn m--pause"
></button>
<button
v-else
@click="handlerPlay"
class="button player__btn m--play"
></button>
<button v-if="currentPlay.isPlay" @click="handlerPause" class="button player__btn m--pause"></button>
<button v-else @click="handlerPlay" class="button player__btn m--play"></button>
</template>
<div class="player__executor">
<q-skeleton v-if="loaderPlay" class="player__executor m--skeleton" />
@ -37,12 +28,7 @@
</div>
<div @click="handleAuthRequired">
<q-skeleton v-if="loaderPlay" class="player__favorites m--skeleton" />
<div
v-else
class="player__favorites"
:class="[isFavorites && 'm--active']"
@click="handlerFavorites"
></div>
<div v-else class="player__favorites" :class="[isFavorites && 'm--active']" @click="handlerFavorites"></div>
</div>
<div class="player__tools">
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
@ -60,26 +46,14 @@
<span
ref="volumeIcon"
@click="toggleVolume"
:class="
songVolume == 0 ? 'player__volume-off' : 'player__volume-on'
"
/>
<input
type="range"
min="0"
max="1"
step="0.01"
v-model="songVolume"
@input="changeVolume"
:class="songVolume == 0 ? 'player__volume-off' : 'player__volume-on'"
/>
<input type="range" min="0" max="1" step="0.01" v-model="songVolume" @input="changeVolume" />
</div>
</div>
</div>
<div class="player__bottom">
<div
class="player__time"
:class="!loaderPlay && !isUserMusic && 'm--ether'"
>
<div class="player__time" :class="!loaderPlay && !isUserMusic && 'm--ether'">
<q-skeleton v-if="loaderPlay" />
<template v-else-if="isUserMusic">
{{ getTime(playerInfo.currentTime) }} /
@ -89,12 +63,7 @@
</div>
<div class="player__progress">
<q-skeleton v-if="loaderPlay" height="5px" />
<input
v-else
:disabled="!isUserMusic"
type="range"
v-model="playerInfo.progress"
/>
<input v-else :disabled="!isUserMusic" type="range" v-model="playerInfo.progress" />
</div>
</div>
</div>
@ -189,9 +158,7 @@ export default {
...this.userSongList[this.currentPlay.currentIndex || 0],
live: false,
});
this.getAudio(
this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id,
);
this.getAudio(this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id);
if (this.player.target) {
this.player.target.addEventListener('timeupdate', this.updateProgress);
}
@ -238,16 +205,12 @@ export default {
});
},
handleConnection(e) {
// console.log('getPlaying', e);
const jsonData = JSON.parse(e.data);
// console.log('jsonData', jsonData);
const data =
// Второй ответ
jsonData?.pub?.data ||
// Первый ответ
jsonData?.connect?.subs?.['station:it-radio']?.publications?.[0]?.data;
// console.log('getPlaying', data);
// console.log(data);
if (!data) return;
if (this.currentPlay.live) {
@ -255,12 +218,9 @@ export default {
const dataUrl = data.np.station.listen_url;
// Объект с данными музыки
const dataSong = data.np.now_playing.song;
// console.log(dataSong);
const playerUrl = this.player.target.src;
if (dataUrl !== playerUrl) {
// console.log('data.np.station.listen_url', dataUrl);
this.$store.dispatch('changePlayer', dataUrl);
// console.log(this.player);
this.actionCurrentPlay(dataSong);
}
if (dataSong.id !== this.currentPlay.id) {
@ -269,7 +229,7 @@ export default {
}
},
actionCurrentPlay(song) {
// console.log('actionCurrentPlay', data);
console.log('actionCurrentPlay', song);
const currentPlay = {
...this.currentPlay, // Инфа про текущий трек
...song,
@ -278,23 +238,18 @@ export default {
live: true,
currentIndex: null,
};
// console.log('params in getPlaying ', params);
// delete params.unique_id;
this.$store.dispatch('setCurrentPlay', currentPlay);
},
updateProgress(e) {
this.playerInfo = {
...this.playerInfo,
progress:
(this.player.target.currentTime / this.player.target.duration) * 100,
progress: (this.player.target.currentTime / this.player.target.duration) * 100,
currentTime: this.player.target.currentTime,
};
if (this.player.target.currentTime === this.player.target.duration) {
let currentIndex = this.currentPlay.currentIndex + 1;
if (
!this.userSongList[currentIndex]?.azura_id ||
currentIndex === null
) {
if (!this.userSongList[currentIndex]?.azura_id || currentIndex === null) {
currentIndex = 0;
}
this.$store.dispatch('setCurrentPlay', {
@ -334,9 +289,7 @@ export default {
if (this.user?.id) {
const params = {
...this.currentPlay,
azura_id: Number(this.currentPlay.id)
? this.currentPlay.azura_id
: this.currentPlay.id,
azura_id: Number(this.currentPlay.id) ? this.currentPlay.azura_id : this.currentPlay.id,
};
if (!this.isFavorites) {
delete params.id;
@ -396,8 +349,7 @@ export default {
this.player.target.addEventListener('timeupdate', this.updateProgress);
blob.arrayBuffer().then((buffer) => {
var audioContext = new (window.AudioContext ||
window.webkitAudioContext)();
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioContext.decodeAudioData(buffer, (decodedData) => {
this.playerInfo.duration = decodedData.duration;
});

32
client/src/components/rubric-block.vue
View File

@ -2,18 +2,13 @@
<div class="rubric-block">
<div class="rubric-block__header">
<h2 class="h2 rubric-block__header-title">Рубрики</h2>
<button
class="button m--arrow rubric-block__link"
v-if="$route.name !== 'rubric'"
@click="next('rubric')"
>
<button class="button m--arrow rubric-block__link" v-if="$route.name !== 'rubric'" @click="next('rubric')">
Смотреть все
</button>
<div class="p rubric-block__description">
IT-радио - это уникальная платформа для обмена опытом, знаниями и
обсуждения актуальных вопросов, связанных с разработкой программного
обеспечения, искусственного интеллекта, интернета вещей и других
направлений IT-индустрии
IT-радио - это уникальная платформа для обмена опытом, знаниями и обсуждения актуальных вопросов, связанных с
разработкой программного обеспечения, искусственного интеллекта, интернета вещей и других направлений
IT-индустрии
</div>
</div>
<template v-if="showLoader">
@ -23,27 +18,14 @@
</div>
</template>
<div v-else class="rubric-block__list">
<div
class="rubric-block__item"
v-for="rubrik in rubriks"
:key="`rubrik_${rubrik.id}`"
>
<div class="rubric-block__item" v-for="rubrik in rubriks" :key="`rubrik_${rubrik.id}`">
<div class="title rubric-block__title">{{ rubrik.name }}</div>
<div class="p rubric-block__description m--50">{{ rubrik.title }}</div>
<button
class="button m--arrow rubric-block__btn"
@click="showModalRubric(rubrik.id)"
>
Узнать больше
</button>
<button class="button m--arrow rubric-block__btn" @click="showModalRubric(rubrik.id)">Узнать больше</button>
</div>
</div>
</div>
<RubricModal
:showModal="isShowModalRubric"
@hideModal="hiddenModalRubric"
:selectRubric="ModalTemplate"
/>
<RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :selectRubric="ModalTemplate" />
</template>
<script>

55
client/src/components/song-item.vue
View File

@ -1,67 +1,32 @@
<template>
<div
class="song-item"
:class="[selectSong && 'm--select']"
@click="handlerSelectSong"
>
<div class="song-item" :class="[selectSong && 'm--select']" @click="handlerSelectSong">
<div class="song-item__selected" :class="[!isPlay && 'm--stop']">
<svg
width="33"
height="28"
viewBox="0 0 33 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
class=""
d="M0 15C0 13.6193 1.11929 12.5 2.5 12.5C3.88071 12.5 5 13.6193 5 15V27.5H0V15Z"
fill="#7138F4"
/>
<path
d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z"
fill="#7138F4"
/>
<path
d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z"
fill="#7138F4"
/>
<path
d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z"
fill="#7138F4"
/>
<path
d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z"
fill="#7138F4"
/>
<path d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z" fill="#7138F4" />
<path d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z" fill="#7138F4" />
<path d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z" fill="#7138F4" />
<path d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z" fill="#7138F4" />
</svg>
</div>
<div>
<button
v-if="isPlay"
@click.stop="handlerPause"
class="button song-item__btn m--pause"
></button>
<button
v-else
@click.stop="handlerPlay"
class="button song-item__btn m--play"
></button>
<button v-if="isPlay" @click.stop="handlerPause" class="button song-item__btn m--pause"></button>
<button v-else @click.stop="handlerPlay" class="button song-item__btn m--play"></button>
</div>
<div class="song-item__info">
<span>{{ song.title }}</span>
{{ song.artist }}
</div>
<div class="song-item__tools">
<button
class="button song-item__btn m--small m--favorites"
@click.stop="removeSong"
></button>
<button class="button song-item__btn m--small m--favorites" @click.stop="removeSong"></button>
<button
class="button song-item__btn m--small m--add"
:class="songAlreadyAddPlaylist && 'm--already'"
@click.stop="
songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()
"
@click.stop="songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()"
></button>
</div>
</div>

8
client/src/components/song-list.vue
View File

@ -4,9 +4,7 @@
v-for="song in songList"
:key="song"
:song="song"
:playSong="
song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false
"
:playSong="song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false"
:selectSong="song.azura_id === currentPlay.azura_id"
:songAlreadyAddPlaylist="songAlreadyAdd"
@selectSong="handlerSelectSong"
@ -46,9 +44,7 @@ export default {
methods: {
handlerSelectSong(params) {
const data = { ...this.currentPlay, ...params, isLoader: true };
data.currentIndex = this.songList.findIndex(
(el) => el.azura_id === params.azura_id,
);
data.currentIndex = this.songList.findIndex((el) => el.azura_id === params.azura_id);
this.$store.dispatch('setCurrentPlay', data);
console.log('handlerSelectSong');
},

12
client/src/components/support-block.vue
View File

@ -4,19 +4,17 @@
<div class="support-block__list">
<div class="support-block__item m--one-circle">
<div class="title">Донат</div>
Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут
на дальнейшее развитие проекта
Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут на дальнейшее развитие проекта
</div>
<div class="support-block__item m--two-circle">
<div class="title">Дело</div>
Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь
продвижением или делаете еще что-нибудь классное и думаете, что можете
быть нам полезны на волонтерских началах — свяжитесь с нами через форму
Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь продвижением или делаете еще что-нибудь
классное и думаете, что можете быть нам полезны на волонтерских началах — свяжитесь с нами через форму
</div>
<div class="support-block__item m--three-circle">
<div class="title">Развитие</div>
Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим
постом, видео в ютубе или рассказать о нас в своей аудитории
Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим постом, видео в ютубе или рассказать о нас в
своей аудитории
</div>
</div>
</div>

15
client/src/components/team.vue
View File

@ -3,9 +3,8 @@
<div class="team__header">
<h2 class="h2 team__title">Наша команда</h2>
<div class="team__description">
На IT волне команда профессионалов неутомимо трудится, чтобы дарить
слушателям самые свежие и актуальные новости из мира технологий,
отвечать на их вопросы и обсуждать горячие темы на IT радио.
На IT волне команда профессионалов неутомимо трудится, чтобы дарить слушателям самые свежие и актуальные новости
из мира технологий, отвечать на их вопросы и обсуждать горячие темы на IT радио.
</div>
</div>
<template v-if="showLoader">
@ -43,11 +42,7 @@
}"
class="team__slider"
>
<SwiperSlide
class="team__item"
v-for="employee in team"
:key="employee.id"
>
<SwiperSlide class="team__item" v-for="employee in team" :key="employee.id">
<div class="team__cover">
<img :src="`${selfUrl + employee.img_person}`" alt="user" />
</div>
@ -61,9 +56,7 @@
<div class="team__progress" ref="progressBar">
<span></span>
</div>
<router-link :to="{ name: 'about' }" class="m--link">
Больше о нас
</router-link>
<router-link :to="{ name: 'about' }" class="m--link"> Больше о нас </router-link>
</div>
</div>
</template>

0
client/src/components/ymap.vue → client/src/components/ymap.vue.old
View File

13
client/src/index.template.html
View File

@ -9,17 +9,12 @@
content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/ico" href="favicon.ico" />
<link
rel="icon"
type="image/svg"
sizes="16x16"
href="icons/favicon-16x16.svg"
/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#00a300" />
<meta name="theme-color" content="#119b58" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</head>
<body>
<!-- DO NOT touch the following DIV -->

13
client/src/router/index.js
View File

@ -1,11 +1,6 @@
import { route } from 'quasar/wrappers';
import store from '@/store';
import {
createRouter,
createMemoryHistory,
createWebHistory,
createWebHashHistory,
} from 'vue-router';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';
/*
@ -43,13 +38,11 @@ export default route(function (/* { store, ssrContext } */) {
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(
process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE,
),
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
});
Router.beforeEach((to, from, next) => {
console.log(process.env.SERVER);
// console.log(process.env.SERVER);
//уточнить зачем нужен process.env.SERVER
if (to.meta.isAuth && !process.env.SERVER) {
if (store.state.user) {

8
client/src/services/app.js
View File

@ -1,12 +1,9 @@
import { urlPath as settings } from '@/settings';
import { REST, RESTError } from './rest';
// запросы на сервер Django
// console.log(settings);
export default class extends REST {
// export default class Django extends REST {
static get settings() {
return settings;
}
@ -233,10 +230,7 @@ export default class extends REST {
return data;
})
.catch((error) => {
throw new RESTError(
error,
'Ошибка при получении информации о текущем треке',
);
throw new RESTError(error, 'Ошибка при получении информации о текущем треке');
});
}

4
client/src/services/audio.js
View File

@ -21,9 +21,7 @@ export default class extends REST {
}),
});
// console.log('sseUriParams', sseUriParams.toString());
this.connection = new EventSource(
sseBaseUri + '?' + sseUriParams.toString(),
);
this.connection = new EventSource(sseBaseUri + '?' + sseUriParams.toString());
// window.connection = this.connection;
// this.connection.onopen = (e) => console.log('connected', e);
}

22
client/src/services/rest.js
View File

@ -8,8 +8,7 @@ class RESTError extends Error {
let detail =
error.response &&
error.response.data &&
(error.response.data.detail ||
(error.response.data.error && error.response.data.error.detail));
(error.response.data.detail || (error.response.data.error && error.response.data.error.detail));
let header = (message || error.message) + (detail ? ': ' + detail : '');
super(header);
@ -39,23 +38,8 @@ class REST {
static get settings() {
throw new Error('settings must be overridden');
}
static _get(
url,
params = {},
extraParams,
use_cache = false,
isBlob = false,
) {
return this._request(
'get',
url,
params,
{},
{},
extraParams,
use_cache,
isBlob,
);
static _get(url, params = {}, extraParams, use_cache = false, isBlob = false) {
return this._request('get', url, params, {}, {}, extraParams, use_cache, isBlob);
}
static _post(url, params, data) {
return this._request('post', url, params, data);

4
client/src/store/store-flag.d.ts vendored
View File

@ -1,9 +1,9 @@
/* eslint-disable */
// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
import "quasar/dist/types/feature-flag";
import 'quasar/dist/types/feature-flag';
declare module "quasar/dist/types/feature-flag" {
declare module 'quasar/dist/types/feature-flag' {
interface QuasarFeatureFlags {
store: true;
}

5
client/src/utils/ajax.js
View File

@ -24,10 +24,7 @@ export default class {
delete params.extraData;
}
if (params.extraParams) {
params.params = this.__append_extra_params(
params.params,
params.extraParams,
);
params.params = this.__append_extra_params(params.params, params.extraParams);
delete params.extraParams;
}
/*

17
client/src/views/Page404.vue
View File

@ -5,23 +5,16 @@
<div class="page404__block">
<div class="page404__info">
<div class="page404__info-title">404</div>
<div class="page404__info-subtitle">
Мы не можем найти то, что вы ищете
</div>
<div class="page404__info-subtitle">Мы не можем найти то, что вы ищете</div>
<div class="page404__info-content">
Возможно, запрашиваемая вами страница была перенесена или удалена.
Также возможно, что вы допустили небольшую опечатку при вводе
адреса — такое случается даже с нами, поэтому еще раз внимательно
проверьте.
Возможно, запрашиваемая вами страница была перенесена или удалена. Также возможно, что вы допустили
небольшую опечатку при вводе адреса — такое случается даже с нами, поэтому еще раз внимательно проверьте.
</div>
<div class="page404__info-bottom">
Переходите на главную страницу, там вы сможете найти много
полезной информации!
Переходите на главную страницу, там вы сможете найти много полезной информации!
</div>
<div class="page404__info-button">
<button class="button button-blue" @click="next()">
На главную
</button>
<button class="button button-blue" @click="next()">На главную</button>
</div>
</div>
</div>

11
client/src/views/Page500.vue
View File

@ -6,17 +6,12 @@
<div class="page500__info">
<div class="page500__info-title">Упс!</div>
<div class="page500__info-subtitle">Что то пошло не так!</div>
<div class="page500__info-content">
Мы уже знаем об этом и делаем все возможное!
</div>
<div class="page500__info-content">Мы уже знаем об этом и делаем все возможное!</div>
<div class="page500__info-bottom">
Переходите на главную страницу, там вы сможете найти много
полезной информации!
Переходите на главную страницу, там вы сможете найти много полезной информации!
</div>
<div class="page500__info-button">
<button class="button button-blue" @click="next()">
На главную
</button>
<button class="button button-blue" @click="next()">На главную</button>
</div>
</div>
</div>

41
client/src/views/about.vue
View File

@ -13,26 +13,22 @@
<div class="about__header-left">
<h1 class="h2">О нас</h1>
<div class="text about__header-description">
IT-радио — это не просто обычная радиостанция, мы ваши партнеры в
творчестве и современных технологиях.
IT-радио — это не просто обычная радиостанция, мы ваши партнеры в творчестве и современных технологиях.
</div>
</div>
<div class="about__header-right"></div>
</div>
<div class="text about__header-bottom">
Наша миссия — воплотить ваши мечты в реальность, шаг за шагом.
Благодаря разнообразной команде ведущих, журналистов, разработчиков и
новаторов, мы постоянно расширяем границы возможного в цифровом мире.
Наша миссия — воплотить ваши мечты в реальность, шаг за шагом. Благодаря разнообразной команде ведущих,
журналистов, разработчиков и новаторов, мы постоянно расширяем границы возможного в цифровом мире.
</div>
</div>
<div class="about__description">
<h2 class="h2">Мы здесь, чтобы открыть глаза на мир IT</h2>
<div class="about__description-info">
<div class="text about__description-item m--left">
IT-радио — это уникальный проект, который объединяет в себе самых
ярких представителей IT-индустрии, а также экспертов из различных
областей, чтобы поделиться своими знаниями и опытом с широкой
аудиторией.
IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также
экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.
</div>
<div class="text about__description-item">
Мы — команда, которая верит в силу теплой улыбки и дружеской беседы.
@ -45,14 +41,13 @@
<div class="about__description">
<div class="about__description-info">
<div class="text about__description-item m--left">
Основанное с целью переосмыслить радио через призму современного и
инновационного подхода, мы стали больше, чем просто радиостанцией,
мы сообщество родственных душ, которые разделяют страсть к
артистизму, развитию и инновациям.
Основанное с целью переосмыслить радио через призму современного и инновационного подхода, мы стали больше,
чем просто радиостанцией, мы сообщество родственных душ, которые разделяют страсть к артистизму, развитию и
инновациям.
</div>
<div class="text about__description-item">
Каждое шоу на IT-радио включает в себя актуальные темы, новости,
обзоры, интервью с экспертами и многое другое.
Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое
другое.
</div>
</div>
</div>
@ -71,27 +66,19 @@
</div>
<div class="about__history-list">
<div class="about__history-item">
<div class="title m--white about__history-title">
Событие кратко 1
</div>
<div class="title m--white about__history-title">Событие кратко 1</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
<div class="about__history-item">
<div class="title m--white about__history-title">
Событие кратко 2
</div>
<div class="title m--white about__history-title">Событие кратко 2</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
<div class="about__history-item">
<div class="title m--white about__history-title">
Событие кратко 3
</div>
<div class="title m--white about__history-title">Событие кратко 3</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
<div class="about__history-item">
<div class="title m--white about__history-title">
Событие кратко 4
</div>
<div class="title m--white about__history-title">Событие кратко 4</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
</div>

22
client/src/views/contacts.vue
View File

@ -10,30 +10,20 @@
<div class="contacts__content">
<div v-if="contacts" class="contacts__info">
<div v-for="(item, index) in contactsField" :key="index">
<div
v-if="item.title !== dictionaryFields.socials"
class="text contacts__item"
>
<div v-if="item.title !== dictionaryFields.socials" class="text contacts__item">
<span class="title">{{ item.title }}</span>
{{ item.data }}
</div>
<div v-else class="contacts__socials">
<span class="title">{{ item.title }}</span>
<div
v-for="(href, social) in item.data"
:key="social"
class="contacts__social"
>
<div v-for="(href, social) in item.data" :key="social" class="contacts__social">
<a :href="href" :class="['contacts__social', social]"></a>
</div>
</div>
</div>
</div>
<div class="contacts__map">
<!-- <div
class="contacts__map-frame"
style="position: relative; overflow: hidden"
>
<div class="contacts__map-frame" style="position: relative; overflow: hidden">
<a
href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
style="color: #eee; font-size: 12px; position: absolute; top: 0px"
@ -46,8 +36,7 @@
allowfullscreen="true"
style="position: relative"
></iframe>
</div> -->
<YandexMap apiKey="e73ed16e-35ea-483b-afb4-9daac388591a" />
</div>
</div>
<FormKit
v-model="formData"
@ -76,12 +65,11 @@
<script>
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
import SupportBlock from '@/components/support-block.vue';
import YandexMap from '@/components/ymap.vue';
import { app } from '@/services';
export default {
name: 'contacts',
components: { SupportBlock, AppBreadcrumbs, YandexMap },
components: { SupportBlock, AppBreadcrumbs },
data() {
return {
formData: {},

37
client/src/views/home.vue
View File

@ -5,8 +5,7 @@
<p class="text home__subtitle">
Мы цифровое <span>онлайн радио.</span><br />
Помогаем разобраться в том, что такое <span>IT.</span><br />
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span
><br />
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span><br />
</p>
<h1 class="home__title" ref="targetTitle">
IT-Радио —
@ -30,31 +29,27 @@
<div class="text home__info--item">
IT-RADIO. 2023
<span>
Сегодня IT-сфера развивается настолько быстро, что следить за
всеми новинками и изменениями в ней становится все сложнее.<br /><br />
Но есть способ всегда быть в курсе последних новостей и событий
— это IT-радио.
Сегодня IT-сфера развивается настолько быстро, что следить за всеми новинками и изменениями в ней
становится все сложнее.<br /><br />
Но есть способ всегда быть в курсе последних новостей и событий — это IT-радио.
</span>
</div>
<h2 class="h2 m--border">
Открывая новые горизонты в мире технологий
</h2>
<h2 class="h2 m--border">Открывая новые горизонты в мире технологий</h2>
<div class="text home__info--item m--circle">
<span>
IT-радио — это уникальный проект, который объединяет в себе
самых ярких представителей IT-индустрии, а также экспертов из
различных областей, чтобы поделиться своими знаниями и опытом с
широкой аудиторией.<br /><br />
Каждое шоу на IT-радио включает в себя актуальные темы, новости,
обзоры, интервью с экспертами и многое другое.
IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а
также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой
аудиторией.<br /><br />
Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое
другое.
</span>
</div>
</div>
<div class="home__content">
<div class="home__content--item m--one-circle">
<span class="title">Музыка</span>
Нам важно создать комфортную атмосферу, которая поможет
сосредоточиться на задачах и улучшит продуктивность.
Нам важно создать комфортную атмосферу, которая поможет сосредоточиться на задачах и улучшит
продуктивность.
</div>
<div class="home__content--item m--two-circle">
<span class="title">Подкасты</span>
@ -76,9 +71,8 @@
<div class="home__social--description">
<h2 class="h2 m--white">Соц сети</h2>
<div class="text">
Следите за обновлениями и новыми постами на IT Radio, чтобы быть в
курсе последних новостей и событий в мире IT, а также следить за
анонсами и обновлениями!
Следите за обновлениями и новыми постами на IT Radio, чтобы быть в курсе последних новостей и событий в
мире IT, а также следить за анонсами и обновлениями!
</div>
</div>
<div class="home__social--btns">
@ -125,8 +119,7 @@ export default {
});
gsap.to(this.$refs.targetTitle, {
color: 'transparent',
backgroundImage:
'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
backgroundImage: 'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
scrollTrigger: {
trigger: this.$refs.targetWrapper,
scrub: true,

17
client/src/views/playlist-edit.vue
View File

@ -15,18 +15,9 @@
<h1 class="h2 playlist__title m--margin">
{{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}
</h1>
<button class="playlist-edit__upload" @click="handlerUploadCover">
Добавить обложку
</button>
<button class="playlist-edit__upload" @click="handlerUploadCover">Добавить обложку</button>
<div class="field__input m--hidden">
<input
id="cover"
ref="coverInput"
accept=".jpg,.png,.svg"
class="input"
type="file"
name="logo"
/>
<input id="cover" ref="coverInput" accept=".jpg,.png,.svg" class="input" type="file" name="logo" />
</div>
<FormKit
v-model="playlist.name"
@ -96,9 +87,7 @@ export default {
computed: {
songsFiltered() {
return this.songs.filter((song) => {
const alreadyAdd = this.playlist.song.find(
(item) => item.azura_id === song.azura_id,
);
const alreadyAdd = this.playlist.song.find((item) => item.azura_id === song.azura_id);
return !alreadyAdd;
});
},

7
client/src/views/playlist.vue
View File

@ -10,12 +10,7 @@
<div class="playlist__header">
<div class="playlist__back" @click="handlerBack"></div>
<div class="h2 playlist__title">{{ playlist.name }}</div>
<div
class="playlist__edit"
@click="
next({ name: 'playlist-edit', params: { id: this.playlist.id } })
"
></div>
<div class="playlist__edit" @click="next({ name: 'playlist-edit', params: { id: this.playlist.id } })"></div>
</div>
<SongList :songList="playlist.song" :songAlreadyAdd="true" />
</template>

27
client/src/views/profile.vue
View File

@ -1,10 +1,6 @@
<template>
<div class="app__content profile">
<template
v-if="
$route.name !== 'playlist-edit' && $route.name !== 'playlist-create'
"
>
<template v-if="$route.name !== 'playlist-edit' && $route.name !== 'playlist-create'">
<AppBreadcrumbs
:breadcrumbs="[
{ name: 'Главная', route: { name: 'home' } },
@ -12,9 +8,7 @@
]"
/>
<h1 class="h2 profile__title">{{ user.email }}</h1>
<button class="button m--text-link" @click="showRecovery">
Редактировать профиль
</button>
<button class="button m--text-link" @click="showRecovery">Редактировать профиль</button>
<div class="profile__tabs tabs m--btns">
<button
v-for="item in tabsItems"
@ -35,11 +29,7 @@
Загрузка данных
</div>
</template>
<SongList
v-else
:songList="userFavorite.songs"
@removeSong="removeFavorites"
/>
<SongList v-else :songList="userFavorite.songs" @removeSong="removeFavorites" />
</template>
<template v-if="currentTabsItem === 'playlists'">
<template v-if="showLoaderPlaylist">
@ -48,11 +38,7 @@
Загрузка данных
</div>
</template>
<PlaylistRoster
v-else
:list="userFavorite.playlist"
@createPlaylist="createPlayList"
/>
<PlaylistRoster v-else :list="userFavorite.playlist" @createPlaylist="createPlayList" />
</template>
</template>
<routerView v-else />
@ -106,10 +92,7 @@ export default {
console.log('1');
this.currentTabsItem = to?.hash.replace('#', '') || 'music';
}
if (
(to?.hash !== from?.hash && to?.name === from?.name) ||
(!from?.name && !from?.hash)
) {
if ((to?.hash !== from?.hash && to?.name === from?.name) || (!from?.name && !from?.hash)) {
console.log('2');
if (to.hash) {
this.currentTabsItem = to?.hash.replace('#', '') || 'music';