Merge pull request #320 from freezingsaddles/heat-map-iii

Make the homepage more dynamic
freezingsaddles · Dec 9, 2024 · 21942f7 · 21942f7
2 parents c281c91 + 7762685
commit 21942f7
Show file tree

Hide file tree

Showing 12 changed files with 560 additions and 104 deletions.
diff --git a/freezing/web/static/css/styles.css b/freezing/web/static/css/styles.css
@@ -34,17 +34,37 @@ table.dataTable.no-footer {
     column-gap: 1rem;
 }
 
+.d-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-gap-3 {
+    column-gap: 1rem;
+    row-gap: 1rem;
+}
+
 .photo-thumbnail {
     display: block;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: var(--bs-border-radius);
-    transition: outline .1s ease-in;
+    transition: outline .1s ease-in, border .1s ease-in;
     aspect-ratio: 1;
+    border: 1px solid var(--bs-border-color-translucent);
 
     &:hover, &:focus {
-        outline: 2px solid #007bff;
+        border-color: #007bff;
+        outline: 1px solid #007bff;
     }
 }
 
@@ -79,7 +99,7 @@ nav.bg-light {
 }
 
 .stat-divider {
-    border-bottom: 1px solid #8888;
+    border-bottom: 1px solid #8884;
     margin: .5rem 0;
     width: 100%;
 }
@@ -102,7 +122,102 @@ nav.bg-light {
     }
 }
 
+.tag-link {
+    color: #343a40;
+    text-decoration: none;
+    transition: color .1s ease-in;
+
+    &:hover {
+        color: #212529;
+        text-decoration: underline;
+    }
+}
+
+.block-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.minw-0 {
+    min-width: 0;
+}
+
+.gap-1 {
+    gap: .25rem;
+}
+
+.stats-card {
+    flex-direction: column;
+}
+
+.vertical-header, .horizontal-header {
+    flex-shrink: 0;
+    padding: .25rem .5rem;
+    font-size: 1.2rem;
+    font-weight: bold;
+    border-bottom: 1px solid var(--bs-border-color-translucent);
+    text-align: center;
+}
+
+.hour-card {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.hour-datum {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.hour-icon {
+    font-size: 3rem;
+    line-height: 1;
+}
+
+.hour-number {
+    font-size: 2.5rem;
+    line-height: 1;
+}
+
+.hour-label {
+    display: none;
+}
+
 @media (min-width: 576px) {
+    .stats-card {
+        flex-direction: row;
+    }
+
+    .vertical-header {
+        font-size: 1.5rem;
+        padding: .5rem;
+        writing-mode: sideways-lr;
+        border-bottom: none;
+        border-right: 1px solid var(--bs-border-color-translucent);
+    }
+
+    .hour-card {
+        padding-bottom: .5rem;
+    }
+
+    .hour-datum {
+        flex-direction: row;
+        gap: 1rem;
+    }
+
+    .hour-label {
+        display: block;
+    }
+
     .photo-grid {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -117,15 +232,16 @@ nav.bg-light {
 }
 
 @media (min-width: 992px) {
-    .stat-divider {
-        border-bottom: none;
-        border-right: 1px solid #8888;
-        margin: 0 .5rem;
-        width: 0;
-        height: 1em;
+    .grid-lg-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
-    .badge-group {
+
+    .grid-gap-lg-4 {
+        column-gap: 1.5rem;
+        row-gap: 1.5rem;
+    }
+
+    .badge-group:not(.vertical) {
         flex-direction: row;
 
         .badge {
@@ -159,13 +275,29 @@ nav.bg-light {
 }
 
 @media (min-width: 1200px) {
+    .grid-xl-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }    
+
+    .stat-divider:not(.horizontal) {
+        border-bottom: none;
+        border-right: 1px solid #8888;
+        margin: 0 .5rem;
+        width: 0;
+        height: 1em;
+    }
+
     .photo-grid {
         display: grid;
         grid-template-columns: repeat(6, minmax(0, 1fr));
     }
 }
 
 @media (prefers-color-scheme: dark) {
+    .text-black {
+        color: #ffffff !important;
+    }
+
     nav.bg-light {
         box-shadow: 0 2px 4px #21252980;
     }
@@ -178,7 +310,7 @@ nav.bg-light {
         color: #ced4da !important;
     }
 
-    iframe {
+    #cal, .leaflet-control {
         filter: invert(95%) brightness(80%);
     }
 
@@ -192,4 +324,12 @@ nav.bg-light {
             visibility: hidden;
         }
     }
+
+    .tag-link {
+        color: #dee2e6;
+
+        &:hover {
+            color: #ffffff;
+        }
+    }
 }
diff --git a/freezing/web/static/js/leaflet-heat.js b/freezing/web/static/js/leaflet-heat.js
diff --git a/freezing/web/templates/base.html b/freezing/web/templates/base.html
@@ -100,6 +100,7 @@
                             <li><a class="dropdown-item" href="/explore/team_cumul">Team Cumulative</a></li>
                             <li><a class="dropdown-item" href="/explore/team_weekly">Team Weekly Points</a></li>
                             <li><a class="dropdown-item" href="/pointless/avgspeed">Tortoise and Hare</a></li>
+                            <li><a class="dropdown-item" href="/pointless/weekend">Weekend Warrior</a></li>
                         </ul>
                     </li>
                     <li class="nav-item dropdown">