adjust table layout in collections

backstage/static/styles/main.css

@@ -82,9 +82,6 @@
   box-shadow: 0 0 6px rgb(179, 179, 179);
 }
 
-[class='btn__^'] {
-  cursor: pointer;
-}
 .btn__arTitle {
   border-radius: 10px;
 }
@@ -174,6 +171,46 @@ label[for="file"] {
 .btn:active, .btn:focus {
   transform: translateY(2px);
 }
+.btn__edit {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  padding: 0.5rem;
+  padding-left: 0.7rem;
+  outline: none;
+  border: none;
+  transition: all 0.3s;
+  cursor: pointer;
+  color: black;
+  background-color: white;
+}
+.btn__edit i {
+  display: inline-block;
+  line-height: 24px;
+}
+.btn__edit:hover {
+  background-color: rgb(211, 211, 211);
+  color: black;
+}
+.btn__delete {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  color: black;
+  margin-right: 0;
+  background-color: #E74C3C;
+}
+.btn__delete:hover {
+  background-color: #D0ECE7;
+}
+
+.btn__delete i {
+  color: white;
+}
 .btn__edit:active, .btn__edit:focus {
   background-color: #b9bcbe !important;
 }
@@ -187,6 +224,10 @@ label[for="file"] {
   justify-content: center;
 }
 
+tbody:nth-of-type(2n) {
+  background-color: #EEEEEE;
+}
+
 /* toTop */
 .toTop {
   position: fixed ;
@@ -329,3 +370,8 @@ textarea {
   resize: None;
   width: 100%;
 }
+
+/* --- Table */   
+.table .table__data {
+  vertical-align: middle;
+}

backstage/templates/collections.html

@@ -1,14 +1,14 @@
 {% extends "layout.html" %}
 {% block main %}
 <h1 class="h3"><i class="fas fa-ruler-combined mr-2"></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:80px;">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
+      <th style="text-align:center;width:140px;">新增 <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>{{ collections[idx].title }}</td>
-      <td>1</td>
-      <td>on</td>
+      <td class="table__data">{{ idx }}</td>
+      <td class="table__data">{{ collections[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=collections[idx].url) }}">編輯</a>
+          <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=collections[idx].url) }}"><i class="fas fa-edit"></i></a>
           <form action="{{ url_for('editor.remove', url=collections[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>