Add user info panel to profile

anorthall · Dec 10, 2023 · 522f710 · 522f710
1 parent d9169cf
commit 522f710
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/app/static/css/caves.app.css b/app/static/css/caves.app.css
@@ -511,8 +511,17 @@ main {
   User profile
 */
 
-#profileSidebar .friend-link {
-  color: var(--bs-body-color) !important;
+dl.user-info dt, dl.user-info dd {
+  border-bottom: 1px solid var(--bs-border-color);
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}
+
+dl.user-info dd {
+  margin-bottom: 0;
+}
+dl.user-info dt:last-of-type, dl.user-info dd:last-of-type {
+  border-bottom: none !important;
 }
 
 #searchInput.htmx-request {

diff --git a/app/templates/logger/profile.html b/app/templates/logger/profile.html
@@ -22,7 +22,7 @@ <h1 class="fs-3 mb-0">{{ profile_user.name }}</h1>
         {% endif %}
         {% if user_has_trips %}
           <small class="text-body-tertiary d-block mt-1 mt-md-0">
-            {{ profile_user.trips.count }} trips on caves.app
+            {{ profile_user.trips.count }} trips &middot; {{ profile_user.friends.all.count }} friends
           </small>
         {% endif %}
       {% else %}
@@ -58,6 +58,9 @@ <h1 class="fs-3 mb-0">{{ profile_user.name }}</h1>
             <button class="nav-link" id="statsTab" data-bs-toggle="tab" data-bs-target="#statsTabContent" type="button" role="tab" aria-controls="statsTabContent" aria-selected="false">Statistics</button>
           </li>
         {% endif %}
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="userInfoTab" data-bs-toggle="tab" data-bs-target="#userInfoTabContent" type="button" role="tab" aria-controls="userInfoTabContent" aria-selected="false">Info</button>
+        </li>
       </ul>
 
       <div class="tab-content p-3 border border-top-0" id="profileTabsContent">
@@ -83,6 +86,46 @@ <h1 class="fs-3 mb-0">{{ profile_user.name }}</h1>
             </div>
           </div>
         {% endif %}
+
+        <div class="tab-pane fade" id="userInfoTabContent" role="tabpanel" aria-labelledby="userInfoTab" tabindex="0">
+          <dl class="row mb-0">
+            <dt class="col-sm-4">Name</dt>
+            <dd class="col-sm-8">{{ profile_user.name }}</dd>
+
+            <dt class="col-sm-4">Username</dt>
+            <dd class="col-sm-8">{{ profile_user.username }}</dd>
+
+            {% if profile_user.location %}
+              <dt class="col-sm-4">Location</dt>
+              <dd class="col-sm-8">{{ profile_user.location }}</dd>
+            {% endif %}
+
+            {% if profile_user.country %}
+              <dt class="col-sm-4">Country</dt>
+              <dd class="col-sm-8">{{ profile_user.country.name }}</dd>
+            {% endif %}
+
+            {% if profile_user.clubs %}
+              <dt class="col-sm-4">Clubs</dt>
+              <dd class="col-sm-8">{{ profile_user.clubs }}</dd>
+            {% endif %}
+
+            <dt class="col-sm-4">Friends</dt>
+            <dd class="col-sm-8">{{ profile_user.friends.all.count }}</dd>
+
+            <dt class="col-sm-4">Units</dt>
+            <dd class="col-sm-8">{{ profile_user.units }}</dd>
+
+            <dt class="col-sm-4">Timezone</dt>
+            <dd class="col-sm-8">{{ profile_user.timezone }}</dd>
+
+            <dt class="col-sm-4">Date joined</dt>
+            <dd class="col-sm-8">{{ profile_user.date_joined|date:"j F Y" }}</dd>
+
+            <dt class="col-sm-4">Account age</dt>
+            <dd class="col-sm-8">{{ profile_user.date_joined|timesince }}</dd>
+          </dl>
+        </div>
       </div>
     {% endif %}
   {% else %}