added new feature

src/Controller/IndexController.php

@@ -26,9 +26,23 @@ class IndexController extends AbstractController
         $activePromos = $em->getRepository(Promo::class)->findBy(array('isVisible' => true), array('id' => 'DESC'), 2);
         $data['promos'] = $activePromos;
 
+        /* Stories */
+        $userStories = $em->getRepository(User::class)->findBy(array('isPatreon' => true));
+        shuffle($userStories);
+        $userStories = array_slice($userStories, 0, 12);
+        $data['users'] = $userStories;
+
         return $this->render('index/index.html.twig', $data);
     }
 
+    /**
+     * @Route("/story/{userId}", name="index.story")
+     */
+    public function indexStory(Request $request, $userId)
+    {
+        return $this->redirect('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+    }
+
     /**
      * @Route("/new", name="index.new")
      */

templates/components/aprilfools.html.twig

+<div class="stories">
+    <div class="header">STORIES <span>NEW</span></div>
+    <div class="list">
+        {% for user in users %}
+            <a href="{{ path('index.story', {userId: user.id}) }}" target="_blank" class="item" style="background-image: url({{ asset('uploads/avatar/' ~ user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"><span class="mdi mdi-eye"></span></a>
+        {% endfor %}
+    </div>
+    <div class="header header-bottom">PROMOS</div>
+</div>
+
+<style>
+    .stories {
+        grid-column: 1 / span 3;
+    }
+    .stories .header {
+        font-weight: bold;
+        font-size: 18px;
+        letter-spacing: 0.2em;
+        padding: 4px 0px;
+    }
+    .stories .header span {
+        letter-spacing: inherit;
+        font-size: 12px;
+        background: #3dfb84;
+        color: #000;
+        padding: 5px 10px;
+        border-radius: 5px;
+        display: inline-block;
+        transform: translateY(-2px);
+    }
+    .stories .header-bottom {
+        margin-top: 40px;
+        margin-bottom: -10px;
+    }
+    .stories .list {
+        margin-top: 15px;
+        display: flex;
+        overflow: hidden;
+    }
+    .stories .list .add {
+        background: #000;
+        width: 80px;
+        height: 80px;
+        font-size: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 15px;
+        border-radius: 50px;
+        transition: 0.2s ease all;
+    }
+    .stories .list .item {
+        background: transparent;
+        width: 80px;
+        height: 80px;
+        margin-right: 15px;
+        border-radius: 5000px;
+        font-size: 28px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: transparent;
+        border: 6px solid #fb1357;
+        position: relative;
+        transition: 0.2s ease all;
+        background-position: center;
+        background-size: cover;
+    }
+    .stories .list .item:before {
+        content: " ";
+        position: absolute;
+        z-index: 2;
+        border-radius: 5000px;
+        top: -3px;
+        left: -3px;
+        right: -3px;
+        bottom: -3px;
+        border: 3px solid #212629;
+    }
+    .stories .list .item:hover {
+        opacity: 0.6;
+        color: #fff;
+        cursor: pointer;
+    }
+    .stories .list .add:hover {
+        opacity: 0.6;
+        color: #fff;
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file

templates/index/index.html.twig

@@ -11,6 +11,8 @@
         </div>
 
         <div class="staff-promos">
+            {{ include('components/aprilfools.html.twig') }}
+
             {% for promo in promos %}
                 <div class="staff-promo" style="background-image: url({{ asset('uploads/promo/' ~ promo.imagePath) }});">
                     <div class="promo-type" style="color: {{ promo.color }};">{{ promo.type }}</div>