minor styling nits

freezingsaddles · Jan 19, 2025 · 5a233d4 · 5a233d4
1 parent 25085c4
commit 5a233d4
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 8 deletions.
diff --git a/freezing/web/static/css/styles.css b/freezing/web/static/css/styles.css
@@ -260,6 +260,11 @@ nav.bg-light {
     color: var(--bs-body-color) !important;
 }
 
+.c3-wide {
+    width: 100%;
+    aspect-ratio: 1;
+}
+
 @media (min-width: 576px) {
     .stats-card {
         flex-direction: row;
@@ -353,6 +358,10 @@ nav.bg-light {
         max-height: 85vh;
         overflow-y: auto;
     }
+
+    .c3-wide {
+        aspect-ratio: 1.5;
+    }
 }
 
 @media (min-width: 1200px) {
@@ -376,6 +385,10 @@ nav.bg-light {
         display: grid;
         grid-template-columns: repeat(6, minmax(0, 1fr));
     }
+
+    .c3-wide {
+        aspect-ratio: 2;
+    }
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/freezing/web/templates/explore/distance_by_lowtemp.html b/freezing/web/templates/explore/distance_by_lowtemp.html
@@ -82,7 +82,7 @@
         Relationship between total number of miles logged riders and the average low daily temperatures.
     </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart" style="width:100%; height:560px;">
+    <div id="chart" class="c3-wide">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"

diff --git a/freezing/web/templates/explore/indiv_elev_dist.html b/freezing/web/templates/explore/indiv_elev_dist.html
@@ -74,7 +74,7 @@ <h1>
         <strong>Correlation between distance, elevation and average speed</strong>
     </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_div" style="width:100%; aspect-ratio: 1.333">
+    <div id="chart_div" class="c3-wide">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><style>.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class="spinner_zWVm" x="1" y="1" width="7.33" height="7.33"/><rect class="spinner_gfyD" x="8.33" y="1" width="7.33" height="7.33"/><rect class="spinner_T5JJ" x="1" y="8.33" width="7.33" height="7.33"/><rect class="spinner_E3Wz" x="15.66" y="1" width="7.33" height="7.33"/><rect class="spinner_g2vs" x="8.33" y="8.33" width="7.33" height="7.33"/><rect class="spinner_ctYB" x="1" y="15.66" width="7.33" height="7.33"/><rect class="spinner_BDNj" x="15.66" y="8.33" width="7.33" height="7.33"/><rect class="spinner_rCw3" x="8.33" y="15.66" width="7.33" height="7.33"/><rect class="spinner_Rszm" x="15.66" y="15.66" width="7.33" height="7.33"/></svg>
         &nbsp;Loading chart data...
     </div>

diff --git a/freezing/web/templates/explore/riders_by_lowtemp.html b/freezing/web/templates/explore/riders_by_lowtemp.html
@@ -82,7 +82,7 @@
         Relationship between number of participating riders and the average low daily temperatures.
     </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart" style="width:100%; height:560px;">
+    <div id="chart" class="c3-wide">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"

diff --git a/freezing/web/templates/explore/team_cumul.html b/freezing/web/templates/explore/team_cumul.html
@@ -86,7 +86,7 @@ <h1>
         <strong>Points over Time</strong>
     </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_team_cumul_points" style="width:100%; height: 600px">
+    <div id="chart_team_cumul_points" class="c3-wide">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"
@@ -100,7 +100,7 @@ <h1>
     <div class="text-center">
         <strong>Mileage over Time</strong>
     </div>
-    <div id="chart_team_cumul_mileage" style="width:100%; height: 600px">
+    <div id="chart_team_cumul_mileage" class="c3-wide">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"

diff --git a/freezing/web/templates/explore/team_weekly_points.html b/freezing/web/templates/explore/team_weekly_points.html
@@ -63,7 +63,7 @@ <h1>
         Team Weekly Points
     </h1>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_team_weekly_points" style="width:100%; height: 480px">
+    <div id="chart_team_weekly_points" class="c3-wide">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"

diff --git a/freezing/web/templates/leaderboard/indiv_text.html b/freezing/web/templates/leaderboard/indiv_text.html
@@ -6,6 +6,8 @@
   }
   .myself {
     background-color: #ffff0020;
+    outline: 3px solid #ffff0020;
+    border-radius: 4px;
   }
     </style>
 {% endblock %}

diff --git a/freezing/web/templates/leaderboard/team_text.html b/freezing/web/templates/leaderboard/team_text.html
@@ -6,6 +6,8 @@
     }
     .my-team {
       background-color: #ffff0020;
+      outline: 6px solid #ffff0020;
+      border-radius: 4px;
     }
     </style>
 {% endblock %}

diff --git a/freezing/web/templates/user/rides.html b/freezing/web/templates/user/rides.html
@@ -162,7 +162,7 @@ <h2 class="clearfix">
                 </table>
             </div>
             <div role="tabpanel" class="tab-pane" id="daily">
-                <div id="chart_user_daily_points" style="width:100%; height: 480px">
+                <div id="chart_user_daily_points" class="c3-wide">
                     <svg width="48"
                          height="48"
                          viewBox="0 0 24 24"
@@ -174,7 +174,7 @@ <h2 class="clearfix">
                 </div>
             </div>
             <div role="tabpanel" class="tab-pane" id="weekly">
-                <div id="chart_user_weekly_points" style="width:100%; height: 480px">
+                <div id="chart_user_weekly_points" class="c3-wide">
                     <svg width="48"
                          height="48"
                          viewBox="0 0 24 24"