Ver Fonte

Adjust sidebar toggles in layout and links in sidebar

huaisianhuang há 4 anos atrás
pai
commit
03e883bc6e

BIN
backstage/static/imgs/logo2.png


+ 3 - 1
backstage/static/js/sidebar.js

@@ -11,10 +11,12 @@ $('[data-toggle=sidebar-colapse]').click(function() {
 const toTopButton = document.querySelector('.toTop');
 
 function SidebarCollapse () {
+  const collapseFlag = true;
   $('.menu-collapsed').toggleClass('d-none');
   $('.sidebar-submenu').toggleClass('d-none');
   $('.submenu-icon').toggleClass('d-none');
-  $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
+  $('#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

+ 49 - 20
backstage/static/styles/main.css

@@ -4,9 +4,15 @@
 
 
 /* main section */
-.main {
+/* .main {
   width: calc(100vw - 270px);
   max-width: 1600px;
+} */
+
+.main__collapsed {
+  width: calc(100% - 100px);
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .column__preview {
@@ -132,6 +138,8 @@
   min-width: 20%;
   margin-right: 6px;
   margin-bottom: 6px;
+  transition: all 0.3s;
+  border-radius: 5px;
 }
 
 .textarea {
@@ -143,7 +151,7 @@
   outline: none;
   transition: all 0.3s;
 }
-.textarea:focus {
+.input:focus, .textarea:focus {
   border: 2px solid grey;
 }
 
@@ -216,47 +224,65 @@ label[for="file"] {
   display: inline-block;
 }
 
-#body-row {
+/* #body-row {
   margin-right: 15px;
-}
+} */
 
 #sidebar-container {
   min-height: 100vh;
-  background-color: #132644;
+  background-color: rgb(216, 215, 215);
   padding: 0;
   top: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
+  position: fixed;
   /* flex: unset; */
 }
-
+/* 
 .sidebar-expanded {
   width: 230px;
-}
+} */
 
-.sidebar-collapsed {
+/* .sidebar-collapsed {
   /*width: 60px;*/
-  width: 100px;
-}
+/*   width: 100px;
+} */ 
 
 /* ----------| Menu item*/  
-#sidebar-container {
-  position: fixed;
-}
 #sidebar-container .list-group a {
   height: 50px;
-  color: white;
+  color: black;
+  line-height: 26px;
+}
+
+#sidebar-container .sidebar-header {
+  background-image: url('https://2.bp.blogspot.com/-2RewSLZUzRg/U-9o6SD4M6I/AAAAAAAADIE/voax99AbRx0/s1600/14%2B-%2B1%2B%281%29.jpg');
+  width: 100%;
+  height: 80px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
 }
 
 /* ----------| 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: #132644;
+  background-color: rgb(216, 215, 215);
 }
 
 #sidebar-container .list-group .sidebar-submenu a {
   height: 45px;
   padding-left: 30px;
+  line-height: 21px;
 }
 
 .sidebar-submenu {
@@ -265,24 +291,27 @@ label[for="file"] {
 
 /* ----------| Separators */    
 .sidebar-separator-title {
-  background-color: #132644;
+  background-color: rgb(216, 215, 215);
   height: 35px;
 }
 
 .sidebar-separator {
-  background-color: #132644;
+  background-color: rgb(216, 215, 215);
   height: 25px;
 }
 
 .logo-separator {
-  background-color: #132644;
+  background-color: rgb(216, 215, 215);
   height: 60px;
 }
 
-a.bg-dark {
-  background-color: #132644 !important;
+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;

+ 32 - 20
backstage/templates/layout.html

@@ -30,56 +30,60 @@
   {% endif %}
 </head>
 <body>
+  <div class="container-fluid">
   <div class="row" id="body-row">
     <!-- Sidebar -->
-    <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' -->
+    <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">
+      </div>
       <!-- Bootstrap List Group -->
       <ul class="list-group">
-        <!-- Separator with title -->
-        <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
-            <small>小寶優居後台</small>
-        </li>
         <!-- /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">
-            <span class="fa fa-dashboard fa-fw mr-3"></span>
-            <span class="menu-collapsed">首頁</span>    
-          </div>
+<<<<<<< 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">
-            <span class="fa fa-user fa-fw mr-3"></span>
-            <span class="menu-collapsed">規劃師服務</span>    
+            <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">
-            <span class="fa fa-tasks fa-fw mr-3"></span>
+            <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">
-            <span class="fa fa-tasks fa-fw mr-3"></span>
+            <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">
-            <span class="fa fa-tasks fa-fw mr-3"></span>
+            <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">
-            <span class="fa fa-tasks fa-fw mr-3"></span>
+            <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">
-            <span class="fa fa-tasks fa-fw mr-3"></span>
+            <i class="far fa-newspaper mr-3"></i>
             <span class="menu-collapsed">設計專欄</span>    
           </div>
         </a>
@@ -88,7 +92,7 @@
           <small>OPTIONS</small>
         </li>
         <!-- /END Separator -->
-        <a href="#" class="bg-dark list-group-item list-group-item-action">
+        <!-- <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>
@@ -99,16 +103,16 @@
             <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>
+        </a> -->
         <!-- Separator without title -->
-        <li class="list-group-item sidebar-separator menu-collapsed"></li>            
+        <!-- <li class="list-group-item sidebar-separator menu-collapsed"></li>             -->
         <!-- /END Separator -->
-        <a href="#" class="bg-dark list-group-item list-group-item-action">
+        <!-- <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> -->
         <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>
@@ -116,6 +120,7 @@
           </div>
         </a> 
       </ul><!-- List Group END-->
+<<<<<<< HEAD
     </div><!-- sidebar-container END -->
     <!-- MAIN -->
 <<<<<<< HEAD
@@ -138,6 +143,12 @@
 =======
     
 >>>>>>> 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'>
@@ -145,6 +156,7 @@
     </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>