style: improve tables style

surmon-china · Oct 18, 2020 · fdd147f · fdd147f
1 parent 58292a3
commit fdd147f
Show file tree

Hide file tree

Showing 17 changed files with 379 additions and 298 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "dev": "ng serve --proxy-config proxy.conf.json",
+    "dev": "ng serve --proxy-config proxy.dev.conf.json",
+    "dev:online": "ng serve --proxy-config proxy.prod.conf.json",
     "build": "ng build --prod --configuration production",
     "test": "ng test",
     "lint": "ng lint",

diff --git a/proxy.conf.json → proxy.dev.conf.json b/proxy.conf.json → proxy.dev.conf.json
diff --git a/proxy.prod.conf.json b/proxy.prod.conf.json
@@ -0,0 +1,15 @@
+{
+  "/api/*": {
+    "target": "https://api.surmon.me",
+    "secure": false,
+    "logLevel": "debug",
+    "changeOrigin": true,
+    "headers": {
+      "referer": "https://admin.surmon.me/",
+      "origin": "https://admin.surmon.me"
+    },
+    "pathRewrite": {
+      "^/api": ""
+    }
+  }
+}
diff --git a/src/app/pages/announcement/announcement.component.html b/src/app/pages/announcement/announcement.component.html
@@ -25,8 +25,7 @@ <h5>公告内容</h5>
             title="文章内容"
             [config]="{ lineWrapping: true }"
             [formControl]="content"
-          >
-          </sa-markdown-editor>
+          ></sa-markdown-editor>
         </div>
         <hr>
         <div>
@@ -148,10 +147,10 @@ <h5>公告内容</h5>
       <div class="table-responsive">
         <div class="announcement-list">
           <sa-loading-spider [show]="isGetingList"></sa-loading-spider>
-          <table class="table table-striped table-no-borders black-muted-bg table-enrich">
-            <thead class="thead-inverse">
+          <table class="table table-striped table-no-borders black-muted-bg">
+            <thead>
               <tr>
-                <th class="batch-checkbox select-box">
+                <th>
                   <sa-checkbox
                     [(ngModel)]="announcementsSelectAll"
                     (ngModelChange)="handleBatchSelectChange($event)"
@@ -160,9 +159,9 @@ <h5>公告内容</h5>
                   ></sa-checkbox>
                 </th>
                 <th>内容</th>
-                <th width="186px" class="text-center">日期</th>
-                <th width="100px">状态</th>
-                <th width="170px" class="text-center">操作</th>
+                <th>发布日期</th>
+                <th class="text-center">状态</th>
+                <th class="text-center">操作</th>
               </tr>
             </thead>
             <tbody>
@@ -175,7 +174,7 @@ <h5>公告内容</h5>
               </tr>
               <ng-template #dataList>
                 <tr *ngFor="let announcement of announcements.data">
-                  <td class="batch-checkbox select-box">
+                  <td class="no-wrap">
                     <sa-checkbox
                       [(ngModel)]="announcement.selected"
                       (ngModelChange)="handleItemSelectChange()"
@@ -190,8 +189,8 @@ <h5>公告内容</h5>
                       [title]="announcement.content"
                     ></div>
                   </td>
-                  <td>{{ announcement.create_at | dataToLocale }}</td>
-                  <td>
+                  <td class="no-wrap">{{ announcement.create_at | dataToLocale }}</td>
+                  <td class="no-wrap">
                     <ion-icon
                       class="icon text-success"
                       name="checkmark-done"
@@ -205,7 +204,7 @@ <h5>公告内容</h5>
                     <span>&nbsp;&nbsp;</span>
                     <span>{{ announcement.state === PublishState.Published ? '已发布' : '草稿' }}</span>
                   </td>
-                  <td>
+                  <td class="no-wrap">
                     <div class="text-center">
                       <div class="btn-group" role="group">
                         <button

diff --git a/src/app/pages/announcement/announcement.component.scss b/src/app/pages/announcement/announcement.component.scss
@@ -46,18 +46,12 @@
     margin: 1rem 0;
   }
 
-  .select-box {
-    text-align: left;
-  }
-
   tbody {
     tr {
       td {
-        line-height: 5em;
-
         .content {
           word-break: break-all;
-          line-height: 2.6;
+          line-height: 2;
 
           p {
             margin: 0;

diff --git a/src/app/pages/article/components/category/components/list/list.component.html b/src/app/pages/article/components/category/components/list/list.component.html
@@ -34,10 +34,10 @@
 <div class="table-responsive">
   <div class="category-list">
     <sa-loading-spider [show]="isFetching"></sa-loading-spider>
-    <table class="table tablehover table-striped table-no-borders black-muted-bg table-enrich">
-      <thead class="thead-inverse">
+    <table class="table table-striped table-no-borders black-muted-bg">
+      <thead>
         <tr>
-          <th class="batch-checkbox">
+          <th>
             <sa-checkbox
               ngDefaultControl
               [(ngModel)]="categoriesSelectAll"
@@ -49,21 +49,24 @@
               </span>
             </sa-checkbox>
           </th>
-          <th width="20%">名称</th>
-          <th width="30%">描述</th>
-          <th>文章</th>
-          <th width="30%" class="text-center">操作</th>
+          <th>名称</th>
+          <th>别名</th>
+          <th>描述</th>
+          <th class="text-center">文章</th>
+          <th class="text-center" width="260px">操作</th>
         </tr>
       </thead>
       <tbody>
         <tr *ngIf="!categories.data.length;else dataList">
           <td colspan="7">
-            <p class="text-muted text-center category-err-msg">{{ isFetching ? '数据请求中...' : '暂无数据' }}<p>
+            <p class="text-muted text-center category-err-msg">
+              {{ isFetching ? '数据请求中...' : '暂无数据' }}
+            <p>
           </td>
         </tr>
         <ng-template #dataList>
           <tr *ngFor="let category of categories.data">
-            <td class="batch-checkbox">
+            <td class="no-wrap">
               <sa-checkbox
                 ngDefaultControl
                 [(ngModel)]="category.selected"
@@ -75,7 +78,7 @@
                 </span>
               </sa-checkbox>
             </td>
-            <td>
+            <td class="no-wrap">
               <strong *ngIf="category.unrepaired" class="text-warning">
                 <ion-icon class="icon" name="alert"></ion-icon>
                 <span>&nbsp;</span>
@@ -84,13 +87,19 @@
               <strong>{{ ''.padEnd(category.level, '─') }}</strong>
               <span>&nbsp;</span>
               <strong>{{ category.name }}</strong>
-              <span>（{{ category.slug }}）</span>
-            </td>
-            <td class="category-description" title="{{ category.description }}">
-              <span [class.text-muted]="!category.description">{{ category.description || '暂无描述' }}</span>
             </td>
-            <td>{{ category.count || 0 }}</td>
+            <td class="no-wrap">{{ category.slug }}</td>
             <td>
+              <div class="category-[TODO-BAK]-description" [title]="category.description">
+                <span [class.text-muted]="!category.description">
+                  {{ category.description || '暂无描述' }}
+                </span>
+              </div>
+            </td>
+            <td class="no-wrap">
+              <div class="text-center">{{ category.count || 0 }}</div>
+            </td>
+            <td class="no-wrap">
               <div class="text-center">
                 <div class="btn-group">
                   <button

diff --git a/src/app/pages/article/components/category/components/list/list.component.scss b/src/app/pages/article/components/category/components/list/list.component.scss
@@ -1,20 +1,14 @@
 .category-list {
   position: relative;
 
-  .batch-checkbox {
-    text-align: left;
-  }
-
   .category-err-msg {
     margin: 1rem 0;
   }
 
   tbody {
     tr {
       td {
-        line-height: 5em;
-
-        &.category-description {
+        .category-description {
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;