Search & Navigation

Setup site search, and integrated into mobile nav. Minor changes to mobile nav styling.
jmr06005 · Jun 30, 2014 · 196f789 · 196f789
1 parent aa03946
commit 196f789
Show file tree

Hide file tree

Showing 13 changed files with 8,918 additions and 25 deletions.
diff --git a/bootstrap/css/bootstrap-theme.css b/bootstrap/css/bootstrap-theme.css
diff --git a/bootstrap/css/bootstrap-theme.css.map b/bootstrap/css/bootstrap-theme.css.map
diff --git a/bootstrap/css/bootstrap-theme.min.css b/bootstrap/css/bootstrap-theme.min.css
diff --git a/bootstrap/css/bootstrap.css b/bootstrap/css/bootstrap.css
diff --git a/bootstrap/css/bootstrap.css.map b/bootstrap/css/bootstrap.css.map
diff --git a/bootstrap/css/bootstrap.min.css b/bootstrap/css/bootstrap.min.css
diff --git a/bootstrap/js/bootstrap.js b/bootstrap/js/bootstrap.js
diff --git a/bootstrap/js/bootstrap.min.js b/bootstrap/js/bootstrap.min.js
diff --git a/header.php b/header.php
@@ -41,19 +41,33 @@
 		$headerImg = get_header_image();
 	?>
 	<header id="masthead" class="site-header <?php if ($headerImg != ''){echo 'header-image';} ?>" role="banner">
-		<div id="site-title">
+		<div id="site-title" class="hidden-xs">
 			<div class="container">
 				<?php if ($headerImg != ''){ echo '<div id="header-image-wrap"><img src="' . get_header_image() . '" height="' . get_custom_header()->height . '" width="' . get_custom_header()->width . '" id="header-image" alt="Decorative header image of '. get_bloginfo('name') .'" /></div> ';}?>
-				<div class="site-branding hidden-xs" id="uc-site-header">
-						<?php
-							if(strlen($secondary) > 0 && strlen($secondarylink) > 0){
-								if(substr($secondarylink,0,4) != 'http'){
-									$secondarylink = 'http://'.$secondarylink;
+				<div class="row">
+					<div class="col-sm-8">
+						<div class="site-branding" id="uc-site-header">
+							<?php
+								if(strlen($secondary) > 0 && strlen($secondarylink) > 0){
+									if(substr($secondarylink,0,4) != 'http'){
+										$secondarylink = 'http://'.$secondarylink;
+									}
+									echo '<p id="uc-site-parent" class="'.$parentColor.'"><a href="'.$secondarylink.'">'.$secondary.'</a></p>';
 								}
-								echo '<p id="uc-site-parent" class="'.$parentColor.'"><a href="'.$secondarylink.'">'.$secondary.'</a></p>';
-							}
-						?>
-						<h1 id="uc-site-title" class="<?php echo $headingColor; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+							?>
+							<h1 id="uc-site-title" class="<?php echo $headingColor; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+						</div>
+					</div>
+					<div class="col-sm-4 <?php
+								if(strlen($secondary) > 0 && strlen($secondarylink) > 0){
+									if(substr($secondarylink,0,4) != 'http'){
+										$secondarylink = 'http://'.$secondarylink;
+									}
+									echo 'parent-spacing';
+								}
+							?>">
+						<?php get_search_form(); ?>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -89,6 +103,11 @@
 							)
 						);
 						?>
+						<div class="visible-xs-block">
+						<div class="navbar-form navbar-right">
+							<?php get_search_form(); ?>
+						</div>
+						</div>
 					</div>
 				</nav>
 				<!-- #site-navigation -->	

diff --git a/search.php b/search.php
@@ -6,7 +6,6 @@
  */
 
 get_header(); ?>
-<div class="container">
 	<div class="row">
 		<div class="col-sm-9">
 			<section id="primary" class="content-area">
@@ -38,5 +37,4 @@
 		</div>
 		<?php get_sidebar(); ?>
 	</div>
-</div>
 <?php get_footer(); ?>
diff --git a/searchform.php b/searchform.php
@@ -0,0 +1,11 @@
+<div class="searchform">
+	<form action="/" method="get" class="form-inline" role="form">
+		<div class="form-group">
+			<fieldset>
+				<label for="search" class="sr-only">Search in <?php echo home_url( '/' ); ?></label>
+				<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" class="form-control" placeholder="Search <?php bloginfo( 'name' ); ?>... " />
+				<button type="submit" class="btn btn-default" title="Search"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Search</span></button>
+			</fieldset>
+		</div>
+	</form>
+</div>
diff --git a/style.css b/style.css
@@ -42,7 +42,16 @@ Text Domain: cs
 
 /*	Custom Header Image
 --------------------------------------------------------------*/
-#masthead.header-image {
+#masthead {
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+
+#masthead.header-image .container {
   position: relative;
 }
 
@@ -62,6 +71,37 @@ Text Domain: cs
   left: 30px;
 }
 
+#masthead.header-image .container .row {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+}
+
+#site-title .searchform {
+  float: right;
+  padding-top: 30px;
+}
+
+#site-title .parent-spacing .searchform {
+  margin-top: 10px;
+}
+
+#primary-nav .searchform .form-control {
+  display: inline-block;
+  width: auto;
+}
+
+@media (max-width: 768px) {
+  #nav-wrapper .container {
+    padding: 0;
+  }
+
+  .dropdown-menu .dropdown-menu {
+    padding-left: 20px;
+  }
+}
 /*	UConn Branding
 --------------------------------------------------------------*/
 #uc-header {
@@ -115,7 +155,7 @@ Text Domain: cs
 }
 
 #uc-site-header #uc-site-parent a {
-  font-sie: 13px;
+  font-size: 13px;
   letter-spacing: 1px;
 }
 
@@ -168,6 +208,14 @@ img {
 
 /*	NAV
 --------------------------------------------------------------*/
+.navbar-default .navbar-brand {
+  height: auto;
+  float: none;
+  margin-right: 110px;
+  font: 500 18px "Proxima Nova", Helvetica, Arial, sans-serif;
+  color: black;
+}
+
 /* overwriting bootstrap 3's philosophical opposition to drop down menus. */
 .dropdown-submenu {
   position: relative;

diff --git a/style.scss b/style.scss
@@ -65,7 +65,15 @@ url('../../global/fonts/proximanova_semibold/ProximaNova-Sbold-webfont.ttf') for
 
 /*	Custom Header Image
 --------------------------------------------------------------*/	
-#masthead.header-image {
+#masthead {
+	-ms-word-break: break-all;
+	word-break: break-all;
+	word-break: break-word;
+	-webkit-hyphens: auto;
+   -moz-hyphens: auto;
+        hyphens: auto;
+	}
+#masthead.header-image .container {
 	position:relative;
 	}
 	#header-image-wrap {
@@ -80,12 +88,47 @@ url('../../global/fonts/proximanova_semibold/ProximaNova-Sbold-webfont.ttf') for
 		position:absolute;top:30px;
 		left:30px;
 		}
+
+	#masthead.header-image .container .row {
+		position:absolute;
+		top:0;
+		left:0;
+		width:100%;
+		margin:0;
+		}
+
+		#site-title .searchform {
+			float:right;
+			padding-top:30px;
+			}
+			#site-title .parent-spacing .searchform {
+				margin-top:10px;
+				}
+
+	#primary-nav .searchform .form-control {
+		display:inline-block;
+		width:auto;
+		}
+
+	@media (max-width: 768px) {
+		#nav-wrapper .container {
+			padding:0;
+		}
+		.dropdown-menu .dropdown-menu {
+			padding-left:20px;
+		}
+	}
+
+
+
+
 
 /*	UConn Branding
 --------------------------------------------------------------*/	
 
 #uc-header{
 	border-bottom:1px solid #fff;
+
 	}
 
 #uc-site-header {
@@ -128,7 +171,7 @@ url('../../global/fonts/proximanova_semibold/ProximaNova-Sbold-webfont.ttf') for
 	margin-bottom:5px;
 	}
 	#uc-site-header #uc-site-parent a {
-		font-sie: 13px;
+		font-size: 13px;
 		letter-spacing: 1px;
 		}
 #uc-site-header #uc-site-title {
@@ -157,9 +200,6 @@ url('../../global/fonts/proximanova_semibold/ProximaNova-Sbold-webfont.ttf') for
 
 
 
-
-
-
 
 
 img {
@@ -209,6 +249,19 @@ img {
 
 /*	NAV
 --------------------------------------------------------------*/		
+
+
+.navbar-default .navbar-brand {
+	height:auto;
+	float:none;
+	margin-right:110px;
+	font:500 18px "Proxima Nova", Helvetica, Arial, sans-serif;
+	color:black;
+	}
+
+
+
+
 /* overwriting bootstrap 3's philosophical opposition to drop down menus. */
 .dropdown-submenu{
     position:relative;