Merge pull request #485 from UCLALibrary/URS-499_beta-banner-design

Implement Beta banner design
UCLALibrary · Oct 28, 2019 · adaf11d · adaf11d
2 parents 586bb0a + aeb09f5
commit adaf11d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/app/assets/stylesheets/ursus.scss b/app/assets/stylesheets/ursus.scss
@@ -1,4 +1,5 @@
 @import 'ursus/banner';
+@import 'ursus/beta';
 @import 'ursus/breakpoints';
 @import 'ursus/buttons';
 @import 'ursus/citation';

diff --git a/app/assets/stylesheets/ursus/_beta.scss b/app/assets/stylesheets/ursus/_beta.scss
@@ -0,0 +1,16 @@
+.beta {
+  color: #ffd100;
+  font-weight: 700;
+  position: relative;
+  top: 0.16em;
+  left: 1em;
+  font-size: .875em;
+  letter-spacing: 0.05em;
+}
+.beta-bar {
+  background-color: #ffd100;
+}
+.beta-text {
+  padding: 2px 0px 2px 22px;
+  font-size: .875em;
+}
diff --git a/app/assets/stylesheets/ursus/_navbar.scss b/app/assets/stylesheets/ursus/_navbar.scss
@@ -44,7 +44,7 @@
 
 .navbar-text-logo:hover {
   color: $ucla-gold !important;
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 .navbar-pipe::after {
@@ -58,6 +58,7 @@
 
 .topbar {
   .nav-item a {
+    padding-left: 30px;
     color: $white !important;
     font-weight: 300;
     font-size: 0.9em;
@@ -71,7 +72,7 @@
 
   .nav-item a:hover {
     color: $ucla-gold !important;
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   .nav-link {
@@ -122,6 +123,7 @@
   }
 
   .nav-item {
+    padding-left: 30px;
     padding: 8px 0;
   }
 
@@ -188,6 +190,15 @@
 
   .nav-item {
     padding: 8px 0;
+    .about {
+      a {
+        color: $white !important;
+      }
+      a:hover {
+        color: $ucla-gold !important;
+        text-decoration: underline;
+      }
+    }
   }
 
   .nav-item:nth-child(1) {
@@ -201,5 +212,15 @@
       text-decoration: none;
     }
   }
-
 }
+
+.give-us-feedback {
+  padding: 10px 0px 10px 30px;
+  a {
+    color: $ucla-gold !important;
+  }
+  a:hover {
+    color: $ucla-gold !important;
+    text-decoration: underline;
+  }
+}
diff --git a/app/views/shared/_header_navbar.html.erb b/app/views/shared/_header_navbar.html.erb
@@ -1,10 +1,13 @@
+<nav class='navbar navbar-expand-md beta-bar'>
+  <span class='beta-text'>UCLA's (Beta) Digital Library Interface | Content from our <a href='http://digital2.library.ucla.edu/'  target='_blank'>Legacy Site</a> is being migrated into this interface.</span>
+</nav>
 <nav class='navbar navbar-expand-md navbar-dark bg-dark topbar' role='navigation'>
   <div class='container-fluid'>
 
     <div class='navbar-logo-block'>
       <a href='https://library.ucla.edu' class='navbar-brand'><span class='logo-name'>UCLA Library Logo</span></a>
       <span class='navbar-pipe'></span>
-      <%= link_to 'Digital Collections', root_path, class: 'navbar-text-logo' %>
+      <%= link_to 'Digital Collections', root_path, class: 'navbar-text-logo' %> <span class='beta'>BETA</span>
     </div>
 
     <button class='navbar-toggler custom-toggler' type='button' data-toggle='collapse' data-target='#user-util-collapse' aria-controls='user-util-collapse' aria-expanded='false' aria-label='Toggle navigation'>
@@ -13,8 +16,8 @@
 
     <div class='collapse navbar-collapse justify-content-md-end' id='user-util-collapse'>
       <ul class='navbar-nav nav ml-auto'>
-        <li class='nav-item'><a href='/about' class='nav-link'>About</a></li>
-        <li class='nav-item'><a href='mailto:dlp@library.ucla.edu' class='nav-link feedback-link'>Give us feedback</a></li>
+        <li class='nav-item'><a href='/about'>About</a></li>
+        <li class='give-us-feedback'><a href='mailto:dlp@library.ucla.edu' >Give us feedback</a></li>
       </ul>
     </div>