update

backstage/static/js/sidebar.js

@@ -1,40 +1,41 @@
-$('#body-row .collapse').collapse('hide'); 
+$("#body-row .collapse").collapse("hide");
 
 // Collapse/Expand icon
-$('#collapse-icon').addClass('fa-angle-double-left'); 
+$("#collapse-icon").addClass("fa-angle-double-left");
 
 // Collapse click
-$('[data-toggle=sidebar-colapse]').click(function() {
+$("[data-toggle=sidebar-colapse]").click(function () {
   SidebarCollapse();
 });
 
-const toTopButton = document.querySelector('.toTop');
+const toTopButton = document.querySelector(".toTop");
 
-function SidebarCollapse () {
+function SidebarCollapse() {
   const collapseFlag = true;
-  $('.list-group i').toggleClass('menu-icon');
-  $('.menu-collapsed').toggleClass('d-none');
-  $('.sidebar-submenu').toggleClass('d-none');
-  $('.submenu-icon').toggleClass('d-none');
-  $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed col-2 col-1');
-  $('.main').toggleClass('col-10 col-11');
-  
-  
+  $(".list-group i").toggleClass("menu-icon");
+  $(".menu-collapsed").toggleClass("d-none");
+  $(".sidebar-submenu").toggleClass("d-none");
+  $(".submenu-icon").toggleClass("d-none");
+  $("#sidebar-container").toggleClass(
+    "sidebar-expanded sidebar-collapsed col-2 col-1"
+  );
+  $(".main").toggleClass("col-10 col-11");
+
   // Treating d-flex/d-none on separators with title
-  var SeparatorTitle = $('.sidebar-separator-title');
-  if ( SeparatorTitle.hasClass('d-flex') ) {
-      SeparatorTitle.removeClass('d-flex');
+  var SeparatorTitle = $(".sidebar-separator-title");
+  if (SeparatorTitle.hasClass("d-flex")) {
+    SeparatorTitle.removeClass("d-flex");
   } else {
-      SeparatorTitle.addClass('d-flex');
+    SeparatorTitle.addClass("d-flex");
   }
-  
+
   // Collapse/Expand icon
-  $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
+  $("#collapse-icon").toggleClass("fa-angle-double-left fa-angle-double-right");
 }
 
-  // Scroll To Top
-window.addEventListener('scroll', autoFade);
-toTopButton.addEventListener('click', scrollTop);
+// Scroll To Top
+window.addEventListener("scroll", autoFade);
+toTopButton.addEventListener("click", scrollTop);
 function scrollTop() {
   document.body.scrollTop = 0;
   document.documentElement.scrollTop = 0;
@@ -42,35 +43,52 @@ function scrollTop() {
 
 // To Top Button Display
 function autoFade() {
-  if(document.body.scrollTop >= 300 || document.documentElement.scrollTop >= 300) {
+  if (
+    document.body.scrollTop >= 300 ||
+    document.documentElement.scrollTop >= 300
+  ) {
     toTopButton.style.display = 1;
   } else {
     toTopButton.style.display = 0;
   }
 }
 
-  // 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(['...']);
+// 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');
+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')) {
+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');
+      $(this).children().addClass("fas fa-chevron-up");
     } else {
       $(this).children().removeClass();
-      $(this).children().addClass('fas fa-chevron-down');
+      $(this).children().addClass("fas fa-chevron-down");
     }
-  })
+  });
 }
 
+$("#updatePassword").on("input", (e) => {
+  let encode = window.btoa(`${e.target.value}`);
+  if (encode === "YWRtaW4=") {
+    $("#updateBtn").removeClass("disabled");
+    $("#updateBtn a").removeClass("disabled-link");
+  } else {
+    $("#updateBtn").addClass("disabled");
+    $("#updateBtn a").addClass("disabled-link");
+  }
+});
+
+$("#updateBtn").on("click", () => {
+  alert("更新成功");
+});

backstage/static/styles/main.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url("https://fonts.googleapis.com/css?family=Montserrat");
 
 /*-------------------------------- END ----*/
 
@@ -11,17 +11,17 @@
 }
 
 .ui[class*="very relaxed"].grid {
-  margin-left:0.5rem;
-  margin-right:0.5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 .ui[class*="two column"].grid .column__edit {
   box-shadow: 0px 0px 8px rgb(182, 181, 181);
   -webkit-box-shadow: 0px 0px 8px rgb(182, 181, 181);
   -moz-box-shadow: 0px 0px 8px rgb(182, 181, 181);
   border-radius: 5px;
-  width: 49%!important;
+  width: 49% !important;
   margin-right: 2%;
-  padding: 1rem!important;
+  padding: 1rem !important;
 }
 
 .ui[class*="two column"].grid .column__preview {
@@ -29,12 +29,11 @@
   box-shadow: 0px 0px 8px rgb(182, 181, 181);
   -webkit-box-shadow: 0px 0px 8px rgb(182, 181, 181);
   -moz-box-shadow: 0px 0px 8px rgb(182, 181, 181);
-  width: 49%!important;
+  width: 49% !important;
   border-radius: 5px;
-  padding: 1rem!important;
+  padding: 1rem !important;
 }
 
-
 /* editors layout title*/
 .column__h3 {
   font-size: 1.5rem;
@@ -55,13 +54,28 @@
   position: absolute;
   width: 100%;
   height: 25px;
-  content: '';
+  content: "";
   bottom: 0px;
   left: 0;
   z-index: 3;
-  background: -moz-linear-gradient(top, rgba(255,255,255,0.397) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
-  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.397) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
-  background: linear-gradient(to bottom,  rgba(255, 255, 255, 0.397) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 255, 255, 0.397) 0%,
+    rgba(255, 255, 255, 1) 90%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 255, 255, 0.397) 0%,
+    rgba(255, 255, 255, 1) 90%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.397) 0%,
+    rgba(255, 255, 255, 1) 90%,
+    rgba(255, 255, 255, 1) 100%
+  );
 }
 
 /* blocks title in editors */
@@ -103,7 +117,7 @@
   height: 2.5rem;
   position: absolute;
   right: 0px;
-  top: .5rem;
+  top: 0.5rem;
   border-radius: 50%;
   box-shadow: 0 0 6px rgb(179, 179, 179);
   -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
@@ -177,7 +191,7 @@
 }
 .img__container img {
   object-fit: cover;
-  width:100%;
+  width: 100%;
   height: 100%;
 }
 
@@ -202,7 +216,8 @@
   outline: none;
   transition: all 0.3s;
 }
-.input:focus, .textarea:focus {
+.input:focus,
+.textarea:focus {
   border: 1px solid grey;
 }
 
@@ -228,7 +243,6 @@ label[for="file"]:hover {
   background-color: rgb(211, 211, 211);
 }
 
-
 /* btn in collections, blogs */
 .btn__edit {
   display: inline-block;
@@ -261,22 +275,24 @@ label[for="file"]:hover {
   -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
   color: black;
   margin-right: 0;
-  background-color: #E74C3C;
+  background-color: #e74c3c;
 }
 .btn__delete:hover {
-  background-color: #D0ECE7;
+  background-color: #d0ece7;
 }
 .btn__delete i {
   color: white;
 }
-.btn__edit:active, .btn__edit:focus {
+.btn__edit:active,
+.btn__edit:focus {
   background-color: #b9bcbe;
 }
-.btn__delete:active, .btn__delete:focus {
+.btn__delete:active,
+.btn__delete:focus {
   background-color: #fc919c;
 }
 
-/* --- Table */ 
+/* --- Table */
 .table .table__head {
   text-align: center;
   vertical-align: middle;
@@ -294,7 +310,7 @@ label[for="file"]:hover {
 .toTop {
   position: fixed;
   cursor: pointer;
-	right: 1%;
+  right: 1%;
   bottom: 2%;
   width: 40px;
   height: 40px;
@@ -334,7 +350,7 @@ label[for="file"]:hover {
   margin-left: 1.2rem;
 }
 
-/* -------sidebar */  
+/* -------sidebar */
 #sidebar-container {
   min-height: 100vh;
   background-color: rgb(216, 215, 215);
@@ -365,7 +381,7 @@ label[for="file"]:hover {
 
 /*sidebar header */
 #sidebar-container .sidebar-header {
-  background-image: url('../imgs/sidebar_\ backbround.jpeg');
+  background-image: url("../imgs/sidebar_\ backbround.jpeg");
   height: 65px;
   background-repeat: no-repeat;
   background-position: center center;
@@ -383,7 +399,7 @@ label[for="file"]:hover {
   letter-spacing: 2px;
 }
 
-/* ----------| Submenu item*/    
+/* ----------| Submenu item*/
 .sidebar-submenu {
   font-size: 0.9rem;
 }
@@ -395,15 +411,18 @@ label[for="file"]:hover {
   width: 80%;
 }
 
-/* ----------|bg-dark hover, active, focus, visited */   
-a.bg-dark, a.bg-dark:visited {
-  background-color: rgb(216, 215, 215)!important;
+/* ----------|bg-dark hover, active, focus, visited */
+a.bg-dark,
+a.bg-dark:visited {
+  background-color: rgb(216, 215, 215) !important;
 }
 
-a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
+a.bg-dark:hover,
+a.bg-dark:active,
+a.bg-dark:focus {
   background-color: rgb(179, 179, 179) !important;
 }
-/* --- Modal */ 
+/* --- Modal */
 
 .modal__label {
   font-size: 1.1rem;
@@ -445,43 +464,43 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
 }
 .modal__img img {
   object-fit: cover;
-  width:100%;
+  width: 100%;
   height: 100%;
 }
 
 .modal__file::-webkit-file-upload-button {
   border: none;
-  padding: .2em .4em;
-  border-radius: .2em;
+  padding: 0.2em 0.4em;
+  border-radius: 0.2em;
   background-color: rgb(216, 215, 215);
   transition: 1s;
 }
 .modal__file::file-selector-button {
   border: none;
-  padding: .2em .4em;
-  border-radius: .2em;
+  padding: 0.2em 0.4em;
+  border-radius: 0.2em;
   background-color: rgb(216, 215, 215);
   transition: 1s;
 }
-/* ---Badge */ 
+/* ---Badge */
 .badge__txt {
   color: #1e819c;
   background-color: #d7eaf3;
-  padding: .3rem 1rem;
+  padding: 0.3rem 1rem;
 }
 .badge__img {
   color: #1cac23;
   background-color: #c5ecc7;
-  padding: .3rem 1rem;
+  padding: 0.3rem 1rem;
 }
 
 .badge__video {
   color: #9c9e23;
   background-color: #e3e4a8;
-  padding: .3rem 1rem;
+  padding: 0.3rem 1rem;
 }
 
-/* --- Table Block 區塊 */ 
+/* --- Table Block 區塊 */
 .table__block {
   padding: 1.5rem;
   box-shadow: 0px 0px 8px rgb(211, 211, 211);
@@ -511,7 +530,7 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
   line-height: 1.5rem;
 }
 
-/* --- Form Height Toggle */ 
+/* --- Form Height Toggle */
 .form__action {
   height: 0vh;
   overflow: hidden;
@@ -521,7 +540,8 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
   height: auto;
 }
 
-.btn.focus, .btn:focus {
+.btn.focus,
+.btn:focus {
   box-shadow: none;
 }
 
@@ -529,6 +549,13 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
   background-color: rgb(211, 211, 211);
 }
 
-.table-bordered td, .table-bordered th {
+.table-bordered td,
+.table-bordered th {
   vertical-align: middle;
-}
+}
+
+.disabled-link {
+  pointer-events: none;
+  cursor: default;
+  color: rgba(255, 255, 255, 0.7) !important;
+}

backstage/templates/layout.html

@@ -31,6 +31,9 @@
       background: #4c660a !important;
       border: 1px solid #4c660a;
     }
+    .btn-primary.disabled, .btn-primary:disabled {
+      border-color: #808f4c;
+    }
   </style>
   {% if title %}
   <title>bhouse backstage - {{ title }}</title>
@@ -159,15 +162,19 @@
             <div class="modal-body">
               <div class="input-group">
                 <div class="input-group-prepend">
-                  <span class="input-group-text" id="updatePassword" style="padding-right: 5px;">請輸入密碼：</span>
+                  <span class="input-group-text" style="padding-right: 5px;">請輸入密碼：</span>
                 </div>
-                <input type="text" class="form-control" placeholder="Password" aria-label="password" aria-describedby="updatePassword">
+                <input type="text" class="form-control" placeholder="Password" aria-label="password" id="updatePassword">
               </div>
 
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
-              <button type="button" class="btn btn-primary">更新</button>
+              <button type="button" class="btn btn-primary disabled" id="updateBtn">
+                <a href="{{ url_for('blogs.update') }}" class="text-white disabled-link">
+                  更新
+                </a>
+              </button>
             </div>
           </div>
         </div>