Adjust styling to improve responsiveness

- Making athlete/activity cards work better on smaller screens
- Updating background color (light) to match strava.com
- Moving around some stuff in activity cards

Author: veloek

Tevling/Components/ActivityCard.razor

@@ -2,21 +2,21 @@
 
 @if (Activity is not null)
 {
-    <div class="activity-card px-4 py-3 d-flex flex-row flex-wrap">
-        <div class="activity-card-content d-flex flex-column">
-
-            <div class="activity-card-header d-flex flex-row align-items-center flex-wrap-reverse row-gap-1">
-                <div class="d-flex align-items-center flex-row column-gap-2 athlete-name-container me-1">
-                    <Avatar Url="@Activity.Athlete?.ImgUrl" Size="40" />
-                    <span class="athlete-name">@Activity.Athlete?.Name</span>
-                </div>
+    <div class="activity-card px-3 py-2 d-flex flex-row flex-wrap">
+        <div class="activity-card-content pb-1 d-flex flex-column">
+            <div class="activity-card-header mb-2 d-flex flex-row align-items-center flex-wrap-reverse row-gap-1">
                 <span class="activity-time">@ActivityTime</span>
                 <div class="d-flex flex-row align-items-end ms-auto strava-link column-gap-1">
                     <a target="_blank" href="https://www.strava.com/activities/@Activity.StravaId">@Loc["ViewOnStrava"]</a>
                     <i class="bi bi-box-arrow-up-right pb-1" aria-hidden="true"></i>
                 </div>
             </div>
 
+            <div class="d-flex align-items-center flex-row column-gap-2 athlete-name-container me-1">
+                <Avatar Url="@Activity.Athlete?.ImgUrl" Size="40" />
+                <span class="athlete-name">@Activity.Athlete?.Name</span>
+            </div>
+
             <div class="activity-card-body d-flex flex-column row-gap-2">
                 <div>
                     <span class="badge bg-primary">@ActivityTypeTranslator.Translate(Activity.Details.Type)</span>

Tevling/Components/ActivityCard.razor.css

@@ -1,9 +1,10 @@
 .activity-card {
   display: flex;
   flex-direction: row;
-  border-radius: 1.5rem;
+  border-radius: .5rem;
   width: 34rem;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  max-width: 100%;
+  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.15);
   transition: box-shadow 0.2s, max-height 1s ease-in-out;
   column-gap: 1em;
   margin-bottom: 1rem;
@@ -17,7 +18,7 @@
 
 @media (max-width: 500px) {
   .activity-card {
-    width: 21rem;
+    min-width: 21rem;
   }
 
   .activity-time,

Tevling/Components/AthleteCard.razor.css

@@ -1,16 +1,17 @@
 .athlete-card {
   display: flex;
   flex-direction: row;
-  border-radius: 1rem;
+  border-radius: .5rem;
   width: 44rem;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  max-width: 100%;
+  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.15);
   transition: box-shadow 0.2s, max-height 1s ease-in-out;
   column-gap: 1em;
 }
 
 @media (max-width: 500px) {
   .athlete-card {
-    max-width: 22rem;
+    min-width: 21rem;
   }
 
   .athlete-name {
@@ -35,18 +36,18 @@
 }
 
 .athlete-name {
-  width: 15rem;
+  max-width: 15rem;
 }
 
 .strava-link {
   font-size: smaller;
   font-weight: 300;
-  width: 7rem;
+  max-width: 7rem;
 }
 
 .unfollow-button,
 .follow-button {
-  width: 8rem;
+  max-width: 8rem;
 }
 
 .page[data-bs-theme="dark"] .athlete-card {

Tevling/Pages/Activities.razor

@@ -7,7 +7,7 @@
 <h1 class="mb-3 title">@Loc["Activities"]</h1>
 
 <div class="d-flex column-gap-3 mb-3 flex-wrap-reverse flex-row">
-    <div class="activities me-5">
+    <div class="activities" style="width:100%">
         @{
             int step = 0;
         }

Tevling/Pages/Profile.razor.css

@@ -19,6 +19,7 @@ button {
 }
 
 .profile-info {
+  width: 100%;
   margin-right: 13rem;
 }
 

Tevling/Shared/MainLayout.razor.css

@@ -3,23 +3,25 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  min-width: 380px;
   background-color: var(--bs-body-bg);
   color: var(--bs-body-color);
 }
 
 .page[data-bs-theme="light"] {
-  background-color: #eff6fe;
+  background-color: #fafafa;
 }
 
 main {
   flex: 1;
+  overflow: hidden;
 }
 
 .sidebar {
   background-color: #222;
 }
 
-@media (min-width: 641px) {
+@media (min-width: 801px) {
   .page {
     flex-direction: row;
   }
@@ -37,7 +39,7 @@ main {
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 800px) {
   .sidebar {
     position: -webkit-sticky;
     position: sticky;

Tevling/Shared/NavMenu.razor.css

@@ -58,7 +58,7 @@
   color: white;
 }
 
-@media (min-width: 641px) {
+@media (min-width: 801px) {
   .navbar-toggler {
     display: none;
   }
@@ -73,7 +73,7 @@
   }
 }
 
-@media (max-width: 641px) {
+@media (max-width: 801px) {
   .top-row {
     padding-left: 1rem;
   }