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",
"version": "2.3.2",
"version": "2.4.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
src/components/Song/SongLocalItem.vue
View file @ 62b87280
<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-charter-info">
<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>
<section class="section-startup">
<div class="tabs">
<router-link to="/"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
<router-link to="/new"><span>{{ $t('startup.tabs.new') }}</span></router-link>
<router-link to="/hot"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
<router-link to="/popular"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
</div>
<header>
<div class="tabs">
<router-link to="/" class="tab"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
<router-link to="/new" class="tab"><span>{{ $t('startup.tabs.new') }}</span></router-link>
<router-link to="/hot" class="tab"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
<router-link to="/popular" class="tab"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
</div>
</header>
<router-view></router-view>
</section>
......@@ -21,54 +23,36 @@
<style scoped lang="less">
section {
padding: 50px;
& .tabs {
display: flex;
justify-content: center;
margin-bottom: 25px;
& a {
color: inherit;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.1em;
padding: 10px 15px;
margin: 0px 5px;
text-align: center;
text-transform: uppercase;
opacity: 0.6;
transition: 0.2s ease-in-out background, 0.2s ease-in-out opacity;
& span {
display: block;
transition: 0.2s ease-in-out transform;
transform: translateY(4px);
}
&:hover {
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);
& header {
background: rgba(0,0,0,0.5);
padding: 25px 50px;
padding-bottom: 0px;
& .tabs {
display: flex;
& .tab {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,0.6);
color: rgba(255,255,255,0.4);
transition: 0.2s ease-in-out all;
text-decoration: none;
&:not(.active):hover {
cursor: pointer;
background: #272c2e;
color: rgba(255,255,255,0.75);
}
&:after {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
&.router-link-exact-active {
opacity: 1;
color: rgba(255,255,255,1);
background: #212629;
}
}
}
......
src/views/StartupFrontpage.vue
View file @ 62b87280
......@@ -81,55 +81,59 @@
</script>
<style scoped lang="less">
.staff-promos {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
width: 1114px;
margin: 0 auto;
.frontpage {
padding: 50px;
&:empty {
display: none;
.staff-promos {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
width: 1114px;
margin: 0 auto;
&:empty {
display: none;
}
}
}
.social-buttons {
display: grid;
width: 650px;
margin: 0 auto;
margin-top: 25px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 15px;
.social-buttons {
display: grid;
width: 650px;
margin: 0 auto;
margin-top: 25px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 15px;
& .item {
height: 75px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
background: rgba(255,255,255,0.2);
border-radius: 6px;
transition: 0.2s ease-in-out all;
& .item {
height: 75px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
background: rgba(255,255,255,0.2);
border-radius: 6px;
transition: 0.2s ease-in-out all;
&.item-discord {
background: linear-gradient(135deg, #99aab5, #7289da);
}
&.item-twitter {
background: linear-gradient(135deg, #d0e6f7, #1da1f2);
}
&.item-youtube {
background: linear-gradient(135deg, #ff0000, #c20000);
}
&.item-twitch {
background: linear-gradient(135deg, #b9a3e3, #6441a5);
}
&.item-patreon {
background: linear-gradient(135deg, #ff8575, #e75744);
}
&.item-discord {
background: linear-gradient(135deg, #99aab5, #7289da);
}
&.item-twitter {
background: linear-gradient(135deg, #d0e6f7, #1da1f2);
}
&.item-youtube {
background: linear-gradient(135deg, #ff0000, #c20000);
}
&.item-twitch {
background: linear-gradient(135deg, #b9a3e3, #6441a5);
}
&.item-patreon {
background: linear-gradient(135deg, #ff8575, #e75744);
}
&:hover {
transform: scale(1.1);
box-shadow: 0px 4px 16px rgba(0,0,0,0.4);
cursor: pointer;
&:hover {
transform: scale(1.1);
box-shadow: 0px 4px 16px rgba(0,0,0,0.4);
cursor: pointer;
}
}
}
}
......
src/views/StartupHotSongs.vue
View file @ 62b87280
......@@ -73,4 +73,7 @@
</script>
<style scoped lang="less">
.song-row {
padding: 50px;
}
</style>
\ No newline at end of file
src/views/StartupNewSongs.vue
View file @ 62b87280
......@@ -74,6 +74,6 @@
<style scoped lang="less">
.song-row {
margin-top: 25px;
padding: 50px;
}
</style>
\ No newline at end of file
src/views/StartupPopularSongs.vue
View file @ 62b87280
......@@ -74,6 +74,6 @@
<style scoped lang="less">
.song-row {
margin-top: 25px;
padding: 50px;
}
</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