redesign navbar for mobile

add NASSR logo to all brand views remove extra slash from NASSR URL hide logos on small screens compile CSS changes use hamburger menu in navbar center items in dropdown menu make the brand text smaller on all displays display logos in mobile dropdown menu make login dropdown centered in mobile dropdown hide logos on tablet-size screens expand width to hide logos update alabama brand with new navbar update bavs brand with new navbar update styles to center all forms in mobile dropdown switch remaining tenants to new navbar
performant-software · Mar 18, 2022 · 413087e · 413087e
1 parent cfc0908
commit 413087e
Show file tree

Hide file tree

Showing 54 changed files with 1,196 additions and 547 deletions.
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -151,7 +151,17 @@ img#neh-logo {
   }
 }
 
+#mobile-nav-toggle {
+  display: none !important;
+}
+
+#navbar-brand {
+  font-size: 1.5rem;
+}
+
 #globalnav {
+  float: right;
+
   img {
     margin-top: -8px;
     color: #ccc;
@@ -172,3 +182,51 @@ img#neh-logo {
     color: #fff;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  #globalnav .logo-list {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #mobile-nav-toggle {
+    display: initial !important;
+  }
+
+  #globalnav .logo-list {
+    display: initial;
+  }
+
+  #globalnav .logo-list ul {
+    padding: 10px 0;
+  }
+
+  .dropdown-menu {
+    margin: 0 auto !important;
+    min-width: 50% !important;
+    text-align: center !important;
+    max-width: 100%;
+  }
+
+  .dropdown-menu li ul {
+    margin: 0 auto;
+  }
+
+  .dropdown-menu a {
+    text-align: center;
+  }
+
+  .dropdown-menu .well {
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  .dropdown-menu li a {
+    padding-left: 15px !important;
+  }
+
+  #globalnav {
+    float: none;
+  }
+}
diff --git a/app/views/shared/_alabama_brand.html.erb b/app/views/shared/_alabama_brand.html.erb
@@ -1,38 +1,57 @@
-<a class="navbar-brand" href="/">COVE Studio <span style="color:<%= $DOMAIN_CONFIG['site_color'] %>;"><%= $DOMAIN_CONFIG['site_name'] %></span></a>
+<div class="navbar-header">
+	<button type="button" class="navbar-toggle" id="mobile-nav-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
+		<span class="sr-only">Toggle navigation</span>
+		<span class="icon-bar"></span>
+		<span class="icon-bar"></span>
+		<span class="icon-bar"></span>
+	</button>
+	<a class="navbar-brand" id="navbar-brand" href="/">COVE Studio - <span style="color:<%= $DOMAIN_CONFIG['site_color'] %>;"><%= $DOMAIN_CONFIG['site_name'] %></span></a>
+</div>
 
-<ul class="nav navbar-nav pull-right hidden-xs" id="globalnav">
+<div class="collapse navbar-collapse" id="navbar-collapse-1">
+	<ul class="nav navbar-nav" id="globalnav">
 
-<% if user_signed_in? %>
-	<li class="<%= 'active' if current_page?(edit_user_registration_path) %>"><%= link_to("My Profile", edit_user_registration_path, :id => "user-account-edit") %></li>
-	<li><a href="http://support.performantsoftware.com/c/cove" target="_blank">Help <i class="fa fa-external-link-square"></i></a></li>
-	<li class="<%= 'active' if current_page?(destroy_user_session_path) %>"><%= link_to('Logout', destroy_user_session_path) %></li>
-	<% if can? :manage, UserSet %>
-	<li class="<%= 'active' if current_page?(admin_students_path) %>"><%= link_to(raw('Manage Users <i class="fa fa-external-link-square"></i>'), admin_students_path, :target => '_blank') %></li>
+	<% if user_signed_in? %>
+		<li class="<%= 'active' if current_page?(edit_user_registration_path) %>"><%= link_to("My Profile", edit_user_registration_path, :id => "user-account-edit") %></li>
+		<li><a href="http://support.performantsoftware.com/c/cove" target="_blank">Help <i class="fa fa-external-link-square"></i></a></li>
+		<li class="<%= 'active' if current_page?(destroy_user_session_path) %>"><%= link_to('Logout', destroy_user_session_path) %></li>
+		<% if can? :manage, UserSet %>
+		<li class="<%= 'active' if current_page?(admin_students_path) %>"><%= link_to(raw('Manage Users <i class="fa fa-external-link-square"></i>'), admin_students_path, :target => '_blank') %></li>
+		<% end %>
+
+	<% else %>
+	<% if defined?(resource) != nil %>
+	<li><div class="dropdown dont-overflow">
+		<button class="dropdown-toggle menu-button" type="button" id="login-form" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+			Log in
+			<span class="caret"></span>
+		</button>
+		<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="login-form">
+			<li><%= render "/devise/sessions/sign_in" %></li>
+		</ul>
+	</div></li>
+	<% end %>
 	<% end %>
 
-<% else %>
-  <% if defined?(resource) != nil %>
-  <li><div class="dropdown dont-overflow">
-      <button class="dropdown-toggle menu-button" type="button" id="login-form" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          Log in
-          <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="login-form">
-          <li><%= render "/devise/sessions/sign_in" %></li>
-      </ul>
-  </div></li>
-  <% end %>
-<% end %>
+		<li class="logo-list">
+			<ul>
+				<li class="header-logo">
+					<%= link_to(image_tag("NAVSAlogo.png"), "http://navsa.org") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("BAVS", "https://bavs.ac.uk/") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("AVSA", "http://www.avsa.unimelb.edu.au/") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("NASSR", "https://www.nassr.ca/") %>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
 
-	<li class="header-logo">
-		<%= link_to(image_tag("NAVSAlogo.png"), "http://navsa.org") %>
-	</li>
-	<li class="header-logo divider"> | </li>
-	<li class="header-logo">
-		<%= link_to("BAVS", "https://bavs.ac.uk/") %>
-	</li>
-	<li class="header-logo divider"> | </li>
-	<li class="header-logo">
-		<%= link_to("AVSA", "http://www.avsa.unimelb.edu.au/") %>
-	</li>
-</ul>
diff --git a/app/views/shared/_bavs_brand.html.erb b/app/views/shared/_bavs_brand.html.erb
@@ -1,38 +1,55 @@
-<a class="navbar-brand" href="/">COVE Studio <span style="color:<%= $DOMAIN_CONFIG['site_color'] %>;"><%= $DOMAIN_CONFIG['site_name'] %></span></a>
+<div class="navbar-header">
+	<button type="button" class="navbar-toggle" id="mobile-nav-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
+		<span class="sr-only">Toggle navigation</span>
+		<span class="icon-bar"></span>
+		<span class="icon-bar"></span>
+		<span class="icon-bar"></span>
+	</button>
+	<a class="navbar-brand" id="navbar-brand" href="/">COVE Studio | <span style="color:<%= $DOMAIN_CONFIG['site_color'] %>;"><%= $DOMAIN_CONFIG['site_name'] %></span></a>
+</div>
 
-<ul class="nav navbar-nav pull-right hidden-xs" id="globalnav">
+<div class="collapse navbar-collapse" id="navbar-collapse-1">
+	<ul class="nav navbar-nav" id="globalnav">
+	<% if user_signed_in? %>
+		<li class="<%= 'active' if current_page?(edit_user_registration_path) %>"><%= link_to("My Profile", edit_user_registration_path, :id => "user-account-edit") %></li>
+		<li><a href="http://support.performantsoftware.com/c/cove" target="_blank">Help <i class="fa fa-external-link-square"></i></a></li>
+		<li class="<%= 'active' if current_page?(destroy_user_session_path) %>"><%= link_to('Logout', destroy_user_session_path) %></li>
+		<% if can? :manage, UserSet %>
+		<li class="<%= 'active' if current_page?(admin_students_path) %>"><%= link_to(raw('Manage Users <i class="fa fa-external-link-square"></i>'), admin_students_path, :target => '_blank') %></li>
+		<% end %>
 
-<% if user_signed_in? %>
-	<li class="<%= 'active' if current_page?(edit_user_registration_path) %>"><%= link_to("My Profile", edit_user_registration_path, :id => "user-account-edit") %></li>
-	<li><a href="http://support.performantsoftware.com/c/cove" target="_blank">Help <i class="fa fa-external-link-square"></i></a></li>
-	<li class="<%= 'active' if current_page?(destroy_user_session_path) %>"><%= link_to('Logout', destroy_user_session_path) %></li>
-	<% if can? :manage, UserSet %>
-	<li class="<%= 'active' if current_page?(admin_students_path) %>"><%= link_to(raw('Manage Users <i class="fa fa-external-link-square"></i>'), admin_students_path, :target => '_blank') %></li>
+	<% else %>
+	<% if defined?(resource) != nil %>
+	<li><div class="dropdown dont-overflow">
+		<button class="dropdown-toggle menu-button" type="button" id="login-form" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+			Log in
+			<span class="caret"></span>
+		</button>
+		<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="login-form">
+			<li><%= render "/devise/sessions/sign_in", footer: "/devise/sessions/bavs_member" %></li>
+		</ul>
+	</div></li>
+	<% end %>
 	<% end %>
 
-<% else %>
-  <% if defined?(resource) != nil %>
-  <li><div class="dropdown dont-overflow">
-      <button class="dropdown-toggle menu-button" type="button" id="login-form" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          Log in
-          <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="login-form">
-          <li><%= render "/devise/sessions/sign_in", footer: "/devise/sessions/bavs_member" %></li>
-      </ul>
-  </div></li>
-  <% end %>
-<% end %>
-
-	<li class="header-logo">
-		<%= link_to(image_tag("NAVSAlogo.png"), "http://navsa.org") %>
-	</li>
-	<li class="header-logo divider"> | </li>
-	<li class="header-logo">
-		<%= link_to("BAVS", "https://bavs.ac.uk/") %>
-	</li>
-	<li class="header-logo divider"> | </li>
-	<li class="header-logo">
-		<%= link_to("AVSA", "http://www.avsa.unimelb.edu.au/") %>
-	</li>
-</ul>
+		<li class="logo-list">
+			<ul>
+				<li class="header-logo">
+					<%= link_to(image_tag("NAVSAlogo.png"), "http://navsa.org") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("BAVS", "https://bavs.ac.uk/") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("AVSA", "http://www.avsa.unimelb.edu.au/") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("NASSR", "https://www.nassr.ca/") %>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
diff --git a/app/views/shared/_chicago_brand.html.erb b/app/views/shared/_chicago_brand.html.erb
@@ -1,38 +1,56 @@
-<a class="navbar-brand" href="/">COVE Studio <span style="color:<%= $DOMAIN_CONFIG['site_color'] %>;"><%= $DOMAIN_CONFIG['site_name'] %></span></a>
+<div class="navbar-header">
+	<button type="button" class="navbar-toggle" id="mobile-nav-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
+		<span class="sr-only">Toggle navigation</span>
+		<span class="icon-bar"></span>
+		<span class="icon-bar"></span>
+		<span class="icon-bar"></span>
+	</button>
+	<a class="navbar-brand" id="navbar-brand" href="/">COVE Studio | <span style="color:<%= $DOMAIN_CONFIG['site_color'] %>;"><%= $DOMAIN_CONFIG['site_name'] %></span></a>
+</div>
 
-<ul class="nav navbar-nav pull-right hidden-xs" id="globalnav">
+<div class="collapse navbar-collapse" id="navbar-collapse-1">
+	<ul class="nav navbar-nav" id="globalnav">
 
-<% if user_signed_in? %>
-	<li class="<%= 'active' if current_page?(edit_user_registration_path) %>"><%= link_to("My Profile", edit_user_registration_path, :id => "user-account-edit") %></li>
-	<li><a href="http://support.performantsoftware.com/c/cove" target="_blank">Help <i class="fa fa-external-link-square"></i></a></li>
-	<li class="<%= 'active' if current_page?(destroy_user_session_path) %>"><%= link_to('Logout', destroy_user_session_path) %></li>
-	<% if can? :manage, UserSet %>
-	<li class="<%= 'active' if current_page?(admin_students_path) %>"><%= link_to(raw('Manage Users <i class="fa fa-external-link-square"></i>'), admin_students_path, :target => '_blank') %></li>
-	<% end %>
+	<% if user_signed_in? %>
+		<li class="<%= 'active' if current_page?(edit_user_registration_path) %>"><%= link_to("My Profile", edit_user_registration_path, :id => "user-account-edit") %></li>
+		<li><a href="http://support.performantsoftware.com/c/cove" target="_blank">Help <i class="fa fa-external-link-square"></i></a></li>
+		<li class="<%= 'active' if current_page?(destroy_user_session_path) %>"><%= link_to('Logout', destroy_user_session_path) %></li>
+		<% if can? :manage, UserSet %>
+		<li class="<%= 'active' if current_page?(admin_students_path) %>"><%= link_to(raw('Manage Users <i class="fa fa-external-link-square"></i>'), admin_students_path, :target => '_blank') %></li>
+		<% end %>
 
-<% else %>
-  <% if defined?(resource) != nil %>
-  <li><div class="dropdown dont-overflow">
-      <button class="dropdown-toggle menu-button" type="button" id="login-form" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          Log in
-          <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="login-form">
-          <li><%= render "/devise/sessions/sign_in" %></li>
-      </ul>
-  </div></li>
-  <% end %>
-<% end %>
+	<% else %>
+	<% if defined?(resource) != nil %>
+	<li><div class="dropdown dont-overflow">
+		<button class="dropdown-toggle menu-button" type="button" id="login-form" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+			Log in
+			<span class="caret"></span>
+		</button>
+		<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="login-form">
+			<li><%= render "/devise/sessions/sign_in" %></li>
+		</ul>
+	</div></li>
+	<% end %>
+	<% end %>
 
-	<li class="header-logo">
-		<%= link_to(image_tag("NAVSAlogo.png"), "http://navsa.org") %>
-	</li>
-	<li class="header-logo divider"> | </li>
-	<li class="header-logo">
-		<%= link_to("BAVS", "https://bavs.ac.uk/") %>
-	</li>
-	<li class="header-logo divider"> | </li>
-	<li class="header-logo">
-		<%= link_to("AVSA", "http://www.avsa.unimelb.edu.au/") %>
-	</li>
-</ul>
+		<li class="logo-list">
+			<ul>
+				<li class="header-logo">
+					<%= link_to(image_tag("NAVSAlogo.png"), "http://navsa.org") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("BAVS", "https://bavs.ac.uk/") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("AVSA", "http://www.avsa.unimelb.edu.au/") %>
+				</li>
+				<li class="header-logo divider"> | </li>
+				<li class="header-logo">
+					<%= link_to("NASSR", "https://www.nassr.ca/") %>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>