all songs button

public/assets/css/main.css

@@ -82,6 +82,7 @@ button,
   border: 0px;
   text-decoration: none;
   text-align: center;
+  user-select: none;
   transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
 }
 button:hover,
@@ -94,6 +95,21 @@ button:focus,
 .button:focus {
   outline: 0;
 }
+button.button-label,
+.button.button-label {
+  background: transparent;
+}
+button.button-label:hover,
+.button.button-label:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+button.button-label:active,
+.button.button-label:active {
+  background: #fff;
+  color: #222;
+  cursor: pointer;
+}
 .song-row {
   display: grid;
   grid-template-rows: auto 1fr;

public/assets/css/main.less

@@ -86,6 +86,7 @@ button, .button {
     border: 0px;
     text-decoration: none;
     text-align: center;
+    user-select: none;
     transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
 
     &:hover {
@@ -96,6 +97,20 @@ button, .button {
     &:focus {
         outline: 0;
     }
+
+    &.button-label {
+        background: transparent;
+
+        &:hover {
+            background: rgba(255,255,255,0.2);
+            color: #fff;
+        }
+        &:active {
+            background: #fff;
+            color: #222;
+            cursor: pointer;
+        }
+    }
 }
 .song-row {
     display: grid;

public/assets/css/search.css

@@ -4,27 +4,68 @@
   grid-gap: 25px;
   padding: 50px;
 }
-.section-search .search-bar input {
-  width: 100%;
+.section-search .search-bar form {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+}
+.section-search .search-bar form .show-all {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 10px;
+}
+.section-search .search-bar form input {
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   color: #fff;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
+  background: transparent;
   padding: 14px 28px;
   border: 0px;
   transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
 }
-.section-search .search-bar input:hover {
-  background: rgba(255, 255, 255, 0.4);
+.section-search .search-bar form input:hover {
+  background: rgba(255, 255, 255, 0.2);
   color: #fff;
 }
-.section-search .search-bar input:focus {
+.section-search .search-bar form input:focus {
   outline: 0;
 }
-.section-search .search-bar input::placeholder {
+.section-search .search-bar form input::placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.section-search .search-bar form .multi-select {
+  position: relative;
+  z-index: 99;
+}
+.section-search .search-bar form .multi-select .label {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 10px;
+}
+.section-search .search-bar form .multi-select .box {
+  position: absolute;
+  z-index: 99;
+  background: #000000;
+  border-radius: 6px;
+  width: 250px;
+  left: 0px;
+  user-select: none;
+  display: none;
+}
+.section-search .search-bar form .multi-select .box .item {
+  display: grid;
+  grid-template-columns: 25px 1fr;
+  grid-gap: 25px;
+  padding: 10px;
+}
+.section-search .search-bar form .multi-select .box.active {
+  display: block;
+}
 .section-search .search-results {
   display: grid;
   grid-template-rows: auto auto auto 1fr;

public/assets/css/search.less

@@ -5,19 +5,32 @@
     padding: 50px;
 
     & .search-bar {
-        input {
-            width: 100%;
+
+        & form {
+            background: rgba(255,255,255,0.2);
+            border-radius: 4px;
+            display: grid;
+            grid-template-columns: auto auto 1fr;
+            
+            & .show-all {
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding-left: 10px;
+            }
+
+            & input {
                 font-family: 'Open Sans', sans-serif;
                 font-size: 14px;
                 color: #fff;
-            background: rgba(255,255,255,0.2);
-            border-radius: 4px;
+                background: transparent;
                 padding: 14px 28px;
                 border: 0px;
                 transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
             
                 &:hover {
-                background: rgba(255,255,255,0.4);
+                    background: rgba(255,255,255,0.2);
                     color: #fff;
                 }
                 &:focus {
@@ -27,6 +40,39 @@
                     color: rgba(255,255,255,0.6);
                 }
             }
+            & .multi-select {
+                position: relative;
+                z-index: 99;
+
+                & .label {
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0px 10px;
+                }
+                & .box {
+                    position: absolute;
+                    z-index: 99;
+                    background: rgba(0,0,0,1);
+                    border-radius: 6px;
+                    width: 250px;
+                    left: 0px;
+                    user-select: none;
+                    display: none;
+
+                    & .item {
+                        display: grid;
+                        grid-template-columns: 25px 1fr;
+                        grid-gap: 25px;
+                        padding: 10px;
+                    }
+                    &.active {
+                        display: block;
+                    }
+                }
+            }
+        }
     }
     & .search-results {
         display: grid;

public/assets/js/search.js

+let DOMSearchDifficultiesSelect = document.querySelector(".multi-select-difficulties");
+
+function ToggleDifficultiesBox() {
+    if(DOMSearchDifficultiesSelect.querySelector(".box").classList.contains("active")) {
+        DOMSearchDifficultiesSelect.querySelector(".box").classList.remove("active");
+    } else {
+        DOMSearchDifficultiesSelect.querySelector(".box").classList.add("active");
+    }
+}
\ No newline at end of file

src/Controller/SearchController.php

@@ -5,6 +5,7 @@ namespace App\Controller;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\HttpFoundation\Request;
+use App\Utils\HelperFunctions;
 
 use App\Entity\Song;
 use App\Entity\User;
@@ -20,7 +21,17 @@ class SearchController extends AbstractController
         $data = [];
 
         $searchQuery = $request->query->get('q');
-        if($searchQuery) {
+
+        $resultsUsers = [];
+        $resultsSongs = [];
+
+        if($request->query->get('showAll') == "1") {
+            $resultsSongs = $em->getRepository(Song::class)->findAll();
+
+            $data['results']['users'] = $resultsUsers;
+            $data['results']['songs'] = $resultsSongs;
+        } else {
+            if($searchQuery != null) {
                 $resultsUsers = $em->getRepository(User::class)->createQueryBuilder('o')
                                                                 ->where('o.username LIKE :query')
                                                                 ->setParameter('query', '%'.$searchQuery.'%')
@@ -40,8 +51,9 @@ class SearchController extends AbstractController
 
                 $data['results']['users'] = $resultsUsers;
                 $data['results']['songs'] = $resultsSongs;
-            $data['searchQuery'] = $searchQuery;
             }
+        }
+        $data['searchQuery'] = $searchQuery;
 
         return $this->render('search/index.html.twig', $data);
     }

src/Entity/Song.php

@@ -91,6 +91,11 @@ class Song
      */
     private $hasXDDifficulty;
 
+    /**
+     * @ORM\Column(type="integer", nullable=true)
+     */
+    private $previewStart;
+
     public function getId(): ?int
     {
         return $this->id;
@@ -275,4 +280,16 @@ class Song
 
         return $this;
     }
+
+    public function getPreviewStart(): ?bool
+    {
+        return $this->previewStart;
+    }
+
+    public function setPreviewStart(bool $previewStart): self
+    {
+        $this->previewStart = $previewStart;
+
+        return $this;
+    }
 }

templates/moderation/reports/song.html.twig

@@ -61,7 +61,7 @@
                         {% elseif report.reason == "metadata" %}
                             This song has wrong meta data
                         {% elseif report.reason == "other" %}
-                            Other reson
+                            Other reason
                         {% endif %}
                     </div>
                 </div>

templates/search/index.html.twig

@@ -6,6 +6,35 @@
     <section class="section-search">
         <div class="search-bar">
             <form action="" method="get">
+                <div class="show-all">
+                    <a href="{{ path('search.index', {showAll: true}) }}" class="button button-label">Show all</a>
+                </div>
+                <div class="multi-select multi-select-difficulties">
+                    {#
+                    <div class="label"><div onclick="ToggleDifficultiesBox()" class="button button-label">Difficulties &nbsp; <i class="mdi mdi-chevron-down"></i></div></div>
+                    <div class="box">
+                        <label for="easyDifficulty" class="item">
+                            <input type="checkbox" name="easyDifficulty" id="easyDifficulty" checked />
+                            <span>Easy</span>
+                        </label>
+                        <label for="normalDifficulty" class="item">
+                            <input type="checkbox" name="normalDifficulty" id="normalDifficulty" checked />
+                            <span>Normal</span>
+                        </label>
+                        <label for="hardDifficulty" class="item">
+                            <input type="checkbox" name="hardDifficulty" id="hardDifficulty" checked />
+                            <span>Hard</span>
+                        </label>
+                        <label for="extremeDifficulty" class="item">
+                            <input type="checkbox" name="extremeDifficulty" id="extremeDifficulty" checked />
+                            <span>Extreme</span>
+                        </label>
+                        <label for="XDDifficulty" class="item">
+                            <input type="checkbox" name="XDDifficulty" id="XDDifficulty" checked />
+                            <span>XD</span>
+                        </label>
+                    </div> #}
+                </div>
                 <input name="q" type="search" placeholder="Search for songs, tags & profiles..." value="{{ searchQuery|default('') }}" />
             </form>
         </div>
@@ -74,6 +103,10 @@
     </section>
 {% endblock %}
 
+{% block scripts %}
+  <script src="{{ asset('assets/js/search.js') }}"></script>
+{% endblock %}
+
 {% block styles %}
     <link rel="stylesheet" href="{{ asset('assets/css/search.css') }}" />
 {% endblock %}
\ No newline at end of file