adjust table style

backstage/static/js/blockElements.js

@@ -5,7 +5,7 @@ function getBlockElements(contentDiv) {
   const editOpen = document.createElement('button');
   editOpen.classList.add('btn__editOpen');
   const editIcon = document.createElement('i');
-  editIcon.classList.add('fas', 'fa-edit');
+  editIcon.classList.add('fas', 'fa-chevron-down');
   editOpen.append(editIcon);
   const descButton = document.createElement('button');
   descButton.classList.add('btn__titledesc');
@@ -32,13 +32,13 @@ function getBlockElements(contentDiv) {
     if(e.target.nodeName !== 'I'){ return };
     console.log(e.target.parentNode.parentNode.parentNode.children);
     if(moreFlag) {
-      e.target.classList.remove('fas', 'fa-edit');
-      e.target.classList.add('fas', 'fa-minus');
+      e.target.classList.remove('fas', 'fa-chevron-down');
+      e.target.classList.add('fas', 'fa-chevron-up');
       blockDiv.style.height = 'auto';
       moreFlag = false;
     } else {
-      e.target.classList.remove('fas', 'fa-minus');
-      e.target.classList.add('fas', 'fa-edit');
+      e.target.classList.remove('fas', 'fa-chevron-up');
+      e.target.classList.add('fas', 'fa-chevron-down');
       blockDiv.style.height = '30vh';
       moreFlag = true;
     }

backstage/static/js/sidebar.js

@@ -32,6 +32,7 @@ function SidebarCollapse () {
   $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
 }
 
+  // Scroll To Top
 window.addEventListener('scroll', autoFade);
 toTopButton.addEventListener('click', scrollTop);
 function scrollTop() {
@@ -39,6 +40,7 @@ function scrollTop() {
   document.documentElement.scrollTop = 0;
 }
 
+// To Top Button Display
 function autoFade() {
   if(document.body.scrollTop >= 300 || document.documentElement.scrollTop >= 300) {
     toTopButton.style.display = 1;
@@ -47,3 +49,28 @@ function autoFade() {
   }
 }
 
+  // Show Font Text
+const txtcut = document.querySelectorAll('.txt__cut');
+for(let i = 0; i < txtcut.length;i++) {
+  if(txtcut[i].textContent.length > 16) {
+    txtcut[i].textContent = txtcut[i].textContent.slice(0, 60).concat(['...']);
+  }
+}
+
+//  Open Table Button
+const btn__opentab = document.querySelectorAll('.btn__opentab');
+const form__action = document.querySelectorAll('.form__action');
+
+for(let i = 0; i < btn__opentab.length;i++) {
+  btn__opentab[i].addEventListener('click', function() {
+    $(this).next().toggleClass('autoHeight');
+    if($(this).children().hasClass('fa-chevron-down')) {
+      $(this).children().removeClass();
+      $(this).children().addClass('fas fa-chevron-up');
+    } else {
+      $(this).children().removeClass();
+      $(this).children().addClass('fas fa-chevron-down');
+    }
+  })
+}
+

backstage/static/styles/main.css

@@ -2,13 +2,6 @@
 
 /*-------------------------------- END ----*/
 
-/* main section */
-/* .main {
-  width: calc(100vw - 270px);
-  max-width: 1600px;
-} */
-
-
 /* editors layout*/
 .ui.segment {
   border: none;
@@ -47,7 +40,6 @@
   font-size: 1.5rem;
 }
 
-
 /* blocks in editors */
 .blockDiv {
   box-shadow: 0px 0px 8px rgb(211, 211, 211);
@@ -285,9 +277,6 @@ label[for="file"]:hover {
 }
 
 /* --- Table */ 
-tbody:nth-of-type(2n) {
-  background-color: #EEEEEE;
-}
 .table .table__head {
   text-align: center;
   vertical-align: middle;
@@ -296,6 +285,10 @@ tbody:nth-of-type(2n) {
   vertical-align: middle;
   text-align: center;
 }
+.img__table {
+  width: 4.5rem;
+  height: 3rem;
+}
 
 /* toTop */
 .toTop {
@@ -445,6 +438,17 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
   color: white;
 }
 
+.modal__img {
+  width: 100%;
+  height: 100%;
+  margin-top: 1.5rem;
+}
+.modal__img img {
+  object-fit: cover;
+  width:100%;
+  height: 100%;
+}
+
 .modal__file::-webkit-file-upload-button {
   border: none;
   padding: .2em .4em;
@@ -458,4 +462,61 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
   border-radius: .2em;
   background-color: rgb(216, 215, 215);
   transition: 1s;
-}
+}
+/* ---Badge */ 
+.badge__txt {
+  color: #1e819c;
+  background-color: #d7eaf3;
+  padding: .3rem 1rem;
+}
+.badge__img {
+  color: #1cac23;
+  background-color: #c5ecc7;
+  padding: .3rem 1rem;
+}
+
+.badge__video {
+  color: #9c9e23;
+  background-color: #e3e4a8;
+  padding: .3rem 1rem;
+}
+
+/* --- Table Block 區塊 */ 
+.table__block {
+  padding: 1.5rem;
+  box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  -webkit-box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  -moz-box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.btn__opentab {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  width: 2.5rem;
+  height: 2.5rem;
+  position: absolute;
+  right: 0px;
+  top: 1rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+}
+
+.btn__opentab i {
+  line-height: 1.5rem;
+}
+
+/* --- Form Height Toggle */ 
+.form__action {
+  height: 0vh;
+  overflow: hidden;
+}
+
+.autoHeight {
+  height: auto;
+}

backstage/templates/layout.html

@@ -99,8 +99,13 @@
         {% with messages = get_flashed_messages(with_categories=true) %}
           {% if messages %}
             {% for category, message in messages %}
-              <div class="alert alert-{{ category }}">
+              <div class="alert alert-{{ category }}" role="alert">
                 {{ message }}
+                <button type="button" class="close modal__close" data-dismiss="alert" aria-label="Close">
+                  <span class="modal__close__back">
+                    <span aria-hidden="true">&times;</span>
+                  </span>
+                </button>
               </div>
             {% endfor %}
           {% endif %}

backstage/templates/tables/editor_table.html

@@ -4,7 +4,7 @@
   <table id="example" class="table" cellspacing="0" width="60%">
     <thead>
       <tr>
-        <th class="table__head">數量</th>
+        <th class="table__head">順序</th>
         <th class="table__head">標題</th>
         <th class="table__head">順序</th>
         <th class="table__head">顯示</th>

backstage/templates/tables/manage_table.html

@@ -1,58 +1,124 @@
 {% extends "layout.html" %}
 {% block main %}
-<h1>{{ title }}</h1>
+<h1 class="h3"><i class="fas fa-pen mr-2"></i>{{ title }}</h1>
 {% for content in contents %}
-<div>
-<form action="{{ url_for(form_url, page=page, section_class=content.sectionClass) }}" method="POST" enctype="multipart/form-data">
-  <table id="example" class="table table-striped table-bordered" cellspacing="0" width="60%">
-    <thead>
-      <tr>
-        <th>數量</th>
-        <th>類型</th>
-        <th>內容</th>
-        <th style="text-align:center;width:100px;">
-            <input class="btn btn-primary" type="submit" value="提交">
-        </th>
-      </tr>
-    </thead>
-    {% for key, value in content.items() %}
-      {% if key != 'sectionClass' %}
-        {% for data in value %}
-          <tbody>
-            <tr>
-              <td>{{ loop.index }}</td>
-              {% if key == "img" %}
-                <td><img src="http://127.0.0.1:1313/{{ data['src'] }}" width="80px" height="50px"></td>
-                <td>
-                  <input id="image" name="image-{{ loop.index }}" type="file" value="{{ data['src'] }}">
-                  <input name="{{ key }}-{{ loop.index }}" type="hidden" value="{{ data }}">
-                </td>
-              {% elif key == "yt_video" %}
-                <td>影片</td>
-                <td>
-                  <input name="{{ key }}-{{ loop.index }}" class="form-control form-control-lg" value="{{ data['videoid'] }}">
-                </td>
-              {% else %}
-              <td>文字</td>
-              <td>
-                <input name="{{ key }}-{{ loop.index }}" class="form-control form-control-lg" value="{{ data }}">
-              </td>
-              {% endif %}
-              <td>
-                <div>
-                  <form action="#" method="POST">
-                    <input class="btn btn-danger" type="submit" value="刪除">
-                  </form>
-                </div>
-              </td>
-            </tr>
-          </tbody>
+  <div class="table__block">
+    <h4 class="h4 mb-0">區塊{{ loop.index }}</h4>
+    <span class="btn__opentab"><i class="fas fa-chevron-down"></i></span>
+    <form action="{{ url_for(form_url, page=page, section_class=content.sectionClass) }}" method="POST" enctype="multipart/form-data" class="form__action">
+      {% set tabidx = loop.index %}
+      <table id="example" class="table table__content mb-0">
+        <thead>
+          <tr>
+            <th class="table__head" width="80">順序</th>
+            <th class="table__head" width="120">類型</th>
+            <th class="table__head">內容</th>
+            <th style="width:150px;" class="table__head">
+            </th>
+          </tr>
+        </thead>
+        {% for key, value in content.items() %}
+          {% if key != 'sectionClass' %}
+            {% for data in value %}
+              <tbody>
+                <tr>
+                  <td class="table__data">{{ loop.index }}</td>
+                  {% if key == "img" %}
+                    <td class="table__data"><span class="badge badge-pill badge__img">圖片</span></td>
+                    <td class="table__data" style="display:flex;justify-content:center">
+                      <div class="img__table"><img src="http://127.0.0.1:1313/{{ data['src'] }}" width="100%" height="100%"></div>
+                    </td>
+                    <div class="modal fade" id="{{ tabidx }}-{{ key }}-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="{{ key }}-{{ loop.index }}Label" aria-hidden="true">
+                      <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                          <div class="modal-header border-0">
+                            <h5 class="modal-title modal__title" id="exampleModalLabel">編輯</h5>
+                            <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                              <span class="modal__close__back">
+                                <span aria-hidden="true">&times;</span>
+                              </span>
+                            </button>
+                          </div>
+                          <div class="modal-body">
+                            <input id="image" name="image-{{ loop.index }}" type="file" value="{{ data['src'] }}">
+                            <input name="{{ tabidx }}-{{ key }}-{{ loop.index }}" type="hidden" value="{{ data }}">
+                            <div class="modal__img"><img src="http://127.0.0.1:1313/{{ data['src'] }}"></div>
+                            <div class="modal-footer pb-0 border-0">
+                              <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                              <input class="btn btn__submitadd" type="submit" value="完成">
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  {% elif key == "yt_video" %}
+                    <td class="table__data"><span class="badge badge-pill badge__video">影片</span></td>
+                    <td class="table__data">
+                      {{ data['videoid'] }}
+                    </td>
+                    <div class="modal fade" id="{{ tabidx }}-{{ key }}-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="{{ key }}-{{ loop.index }}Label" aria-hidden="true">
+                      <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                          <div class="modal-header border-0">
+                            <h5 class="modal-title modal__title" id="exampleModalLabel">編輯</h5>
+                            <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                              <span class="modal__close__back">
+                                <span aria-hidden="true">&times;</span>
+                              </span>
+                            </button>
+                          </div>
+                          <div class="modal-body">
+                            <input name="{{ tabidx }}-{{ key }}-{{ loop.index }}" class="form-control form-control-lg " value="{{ data }}">
+                            <div class="modal-footer pb-0 border-0">
+                              <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                              <input class="btn btn__submitadd" type="submit" value="完成">
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  {% else %}
+                  <td class="table__data"><span class="badge badge-pill badge__txt">文字</span></td>
+                  <td class="table__data txt__cut">
+                    {{ data }}
+                  </td>
+                  <div class="modal fade" id="{{ tabidx }}-{{ key }}-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="{{ key }}-{{ loop.index }}Label" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                      <div class="modal-content">
+                        <div class="modal-header border-0">
+                          <h5 class="modal-title modal__title" id="exampleModalLabel">編輯</h5>
+                          <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                            <span class="modal__close__back">
+                              <span aria-hidden="true">&times;</span>
+                            </span>
+                          </button>
+                        </div>
+                        <div class="modal-body">
+                          <input name="{{ tabidx }}-{{ key }}-{{ loop.index }}" class="form-control form-control-lg modal__text__input" value="{{ data }}">
+                          <div class="modal-footer pb-0 border-0">
+                            <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                            <input class="btn btn__submitadd" type="submit" value="完成">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {% endif %}
+                  <td class="table__data">
+                    <div class="d-flex justify-content-center">
+                      <button type="button" class="btn__edit  m-1" data-toggle="modal" data-target="#{{ tabidx }}-{{ key }}-{{ loop.index }}"><i class="fas fa-edit"></i></button>
+                      <form action="#" method="POST">
+                        <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                      </form>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            {% endfor %}
+          {% endif %}
         {% endfor %}
-      {% endif %}
-    {% endfor %}
-  </table>
-</form>
-</div>
-
+      </table>
+    </form>
+  </div>
 {% endfor %}
 {% endblock main %}