Update user cards

getformwork · Jun 7, 2024 · 32ce5e1 · 32ce5e1
1 parent 7e79c22
commit 32ce5e1
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 31 deletions.
diff --git a/panel/assets/css/panel-dark.min.css b/panel/assets/css/panel-dark.min.css
diff --git a/panel/assets/css/panel.min.css b/panel/assets/css/panel.min.css
diff --git a/panel/src/scss/components/_panel.scss b/panel/src/scss/components/_panel.scss
@@ -28,13 +28,14 @@
     cursor: pointer;
 }
 
-.panel-user-avatar {
+.panel-user-image {
     width: 48px;
 }
 
-.panel-user-avatar img {
+.panel-user-image img {
     width: 48px;
     border-radius: $border-radius-round;
+    box-shadow: $box-shadow-sm;
     transition: box-shadow $transition-time-md ease-out;
 
     .panel-user-card:hover & {
@@ -48,6 +49,7 @@
 
 .panel-user-fullname {
     color: $color-base-100;
+    font-weight: $headings-font-weight;
 }
 
 .panel-user-username {

diff --git a/panel/src/scss/components/_users.scss b/panel/src/scss/components/_users.scss
@@ -1,22 +1,17 @@
 .user-summary {
-    display: flex;
-    align-items: center;
-}
-
-.user-summary-avatar {
-    max-width: 33.3333%;
-    flex: 0 0 33.3333%;
-    padding: 0.75rem;
+    margin-top: 7.5rem;
     text-align: center;
 }
 
-.user-summary-avatar img {
-    width: 180px;
-    border-radius: $border-radius-round;
+.user-summary-image {
+    margin-top: -7.5rem;
 }
 
-.user-summary-data {
-    padding: 0.75rem;
+.user-summary-image img {
+    width: 12rem;
+    border-radius: $border-radius-round;
+    background-color: $color-base-900;
+    box-shadow: $box-shadow-sm;
 }
 
 .users-list {
@@ -53,11 +48,12 @@
     flex: 1;
 }
 
-.user-avatar {
+.user-image {
     display: inline-block;
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
+    box-shadow: $box-shadow-sm;
     vertical-align: middle;
 }
 

diff --git a/panel/views/partials/sidebar.php b/panel/views/partials/sidebar.php
@@ -3,7 +3,7 @@
     <div class="logo"><a href="<?= $panel->uri('/dashboard/') ?>"><img src="<?= $this->assets()->uri('images/icon.svg') ?>" alt=""> Formwork</a> <span class="show-from-md text-color-gray-medium text-size-xs"><?= $app::VERSION ?></span></div>
     <a href="<?= $panel->uri('/users/' . $panel->user()->username() . '/profile/') ?>">
         <div class="panel-user-card">
-            <div class="panel-user-avatar">
+            <div class="panel-user-image">
                 <img src="<?= $panel->user()->image()->uri() ?>" alt="<?= $panel->user()->username() ?>">
             </div>
             <div class="panel-user-details">

diff --git a/panel/views/users/index.php b/panel/views/users/index.php
@@ -19,7 +19,7 @@
         <?php foreach ($users as $user) : ?>
             <div class="users-item">
                 <div class="users-item-cell user-username truncate">
-                    <img class="user-avatar mr-4" src="<?= $user->image()->uri() ?>" alt="<? $panel->user()->username() ?>">
+                    <img class="user-image mr-4" src="<?= $user->image()->uri() ?>" alt="<? $panel->user()->username() ?>">
                     <a href="<?= $panel->uri('/users/' . $user->username() . '/profile/') ?>"><?= $this->escape($user->username()) ?></a>
                 </div>
                 <div class="users-item-cell user-fullname truncate show-from-sm"><?= $this->escape($user->fullname()) ?></div>

diff --git a/panel/views/users/profile.php b/panel/views/users/profile.php
@@ -11,17 +11,16 @@
         <?php endif ?>
     </div>
 
-    <section class="section">
-        <div class="user-summary">
-            <div class="user-summary-avatar">
-                <img src="<?= $user->image()->uri() ?>" alt="<? $panel->user()->username() ?>">
-            </div>
-            <div class="user-summary-data">
-                <div class="h3"><?= $this->escape($user->fullname()) ?></div>
-                <?= $this->escape($user->username()) ?><br>
-                <a href="mailto:<?= $user->email() ?>"><?= $this->escape($user->email()) ?></a><br>
-                <?= $this->translate('panel.user.lastAccess') ?>: <?= is_null($user->lastAccess()) ? '&infin;' : $this->datetime($user->lastAccess()) ?>
-            </div>
+    <section class="section user-summary">
+        <div class="user-summary-image">
+            <img src="<?= $user->image()->uri() ?>" alt="<?= $panel->user()->username() ?>">
+        </div>
+        <div class="user-summary-data">
+            <div class="h3 mb-0"><?= $this->escape($user->fullname()) ?></div>
+            <div class="text-color-gray-medium mb-4"><?= $this->escape($user->username()) ?></div>
+            <div class="mb-2"><a href="mailto:<?= $user->email() ?>"><?= $this->escape($user->email()) ?></a></div>
+            <div class="text-size-sm mb-2"><?= $this->translate('panel.user.role') ?>: <?= $user->role()->title() ?></div>
+            <div class="text-size-sm"><?= $this->translate('panel.user.lastAccess') ?>: <?= is_null($user->lastAccess()) ? '&infin;' : $this->datetime($user->lastAccess()) ?></div>
         </div>
     </section>
     <?php if ($panel->user()->canChangeOptionsOf($user)) : ?>