FEATURE: make user list vertical

resources/assets/admin/css/vendor.css

@@ -14168,7 +14168,7 @@ img {
 }
 
 .users-list img {
-	border-radius: 500px;
+	border-radius: 50%;
 	padding: 3px;
 }
 
@@ -14364,3 +14364,10 @@ img {
 	display: inline;
 	padding: .5em;
 }
+
+.truncate {
+	width: 90%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

resources/views/admin/userManagement/overview.blade.php

@@ -12,15 +12,15 @@
 @section('content')
     <div class="row users-list">
         @forelse($users as $user)
-            <div class="col-lg-4">
+            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 ">
                 <div class="card card-default ">
-                    <div class="row card-block">
-                        <div class="col-lg-4 text-center">
+                    <div class="card-block truncate">
+                        <div class="cl-xs-12 text-center">
                             <a href="{{route('users.edit', ['id' => $user->id])}}">
-                                <img src="{{$user->gravatar(350)}}" alt="" />
+                                <img src="{{$user->gravatar(100)}}" alt="" />
                             </a>
                         </div>
-                        <div class="col-lg-8">
+                        <div class="col-xs-12">
                             <ul>
                                 <li><a href="{{route('users.edit', ['id' => $user->id])}}">{{$user->name}}</a></li>
                                 <li>{{$user->email}}</li>
@@ -31,7 +31,6 @@
                     <div class="card-footer text-right">
                         <a href="{{route('users.edit', ['id' => $user->id])}}" class="btn btn-primary"><i
                                     class="fa fa-pencil edit"></i></a>
-
                         <a href="#" class="btn btn-danger"><i class="fa fa-trash edit"></i></a>
                     </div>
                 </div>