Skip to content

B
Backend Server
Commit d1e3f483 authored by SpinShare's avatar SpinShare
Browse files
Options

added support page, added description to upload, added cover background

parent e84834ee
Show whitespace changes
Inline Side-by-side
Showing with 319 additions and 30 deletions
public/assets/css/songdetail.css
View file @ d1e3f483
......@@ -4,10 +4,28 @@
grid-gap: 25px;
padding: 50px;
}
.section-song-detail .song-detail-background {
background-position: center;
background-size: cover;
position: absolute;
top: 0px;
left: 60px;
right: 0px;
height: 300px;
z-index: -1;
}
.section-song-detail .song-detail-background .song-detail-background-cover {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: linear-gradient(180deg, rgba(33, 38, 41, 0.7) 0%, #212629 100%);
}
.section-song-detail .song-detail .song-meta {
display: grid;
grid-template-columns: auto 1fr;
background: rgba(255, 255, 255, 0.1);
background: #383C3F;
border-radius: 4px;
overflow: hidden;
}
......@@ -42,6 +60,7 @@
transition: all 0.2s ease-in-out;
border-radius: 4px;
overflow: hidden;
background: #212629;
}
.section-song-detail .song-detail .song-actions .action,
.section-song-detail .song-detail .song-actions .action-player {
......@@ -89,7 +108,7 @@
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
background: rgba(255, 255, 255, 0.1);
background: #383C3F;
padding: 20px;
border-radius: 4px;
margin-top: 25px;
......@@ -131,7 +150,7 @@
opacity: 0.6;
}
.section-song-detail .song-detail .song-description {
background: rgba(255, 255, 255, 0.1);
background: #383C3F;
border-radius: 4px;
margin-top: 25px;
display: grid;
......@@ -144,9 +163,13 @@
}
.section-song-detail .song-detail .song-description .tags {
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.section-song-detail .song-detail .song-description .tags .tag {
display: block;
margin-right: 10px;
margin-bottom: 10px;
background: #fff;
color: #000;
border-radius: 50px;
......@@ -170,22 +193,23 @@
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
opacity: 0.4;
background: rgba(0, 0, 0, 0.4);
background: #1C2022;
color: rgba(255, 255, 255, 0.4);
transition: 0.2s ease-in-out all;
color: #fff;
text-decoration: none;
}
.section-song-detail .song-social .tab-header .tab-header-item:not(.active):hover {
cursor: pointer;
opacity: 0.75;
background: #272c2e;
color: rgba(255, 255, 255, 0.75);
}
.section-song-detail .song-social .tab-header .tab-header-item.active {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
background: #383C3F;
}
.section-song-detail .song-social .tab {
background: rgba(255, 255, 255, 0.1);
background: #383C3F;
border-radius: 4px;
border-top-left-radius: 0px;
padding: 20px;
......
public/assets/css/songdetail.less
View file @ d1e3f483
......@@ -4,11 +4,31 @@
grid-gap: 25px;
padding: 50px;
& .song-detail-background {
background-position: center;
background-size: cover;
position: absolute;
top: 0px;
left: 60px;
right: 0px;
height: 300px;
z-index: -1;
& .song-detail-background-cover {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: linear-gradient(180deg, rgba(33,38,41,0.7) 0%, rgba(33,38,41,1) 100%);
}
}
& .song-detail {
& .song-meta {
display: grid;
grid-template-columns: auto 1fr;
background: rgba(255,255,255,0.1);
background: #383C3F;
border-radius: 4px;
overflow: hidden;
......@@ -48,6 +68,7 @@
transition: all 0.2s ease-in-out;
border-radius: 4px;
overflow: hidden;
background: #212629;
& .action, & .action-player {
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
......@@ -98,7 +119,7 @@
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
background: rgba(255,255,255,0.1);
background: #383C3F;
padding: 20px;
border-radius: 4px;
margin-top: 25px;
......@@ -147,7 +168,7 @@
}
}
& .song-description {
background: rgba(255,255,255,0.1);
background: #383C3F;
border-radius: 4px;
margin-top: 25px;
display: grid;
......@@ -160,9 +181,13 @@
}
& .tags {
padding: 20px;
display: flex;
flex-wrap: wrap;
& .tag {
display: block;
margin-right: 10px;
margin-bottom: 10px;
background: #fff;
color: #000;
border-radius: 50px;
......@@ -191,24 +216,25 @@
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
opacity: 0.4;
background: rgba(0,0,0,0.4);
background: #1C2022;
color: rgba(255,255,255,0.4);
transition: 0.2s ease-in-out all;
color: #fff;
text-decoration: none;
&:not(.active):hover {
cursor: pointer;
opacity: 0.75;
background: #272c2e;
color: rgba(255,255,255,0.75);
}
&.active {
opacity: 1;
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,1);
background: #383C3F;
}
}
}
& .tab {
background: rgba(255,255,255,0.1);
background: #383C3F;
border-radius: 4px;
border-top-left-radius: 0px;
padding: 20px;
......
public/assets/css/support.css
View file @ d1e3f483
.section-support {
padding: 50px;
}
.section-support .support-icon {
margin-bottom: 50px;
text-align: center;
font-size: 64px;
}
.section-support .support-subsection {
margin-bottom: 50px;
}
.section-support .support-subsection h1 {
margin: 0px;
font-size: 14px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.section-support .support-subsection .support-items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
}
.section-support .support-subsection .support-items .support-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
}
.section-support .support-subsection .support-items .support-item .header {
display: grid;
grid-template-columns: 24px 1fr;
grid-gap: 10px;
align-self: flex-start;
}
.section-support .support-subsection .support-items .support-item .header .icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
align-self: center;
}
.section-support .support-subsection .support-items .support-item .header .title {
font-weight: bold;
font-size: 20px;
align-self: center;
}
.section-support .support-subsection .support-items .support-item .text {
line-height: 1.5;
opacity: 0.6;
grid-column: 1 / span 2;
}
.section-support .support-subsection .support-items .support-item .actions {
margin-top: 10px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
grid-column: 1 / span 2;
}
.section-support .support-subsection .user-list {
display: grid;
grid-gap: 25px;
grid-template-columns: 1fr 1fr 1fr;
}
public/assets/css/support.less
View file @ d1e3f483
.section-support {
padding: 50px;
& .support-icon {
margin-bottom: 50px;
text-align: center;
font-size: 64px;
}
& .support-subsection {
margin-bottom: 50px;
& h1 {
margin: 0px;
font-size: 14px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.15em;
}
& .support-items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
& .support-item {
background: rgba(255,255,255,0.1);
border-radius: 4px;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
& .header {
display: grid;
grid-template-columns: 24px 1fr;
grid-gap: 10px;
align-self: flex-start;
& .icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
align-self: center;
}
& .title {
font-weight: bold;
font-size: 20px;
align-self: center;
}
}
& .text {
line-height: 1.5;
opacity: 0.6;
grid-column: 1 / span 2;
}
& .actions {
margin-top: 10px;
display:flex;
justify-content: flex-end;
align-items: flex-end;
grid-column: 1 / span 2;
}
}
}
& .user-list {
display: grid;
grid-gap: 25px;
grid-template-columns: 1fr 1fr 1fr;
}
}
}
\ No newline at end of file
src/Controller/IndexController.php
View file @ d1e3f483
......@@ -45,15 +45,13 @@ class IndexController extends AbstractController
*/
public function support(Request $request)
{
return $this->redirect('https://patreon.com/spinshare');
/*
$em = $this->getDoctrine()->getManager();
$data = [];
$patreons = $em->getRepository(User::class)->findBy(array('isPatreon' => true), array('id' => 'DESC'));
$data['patreons'] = $patreons;
return $this->render('index/support.html.twig', $data); */
return $this->render('index/support.html.twig', $data);
}
/**
......
src/Controller/SongController.php
View file @ d1e3f483
......@@ -10,6 +10,7 @@ use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\File\Exception\FileException;
use Symfony\Component\HttpFoundation\File\UploadedFile;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
......@@ -155,6 +156,7 @@ class SongController extends AbstractController
$form = $this->createFormBuilder()
->add('backupPath', FileType::class, ['label' => 'Backup .zip', 'required' => false, 'row_attr' => array('class' => 'upload-field'), 'attr' => array('accept' => '.zip')])
->add('tags', TextType::class, ['label' => 'Tags', 'row_attr' => array('class' => 'tags-field'), 'required' => false, 'data' => $song->getTags()])
->add('description', TextareaType::class, ['label' => 'Description', 'attr' => array('rows' => 5), 'row_attr' => array('class' => 'tags-field'), 'required' => false, 'data' => $song->getDescription()])
->add('isExplicit', CheckboxType::class, ['label' => 'Is the song explicit?', 'row_attr' => array('class' => "tags-field"), 'required' => false, 'data' => $song->getIsExplicit()])
->add('save', SubmitType::class, ['label' => 'Upload'])
->getForm();
......@@ -169,6 +171,7 @@ class SongController extends AbstractController
$backupFile = $data['backupPath'];
$song->setTags($data['tags']);
$song->setDescription($data['description']);
$song->setIsExplicit($data['isExplicit']);
if($backupFile) {
......
src/Controller/UploadController.php
View file @ d1e3f483
......@@ -8,6 +8,7 @@ use Symfony\Component\HttpFoundation\File\Exception\FileException;
use Symfony\Component\HttpFoundation\File\UploadedFile;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
......@@ -30,6 +31,7 @@ class UploadController extends AbstractController
$form = $this->createFormBuilder()
->add('backupPath', FileType::class, ['label' => 'Backup .zip', 'row_attr' => array('class' => 'upload-field'), 'attr' => array('accept' => '.zip')])
->add('tags', TextType::class, ['label' => 'Tags', 'row_attr' => array('class' => 'tags-field'), 'required' => false])
->add('description', TextareaType::class, ['label' => 'Description', 'attr' => array('rows' => 5), 'row_attr' => array('class' => 'tags-field'), 'required' => false])
->add('isExplicit', CheckboxType::class, ['label' => 'Is the song explicit?', 'row_attr' => array('class' => "tags-field"), 'required' => false])
->add('save', SubmitType::class, ['label' => 'Upload'])
->getForm();
......@@ -45,6 +47,7 @@ class UploadController extends AbstractController
if($backupFile) {
$song->setFileReference("spinshare_".uniqid());
$song->setTags($data['tags']);
$song->setDescription($data['description']);
$song->setUploadDate(new \DateTime('NOW'));
$song->setIsExplicit($data['isExplicit']);
......
templates/index/support.html.twig
View file @ d1e3f483
......@@ -4,19 +4,102 @@
{% block content %}
<section class="section-support">
<div class="support-icon">
<i class="mdi mdi-hand-heart"></i>
</div>
<div class="support-subsection">
<h1>Why you should support us!</h1>
Website funding, prize money for charting competitions and tournaments
<div class="support-items">
<div class="support-item">
<div class="header">
<div class="icon">
<i class="mdi mdi-server-network"></i>
</div>
<div class="title">Servers</div>
</div>
<div class="text">We want to host your charts for free for as long as we can. For this, we have to find a way to fund our servers needed to safely and reliably host your content</div>
</div>
<div class="support-item">
<div class="header">
<div class="icon">
<i class="mdi mdi-tournament"></i>
</div>
<div class="title">Tournaments</div>
</div>
<div class="text">We want to continuously improve on our SpinShare Speen Open tournament, fund the servers needed for that event and maybe even have a little prize for the winner!</div>
</div>
<div class="support-item">
<div class="header">
<div class="icon">
<i class="mdi mdi-boxing-glove"></i>
</div>
<div class="title">Charting Competitions</div>
</div>
<div class="text">We want to regularly hold charting competitions where we collaborate with artists and reward charters participating in these competitions.</div>
</div>
</div>
</div>
<hr />
<div class="support-subsection">
<h1>How can I help?</h1>
<div class="support-items">
<div class="support-item">
<div class="header">
<div class="icon">
<i class="mdi mdi-forum"></i>
</div>
<div class="title">Spread the word!</div>
</div>
<div class="text">If you can't support us monetarily (or if you simply don't want to), you can still help us by talking about us, creating content about us or just use our service!</div>
<div class="actions"></div>
</div>
<div class="support-item">
<div class="header">
<div class="icon">
<i class="mdi mdi-twitch"></i>
</div>
<div class="title">Twitch Subscription</div>
</div>
<div class="text">You can subscribe to our Twitch channel to receive a wonderful badge on Twitch and SpinShare and show your support that way. And remember, Twitch Prime is free!&trade;</div>
<div class="actions">
<a href="https://twitch.tv/spinshare" target="_blank" class="button">Go to Twitch</a>
</div>
</div>
<div class="support-item">
<div class="header">
<div class="icon">
<i class="mdi mdi-patreon"></i>
</div>
<div class="title">Patreon</div>
</div>
<div class="text">If you have any free change, feel free to support us over at Patreon! Whether it is a one-time donation or a continuous one, we are grateful for every single of our Patreons and provide you with early-looks and other interesting behind the scenes material.</div>
<div class="actions">
<a href="https://patreon.com/spinshare" target="_blank" class="button">Go to Patreon</a>
</div>
</div>
</div>
</div>
<h1>Support methods</h1>
Spread the word, Twitch Subscriber, Patreon
<hr />
<h1>Patreons</h1>
{{ dump(patreons) }}
<div class="support-subsection">
<h1>Our Patreons</h1>
<div class="user-list">
{% for user in patreons %}
<a href="{{ path('user.detail', {userId: user.id}) }}" class="user-item">
<div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
<div class="user-metadata">
<div class="user-name">{{ user.userName }}</div>
{% if user.isVerified %}
<div class="user-badge"><i class="mdi mdi-check-decagram"></i></div>
{% endif %}
{% if user.isPatreon %}
<div class="user-badge"><i class="mdi mdi-patreon"></i></div>
{% endif %}
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{% endblock %}
......
templates/song/detail.html.twig
View file @ d1e3f483
......@@ -11,6 +11,9 @@
{% block content %}
<section class="section-song-detail">
<div class="song-detail-background" style="background-image: url({{ asset("uploads/cover/" ~ song.fileReference ~ ".png?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});">
<div class="song-detail-background-cover"></div>
</div>
<div class="song-detail">
<div class="song-meta">
<div class="cover" style="background-image: url({{ asset("uploads/cover/" ~ song.fileReference ~ ".png?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});"></div>
......@@ -76,6 +79,7 @@
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
</div>
</div>
{% if song.uploadDate|date("Y") > 2000 %}
<div class="stat">
<div class="icon">
<i class="mdi mdi-calendar-clock"></i>
......@@ -84,6 +88,7 @@
{{ song.uploadDate|date("dS F Y") }}
</div>
</div>
{% endif %}
<div class="stat">
<div class="icon">
<i class="mdi mdi-eye"></i>
......
templates/song/update.html.twig
View file @ d1e3f483
......@@ -22,6 +22,9 @@
{{ form_row(uploadForm.tags) }}
<div class="input-notice">Add multiple tags by seperating them with a comma. (eg: "Memes,Funny,Osu")</div>
</div>
<div class="tags-input">
{{ form_row(uploadForm.description) }}
</div>
<div class="tags-input">
{{ form_row(uploadForm.isExplicit) }}
<div class="input-notice">Are the lyrics, cover or any other meta data of this song unsuitable for children and/or not safe for work?</div>
......
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