adjust add button style,extends table in collection

backstage/static/styles/main.css

@@ -126,6 +126,42 @@
   display: inline-block;
 }
 
+.btn__add {
+  border-radius: 50%;
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.btn__add i {
+  transition: all 0.3s;
+}
+
+.btn__add:hover i {
+  transform: translateX(-1.3rem);
+}
+
+.btn__add:hover {
+  width: 4rem;
+  border-radius: 30%;
+}
+
+.btn__add::after {
+  position: absolute;
+  content: "新增";
+  opacity: 0;
+  top: 0.7rem;
+  left: 20%;
+  width: 3rem;
+}
+
+.btn__add:hover::after {
+  opacity: 1;
+  transition: all 0.3s;
+}
+
 /* img in blocks editor */
 .img__container {
   width: 100%;
@@ -239,6 +275,7 @@ tbody:nth-of-type(2n) {
 }
 .table .table__head {
   text-align: center;
+  vertical-align: middle;
 }
 .table .table__data {
   vertical-align: middle;

backstage/templates/blogs.html

@@ -3,15 +3,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>
-          <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('editor.editor', url=blogs[idx].url) }}">編輯</a>
-          <form action="{{ url_for('blogs.remove', url=blogs[idx].url) }}" method="POST">
-            <input class="btn btn-danger" type="submit" value="Delete">
+        <div class="d-flex justify-content-center">
+          <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('blogs.remove', url=blogs[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>

backstage/templates/collections.html

@@ -1,36 +1,24 @@
-{% extends "layout.html" %}
-{% block main %}
-<h1 class="h3"><i class="fas fa-ruler-combined mr-2"></i>{{ title }}</h1>
-<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" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#createModal">新增</button>
-      </th>
-    </tr>
-  </thead>
-  {% for idx in range(0, length) %}
+{% extends "tables/editor_table.html" %}
+{% block table_body %}
+{% 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>
-            <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('editor.editor', url=collections[idx].url) }}">編輯</a>
-            <form action="{{ url_for('collections.remove', url=collections[idx].url) }}" method="POST">
-              <input class="btn btn-danger" type="submit" value="Delete">
+          <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('collections.remove', url=collections[idx].url) }}" method="POST" 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>
-  {% endfor %}
+{% endfor %}
+{% endblock table_body %}
 </table>
 <!-- Modal -->
 <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
@@ -56,4 +44,3 @@
     </div>
   </div>
 </div>
-{% endblock main %}

backstage/templates/layout.html

@@ -31,108 +31,92 @@
 </head>
 <body>
   <div class="container-fluid">
-  <div class="row" id="body-row">
-    <!-- Sidebar -->
-    <nav id="sidebar-container" class="sidebar-expanded col-2 sidebar"><!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
-      <div class="sidebar-header">
-        <h3 class="sidebar__company">小寶優居</h3>
-      </div>
-      <!-- Bootstrap List Group -->
-      <ul class="list-group pt-2">
-        <!-- /END Separator -->
-        <!-- Menu with submenu -->
-        <a href="{{ url_for('home.home') }}" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-<<<<<<< HEAD   
-        </a>
-        <a href="{{ url_for('room_planner.main') }}" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <i class="fas fa-user-alt mr-3"></i>
-            <span class="menu-collapsed">家具規劃師</span>
-            <span class="submenu-icon ml-auto"></span>   
-          </div>
-        </a>
-=======
-            <i class="fas fa-home mr-3"></i> 
-            <span class="menu-collapsed">首頁</span>
-            <span class="submenu-icon ml-auto"></span>
-          </div>    
->>>>>>> Adjust sidebar toggles in layout and links in sidebar
-        <a href="{{ url_for('collections.collection_list') }}" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <i class="fas fa-ruler-combined mr-3"></i>
-            <span class="menu-collapsed">規劃作品</span>    
-          </div>
-        </a>
-        <a href="#" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <i class="fas fa-location-arrow mr-3"></i>
-            <span class="menu-collapsed">門市據點</span>    
-          </div>
-        </a>
-        <a href="#" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <i class="fas fa-question-circle mr-3"></i>
-            <span class="menu-collapsed">常見問題</span>    
-          </div>
-        </a>
-        <a href="#" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <i class="fas fa-tasks mr-3"></i>
-            <span class="menu-collapsed">關於小寶</span>    
-          </div>
-        </a>
-        <a href="{{ url_for('blogs.blog_list') }}" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <i class="far fa-newspaper mr-3"></i>
-            <span class="menu-collapsed">設計專欄</span>    
-          </div>
-        </a>
-        <!-- Separator with title -->
-        <a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <span id="collapse-icon" class="fa fa-2x mr-3"></span>
-            <span id="collapse-text" class="menu-collapsed">Collapse</span>
-          </div>
-        </a> 
-      </ul><!-- List Group END-->
-<<<<<<< HEAD
-    </div><!-- sidebar-container END -->
-    <!-- MAIN -->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    <div class="col">
-        <div class="col-md-8">
-          {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-              {% for category, message in messages %}
-                <div class="alert alert-{{ category }}">
-                  {{ message }}
-                </div>
-              {% endfor %}
-            {% endif %}
-          {% endwith %}
-          {% block content %}{% endblock %}
+    <div class="row" id="body-row">
+      <!-- Sidebar -->
+      <nav id="sidebar-container" class="sidebar-expanded col-2 sidebar"><!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
+        <div class="sidebar-header">
+          <h3 class="sidebar__company">小寶優居</h3>
         </div>
-=======
->>>>>>> modified ui in editor
-=======
-    
->>>>>>> Modified button texts, button hover effect, input placeholder, main section width
-=======
-    </nav><!-- sidebar-container END -->
-
-    <!-- MAIN -->
-    <div class="main my-4 ml-auto col-10">
->>>>>>> Adjust sidebar toggles in layout and links in sidebar
-      {% block main %}{% endblock %}
-    <!-- Main Col END -->
-    <div class='toTop'>
-      <i class='fas fa-arrow-up'></i>
-    </div>
-  </div><!-- body-row END -->
+        <!-- Bootstrap List Group -->
+        <ul class="list-group pt-2">
+          <!-- /END Separator -->
+          <!-- Menu with submenu -->
+          <a href="{{ url_for('home.home') }}" class="bg-dark list-group-item list-group-item-action flex-column align-items-start">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-home mr-3"></i>
+              <span class="menu-collapsed">首頁</span> 
+              <span class="submenu-icon ml-auto"></span>
+            </div>
+          </a>
+          <a href="{{ url_for('room_planner.main') }}" class="bg-dark list-group-item list-group-item-action flex-column align-items-start"">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-user-alt mr-3"></i>
+              <span class="menu-collapsed">家具規劃師</span>
+              <span class="submenu-icon ml-auto"></span>   
+            </div>
+          </a>
+          <a href="{{ url_for('collections.collection_list') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-ruler-combined mr-3"></i>
+              <span class="menu-collapsed">規劃作品</span>    
+            </div>
+          </a>
+          <a href="#" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-location-arrow mr-3"></i>
+              <span class="menu-collapsed">門市據點</span>    
+            </div>
+          </a>
+          <a href="#" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-question-circle mr-3"></i>
+              <span class="menu-collapsed">常見問題</span>    
+            </div>
+          </a>
+          <a href="#" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-tasks mr-3"></i>
+              <span class="menu-collapsed">關於小寶</span>    
+            </div>
+          </a>
+          <a href="{{ url_for('blogs.blog_list') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="far fa-newspaper mr-3"></i>
+              <span class="menu-collapsed">設計專欄</span>    
+            </div>
+          </a>
+          <!-- Separator with title -->
+          <a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <span id="collapse-icon" class="fa fa-2x mr-3"></span>
+              <span id="collapse-text" class="menu-collapsed">Collapse</span>
+            </div>
+          </a> 
+        </ul><!-- List Group END-->
+      </nav><!-- sidebar-container END -->
+      <!-- Modal -->
+      <div>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }}">
+                {{ message }}
+              </div>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+        {% block content %}{% endblock %}
+      </div>
+      <!-- Main -->
+      <div class="main my-4 ml-auto col-10">
+          {% block main %}{% endblock %}
+      </div>
+      <!-- toTop Button -->
+      <div class='toTop'>
+        <i class='fas fa-arrow-up'></i>
+      </div>
+    </div><!-- body-row END -->
   </div><!-- container -->
-  </div>
   <!-- partial -->
   <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>

backstage/templates/tables/editor_table.html

@@ -1,15 +1,15 @@
 {% extends "layout.html" %}
 {% block main %}
-  <h1>{{ title }}</h1>
-  <table id="example" class="table table-striped table-bordered" cellspacing="0" width="60%">
+  <h1 class="h3"><i class="far fa-newspaper mr-3"></i>{{ title }}</h1>
+  <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" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#createModal">新增</button>
+        <th class="table__head">數量</th>
+        <th class="table__head">標題</th>
+        <th class="table__head">順序</th>
+        <th class="table__head">顯示</th>
+        <th style="width:150px;" class="table__head">
+          <button type="button" class="btn__add m-1" data-toggle="modal" data-target="#createModal"><i class="fas fa-plus"></i></button>
         </th>
       </tr>
     </thead>