Edit css and add some basic responsive support

seedcommons · Nov 20, 2024 · 9bca142 · 9bca142
1 parent ba21d10
commit 9bca142
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 32 deletions.
diff --git 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;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git 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
@@ -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: