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,13 @@
 {% 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>
-<<<<<<< HEAD
       <th style="text-align:center;width:100px;">
         <button type="button" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#createModal">新增</button>
       </th>
@@ -32,7 +31,29 @@
       </tr>
     </tbody>
 =======
->>>>>>> modified ui in editor
+      <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>
+  </thead>
+  {% for idx in range(0, length) %}
+  <tbody>
+    <tr>
+      <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="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">
+            <button class="btn__delete" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+          </form>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+>>>>>>> adjust table layout in collections
   {% endfor %}
 </table>
 <!-- Modal -->