Refactor designs

Author: PaoloCappelli

app/assets/stylesheets/_rating.css

@@ -1,22 +1,13 @@
-.rating-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-}
-
-.average-rating {
-  display: flex;
-  align-items: center;
-  margin-left: 4px;
-  gap: 4px;
-}
-
 .rating-items {
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
+
+  @media (max-width: 450px) {
+    .mdc-icon-button {
+      width: 32px;
+    }
+  }
 }
 
 .interactive-star {

app/views/subjects/_rating.html.erb

@@ -1,22 +1,23 @@
 <div class="mdc-deprecated-list-item non-clickable-list-item">
-  Puntuación:
-  <div class="rating-container">
-    <div class="average-rating">
-      <span class="material-icons">star</span>
-      <%= @subject.average_rating || "Sin calificar" %>
-    </div>
-    <div class="rating-items">
-      <% 5.downto(1).each do |value| %>
-        <% filled = @user_review.present? && @user_review.rating >= value %>
-        <% selected = @user_review.present? && @user_review.rating == value %>
-        <% url = selected ? review_path(@user_review) : reviews_path %>
-        <% method = selected ? :delete : :post %>
-        <%= form_with(url:, method:, class: "interactive-star") do |f| %>
-          <%= f.hidden_field :subject_id, value: @subject.id %>
-          <%= f.hidden_field :rating, value: %>
-          <%= f.button filled ? 'star' : 'star_outline', class: "material-icons mdc-icon-button" %>
-        <% end %>
+  <span class="mdc-deprecated-list-item__text">
+    Puntuación: <%= @subject.average_rating || "Sin calificar" %>
+  </span>
+</div>
+<div class="mdc-deprecated-list-item non-clickable-list-item">
+  <span class="mdc-deprecated-list-item__text">
+    Tu puntuación:
+  </span>
+  <div class="rating-items">
+    <% 5.downto(1).each do |value| %>
+      <% filled = @user_review.present? && @user_review.rating >= value %>
+      <% selected = @user_review.present? && @user_review.rating == value %>
+      <% url = selected ? review_path(@user_review) : reviews_path %>
+      <% method = selected ? :delete : :post %>
+      <%= form_with(url:, method:, class: "interactive-star") do |f| %>
+        <%= f.hidden_field :subject_id, value: @subject.id %>
+        <%= f.hidden_field :rating, value: %>
+        <%= f.button filled ? 'star' : 'star_outline', class: "material-icons mdc-icon-button" %>
       <% end %>
-    </div>
+    <% end %>
   </div>
 </div>