Add basic styles of report view

jucrojasba · Oct 30, 2024 · 991414a · 991414a
1 parent ba7a5f5
commit 991414a
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 8 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -13,3 +13,4 @@
  *= require_tree .
  *= require_self
  */
+@import "pages/reports.css"
diff --git a/app/assets/stylesheets/pages/reports.css b/app/assets/stylesheets/pages/reports.css
@@ -0,0 +1,78 @@
+.reportes-title {
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #333;
+    text-align: center;
+}
+
+.report-form {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.btn {
+    padding: 10px 15px;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.btn-danger {
+    background-color: #dc3545;
+    color: white;
+}
+
+.btn-danger:hover {
+    background-color: #c82333;
+}
+
+.btn-success {
+    background-color: #28a745;
+    color: white;
+}
+
+.btn-success:hover {
+    background-color: #218838;
+}
+
+.reports-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.reports-table th, .reports-table td {
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: left;
+}
+
+.reports-table th {
+    background-color: #f2f2f2;
+}
+
+.reports-table tr:hover {
+    background-color: #f1f1f1;
+}
+
+.actions-cell {
+    display: flex;
+    flex-direction: column; 
+    gap: 5px; 
+    align-items: flex-start; 
+}
+
+@media (min-width: 576px) {
+    .actions-cell {
+        flex-direction: row; 
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 575px) {
+    .btn {
+        width: 60%;
+        font-size: 0.9em;
+    }
+}
diff --git a/app/views/reports/index.html.erb b/app/views/reports/index.html.erb
@@ -1,22 +1,22 @@
-<h1>Reportes:</h1>
+<h1 class="reportes-title">Reportes:</h1>
 
-<div>
+<div class="report-form">
   <%= form_with model: @report, url: reports_path do |form| %>
     <%= form.hidden_field :status, value: 1 %> 
-    <%= form.hidden_field :issue_type, value: 1 %> <!-- '1' para falta de café -->
+    <%= form.hidden_field :issue_type, value: 1 %>
     <%= form.submit 'Reportar falta de café', class: 'btn btn-danger' %>
   <% end %>
 </div>
 
-<div>
+<div class="report-form">
   <%= form_with model: @report, url: reports_path do |form| %>
     <%= form.hidden_field :status, value: 1 %> 
-    <%= form.hidden_field :issue_type, value: 2 %> <!-- '2' para falta de papel higiénico -->
+    <%= form.hidden_field :issue_type, value: 2 %>
     <%= form.submit 'Reportar falta de papel higiénico', class: 'btn btn-danger' %>
   <% end %>
 </div>
 
-<table>
+<table class="reports-table">
   <thead>
     <tr>
       <th>Estado</th>
@@ -33,8 +33,8 @@
         <td><%= report.issue_type == 1 ? 'Falta café' : 'Falta papel higiénico' %></td>
         <td><%= report.created_at.strftime("%Y-%m-%d") %></td>
         <td><%= report.created_at.strftime("%H:%M") %></td>
-        <td>
-          <% if report.status == 1 %> <!-- Mostrar el enlace solo si el estado es 1 -->
+        <td class="actions-cell">
+          <% if report.status == 1 %>
             <%= link_to 'Marcar como Resuelto', update_report_path(report), data: { turbo_method: :patch, confirm: '¿Estás seguro de que deseas marcar este reporte como resuelto?' }, class: 'btn btn-success' %>
           <% end %>
           <%= link_to 'Eliminar', delete_report_path(report), data: { turbo_method: :delete, confirm: '¿Estás seguro de que deseas eliminar este reporte?' }, class: 'btn btn-danger' %>