Improve stars layout and styling in secondary-content

ckanext/rating/public/css/rating.css

@@ -2,6 +2,10 @@
   margin: 20px 0;
 }
 
+.rating .heading {
+  margin-bottom: 0;
+}
+
 .rating-container {
   margin-bottom: 20px;
 }
@@ -13,4 +17,9 @@
 a.rating-star-hover,
 a.rating-star-hover:hover {
   color: #a38729;
+}
+
+.rating-description {
+  color: #7c7c82;
+  font-size: 14px;
 }

ckanext/rating/templates/rating/snippets/rating.html

@@ -16,7 +16,7 @@ package  - The package for which the rating is displayed
   {% block user_rating %}
     <h2 class="heading">{{ _('Your rating') }}</h2>
     <div class="rating-container">
-      {%- snippet "rating/snippets/stars.html", package=package -%}
+      {%- snippet "rating/snippets/stars.html", package=package -%}<br>
       <span class="rating-details">
             {%- snippet "rating/snippets/rating_description.html", rating=h.get_user_rating(package.id) -%}
           </span>

ckanext/rating/templates/rating/snippets/rating_description.html

@@ -6,16 +6,18 @@ rating  - The numerical value of the rating to display
     {% snippet "rating/snippets/rating_description.html", rating=4 %}
 #}
 
-{%- if not rating -%}
-    ({{ _('no rating given') }})
-{%- elif rating|int == 1 -%}
+<span class="rating-description">
+  {%- if not rating -%}
+    {{ _('no rating given') }}
+  {%- elif rating|int == 1 -%}
     ({{ _('bad') }})
-{%- elif rating|int == 2 -%}
+  {%- elif rating|int == 2 -%}
     ({{ _('passable') }})
-{%- elif rating|int == 3 -%}
+  {%- elif rating|int == 3 -%}
     ({{ _('ok') }})
-{%- elif rating|int == 4 -%}
+  {%- elif rating|int == 4 -%}
     ({{ _('good') }})
-{%- elif rating|int == 5 -%}
+  {%- elif rating|int == 5 -%}
     ({{ _('excellent') }})
-{%- endif -%}
+  {%- endif -%}
+</span>

ckanext/rating/templates/rating/snippets/stars_inactive.html

@@ -19,6 +19,7 @@ stars  - The number of stars to be displayed.
     {%- endfor -%}
   </span>
 </span>
+<br>
 <span class="rating-description">
   {{ ratings_count }} {{ _('rating') if ratings_count == 1 else _('ratings') }}
 </span>