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

public/assets/css/songdetail.css

@@ -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

@@ -3,12 +3,32 @@
     grid-template-columns: 500px 1fr;
     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

+.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

+.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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>