#6: working on responsive layout

VocaDB · Mar 20, 2015 · 27890a5 · 27890a5
1 parent 3fc484e
commit 27890a5
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 193 deletions.
diff --git a/VocaDbWeb/App_Start/BundleConfig.cs b/VocaDbWeb/App_Start/BundleConfig.cs
@@ -420,6 +420,7 @@ public static void RegisterBundles(BundleCollection bundles) {
 			// Base CSS
 			bundles.Add(new StyleBundle("~/Content/css").Include(
 				"~/Content/bootstrap.css", 
+				"~/Content/bootstrap-responsive.css", 
 				"~/Content/Site.css", 
 				"~/Content/Styles/base.css", 
 				//"~/Content/Styles/Snow2013.css",

diff --git a/VocaDbWeb/Content/Site.css b/VocaDbWeb/Content/Site.css
@@ -197,11 +197,6 @@ body .container-fluid {
 	margin-top: 0px;
 }
 
-.row-fluid .rightFrame {
-	margin-left: 1%;
-	width: 84%;
-}
-
 .rightFrame td {
 	/*font-weight: bold;*/
 	color: #000000;

diff --git a/VocaDbWeb/Content/Styles/base.css b/VocaDbWeb/Content/Styles/base.css
@@ -38,6 +38,51 @@
 .link-list .link-item:not(:last-child) > ::after {
   content: ", ";
 }
+@media (min-width: 970px) {
+  .row-fluid .rightFrame {
+    margin-left: 1%;
+    width: 84%;
+  }
+}
+@media (max-width: 970px) {
+  .row-fluid .rightFrame {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+@media (max-width: 970px) {
+  .vdb .menu {
+    display: none;
+  }
+}
+.vdb .globalSearchBox {
+  max-width: 270px;
+  width: calc(100% - 146px);
+}
+@media (max-width: 970px) {
+  .navbar-search {
+    width: 100%;
+  }
+}
+.vdb .navbar-inverse .btn-navbar {
+  margin-top: 1px;
+  margin-left: 10px;
+  background-color: #081a21;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2c8fb2), to(#216b88));
+  background-image: -webkit-linear-gradient(top, #2c8fb2, #216b88);
+  background-image: -o-linear-gradient(top, #2c8fb2, #216b88);
+  background-image: -moz-linear-gradient(center top, #2c8fb2, #216b88);
+  background-image: linear-gradient(top, #2c8fb2, #216b88);
+}
+.vdb .navbar-inverse .btn-navbar:hover {
+  background-color: #216b88;
+}
+@media (min-width: 970px) {
+  .nav-collapse {
+    display: none;
+  }
+}
 .entry-field-label-col {
   min-width: 100px;
 }

diff --git a/VocaDbWeb/Content/Styles/base.less b/VocaDbWeb/Content/Styles/base.less
@@ -1,4 +1,4 @@
-
+@import "variables";
 
 /* Validation
 -----------------------------------------------------------*/
@@ -58,6 +58,65 @@
 }
 
 
+// Layout and Navigation
+.row-fluid .rightFrame {
+	@media (min-width: @left-menu-breakpoint) {
+		margin-left: 1%;
+		width: 84%;
+	}
+	@media (max-width: @left-menu-breakpoint) {
+		margin-left: 0;
+		margin-right: 0;
+		width: 100%;
+	}
+}
+
+.vdb .menu {
+	@media (max-width: @left-menu-breakpoint) {
+		display: none;
+	}		
+}
+
+.vdb .globalSearchBox {
+	max-width: 270px;
+	width: calc(100% - 146px);
+}
+
+.navbar-search {
+	@media (max-width: @left-menu-breakpoint) {
+		width: 100%;
+	}		
+}
+
+@navbar-collapse-light: lighten(@navbar-color-light, 25%);
+@navbar-collapse-dark: lighten(@navbar-color-dark, 25%);
+@navbar-collapse-hover-light: lighten(@navbar-color-light, 30%);
+@navbar-collapse-hover-dark: lighten(@navbar-color-dark, 30%);
+
+.vdb .navbar-inverse .btn-navbar {
+
+	margin-top: 1px;
+	margin-left: 10px;
+
+	background-color: @navbar-color-dark;
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@navbar-collapse-light), to(@navbar-collapse-dark));	
+	background-image: -webkit-linear-gradient(top, @navbar-collapse-light, @navbar-collapse-dark);
+	background-image: -o-linear-gradient(top, @navbar-collapse-light, @navbar-collapse-dark);
+	background-image: -moz-linear-gradient(center top, @navbar-collapse-light, @navbar-collapse-dark);
+	background-image: linear-gradient(top, @navbar-collapse-light, @navbar-collapse-dark);
+
+	&:hover {
+		background-color: @navbar-collapse-dark;
+	}
+
+}
+
+.nav-collapse {
+	@media (min-width: @left-menu-breakpoint) {
+		display: none;
+	}
+}
+
 // Entries
 .entry-field-label-col {
 	min-width: 100px;

diff --git a/VocaDbWeb/Content/Styles/variables.less b/VocaDbWeb/Content/Styles/variables.less
@@ -0,0 +1,5 @@
+
+@left-menu-breakpoint: 970px;
+
+@navbar-color-light: #133D4C;
+@navbar-color-dark: #081A21;
diff --git a/VocaDbWeb/Content/bootstrap-responsive.css b/VocaDbWeb/Content/bootstrap-responsive.css
@@ -454,7 +454,7 @@
   .container,
   .navbar-fixed-top .container,
   .navbar-fixed-bottom .container {
-    width: 1170px;
+    width: 940px; /* Changed */
   }
   .span12 {
     width: 1170px;
@@ -684,7 +684,7 @@
     padding-top: 0;
   }
   .navbar-fixed-top {
-    position: static;
+    /*position: static; */
     margin-bottom: 18px;
   }
   .navbar-fixed-top .navbar-inner {

diff --git a/VocaDbWeb/Content/bootstrap-responsive.min.css b/VocaDbWeb/Content/bootstrap-responsive.min.css