From 7d79b98e8b8cff6cfc44ca5a4c431f98d06661b7 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@hippodigital.co.uk>
Date: Wed, 1 Feb 2023 11:19:29 +0000
Subject: [PATCH] Improve profile details

- Re-order details so numbers are first
- Only have interaction hover and active styling for the links
---
 .../profile/AccountProfileDetails.html        | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/routes/_components/profile/AccountProfileDetails.html b/src/routes/_components/profile/AccountProfileDetails.html
index 2aefda55..76f99d8d 100644
--- a/src/routes/_components/profile/AccountProfileDetails.html
+++ b/src/routes/_components/profile/AccountProfileDetails.html
@@ -1,36 +1,36 @@
 <h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
 <div class="account-profile-details">
   <div class="account-profile-details-item">
-    <span class="account-profile-details-item-title">
-      {intl.statuses}
-    </span>
     <span class="account-profile-details-item-datum">
       {numStatusesDisplay}
     </span>
+    <span class="account-profile-details-item-title">
+      {intl.statuses}
+    </span>
   </div>
   <a class="account-profile-details-item"
      href='/accounts/{account.id}/follows'
      aria-label={followingLabel}
      rel="prefetch"
   >
-    <span class="account-profile-details-item-title">
-      {intl.follows}
-    </span>
     <span class="account-profile-details-item-datum">
       {numFollowingDisplay}
     </span>
+    <span class="account-profile-details-item-title">
+      {intl.follows}
+    </span>
   </a>
   <a class="account-profile-details-item"
      href='/accounts/{account.id}/followers'
      aria-label={followersLabel}
      rel="prefetch"
   >
-    <span class="account-profile-details-item-title">
-      {intl.followers}
-    </span>
     <span class="account-profile-details-item-datum">
       {numFollowersDisplay}
     </span>
+    <span class="account-profile-details-item-title">
+      {intl.followers}
+    </span>
   </a>
   <!-- TODO: re-enable this when we support profile editing -->
   {#if account && verifyCredentials && account.id !== verifyCredentials.id}
@@ -61,24 +61,23 @@
     font-size: 1.1em;
   }
 
-  .account-profile-details-item:hover {
+  .account-profile-details-item[href]:hover {
     text-decoration: none;
     background: var(--button-bg-hover);
     cursor: pointer;
   }
 
-  .account-profile-details-item:active {
+  .account-profile-details-item[href]:active {
     background: var(--button-bg-active);
   }
 
   .account-profile-details-item-title {
     color: var(--deemphasized-text-color);
-    margin-right: 5px;
   }
 
   .account-profile-details-item-datum {
     color: var(--body-text-color);
-    margin-left: 5px;
+    margin-right: 5px;
     font-weight: 600;
   }