Users table styling.

src/Volo.Abp.Identity.Web/Areas/Identity/Views/Users/Index.cshtml

@@ -1,22 +1,34 @@
 @model IReadOnlyList<Volo.Abp.Identity.IdentityUserDto>
 
-@section styles
-{
-    <link rel="stylesheet" type="text/css" href="~/libs/_identity/datatables/datatables.min.css" />
+@section styles {
+    <!-- TODO: Use minified on production, normal in development -->
+    <link rel="stylesheet" type="text/css" href="~/modules/identity/libs/datatables/datatables.min.css" />
+    <link rel="stylesheet" type="text/css" href="~/modules/identity/views/users/index.css" />
 }
 
-@section scripts
-{
-    <script type="text/javascript" src="~/libs/_identity/datatables/datatables.min.js"></script>
+@section scripts {
+    <script type="text/javascript" src="~/modules/identity/libs/datatables/datatables.min.js"></script>
+    <script type="text/javascript" src="~/modules/identity/views/users/index.js"></script>
 }
 
 <h2>Users</h2>
 
-<ul class="ticket-list">
+<table id="IdentityUsersTable">
+    <thead>
+        <tr>
+            <th>Username</th>
+            <th>Email Address</th>
+            <th>Phone Number</th>
+        </tr>
+    </thead>
+    <tbody>
         @foreach (var user in Model)
         {
-        <li data-entity-id="@user.Id">
-            @user.UserName / @user.Email
-        </li>
+            <tr>
+                <td>@user.UserName</td>
+                <td>@user.Email</td>
+                <td>@(user.PhoneNumber ?? "-")</td>
+            </tr>
         }
-</ul>
+    </tbody>
+</table>

src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj

@@ -11,13 +11,7 @@
 
   <ItemGroup>
     <EmbeddedResource Include="Areas\**\*.*" Exclude="bin\**;obj\**;**\*.xproj;packages\**;@(EmbeddedResource)" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <EmbeddedResource Include="wwwroot\libs\_identity\datatables\datatables.css" />
-    <EmbeddedResource Include="wwwroot\libs\_identity\datatables\datatables.js" />
-    <EmbeddedResource Include="wwwroot\libs\_identity\datatables\datatables.min.css" />
-    <EmbeddedResource Include="wwwroot\libs\_identity\datatables\datatables.min.js" />
+    <EmbeddedResource Include="wwwroot\**\*.*" Exclude="bin\**;obj\**;**\*.xproj;packages\**;@(EmbeddedResource)" />
   </ItemGroup>
 
   <ItemGroup>

src/Volo.Abp.Identity.Web/compilerconfig.json

@@ -0,0 +1,6 @@
+[
+  {
+    "outputFile": "wwwroot/modules/identity/views/users/index.css",
+    "inputFile": "wwwroot/modules/identity/views/users/index.less"
+  }
+]

src/Volo.Abp.Identity.Web/compilerconfig.json.defaults

@@ -0,0 +1,49 @@
+{
+  "compilers": {
+    "less": {
+      "autoPrefix": "",
+      "cssComb": "none",
+      "ieCompat": true,
+      "strictMath": false,
+      "strictUnits": false,
+      "relativeUrls": true,
+      "rootPath": "",
+      "sourceMapRoot": "",
+      "sourceMapBasePath": "",
+      "sourceMap": false
+    },
+    "sass": {
+      "includePath": "",
+      "indentType": "space",
+      "indentWidth": 2,
+      "outputStyle": "nested",
+      "Precision": 5,
+      "relativeUrls": true,
+      "sourceMapRoot": "",
+      "sourceMap": false
+    },
+    "stylus": {
+      "sourceMap": false
+    },
+    "babel": {
+      "sourceMap": false
+    },
+    "coffeescript": {
+      "bare": false,
+      "runtimeMode": "node",
+      "sourceMap": false
+    }
+  },
+  "minifiers": {
+    "css": {
+      "enabled": true,
+      "termSemicolons": true,
+      "gzip": false
+    },
+    "javascript": {
+      "enabled": true,
+      "termSemicolons": true,
+      "gzip": false
+    }
+  }
+}

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.css

@@ -0,0 +1,3 @@
+#IdentityUsersTable {
+  width: 100%;
+}

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js

@@ -0,0 +1,3 @@
+$(function() {
+    $('#IdentityUsersTable').DataTable();
+});

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.less

@@ -0,0 +1,3 @@
+#IdentityUsersTable {
+    width: 100%;
+}

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.min.css

@@ -0,0 +1 @@
+#IdentityUsersTable{width:100%;}