Browse Source

*container fluidity

AndreiCN 6 years ago
parent
commit
c53fa701e4
4 changed files with 173 additions and 21 deletions
  1. 7 6
      build/css/style-extra-bs4.css
  2. 1 1
      production/index.html
  3. 152 1
      production/tester.html
  4. 13 13
      src/scss/custom.scss

+ 7 - 6
build/css/style-extra-bs4.css

@@ -1,6 +1,7 @@
-/*
-@media (min-width: 1200px) {
-  .container { max-width:100% !important; }
-  }
-} 
-*/
+
+
+.container.test  .col.one {  background:gold; }
+.container.test  .col.two {  background:red; }
+
+.container.body .col-md-3 { background:orange; }
+

+ 1 - 1
production/index.html

@@ -32,7 +32,7 @@
   </head>
 
   <body class="nav-md">
-    <div class="container-fluid body">
+    <div class="container body test">
       <div class="main_container row">
 	  
 	  

+ 152 - 1
production/tester.html

@@ -26,8 +26,157 @@
   
 	<!-- NEW STRUCTURE -->
 	
-		<div class="container test">
+		<div class="container-fluid body test">
 		
+			<!-- SIDEBAR - starts -->
+		
+			<div class="col-md-3 left_col">
+			  <div class="left_col">
+				<div class="navbar nav_title" style="border: 0;">
+				  <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
+				</div>
+
+				<div class="clearfix"></div>
+
+				<div class="profile clearfix">
+				  <div class="profile_pic">
+					<img src="images/img.jpg" alt="..." class="img-circle profile_img">
+				  </div>
+				  <div class="profile_info">
+					<span>Welcome,</span>
+					<h2>John Doe</h2>
+				  </div>
+				  <div class="clearfix"></div>
+				</div>
+			   
+
+				<br />
+
+			  
+				<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
+				  <div class="menu_section">
+					<h3>General</h3>
+					<ul class="nav side-menu">
+					  <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="index.html">Dashboard</a></li>
+						  <li><a href="index2.html">Dashboard2</a></li>
+						  <li><a href="index3.html">Dashboard3</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="form.html">General Form</a></li>
+						  <li><a href="form_advanced.html">Advanced Components</a></li>
+						  <li><a href="form_validation.html">Form Validation</a></li>
+						  <li><a href="form_wizards.html">Form Wizard</a></li>
+						  <li><a href="form_upload.html">Form Upload</a></li>
+						  <li><a href="form_buttons.html">Form Buttons</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="general_elements.html">General Elements</a></li>
+						  <li><a href="media_gallery.html">Media Gallery</a></li>
+						  <li><a href="typography.html">Typography</a></li>
+						  <li><a href="icons.html">Icons</a></li>
+						  <li><a href="glyphicons.html">Glyphicons</a></li>
+						  <li><a href="widgets.html">Widgets</a></li>
+						  <li><a href="invoice.html">Invoice</a></li>
+						  <li><a href="inbox.html">Inbox</a></li>
+						  <li><a href="calendar.html">Calendar</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="tables.html">Tables</a></li>
+						  <li><a href="tables_dynamic.html">Table Dynamic</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="chartjs.html">Chart JS</a></li>
+						  <li><a href="chartjs2.html">Chart JS2</a></li>
+						  <li><a href="morisjs.html">Moris JS</a></li>
+						  <li><a href="echarts.html">ECharts</a></li>
+						  <li><a href="other_charts.html">Other Charts</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
+						  <li><a href="fixed_footer.html">Fixed Footer</a></li>
+						</ul>
+					  </li>
+					</ul>
+				  </div>
+				  <div class="menu_section">
+					<h3>Live On</h3>
+					<ul class="nav side-menu">
+					  <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="e_commerce.html">E-commerce</a></li>
+						  <li><a href="projects.html">Projects</a></li>
+						  <li><a href="project_detail.html">Project Detail</a></li>
+						  <li><a href="contacts.html">Contacts</a></li>
+						  <li><a href="profile.html">Profile</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+						  <li><a href="page_403.html">403 Error</a></li>
+						  <li><a href="page_404.html">404 Error</a></li>
+						  <li><a href="page_500.html">500 Error</a></li>
+						  <li><a href="plain_page.html">Plain Page</a></li>
+						  <li><a href="login.html">Login Page</a></li>
+						  <li><a href="pricing_tables.html">Pricing Tables</a></li>
+						</ul>
+					  </li>
+					  <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
+						<ul class="nav child_menu">
+							<li><a href="#level1_1">Level One</a>
+							<li><a>Level One<span class="fa fa-chevron-down"></span></a>
+							  <ul class="nav child_menu">
+								<li class="sub_menu"><a href="level2.html">Level Two</a>
+								</li>
+								<li><a href="#level2_1">Level Two</a>
+								</li>
+								<li><a href="#level2_2">Level Two</a>
+								</li>
+							  </ul>
+							</li>
+							<li><a href="#level1_2">Level One</a>
+							</li>
+						</ul>
+					  </li>                  
+					  <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
+					</ul>
+				  </div>
+
+				</div>
+				
+
+				
+				<div class="sidebar-footer hidden-small">
+				  <a data-toggle="tooltip" data-placement="top" title="Settings">
+					<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+				  </a>
+				  <a data-toggle="tooltip" data-placement="top" title="FullScreen">
+					<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
+				  </a>
+				  <a data-toggle="tooltip" data-placement="top" title="Lock">
+					<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+				  </a>
+				  <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
+					<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
+				  </a>
+				</div>
+			  
+			  </div>
+			</div>
+		
+			<!-- SIDEBAR - ends -->
+			
 			<div class="row">
 			
 				<div class="col one">A</div>
@@ -368,6 +517,8 @@
     <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
   
     <script src="../vendors/fastclick/lib/fastclick.js"></script>
+	<!-- Popper -->
+	<script src="../vendors/popper/popper.min.js"></script>
   
     <script src="../vendors/nprogress/nprogress.js"></script>
     

+ 13 - 13
src/scss/custom.scss

@@ -2,25 +2,25 @@
 .left_col {
   background: #2A3F54;
 }
-.nav-sm .container.body .col-md-3.left_col {
+.nav-sm container-fluid.body .col-md-3.left_col {
   min-height: 100%;
   width: 70px;
   padding: 0;
   z-index: 9999;
   position: absolute;
 }
-.nav-sm .container.body .col-md-3.left_col.menu_fixed {
+.nav-sm container-fluid.body .col-md-3.left_col.menu_fixed {
   position: fixed;
   height: 100%;
 }
-.nav-sm .container.body .col-md-3.left_col .mCSB_container,
-.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
+.nav-sm container-fluid.body .col-md-3.left_col .mCSB_container,
+.nav-sm container-fluid.body .col-md-3.left_col .mCustomScrollBox {
   overflow: visible;
 }
 .nav-sm .hidden-small {  
   visibility: hidden;
 }
-.nav-sm .container.body .right_col {
+.nav-sm container-fluid.body .right_col {
   padding: 10px 20px;
   margin-left: 70px;
   z-index: 2;
@@ -190,7 +190,7 @@
     position: static;
   }
 }
-.nav-md .container-fluid.body .left_col {
+.nav-md container-fluid-fluid.body .left_col {
   min-height: 100%;
   width: 230px;
   padding: 0;
@@ -198,14 +198,14 @@
   display: flex;
   z-index: 1;
 }
-.nav-md .container.body .col-md-3.left_col.menu_fixed {
+.nav-md container-fluid.body .col-md-3.left_col.menu_fixed {
   height: 100%;
   position: fixed;
 }
-body .container.body .right_col {
+body container-fluid.body .right_col {
   background: #F7F7F7;
 }
-.nav-md .container.body .right_col {
+.nav-md container-fluid.body .right_col {
   padding: 10px 20px 0;
   margin-left: 230px;
 }
@@ -217,14 +217,14 @@ body .container.body .right_col {
   height: 57px;
 }
 @media (max-width: 991px) {
-  .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
+  .nav-md container-fluid.body .right_col, .nav-md container-fluid.body .top_nav {
     width: 100%;
     margin: 0;
   }
-  .nav-md .container.body .col-md-3.left_col {
+  .nav-md container-fluid.body .col-md-3.left_col {
     display: none;
   }
-  .nav-md .container.body .right_col {
+  .nav-md container-fluid.body .right_col {
     width: 100%;
     padding-right: 0
   }
@@ -326,7 +326,7 @@ body .container.body .right_col {
   border: 1px solid #50C1CF !important;
   color: #fff;
 }
-.container {
+container-fluid {
   width: 100%;
   padding: 0
 }