UI: update responsive layout (#45)

DiscipleTools · Jun 3, 2024 · ead7df8 · ead7df8
1 parent a5fe2e4
commit ead7df8
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 36 deletions.
diff --git a/includes/plugin.js b/includes/plugin.js
@@ -319,7 +319,7 @@ window.dt_dashboard = {
       this.container().prepend(addTileContainer)
 
       addTileEl = document.createElement('div')
-      addTileEl.classList.add('tile')
+      addTileEl.classList.add('tile', 'card')
       addTileContainer.appendChild(addTileEl)
     } else {
       addTileEl = addTileContainer.querySelector('.tile')

diff --git a/includes/style.css b/includes/style.css
@@ -44,26 +44,36 @@ body {
 .dashboard-page .dash-tiles {
     font-family: "Poppins", sans-serif !important;
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     justify-items: stretch;
     margin: 0 auto;
 }
 
 .dashboard-page .dash-tile {
-    grid-column: var(--dashboard-tile-column, span 4);
+    grid-column: span 1;
+    container-type: inline-size;
+    container-name: dash-tile;
 }
+.dashboard-page .dash-tile.span-0,
+.dashboard-page .dash-tile.span-1 { grid-column: span 1; }
+.dashboard-page .dash-tile.span-2 { grid-column: span 1; }
+.dashboard-page .dash-tile.span-3 { grid-column: span 1; }
+.dashboard-page .dash-tile.span-4 { grid-column: span 1; }
 
 .dashboard-page .dash-tiles .item {
     padding: 10px;
+    display: flex;
 }
 
 .dashboard-page .dash-tiles .item .tile {
     border: 0;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
     border-radius: 10px;
     background-color: var(--white);
-    height: 624px;
+    max-height: 624px;
     overflow: visible;
+    display: flex;
+    flex-direction: column;
 }
 
 .dashboard-page .count-square {
@@ -179,6 +189,13 @@ body {
     align-items: center;
     justify-content: center;
 }
+@container dash-tile (max-width: 225px) {
+    .dashboard-page .numberCircle {
+        height: 75px;
+        width: 75px;
+        font-size: 3rem;
+    }
+}
 
 
 .dashboard-page .numberCircle:before {
@@ -403,6 +420,11 @@ body {
     color: var(--white);
     border: 0;
 }
+@container dash-tile (max-width: 225px) {
+    .dashboard-page #dash-tile--DT_Dashboard_Plugin_Contact_Workload .tile-body .button {
+        font-size: 0.7rem;
+    }
+}
 
 .dashboard-page #dash-tile--DT_Dashboard_Plugin_Contact_Workload .tile-body .btn-label {
     flex-grow: 1;
@@ -440,17 +462,19 @@ body {
 }
 
 /* Active Contacts  */
-.dashboard-page #dash-tile--DT_Dashboard_Plugin_Active_Contact .tile-header {
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: 20px;
-    padding-bottom: 40px;
-}
 .dashboard-page #dash-tile--DT_Dashboard_Plugin_Active_Contact .tile-body {
-    padding: 0;
+    padding-inline: 0;
+    padding-bottom: 0;
 }
 
 /* Faith Milestone Totals */
+@container dash-tile (min-width: 450px) {
+    #dash-tile--DT_Dashboard_Plugin_Faith_Milestone_Totals #milestones {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin: 0;
+    }
+}
 .dashboard-page #dash-tile--DT_Dashboard_Plugin_Faith_Milestone_Totals .tile-body {
     padding-top: 10px;
 }
@@ -460,6 +484,7 @@ body {
     justify-content: left;
     align-items: center;
     padding: 10px 0;
+    text-align: inherit;
 }
 
 .dashboard-page #dash-tile--DT_Dashboard_Plugin_Faith_Milestone_Totals .group-progress-button-wrapper:not(:first-child) {
@@ -625,6 +650,9 @@ body {
 }
 
 /* add tiles tile */
+.dashboard-page #add-tile .tile {
+    max-height: fit-content;
+}
 .dashboard-page #add-tile #add-menu {
     margin: 20px;
     list-style-type: none;
@@ -653,6 +681,7 @@ body {
 
 .dashboard-page #add-tile #add-menu .switchery {
     width: 40px;
+    min-width: 40px;
     height: 20px;
     margin-left: 20px;
 }
@@ -693,13 +722,8 @@ body {
     flex-basis: 50%;
 }
 
-/* mobile - phone */
+/* mobile - phone - lg */
 @media only screen and (max-width: 700px) {
-    .dashboard-page .dash-tiles {
-        display: flex;
-        flex-direction: column;
-    }
-
     .dashboard-page .amchart-container {
         flex-direction: column;
     }
@@ -710,11 +734,6 @@ body {
         width: 100%;
     }
 
-    #dash-tile--DT_Dashboard_Plugin_Faith_Milestone_Totals #milestones {
-        grid-template-columns: 1fr 1fr;
-        margin: 0;
-    }
-
     #dash-tile--DT_Dashboard_Plugin_Active_Contact .tile-body {
         height: auto;
     }
@@ -735,11 +754,6 @@ body {
         padding: 10px;
     }
 
-    /* seeker */
-    .dashboard-page #dash-tile--DT_Dashboard_Plugin_Seeker_Path_Progress {
-        --dashboard-tile-column: span 4 !important;
-    }
-
     /* personal benchmarks  */
     .dashboard-page .amchart-container {
         flex-direction: column;
@@ -757,18 +771,37 @@ body {
     }
 }
 
+/* mobile - phone - lg - 400-700 */
+@media only screen and (min-width: 400px) {
+    .dashboard-page .dash-tiles {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+    .dashboard-page .dash-tile.span-2,
+    .dashboard-page .dash-tile.span-3,
+    .dashboard-page .dash-tile.span-4 {
+        grid-column: span 2;
+    }
+}
+/* mobile - ipad/tablet - 700-1000 */
 @media only screen and (min-width: 700px) {
-    .dashboard-page .dash-tile {
-        grid-column: var(--dashboard-tile-column, span 2);
+    .dashboard-page .dash-tiles {
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    }
+    .dashboard-page .dash-tile.span-2,
+    .dashboard-page .dash-tile.span-3,
+    .dashboard-page .dash-tile.span-4 {
+        grid-column: span 2;
     }
 }
-
-@media only screen and (min-width: 1060px) {
-    .dashboard-page .dash-tile {
-        grid-column: var(--dashboard-tile-column, span 1);
+/* laptop - sm - 1000-1441 */
+@media only screen and (min-width: 1000px) {
+    .dashboard-page .dash-tiles {
+        grid-template-columns: repeat(4, 1fr);
     }
+    .dashboard-page .dash-tile.span-3 { grid-column: span 3; }
+    .dashboard-page .dash-tile.span-4 { grid-column: span 4; }
 }
-
+/* desktop - lg - 1441+ */
 @media only screen and (min-width: 1441px) {
     #dashboard {
         padding-left: 100px;

diff --git a/includes/template-parts/tile.php b/includes/template-parts/tile.php
@@ -1,7 +1,6 @@
-<div class="dash-tile item dash-tile--<?php echo esc_attr( $tile->handle ); ?>"
+<div class="dash-tile item dash-tile--<?php echo esc_attr( $tile->handle ); ?> span-<?php echo esc_attr( $tile->span ); ?>"
      data-tile-handle="<?php echo esc_attr( $tile->handle ); ?>"
      id="dash-tile--<?php echo esc_attr( $tile->handle ); ?>"
-     <?php if ( $tile->span ): ?> style="--dashboard-tile-column: span <?php echo esc_attr( $tile->span ); ?> <?php endif; ?>"
 >
 
     <div class="card tile">