Put scores into a card

dodona-edu · Jan 4, 2024 · e4e14a4 · e4e14a4
1 parent bdef7fb
commit e4e14a4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/app/assets/stylesheets/components/card.css.scss b/app/assets/stylesheets/components/card.css.scss
@@ -22,7 +22,7 @@
 
 .card-outlined {
   box-shadow: none;
-  border: 1px solid var(--d-outline);
+  border: 1px solid var(--d-divider);
 }
 
 .card-media {

diff --git a/app/assets/stylesheets/models/submissions.css.scss b/app/assets/stylesheets/models/submissions.css.scss
@@ -539,3 +539,8 @@ iframe.file {
     margin-right: 6px;
   }
 }
+
+.scores.card .card-title.card-title-colored-container .btn {
+  margin-top: -12px;
+  margin-bottom: -12px;
+}
diff --git a/app/views/feedbacks/_score_link.html.erb b/app/views/feedbacks/_score_link.html.erb
@@ -6,22 +6,17 @@
 <% total = policy(feedback.evaluation_exercise).show_total? %>
 <% scores = policy_scope(feedback.scores) %>
 <% if (total && feedback.score_items.present?) || scores.present? %>
-  <%= link_to "#score-details-#{feedback.id}",
-              class: 'toggleable-icon btn with-icon btn-outline',
-              'aria-expanded': 'true',
-              title: t("feedbacks.score_link.view_breakdown"), data: { 'bs-toggle': "collapse" } do %>
-    <i class="collapsed-icon mdi mdi-chevron-down mdi-18"></i>
-    <i class="expanded-icon mdi mdi-chevron-up mdi-18"></i>
+  <span title="<%=t("feedbacks.score_link.view_breakdown")%>">
     <% if total && feedback.score_items.present? %>
       <%= t("feedbacks.score_link.score", score: format_score(feedback.score), max: format_score(feedback.maximum_score)) %>
     <% else %>
       <%= t("feedbacks.score_link.present", count: scores.length) %>
     <% end %>
-  <% end %>
+  </span>
 <% end %>
 <%# Link to edit screen if needed %>
 <% if policy(feedback).show? && scores.present? %>
-  <%= link_to feedback_path(feedback), class: "edit-score btn btn-icon", title: t("feedbacks.score_link.view_feedback") do %>
+  <%= link_to feedback_path(feedback), class: "edit-score btn btn-icon float-end", title: t("feedbacks.score_link.view_feedback") do %>
     <i class="mdi mdi-pencil"></i>
   <% end %>
 <% end %>
diff --git a/app/views/submissions/_description.html.erb b/app/views/submissions/_description.html.erb
@@ -71,14 +71,16 @@
       </div>
     </div>
     <% @feedbacks.each do |feedback| %>
-        <div class="col-md-12 mb-2">
-          <span class="score">
+      <div class="col-md-12">
+        <div class="card-outlined card scores">
+          <div class="card-title card-title-colored-container">
             <%= render 'feedbacks/score_link', feedback: feedback %>
-          </span>
-          <div class="collapse score-details show" id="<%= "score-details-#{feedback.id}" %>">
+          </div>
+          <div class="card-supporting-text" id="<%= "score-details-#{feedback.id}" %>">
             <%= render 'feedbacks/score_table', feedback: feedback %>
           </div>
         </div>
+      </div>
     <% end %>
   </div>
 </div>