Modified button texts, button hover effect, input placeholder, main section width

backstage/static/js/blockElements.js

@@ -8,21 +8,22 @@ function getBlockElements(contentDiv) {
   editIcon.classList.add('fas', 'fa-edit');
   editOpen.append(editIcon);
   const descButton = document.createElement('button');
-  descButton.classList.add('btn', 'btn__titledesc');
-  descButton.textContent = 'Add Description';
+  descButton.classList.add('btn__titledesc');
+  descButton.textContent = '新增段落';
   const imgButton = document.createElement('button');
   imgButton.classList.add('btn__addimg');
   const icon = document.createElement('i');
   icon.classList.add('fas', 'fa-images');
   imgButton.appendChild(icon);
   const h = document.createElement("H2");
-  h.classList.add('blockDiv__h2' ,'mb-2');
+  h.classList.add('blockDiv__h2' ,'mb-3');
   const input = document.createElement("INPUT");
   input.classList.add('input');
   input.setAttribute("type", "text");
+  input.setAttribute("placeholder", '標題');
   const inputButton = document.createElement('button');
-  inputButton.classList.add('btn', 'btn__titleInput');
-  inputButton.textContent = 'Title新增/修改';
+  inputButton.classList.add('btn__titleInput');
+  inputButton.textContent = '新增/修改';
   contentDiv.appendChild(blockDiv);
   blockDiv.append(editOpen, h, input, inputButton, descButton, imgButton);
   blockDiv.classList.add('mb-4');
@@ -58,15 +59,16 @@ function getdescElements(blockDiv) {
   descDiv.classList.add('descBlock');
   descTextArea.classList.add('textarea');
   descTextArea.setAttribute("type", "text");
+  descTextArea.setAttribute("placeholder", "內文...");
   const descInputButton = document.createElement('button');
-  descInputButton.classList.add('btn', 'btn__descInput');
+  descInputButton.classList.add('btn__descInput');
   const removeButton = document.createElement('button');
   removeButton.textContent = '刪除 ';
   const icon = document.createElement('i');
   icon.classList.add('fas', 'fa-trash-alt');
   removeButton.append(icon);
-  removeButton.classList.add('btn', 'btn__remove');
-  descInputButton.textContent = 'Description新增/修改';
+  removeButton.classList.add('btn__remove');
+  descInputButton.textContent = '新增/修改';
   blockDiv.appendChild(descDiv);
   descDiv.append(descTextArea, descInputButton, removeButton);
   return {
@@ -84,11 +86,12 @@ function getImgElements(blockDiv) {
   const widthInput = document.createElement("INPUT");
   const heightInput = document.createElement("INPUT");
   const imgContainer = document.createElement('div');
+  div.classList.add('imgBlock');
   imgContainer.classList.add('img__container');
   imgContainer.append(img);
   label.setAttribute('for', 'file');
   label.setAttribute('alt', '上傳照片');
-  label.textContent = "開啟檔案";
+  label.textContent = "開啟檔案 ";
   const icon = document.createElement('i');
   icon.classList.add('fas', 'fa-cloud-upload-alt');
   label.append(icon);
@@ -114,8 +117,8 @@ function getImgElements(blockDiv) {
       })
     }
   });
-  inputButton.textContent = 'Image新增/修改';
-  removeButton.textContent = 'Image刪除';
+  inputButton.textContent = '圖片新增/修改';
+  removeButton.textContent = '刪除';
 
   blockDiv.appendChild(div);
   div.append(imgContainer, label, input, widthInput, heightInput, inputButton, removeButton);

backstage/static/js/sidebar.js

@@ -16,6 +16,7 @@ function SidebarCollapse () {
   $('.submenu-icon').toggleClass('d-none');
   $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
   
+  
   // Treating d-flex/d-none on separators with title
   var SeparatorTitle = $('.sidebar-separator-title');
   if ( SeparatorTitle.hasClass('d-flex') ) {

backstage/static/styles/main.css

@@ -3,6 +3,20 @@
 /*-------------------------------- END ----*/
 
 
+/* main section */
+.main {
+  width: calc(100vw - 270px);
+  max-width: 1600px;
+}
+
+.column__preview {
+  overflow: hidden;
+}
+
+.column__h3 {
+  font-size: 1.5rem;
+}
+
 /* blocks in editors */
 .blockDiv {
   box-shadow: 0px 0px 8px rgb(211, 211, 211);
@@ -15,7 +29,7 @@
 .blockDiv::before {
   position: absolute;
   width: 100%;
-  height: 30px;
+  height: 25px;
   content: '';
   bottom: 0px;
   left: 0;
@@ -27,20 +41,37 @@
 .descBlock {
   margin: 1.5rem 0;
 }
+.imgBlock {
+  margin-bottom: 1rem;
+}
 .blockDiv__h2 {
   font-size: 1.3rem;
 }
 
 /* btn in blocks editor */
+[class^="btn__"] {
+  margin-right: 0.5rem;
+  padding: 0.5rem;
+  outline: none;
+  border: none;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+[class^="btn__"]:hover {
+  background-color: rgb(211, 211, 211);
+}
+
+[class^="btn__"]:focus {
+  outline: none;
+}
+
 .btn__editOpen {
   width: 2.5rem;
   height: 2.5rem;
   position: absolute;
-  right: 1rem;
-  top: 1rem;
-  padding: 0.5rem;
-  outline: none;
-  border: none;
+  right: 0px;
+  top: .5rem;
   border-radius: 50%;
   box-shadow: 0 0 6px rgb(179, 179, 179);
 }
@@ -49,39 +80,25 @@
   cursor: pointer;
 }
 .btn__arTitle {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
   border-radius: 10px;
 }
 .btn__addimg {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
   border-radius: 50%;
 }
 .btn__descInput {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
   border-radius: 10px;
   margin-right: 0.5rem;
 }
 .btn__remove {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
   border-radius: 10px;
 }
 .btn__titledesc {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
   border-radius: 10px;
   margin-right: 0.5em;
 }
 .btn__titleInput {
   margin-right: 0.5rem;
+  border-radius: 10px;
 }
 .btn__imgEdit {
   padding: 0.5rem;
@@ -91,14 +108,7 @@
   display: inline-block;
 }
 
-[class^="btn__"] {
-  margin-right: 0.5rem;
-}
-
 .btn__submit {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
   border-radius: 10px;
 }
 
@@ -125,11 +135,13 @@
 }
 
 .textarea {
+  padding: 5px;
   width: 100%;
   height: 8rem;
   border: 2px solid rgb(240, 240, 240);
   border-radius: 5px;
   outline: none;
+  transition: all 0.3s;
 }
 .textarea:focus {
   border: 2px solid grey;
@@ -140,7 +152,7 @@
 }
 label[for="file"] {
   display: block;
-  width: 6.5rem;
+  width: 7rem;
   padding: 0.5rem;
   margin-bottom: 0.5rem;
   outline: none;
@@ -175,6 +187,7 @@ label[for="file"] {
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  background-color: rgb(252, 252, 252);
   box-shadow: 0 0 6px rgb(179, 179, 179);
   display: flex;
   align-items: center;
@@ -204,7 +217,7 @@ label[for="file"] {
 }
 
 #body-row {
-  margin-right: 5%;
+  margin-right: 15px;
 }
 
 #sidebar-container {

backstage/templates/editor.html

@@ -3,11 +3,12 @@
   <div class="ui segment">
     <div class="ui two column very relaxed grid">
       <div class="column">
+        <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-2"></i>編輯</h3>
         <div class="mb-2">
-          <button class="btn__arTitle" id="title_button">新增標題</button>
+          <button class="btn__arTitle mb-2" id="title_button">標題修改</button>
         </div>
           <div id= "editor_block"></div>
-        <button id='submit_button' class="btn__submit">Submit</button>
+        <button id='submit_button' class="btn__submit">修改完成</button>
         <script type="text/json" id="url">{"url": "{{ url }}"}</script>
         <script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
         <script type="text/javascript" src="{{url_for('static', filename='js/utils.js')}}"></script>
@@ -16,7 +17,8 @@
         <script type="text/javascript" src="{{url_for('static', filename='js/parsers.js')}}"></script>
         <script type="text/javascript" src="{{url_for('static', filename='js/editor.js')}}"></script>
       </div>
-      <div class="column">
+      <div class="column column__preview">
+        <h3 class="h3 column__h3"><i class="fas fa-eye mr-2"></i>預覽頁面</h3>
         <iframe src='http://localhost:1313{{ url }}/' width="100%" height="100%"></iframe>
       </div>
     </div>

backstage/templates/layout.html

@@ -32,7 +32,7 @@
 <body>
   <div class="row" id="body-row">
     <!-- Sidebar -->
-    <div id="sidebar-container" class="sidebar-expanded col-3"><!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
+    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block"><!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
       <!-- Bootstrap List Group -->
       <ul class="list-group">
         <!-- Separator with title -->
@@ -142,7 +142,7 @@
     </div><!-- sidebar-container END -->
 
     <!-- MAIN -->
-    <div class="col-9 my-4 col ml-auto w-100">
+    <div class="my-4 ml-auto main">
       {% block main %}{% endblock %}
     </div><!-- Main Col END -->
     <div class='toTop'>