SaaS frontend update

resources/js/views/Admin/Users.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="single-page">
-        <div id="page-content" class="medium-width" v-if="! isLoading">
+        <div id="page-content" v-if="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
@@ -21,14 +21,12 @@
                     <template scope="{ row }">
                         <tr>
                             <td style="width: 300px">
-                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}" tag="div" class="user-thumbnail">
-                                    <div class="avatar">
-                                        <img :src="row.data.attributes.avatar" :alt="row.data.attributes.name">
-                                    </div>
-                                    <div class="info">
-                                        <b class="name">{{ row.data.attributes.name }}</b>
-                                        <span class="email">{{ row.data.attributes.email }}</span>
-                                    </div>
+                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
+                                    <DatatableCellImage
+                                            :image="row.data.attributes.avatar"
+                                            :title="row.data.attributes.name"
+                                            :description="row.data.attributes.email"
+                                    />
                                 </router-link>
                             </td>
                             <td>
@@ -73,6 +71,7 @@
 </template>
 
 <script>
+    import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import MobileActionButton from '@/components/FilesView/MobileActionButton'
     import MobileHeader from '@/components/Mobile/MobileHeader'
@@ -87,6 +86,7 @@
     export default {
         name: 'Profile',
         components: {
+            DatatableCellImage,
             MobileActionButton,
             DatatableWrapper,
             SectionTitle,
@@ -172,33 +172,6 @@
         z-index: 9;
     }
 
-    .action-icons {
-        white-space: nowrap;
-
-        a {
-            display: inline-block;
-            margin-left: 10px;
-
-            &:first-child {
-                margin-left: 0;
-            }
-        }
-
-        .icon {
-            cursor: pointer;
-
-            circle, path, line, polyline {
-                stroke: $text;
-            }
-
-            &.icon-trash {
-                circle, path, line, polyline {
-                    stroke: $red;
-                }
-            }
-        }
-    }
-
     .table {
 
         .cell-item {
@@ -207,45 +180,6 @@
         }
     }
 
-    .user-thumbnail {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        .avatar {
-            margin-right: 20px;
-            line-height: 0;
-
-            img {
-                line-height: 0;
-                width: 48px;
-                height: 48px;
-                border-radius: 8px;
-            }
-        }
-
-        .info {
-
-            .name, .email {
-                max-width: 150px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: block;
-            }
-
-            .name {
-                @include font-size(15);
-                line-height: 1;
-            }
-
-            .email {
-                color: $text-muted;
-                @include font-size(12);
-            }
-        }
-    }
-
     @media only screen and (max-width: 690px) {
         .table-tools {
             padding: 0 0 5px;
@@ -268,16 +202,6 @@
                 }
             }
         }
-
-        .user-thumbnail {
-
-            .info {
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
     }
 
 </style>