From 9bca142b898109dc8c685e3db3172159a89e4ade Mon Sep 17 00:00:00 2001
From: Bruno Ferreyra <contact@brunoferreyra.com>
Date: Wed, 20 Nov 2024 20:15:14 -0300
Subject: [PATCH] Edit css and add some basic responsive support

---
 .../admin/dashboard_beta/_dashboard.scss      | 79 +++++++++++++++----
 .../admin/dashboard_beta/dashboard.html.slim  |  2 +
 .../admin/dashboard_beta/stackbar_popup.slim  | 35 ++++----
 3 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/admin/dashboard_beta/_dashboard.scss b/app/assets/stylesheets/admin/dashboard_beta/_dashboard.scss
index f31ed5ad0..5d39fd189 100644
--- a/app/assets/stylesheets/admin/dashboard_beta/_dashboard.scss
+++ b/app/assets/stylesheets/admin/dashboard_beta/_dashboard.scss
@@ -1,4 +1,10 @@
 .admin-dashboard_beta {
+  hr {
+    display: none;
+    border: 0.5px solid #d9d9d9;
+    width: 100%;
+  }
+
   .block {
     > div {
       display: flex;
@@ -37,15 +43,21 @@
           gap: 10px;
           width: 100%;
           margin-bottom: 10px;
+          flex-wrap: wrap;
 
           > * {
             margin-bottom: 5px;
           }
 
           > label > * {
+            font-size: 14px;
             width: inherit;
             font-weight: normal;
             display: block;
+
+            > * {
+              font-size: 14px;
+            }
           }
 
           > svg {
@@ -72,23 +84,60 @@
 }
 
 
-form.admin-dashboard_beta-popup {
-  display: flex;
-  flex-direction: row;
-  align-items: end;
-  gap: 10px;
-  width: 100%;
-  padding: 10px;
+.block.admin-dashboard_beta-popup {
+  > form {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    gap: 10px;
+    width: 100%;
+    padding: 20px 20px 10px 20px;
+  
+    > label {
+      margin-bottom: 5px;
+      max-width: 25%;
+    }
+  
+    > label > * {
+      font-size: 12px;
+      width: inherit;
+      font-weight: normal;
+      display: block;
+      max-width: 100%;
 
-  > label {
-    margin-bottom: 5px;
-    max-width: 25%;
+      > * {
+        font-size: 12px;
+      }
+    }
   }
 
-  > label > * {
-    width: inherit;
-    font-weight: normal;
-    display: block;
-    max-width: 100%;
+  > .loans-chart {
+    padding: 10px 20px 20px 20px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .admin-dashboard_beta {
+    hr {
+      display: block;
+    }
+
+    .block {
+      > div {
+        flex-direction: column;
+
+        > section.active-loans {
+          > form {
+            > label > * {
+              font-size: 14px;
+  
+              > * {
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/app/views/admin/dashboard_beta/dashboard.html.slim b/app/views/admin/dashboard_beta/dashboard.html.slim
index 90beb9183..7bd7f114b 100644
--- a/app/views/admin/dashboard_beta/dashboard.html.slim
+++ b/app/views/admin/dashboard_beta/dashboard.html.slim
@@ -10,6 +10,7 @@
       .loans-chart
         .chart
           .dashboard-loans-chart
+    hr
     section.active-loans
       form action=request.path
         label
@@ -37,6 +38,7 @@
         .chart
           .dashboard-loans-bar-chart
       a View repayment report
+    hr
 
   section.section.recent-projects.projects-grid
     = render partial: "recent_projects_grid_definition",
diff --git a/app/views/admin/dashboard_beta/stackbar_popup.slim b/app/views/admin/dashboard_beta/stackbar_popup.slim
index 51fa1c589..3bf27bf57 100644
--- a/app/views/admin/dashboard_beta/stackbar_popup.slim
+++ b/app/views/admin/dashboard_beta/stackbar_popup.slim
@@ -1,23 +1,24 @@
 - content_for(:title, 'Loans')
 = javascript_include_tag "https://www.gstatic.com/charts/loader.js"
 = stylesheet_link_tag "admin", media: "all"
-form.admin-dashboard_beta-popup action=request.path
-  label
-    span = t("common.sort_by")
-    select class="form-control" name="sort_key"
-      option value="signing_date" selected=('selected' if params[:sort_key] == 'signing_date') = t("loan.signing_date")
-      option value="amount" selected=('selected' if params[:sort_key] == 'amount') = t("loan.amount")
-  label
-    span = t("common.sort_order")
-    select class="form-control" name="sort_order"
-      option value="desc" selected=('selected' if params[:sort_order] == 'DESC') = t("common.descending")
-      option value="asc" selected=('selected' if params[:sort_order] == 'ASC') = t("common.ascending")
-  input type="hidden" name="limit" value="0"
-  label
-    input class="form-control" type="submit" value=t("filter")
-.loans-chart
-  .chart
-    .dashboard-loans-bar-chart
+.block.admin-dashboard_beta-popup
+  form action=request.path
+    label
+      span = t("common.sort_by")
+      select class="form-control" name="sort_key"
+        option value="signing_date" selected=('selected' if params[:sort_key] == 'signing_date') = t("loan.signing_date")
+        option value="amount" selected=('selected' if params[:sort_key] == 'amount') = t("loan.amount")
+    label
+      span = t("common.sort_order")
+      select class="form-control" name="sort_order"
+        option value="desc" selected=('selected' if params[:sort_order] == 'DESC') = t("common.descending")
+        option value="asc" selected=('selected' if params[:sort_order] == 'ASC') = t("common.ascending")
+    input type="hidden" name="limit" value="0"
+    label
+      input class="form-control" type="submit" value=t("filter")
+  .loans-chart
+    .chart
+      .dashboard-loans-bar-chart
         
 
   javascript: