From 80cc3d05ce1684081677b79379a98bf325c67db8 Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Sat, 7 Sep 2024 00:07:26 +0800
Subject: [PATCH] try to make the layout close to mastondon

---
 src/co/gaiwan/compass/html/profiles.clj | 29 ++++++++++---------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index 3bb7f41..af2c75f 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -58,11 +58,6 @@
 
 (o/defstyled profile-detail :div#detail
   [image-frame :w-100px {--arc-thickness "7%"}]
-  [:.contact-list :flex :flex-wrap :gap-4]
-  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
-  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center
-   [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
   ([{:public-profile/keys [name hidden?]
      :user/keys [uuid] :as user}]
    [:<>
@@ -79,15 +74,15 @@
 
     #_[:div (pr-str user)]
     ;; Disable Edit Profile before we can show profile details pretty
-    #_[:div.actions
-       [edit-profile-btn user]]]))
+    [:div.actions
+     [edit-profile-btn user]]]))
 
 (o/defstyled contact-detail :div
   [image-frame :w-100px {--arc-thickness "7%"}]
-  ;;[:.contact-list :flex :flex-wrap :gap-4]
+  [:.contact-list :w-full :ga-4]
   [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
   [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center
+  [:.contact :flex :items-center :justify-between
    [:div :mr-2]
    [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
   ([{:public-profile/keys [name]
@@ -106,14 +101,14 @@
        :hx-trigger "contact-deleted from:body"}]
      [:h3 "Contacts"]
      [:div.contact-list
-      [:ul
-       (for [c (:user/contacts user)]
-         [:li.contact
-          [image-frame {:profile/image (user/avatar-css-value c)}]
-          [:div [:label (:public-profile/name c)]
-           [:label (:discord/email c)]]
-          [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-           [graphics/person-remove] "Remove Contact"]])]]]]))
+      (for [c (:user/contacts user)]
+        [:div.contact
+         [image-frame {:profile/image (user/avatar-css-value c)}]
+         [:div
+          [:div (:public-profile/name c)]
+          [:div (:discord/email c)]]
+         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+          [graphics/person-remove] "Remove Contact"]])]]]))
 
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]