added collapsable comments

public/assets/css/songdetail.css

@@ -265,6 +265,7 @@
   background: rgba(255, 255, 255, 0.1);
   border-radius: 4px;
   padding: 20px;
+  overflow: hidden;
 }
 .section-song-detail .song-social .tab.tab-reviews .reviews .review .metadata {
   display: grid;
@@ -330,6 +331,24 @@
 .section-song-detail .song-social .tab.tab-reviews .reviews .review .comment {
   margin-top: 15px;
   line-height: 1.5em;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+  transition: 1s ease max-height;
+}
+.section-song-detail .song-social .tab.tab-reviews .reviews .review .comment.collapsed {
+  max-height: 6em;
+}
+.section-song-detail .song-social .tab.tab-reviews .reviews .review .toggleComment {
+  margin-top: 10px;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #f74e94;
+  cursor: pointer;
+  transition: 0.2s ease opacity;
+}
+.section-song-detail .song-social .tab.tab-reviews .reviews .review .toggleComment:hover {
+  opacity: 0.6;
 }
 .section-song-detail .song-social .tab.tab-reviews .no-reviews {
   background: rgba(255, 255, 255, 0.1);

public/assets/css/songdetail.less

@@ -295,6 +295,7 @@
                         background: rgba(255,255,255,0.1);
                         border-radius: 4px;
                         padding: 20px;
+                        overflow: hidden;
 
                         & .metadata {
                             display: grid;
@@ -366,6 +367,26 @@
                         & .comment {
                             margin-top: 15px;
                             line-height: 1.5em;
+                            word-wrap: break-word;
+                            word-break: break-all;
+                            overflow: hidden;
+                            transition: 1s ease max-height;
+
+                            &.collapsed {
+                                max-height: 6em;
+                            }
+                        }
+                        & .toggleComment {
+                            margin-top: 10px;
+                            text-transform: uppercase;
+                            font-weight: bold;
+                            color: #f74e94;
+                            cursor: pointer;
+                            transition: 0.2s ease opacity;
+
+                            &:hover {
+                                opacity: 0.6;
+                            }
                         }
                     }
                 }

templates/song/detail.html.twig

@@ -127,7 +127,7 @@
             {% if song.tags != "" or song.description != "" %}
                 <div class="song-description">
                     {% if song.description != "" %}
-                        <div class="text">{{ song.description|default("No description provided.") }}</div>
+                        <div class="text">{{ song.description|default("No description provided.")|nl2br }}</div>
                     {% endif %}
                     {% if song.tags != "" %}
                         <div class="tags">
@@ -191,9 +191,10 @@
                                                 {% endif %}
                                             </div>
                                         </div>
-                                        <div class="comment">
-                                            {{ review.comment }}
-                                        </div>
+                                        {% if review.comment != "" %}
+                                            <div class="comment" id="comment-{{ review.id }}">{{ review.comment|nl2br }}</div>
+                                            <div class="toggleComment" id="toggleComment-{{ review.id }}" onclick="ToggleComment({{ review.id }})">Show more</div>
+                                        {% endif %}
                                     </div>
                                 {% endfor %}
                             </div>
@@ -352,5 +353,33 @@
         function UpdateVolume() {
             currentPreviewAudio.volume = playerVolume.value / 100;
         }
+
+        function ToggleComment(commentID) {
+            let DOMtoggleComment = document.querySelector("#toggleComment-" + commentID);
+            let DOMcomment = document.querySelector("#comment-" + commentID);
+
+            if(DOMcomment.classList.contains('collapsed')) {
+                DOMtoggleComment.innerText = "Show less";
+                DOMcomment.classList.remove('collapsed');
+            } else {
+                DOMtoggleComment.innerText = "Show more";
+                DOMcomment.classList.add('collapsed');
+            }
+        }
+        
+        let DOMAllToggleComments = document.querySelectorAll(".toggleComment");
+        DOMAllToggleComments.forEach((DOMtoggleComment) => {
+            let commentID = DOMtoggleComment.id.replace("toggleComment-", "");
+            let DOMcomment = document.querySelector("#comment-" + commentID);
+            
+            console.log(DOMcomment.offsetHeight);
+
+            if(DOMcomment.offsetHeight > 84) {
+                DOMcomment.classList.add('collapsed');
+                DOMtoggleComment.style.display = "block";
+            } else {
+                DOMtoggleComment.style.display = "none";
+            }
+        });
     </script>
 {% endblock %}
\ No newline at end of file