Merge pull request #110 from CaravanTransit/desktop-header

Closes #109 - Implement Caravan Desktop Header Styling
TransitTalk · Oct 17, 2018 · 0416ec9 · 0416ec9
2 parents 6b13522 + 8a2f780
commit 0416ec9
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 30 deletions.
diff --git a/app/assets/stylesheets/headers.scss b/app/assets/stylesheets/headers.scss
@@ -15,7 +15,6 @@
 	background-size: 100%;
 }
 
-
 /* Styling for main header with project name and transportation line */
 .title {
 	text-align: center;
@@ -47,7 +46,6 @@
 /* HEADERS WITH TRANSPORTATION NAMES ("ROOSEVELT", "CERMAK-McCORMICK") */
 .locationList {
 
-
 }
 
 .side-menu-overlay {
@@ -70,18 +68,25 @@
 	padding-left: 20px;
 	box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
 	z-index: 10;
+}
 
-	ul {
-		padding: 0px;
-		margin: 0px;
-		list-style: none;
+.header-links {
+	padding: 0px;
+	margin: 0px;
+	list-style: none;
 
-		li {
+	li {
+		color: white;
+		margin: 10px 0px;
+		font-size: 18px;
+
+		a {
+			text-decoration: none;
 			color: white;
-			margin: 10px 0px;
-			font-size: 18px;
 
-			a { text-decoration: none; color: white; }
+			&:focus, &:hover {
+				text-decoration: underline;
+			}
 		}
 	}
 }
@@ -90,7 +95,7 @@
 	position: fixed;
 	width: 100%;
 	height: 100%;
-	background: rgba(0,0,0,0.5);
+	background: rgba(0, 0, 0, 0.5);
 	top: 0;
 	left: 0;
 	z-index: 5;
@@ -124,8 +129,48 @@
 	}
 }
 
-h1, h2, h3, h4, h5, h6 { font-weight: normal; }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: normal;
+}
 
 * {
 	color: #535353;
 }
+
+/* Mobile */
+@media (max-width: 800px) {
+	.desktop-links {
+		display: none;
+	}
+}
+
+/* Desktop */
+@media (min-width: 801px) {
+	// Hide hamburger icon, menu, and menu overlay
+	.hamburger, .side-menu, .side-menu-overlay {
+		display: none;
+	}
+	.headbar {
+		text-align: left;
+		height: auto;
+		box-sizing: border-box;
+		padding: 0px 20px;
+
+		.desktop-links { padding: 10px 0px; }
+		ul { display: flex; }
+		li {
+			border-left: solid #fff 1px;
+			padding: 0px 10px;
+
+			&:first-of-type {
+				padding-left: 0px;
+				border-left: none;
+			}
+		}
+	}
+}
diff --git a/app/views/shared/_header-links.html.erb b/app/views/shared/_header-links.html.erb
@@ -0,0 +1,16 @@
+<ul class="header-links">
+  <li><%= link_to('Home', "/") %> </li>
+  <li><%= link_to('All Lines', lines_path) %> </li>
+  <li><%= link_to('About', page_path(:page_name => 'about')) %></li>
+  <% if current_user %>
+    <% if current_user.admin %>
+      <li><%= link_to('Site Settings', '/settings') %></li>
+    <% end %>
+    <li><%= link_to('Favorite Stops', favorites_path) %></li>
+    <li><%= link_to('Reported Issues', page_path(:page_name => 'history')) %></li>
+    <li><%= link_to('Log Out', destroy_user_session_path, :method => :delete) %></li>
+  <% else %>
+    <li><%= link_to('Sign In', new_user_session_path) %></li>
+    <li><%= link_to('Sign Up', new_user_registration_path) %></li>
+  <% end %>
+</ul>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
@@ -4,6 +4,9 @@
 		<div class="title"><%= Setting.site_name %></div>
 	</a>
 	<div class= "search"></div>
+	<div class="desktop-links">
+		<%= render "shared/header-links" %>
+	</div>
 </header>
 
 <div class="overlay-search">
@@ -16,21 +19,5 @@
 <div class="side-menu-overlay"></div>
 <div class="side-menu">
 	<div class="title"><%= Setting.site_name %> Menu</div>
-	<ul>
-		<li><%= link_to('Home', "/") %> </li>
-		<li><%= link_to('View Issues', view_issues_path) %></li>
-		<li><%= link_to('All Lines', lines_path) %> </li>
-		<li><%= link_to('About', page_path(:page_name => 'about')) %></li>
-		<% if current_user %>
-			<% if current_user.admin %>
-				<li><%= link_to('Site Settings', '/settings') %></li>
-			<% end %>
-			<li><%= link_to('Favorite Stops', favorites_path) %></li>
-			<li><%= link_to('Reported Issues', page_path(:page_name => 'history')) %></li>
-			<li><%= link_to('Log Out', destroy_user_session_path, :method => :delete) %></li>
-		<% else %>
-			<li><%= link_to('Sign In', new_user_session_path) %></li>
-			<li><%= link_to('Sign Up', new_user_registration_path) %></li>
-		<% end %>
-	</ul>
-</div>
+	<%= render "shared/header-links" %>
+</div>