optimize css structure, add comments

backstage/static/styles/main.css

@@ -2,19 +2,14 @@
 
 /*-------------------------------- END ----*/
 
-
 /* main section */
 /* .main {
   width: calc(100vw - 270px);
   max-width: 1600px;
 } */
 
-.main__collapsed {
-  width: calc(100% - 100px);
-  margin-left: auto;
-  margin-right: auto;
-}
 
+/* editors layout*/
 .ui.segment {
   border: none;
   border-radius: 0;
@@ -22,29 +17,42 @@
   -webkit-box-shadow: none;
 }
 
-.ui .column .column__edit {
+.ui[class*="very relaxed"].grid {
+  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;
   margin-right: 2%;
   padding: 1rem!important;
 }
 
-.ui .column .column__preview {
+.ui[class*="two column"].grid .column__preview {
   overflow: hidden;
   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;
   border-radius: 5px;
   padding: 1rem!important;
 }
 
+
+/* editors layout title*/
 .column__h3 {
   font-size: 1.5rem;
 }
 
+
 /* blocks in editors */
 .blockDiv {
   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);
   padding: 1rem;
   border-radius: 5px;
   height: 30vh;
@@ -63,17 +71,23 @@
   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 */
+.blockDiv__h2 {
+  font-size: 1.3rem;
+}
+
+/* description textarea block */
 .descBlock {
   margin: 1.5rem 0;
 }
+
+/* image block */
 .imgBlock {
   margin-bottom: 1rem;
 }
-.blockDiv__h2 {
-  font-size: 1.3rem;
-}
 
-/* btn in blocks editor */
+/* btns in blocks editor */
 [class^="btn__"] {
   margin-right: 0.5rem;
   padding: 0.5rem;
@@ -81,6 +95,7 @@
   border: none;
   transition: all 0.3s;
   cursor: pointer;
+  border-radius: 10px;
 }
 
 [class^="btn__"]:hover {
@@ -99,41 +114,18 @@
   top: .5rem;
   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__arTitle {
-  border-radius: 10px;
-}
 .btn__addimg {
   border-radius: 50%;
 }
-.btn__descInput {
-  border-radius: 10px;
-  margin-right: 0.5rem;
-}
-.btn__remove {
-  border-radius: 10px;
-}
-.btn__titledesc {
-  border-radius: 10px;
-  margin-right: 0.5em;
-}
-.btn__titleInput {
-  margin-right: 0.5rem;
-  border-radius: 10px;
-}
+
 .btn__imgEdit {
-  padding: 0.5rem;
-  outline: none;
-  border: none;
-  border-radius: 10px;
   display: inline-block;
 }
 
-.btn__submit {
-  border-radius: 10px;
-}
-
 /* img in blocks editor */
 .img__container {
   width: 100%;
@@ -168,12 +160,14 @@
   transition: all 0.3s;
 }
 .input:focus, .textarea:focus {
-  border: 2px solid grey;
+  border: 1px solid grey;
 }
 
+/* upload button label */
 #file {
   display: none;
 }
+
 label[for="file"] {
   display: block;
   width: 7rem;
@@ -184,24 +178,25 @@ label[for="file"] {
   border-radius: 10px;
   background-color: rgb(224, 222, 222);
   cursor: pointer;
+  transition: all 0.3s;
 }
 
-/* btn in collections */
-.btn:active, .btn:focus {
-  transform: translateY(2px);
+label[for="file"]:hover {
+  background-color: rgb(211, 211, 211);
 }
+
+
+/* btn in collections, blogs */
 .btn__edit {
   display: inline-block;
   width: 2.5rem;
   height: 2.5rem;
   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);
   padding: 0.5rem;
   padding-left: 0.7rem;
-  outline: none;
-  border: none;
-  transition: all 0.3s;
-  cursor: pointer;
   color: black;
   background-color: white;
 }
@@ -219,6 +214,8 @@ label[for="file"] {
   height: 2.5rem;
   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);
   color: black;
   margin-right: 0;
   background-color: #E74C3C;
@@ -226,30 +223,32 @@ label[for="file"] {
 .btn__delete:hover {
   background-color: #D0ECE7;
 }
-
 .btn__delete i {
   color: white;
 }
 .btn__edit:active, .btn__edit:focus {
-  background-color: #b9bcbe !important;
+  background-color: #b9bcbe;
 }
 .btn__delete:active, .btn__delete:focus {
-  background-color: #fc919c !important;
-}
-
-/* table in collections */
-.table__tdata {
-  display: flex;
-  justify-content: center;
+  background-color: #fc919c;
 }
 
+/* --- Table */ 
 tbody:nth-of-type(2n) {
   background-color: #EEEEEE;
 }
+.table .table__head {
+  text-align: center;
+}
+.table .table__data {
+  vertical-align: middle;
+  text-align: center;
+}
 
 /* toTop */
 .toTop {
-  position: fixed ;
+  position: fixed;
+  cursor: pointer;
 	right: 1%;
   bottom: 2%;
   width: 40px;
@@ -257,6 +256,8 @@ tbody:nth-of-type(2n) {
   border-radius: 50%;
   background-color: rgb(252, 252, 252);
   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);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -265,6 +266,8 @@ tbody:nth-of-type(2n) {
 .toTop:hover {
   transform: translateY(-2px);
   box-shadow: 0 0 3px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
 }
 
 .toTop:active {
@@ -273,10 +276,7 @@ tbody:nth-of-type(2n) {
 
 .toTop i {
   font-size: 1.6rem;
-  cursor: pointer;
   color: hsl(209, 11%, 57%);
-  opacity: 0.8;
-  transition: all 0.4s;
 }
 
 /* functional class */
@@ -284,13 +284,12 @@ tbody:nth-of-type(2n) {
   display: inline-block;
 }
 
-/* #body-row {
-  margin-right: 15px;
-} */
-
+/* menu icons move left when collapsing */
 .menu-icon {
   margin-left: 1.2rem;
 }
+
+/* -------sidebar */  
 #sidebar-container {
   min-height: 100vh;
   background-color: rgb(216, 215, 215);
@@ -300,25 +299,26 @@ tbody:nth-of-type(2n) {
   left: 0;
   z-index: 100;
   position: fixed;
-  /* flex: unset; */
 }
-/* 
-.sidebar-expanded {
-  width: 230px;
-} */
-
-/* .sidebar-collapsed {
-  /*width: 60px;*/
-/*   width: 100px;
-} */ 
 
-/* ----------| Menu item*/  
+/* --------- sidebar list item*/
 #sidebar-container .list-group a {
   height: 50px;
   color: black;
   line-height: 26px;
 }
 
+#sidebar-container .list-group .list-group-item {
+  border: none;
+  border-radius: 3rem;
+  transition: all 0.3s;
+}
+
+#sidebar-container .list-group .list-group-item .list-group-item i {
+  line-height: 26px;
+}
+
+/*sidebar header */
 #sidebar-container .sidebar-header {
   background-image: url('../imgs/sidebar_\ backbround.jpeg');
   height: 65px;
@@ -327,7 +327,7 @@ tbody:nth-of-type(2n) {
   background-size: cover;
   position: relative;
 }
-
+/* sidebar header company name */
 #sidebar-container .sidebar__company {
   position: absolute;
   bottom: 3px;
@@ -337,68 +337,26 @@ tbody:nth-of-type(2n) {
   font-weight: 500;
   letter-spacing: 2px;
 }
-/* ----------| Submenu item*/    
 
-#sidebar-container .list-group .list-group-item {
-  border: none;
-  border-radius: 3rem;
-  transition: all 0.3s;
-}
-#sidebar-container .list-group .list-group-item{
-  background-color: rgb(179, 179, 179);
-}
-#sidebar-container .list-group li.list-group-item {
-  background-color: rgb(216, 215, 215);
+/* ----------| Submenu item*/    
+.sidebar-submenu {
+  font-size: 0.9rem;
 }
 
-#sidebar-container .list-group .sidebar-submenu a {
+#sidebar-container .list-group .sidebar-submenu .list-group-item {
   height: 45px;
   padding-left: 30px;
   line-height: 21px;
+  width: 80%;
 }
 
-.sidebar-submenu {
-  font-size: 0.9rem;
-}
-
-/* ----------| Separators */    
-.sidebar-separator-title {
-  background-color: rgb(216, 215, 215);
-  height: 35px;
-}
-
-.sidebar-separator {
-  background-color: rgb(216, 215, 215);
-  height: 25px;
-}
-
-.logo-separator {
-  background-color: rgb(216, 215, 215);
-  height: 60px;
-}
-
-a.bg-dark, a.bg-dark:visited  {
+/* ----------|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 {
   background-color: rgb(179, 179, 179) !important;
 }
-textarea {
-  border: None;
-  resize: None;
-  width: 100%;
-}
 
-/* --- Table */   
-.table .table__head {
-  text-align: center;
-}
-.table .table__data {
-  vertical-align: middle;
-  text-align: center;
-}
 
-.list-group-item i {
-  line-height: 26px;
-}

backstage/templates/editor.html

@@ -1,13 +1,13 @@
 {% extends "layout.html" %}
 {% block main %}
   <div class="ui segment">
-    <div class="ui two column very relaxed grid" style="margin-left:0.5rem;margin-right:0.5rem;">
+    <div class="ui two column very relaxed grid">
       <div class="column column__edit">
         <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-2"></i>編輯</h3>
         <div class="mb-2">
           <button class="btn__arTitle mb-2" id="title_button">標題修改</button>
         </div>
-          <div id= "editor_block"></div>
+        <div id= "editor_block"></div>
         <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>

backstage/templates/layout.html

@@ -89,30 +89,6 @@
           </div>
         </a>
         <!-- Separator with title -->
-        <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
-        </li>
-        <!-- /END Separator -->
-        <!-- <a href="#" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <span class="fa fa-calendar fa-fw mr-3"></span>
-            <span class="menu-collapsed">Calendar</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">
-            <span class="fa fa-envelope-o fa-fw mr-3"></span>
-            <span class="menu-collapsed">Messages <span class="badge badge-pill badge-primary ml-2">5</span></span>
-          </div>
-        </a> -->
-        <!-- Separator without title -->
-        <!-- <li class="list-group-item sidebar-separator menu-collapsed"></li>             -->
-        <!-- /END Separator -->
-        <!-- <a href="#" class="bg-dark list-group-item list-group-item-action">
-          <div class="d-flex w-100 justify-content-start align-items-center">
-            <span class="fa fa-question fa-fw mr-3"></span>
-            <span class="menu-collapsed">Help</span>
-          </div>
-        </a> -->
         <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>