Skip to content

D
Desktop Client
Commit 62b87280 authored by SpinShare's avatar SpinShare
Browse files
Options

added new tabs, fixed localsong click

parent 4db01cd8
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 101 deletions
package-lock.json
View file @ 62b87280
{ {
"name": "spinshare-client", "name": "spinshare-client",
"version": "2.3.2", "version": "2.4.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
......
src/components/Song/SongLocalItem.vue
View file @ 62b87280
<template> <template>
<div :class="'song-item-local ' + (isSpinShare ? '' : 'song-item-onlylocal')" v-on:contextmenu="showContextMenu($event)" v-on:click="openOnSpinShare()"> <div :class="'song-item-local ' + (isSpinShare ? '' : 'song-item-onlylocal')" v-on:contextmenu="showContextMenu($event)" v-on:click="openInClient()">
<div class="song-cover" v-bind:style="'background-image: '+ backgroundImage +' , url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'" v-observe-visibility="visibilityChanged"> <div class="song-cover" v-bind:style="'background-image: '+ backgroundImage +' , url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'" v-observe-visibility="visibilityChanged">
<div class="song-charter-info"> <div class="song-charter-info">
<div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ detail.charter ? detail.charter : "Unknown" }}</span></div> <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ detail.charter ? detail.charter : "Unknown" }}</span></div>
......
src/views/Startup.vue
View file @ 62b87280
<template> <template>
<section class="section-startup"> <section class="section-startup">
<div class="tabs"> <header>
<router-link to="/"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link> <div class="tabs">
<router-link to="/new"><span>{{ $t('startup.tabs.new') }}</span></router-link> <router-link to="/" class="tab"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
<router-link to="/hot"><span>{{ $t('startup.tabs.hot') }}</span></router-link> <router-link to="/new" class="tab"><span>{{ $t('startup.tabs.new') }}</span></router-link>
<router-link to="/popular"><span>{{ $t('startup.tabs.popular') }}</span></router-link> <router-link to="/hot" class="tab"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
</div> <router-link to="/popular" class="tab"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
</div>
</header>
<router-view></router-view> <router-view></router-view>
</section> </section>
...@@ -21,54 +23,36 @@ ...@@ -21,54 +23,36 @@
<style scoped lang="less"> <style scoped lang="less">
section { section {
padding: 50px; & header {
background: rgba(0,0,0,0.5);
& .tabs { padding: 25px 50px;
display: flex; padding-bottom: 0px;
justify-content: center;
margin-bottom: 25px; & .tabs {
display: flex;
& a {
color: inherit; & .tab {
text-decoration: none; font-size: 14px;
font-weight: bold; font-weight: bold;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 10px 15px; letter-spacing: 0.25em;
margin: 0px 5px; padding: 15px 40px;
text-align: center; border-top-left-radius: 4px;
text-transform: uppercase; border-top-right-radius: 4px;
opacity: 0.6; background: rgba(0,0,0,0.6);
transition: 0.2s ease-in-out background, 0.2s ease-in-out opacity; color: rgba(255,255,255,0.4);
transition: 0.2s ease-in-out all;
& span { text-decoration: none;
display: block;
transition: 0.2s ease-in-out transform; &:not(.active):hover {
transform: translateY(4px); cursor: pointer;
} background: #272c2e;
&:hover { color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.2);
border-radius: 5px;
}
&:after {
transition: 0.2s ease-in-out background;
margin: 0 auto;
margin-top: 5px;
width: 20px;
height: 3px;
border-radius: 5px;
background: transparent;
content: "";
display: block;
}
&.router-link-exact-active {
opacity: 1;
& span {
transform: translateY(0px);
} }
&:after { &.router-link-exact-active {
background: linear-gradient(135deg, #fd2f85, #7a34ec); opacity: 1;
color: rgba(255,255,255,1);
background: #212629;
} }
} }
} }
......
src/views/StartupFrontpage.vue
View file @ 62b87280
...@@ -81,55 +81,59 @@ ...@@ -81,55 +81,59 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.staff-promos { .frontpage {
display: grid; padding: 50px;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
width: 1114px;
margin: 0 auto;
&:empty { .staff-promos {
display: none; display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
width: 1114px;
margin: 0 auto;
&:empty {
display: none;
}
} }
} .social-buttons {
.social-buttons { display: grid;
display: grid; width: 650px;
width: 650px; margin: 0 auto;
margin: 0 auto; margin-top: 25px;
margin-top: 25px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px;
grid-gap: 15px;
& .item { & .item {
height: 75px; height: 75px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 32px; font-size: 32px;
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
border-radius: 6px; border-radius: 6px;
transition: 0.2s ease-in-out all; transition: 0.2s ease-in-out all;
&.item-discord { &.item-discord {
background: linear-gradient(135deg, #99aab5, #7289da); background: linear-gradient(135deg, #99aab5, #7289da);
} }
&.item-twitter { &.item-twitter {
background: linear-gradient(135deg, #d0e6f7, #1da1f2); background: linear-gradient(135deg, #d0e6f7, #1da1f2);
} }
&.item-youtube { &.item-youtube {
background: linear-gradient(135deg, #ff0000, #c20000); background: linear-gradient(135deg, #ff0000, #c20000);
} }
&.item-twitch { &.item-twitch {
background: linear-gradient(135deg, #b9a3e3, #6441a5); background: linear-gradient(135deg, #b9a3e3, #6441a5);
} }
&.item-patreon { &.item-patreon {
background: linear-gradient(135deg, #ff8575, #e75744); background: linear-gradient(135deg, #ff8575, #e75744);
} }
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
box-shadow: 0px 4px 16px rgba(0,0,0,0.4); box-shadow: 0px 4px 16px rgba(0,0,0,0.4);
cursor: pointer; cursor: pointer;
}
} }
} }
} }
......
src/views/StartupHotSongs.vue
View file @ 62b87280
...@@ -73,4 +73,7 @@ ...@@ -73,4 +73,7 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.song-row {
padding: 50px;
}
</style> </style>
\ No newline at end of file
src/views/StartupNewSongs.vue
View file @ 62b87280
...@@ -74,6 +74,6 @@ ...@@ -74,6 +74,6 @@
<style scoped lang="less"> <style scoped lang="less">
.song-row { .song-row {
margin-top: 25px; padding: 50px;
} }
</style> </style>
\ No newline at end of file
src/views/StartupPopularSongs.vue
View file @ 62b87280
...@@ -74,6 +74,6 @@ ...@@ -74,6 +74,6 @@
<style scoped lang="less"> <style scoped lang="less">
.song-row { .song-row {
margin-top: 25px; padding: 50px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment