added charters to playlist description area

public/assets/css/playlistdetail.css

@@ -46,6 +46,18 @@
   grid-template-columns: 500px 1fr;
   grid-gap: 25px;
 }
+.section-playlist-detail .playlist-content .playlist-detail .playlist-description {
+  background: #383C3F;
+  border-radius: 4px;
+  line-height: 1.5em;
+  display: grid;
+  grid-gap: 20px;
+  padding: 20px;
+}
+.section-playlist-detail .playlist-content .playlist-detail .playlist-description .text {
+  line-height: 1.5em;
+  opacity: 0.7;
+}
 .section-playlist-detail .playlist-content .playlist-detail .playlist-uploader {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -56,15 +68,20 @@
   align-self: center;
   opacity: 0.6;
 }
-.section-playlist-detail .playlist-content .playlist-detail .playlist-description {
-  background: #383C3F;
-  border-radius: 4px;
+.section-playlist-detail .playlist-content .playlist-detail .playlist-charters {
   display: grid;
-  grid-gap: 20px;
-  padding: 20px;
+  grid-template-columns: auto 1fr;
+  grid-gap: 15px;
+  margin-top: 25px;
 }
-.section-playlist-detail .playlist-content .playlist-detail .playlist-description .text {
+.section-playlist-detail .playlist-content .playlist-detail .playlist-charters .label {
+  align-self: center;
+  opacity: 0.6;
+}
+.section-playlist-detail .playlist-content .playlist-detail .playlist-charters .charters {
+  background: #383C3F;
+  padding: 15px;
   line-height: 1.5em;
-  opacity: 0.7;
+  border-radius: 4px;
 }
 /*# sourceMappingURL=playlistdetail.css.map */
\ No newline at end of file

public/assets/css/playlistdetail.css.map

-{"version":3,"sources":["playlistdetail.less"],"names":[],"mappings":"AACI,wBAAE;EACE,WAAA;EACA,aAAA;EACA,oCAAA;EACA,sBAAA;EACA,gCAAA;;AAEA,wBAPF,OAOI;EACE,WAAA;EACA,YAAA;EACA,8BAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;;AAEA,wBAhBN,OAOI,OASI;EACE,kBAAA;EACA,4CAAA;;AAEA,wBApBV,OAOI,OASI,SAII;EACE,eAAA;EACA,kBAAA;EACA,aAAa,oBAAb;;AAEA,wBAzBd,OAOI,OASI,SAII,OAKI;EACE,qBAAA;EACA,aAAa,uBAAb;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,oCAAA;EACA,iBAAA;EACA,WAAW,iBAAX;;AAIR,wBAxCV,OAOI,OASI,SAwBI;EACE,eAAA;EACA,YAAA;;AAKhB,wBAAE;EACE,aAAA;EACA,aAAA;EACA,gCAAA;EACA,cAAA;;AAGI,wBAPN,kBAMI,iBACI;EACE,aAAA;EACA,+BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,wBAbV,kBAMI,iBACI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAIR,wBAnBN,kBAMI,iBAaI;EACE,mBAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;;AAEA,wBA1BV,kBAMI,iBAaI,sBAOI;EACE,kBAAA;EACA,YAAA","file":"playlistdetail.css"}
+{"version":3,"sources":["playlistdetail.less"],"names":[],"mappings":"AACI,wBAAE;EACE,WAAA;EACA,aAAA;EACA,oCAAA;EACA,sBAAA;EACA,gCAAA;;AAEA,wBAPF,OAOI;EACE,WAAA;EACA,YAAA;EACA,8BAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;;AAEA,wBAhBN,OAOI,OASI;EACE,kBAAA;EACA,4CAAA;;AAEA,wBApBV,OAOI,OASI,SAII;EACE,eAAA;EACA,kBAAA;EACA,aAAa,oBAAb;;AAEA,wBAzBd,OAOI,OASI,SAII,OAKI;EACE,qBAAA;EACA,aAAa,uBAAb;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,oCAAA;EACA,iBAAA;EACA,WAAW,iBAAX;;AAIR,wBAxCV,OAOI,OASI,SAwBI;EACE,eAAA;EACA,YAAA;;AAKhB,wBAAE;EACE,aAAA;EACA,aAAA;EACA,gCAAA;EACA,cAAA;;AAGI,wBAPN,kBAMI,iBACI;EACE,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;;AAEA,wBAfV,kBAMI,iBACI,sBAQI;EACE,kBAAA;EACA,YAAA;;AAGR,wBApBN,kBAMI,iBAcI;EACE,aAAA;EACA,+BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,wBA1BV,kBAMI,iBAcI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAGR,wBA/BN,kBAMI,iBAyBI;EACE,aAAA;EACA,+BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,wBArCV,kBAMI,iBAyBI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAEJ,wBAzCV,kBAMI,iBAyBI,mBAUI;EACE,mBAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA","file":"playlistdetail.css"}
\ No newline at end of file

public/assets/css/playlistdetail.less

@@ -53,6 +53,19 @@
         grid-gap: 25px;
 
         & .playlist-detail {
+            & .playlist-description {
+                background: #383C3F;
+                border-radius: 4px;
+                line-height: 1.5em;
+                display: grid;
+                grid-gap: 20px;
+                padding: 20px;
+
+                & .text {
+                    line-height: 1.5em;
+                    opacity: 0.7;
+                }
+            }
             & .playlist-uploader {
                 display: grid;
                 grid-template-columns: auto 1fr;
@@ -64,17 +77,21 @@
                     opacity: 0.6;
                 }
             }
-
-            & .playlist-description {
-                background: #383C3F;
-                border-radius: 4px;
+            & .playlist-charters {
                 display: grid;
-                grid-gap: 20px;
-                padding: 20px;
+                grid-template-columns: auto 1fr;
+                grid-gap: 15px;
+                margin-top: 25px;
 
-                & .text {
+                & .label {
+                    align-self: center;
+                    opacity: 0.6;
+                }
+                & .charters {
+                    background: #383C3F;
+                    padding: 15px;
                     line-height: 1.5em;
-                    opacity: 0.7;
+                    border-radius: 4px;
                 }
             }
         }

src/Controller/PlaylistController.php

@@ -94,6 +94,8 @@ class PlaylistController extends AbstractController
         $em = $this->getDoctrine()->getManager();
         $data = [];
 
+        $chartAuthors = [];
+
         $resultPlaylist = $em->getRepository(SongPlaylist::class)->findOneBy(array('id' => $playlistId));
 
         if(!$resultPlaylist) throw new NotFoundHttpException();

templates/playlist/detail.html.twig

@@ -42,6 +42,14 @@
                         </a>
                     </div>
                 {% endif %}
+                {% if playlist.songs|length > 0 %}
+                    <div class="playlist-charters">
+                        <div class="label">With Charts by</div>
+                        <div class="charters">
+                            {% for song in playlist.songs %}{{ song.charter }},&nbsp;{% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
             </div>
             <div class="song-row song-row-playlist">
                 {% if playlist.songs|length > 0 %}