added links to reviews

public/assets/css/userdetail.css

@@ -117,6 +117,8 @@
   background: rgba(255, 255, 255, 0.1);
   border-radius: 4px;
   padding: 20px;
+  display: block;
+  transition: 0.2s ease-in-out opacity;
 }
 .section-user-detail .reviews .review-list .review .metadata {
   display: grid;
@@ -144,16 +146,14 @@
   display: block;
   color: #fff;
   text-decoration: none;
-  transition: 0.2s ease-in-out opacity;
-}
-.section-user-detail .reviews .review-list .review .metadata .text .username:hover {
-  opacity: 0.6;
 }
 .section-user-detail .reviews .review-list .review .metadata .text .subline {
   display: grid;
   grid-gap: 5px;
   grid-template-columns: auto 1fr;
   align-items: center;
+  color: #fff;
+  text-decoration: none;
 }
 .section-user-detail .reviews .review-list .review .metadata .text .subline i.positive {
   color: #62d38a;
@@ -168,8 +168,11 @@
   margin-top: 15px;
   line-height: 1.5em;
   word-break: normal;
-  overflow: hidden;
-  transition: 1s ease max-height;
+  color: #fff;
+  text-decoration: none;
+}
+.section-user-detail .reviews .review-list .review:hover {
+  opacity: 0.4;
 }
 .section-user-detail .spinplays {
   padding: 50px;

public/assets/css/userdetail.less

@@ -134,6 +134,8 @@
                 background: rgba(255,255,255,0.1);
                 border-radius: 4px;
                 padding: 20px;
+                display: block;
+                transition: 0.2s ease-in-out opacity;
 
                 & .metadata {
                     display: grid;
@@ -163,17 +165,14 @@
                             display: block;
                             color: #fff;
                             text-decoration: none;
-                            transition: 0.2s ease-in-out opacity;
-
-                            &:hover {
-                                opacity: 0.6;
-                            }
                         }
                         & .subline {
                             display: grid;
                             grid-gap: 5px;
                             grid-template-columns: auto 1fr;
                             align-items: center;
+                            color: #fff;
+                            text-decoration: none;
 
                             & i.positive { color: #62d38a; }
                             & i.negative { color: #f73c56; }
@@ -189,8 +188,12 @@
                     margin-top: 15px;
                     line-height: 1.5em;
                     word-break: normal;
-                    overflow: hidden;
-                    transition: 1s ease max-height;
+                    color: #fff;
+                    text-decoration: none;
+                }
+
+                &:hover {
+                    opacity: 0.4;
                 }
             }
         }

templates/user/detail-reviews.html.twig

@@ -5,11 +5,11 @@
         {% if reviews|length > 0 %}
             <div class="review-list">
                 {% for review in reviews %}
-                    <div class="review">
+                    <a href="{{ path('song.detail', {songId: review.song.id, tab: 'reviews'}) }}" class="review">
                         <div class="metadata">
-                            <a href="{{ path('user.detail', {userId: review.user.id}) }}" class="avatar" style="background-image: url({{ asset('uploads/avatar/' ~ review.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></a>
+                            <div class="avatar" style="background-image: url({{ asset('uploads/avatar/' ~ review.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                             <div class="text">
-                                <a href="{{ path('user.detail', {userId: review.user.id}) }}" class="username">{{ review.user.username }}</a>
+                                <div class="username">{{ review.user.username }}</div>
                                 <div class="subline">
                                     <i class="mdi {{ review.recommended ? 'mdi-thumb-up positive' : 'mdi-thumb-down negative' }}"></i>
                                     <span>{{ review.reviewDate|date("dS F Y") }}</span>
@@ -19,7 +19,7 @@
                         {% if review.comment != "" %}
                             <div class="comment">{{ review.comment|nl2br }}</div>
                         {% endif %}
-                    </div>
+                    </a>
                 {% endfor %}
             </div>
         {% else %}