Turned square avatars into circles and changed the user details to be…

… displayed.
EHRI · Nov 24, 2021 · 1e3e289 · 1e3e289
1 parent 0558940
commit 1e3e289
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/modules/portal/app/assets/css/portal/_style.scss b/modules/portal/app/assets/css/portal/_style.scss
@@ -1041,22 +1041,33 @@ ul.pagination {
 
   .user-grid-item {
     margin-bottom: $list-margin-bottom;
+    align-content: center;
 
   }
 
   .user-info {
     .img-container {
-      width: 6rem;
-      height: 6rem;
-      overflow: hidden;
+      img {
+        border-radius: 50%;
+        width: 8rem;
+        height: 8rem;
+        overflow: hidden;
+        object-fit: cover;
+      }
+    }
+    text-align: center;
+    h3 {
+      margin-top: $margin-sm;
     }
   }
 }
 
 .user-info-details {
-  margin-left: $margin-md;
   font-size: $font-size-sm;
   color: $text-muted;
+  .institution {
+    font-style: italic;
+  }
 }
 
 .user-img-full {

diff --git a/modules/portal/app/views/userProfile/browseUsers.scala.html b/modules/portal/app/views/userProfile/browseUsers.scala.html
@@ -16,18 +16,23 @@
                 <ul class="user-grid">
                     @result.page.map { case (user, hit) =>
                         <li class="user-grid-item user-info">
-                            <a href="@controllers.portal.social.routes.Social.userProfile(user.id)" class="gravitar img-container">
-                                <span class="helper"></span>
-                                <img alt="Image" width="100%" height="auto" src="@views.Helpers.gravitar(user.data.imageUrl)" />
-                            </a>
                             <div class="user-info-details">
+                                <a href="@controllers.portal.social.routes.Social.userProfile(user.id)" class="gravitar img-container">
+                                    <span class="helper"></span>
+                                    <img alt="Image" width="100%" height="auto" src="@views.Helpers.gravitar(user.data.imageUrl)" />
+                                </a>
                                 <h3><a class="name" href="@controllers.portal.social.routes.Social.userProfile(user.id)">@user.toStringLang</a></h3>
                                 @userInfo {
+                                    @user.data.role.map { role =>
+                                    <li>@role</li>
+                                    }
                                     @user.data.institution.map { inst =>
-                                        <li>@inst</li>
+                                        <li class="institution">@inst</li>
                                     }
-                                    @user.data.location.map { loc =>
-                                        <li>@loc</li>
+                                    @user.data.url.map { url =>
+                                        <a href=@url target="_blank">
+                                            <i class="fa fa-link" aria-hidden="true"></i>
+                                        </a>
                                     }
                                 }
                             </div>