adjust table layout in blogs

backstage/static/styles/main.css

@@ -372,6 +372,10 @@ textarea {
 }
 
 /* --- Table */   
+.table .table__head {
+  text-align: center;
+}
 .table .table__data {
   vertical-align: middle;
+  text-align: center;
 }

backstage/templates/blogs.html

@@ -1,14 +1,14 @@
 {% extends "layout.html" %}
 {% block main %}
 <h1 class="h3"><i class="far fa-newspaper mr-3"></i>{{ title }}</h1>
-<table id="example" class="table table-striped table-bordered" cellspacing="0" width="60%">
+<table id="example" class="table" cellspacing="0" width="60%">
   <thead>
     <tr>
-      <th>數量</th>
-      <th>標題</th>
-      <th>順序</th>
-      <th>顯示</th>
-      <th style="text-align:center;width:100px;">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
+      <th class="table__head">數量</th>
+      <th class="table__head">標題</th>
+      <th class="table__head">順序</th>
+      <th class="table__head">顯示</th>
+      <th style="width:140px;" class="table__head">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
           <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
         </button></th>
     </tr>
@@ -16,15 +16,15 @@
   {% for idx in range(0, length) %}
     <tbody>
       <tr>
-        <td>{{ idx }}</td>
-        <td>{{ blogs[idx].title }}</td>
-        <td>1</td>
-        <td>on</td>
+        <td class="table__data">{{ idx }}</td>
+        <td class="table__data">{{ blogs[idx].title }}</td>
+        <td class="table__data">1</td>
+        <td class="table__data">on</td>
         <td>
           <div class="d-flex justify-content-center">
-            <a class="btn btn-outline-secondary m-1 btn__edit" href="{{ url_for('editor.editor', url=blogs[idx].url) }}">編輯</a>
+            <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=blogs[idx].url) }}"><i class="fas fa-edit"></i></a>
             <form action="{{ url_for('editor.remove', url=blogs[idx].url) }}" method="POST" class="m-1 inline_block">
-              <input class="btn btn-danger btn__delete" type="submit" value="刪除">
+              <button class="btn__delete" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
             </form>
           </div>
         </td>

backstage/templates/collections.html

@@ -4,11 +4,11 @@
 <table id="example" class="table" cellspacing="0" width="60%">
   <thead>
     <tr>
-      <th>數量</th>
-      <th>標題</th>
-      <th>順序</th>
-      <th>顯示</th>
-      <th style="text-align:center;width:140px;">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
+      <th class="table__head">數量</th>
+      <th class="table__head">標題</th>
+      <th class="table__head">順序</th>
+      <th class="table__head">顯示</th>
+      <th style="width:140px;" class="table__data">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
           <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
         </button></th>
     </tr>