show slim uconn banner on non-home views

core · Jun 2, 2016 · b2903a7 · b2903a7
1 parent ae23feb
commit b2903a7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 50 deletions.
diff --git a/src/cljs/ulysses/components/header.cljs b/src/cljs/ulysses/components/header.cljs
@@ -1,6 +1,7 @@
 (ns ulysses.components.header
   (:require [ulysses.components.basic :refer [link fa]]
             [ulysses.config :as config]
+            [ulysses.utils :refer [classes]]
             [re-frame.core :as re-frame :refer [subscribe]]))
 
 ;; ----------------------------------------------------------------------------
@@ -31,16 +32,21 @@
       [fa fa-id]]])
 
 (defn uconn-banner []
-  (let [ovpr-url "http://research.uconn.edu"]
-    [:nav.navbar.navbar-dark.uconn-banner
-      [link "http://uconn.edu" {:class "navbar-brand"}
-        [:img {:src "/img/uconn-wordmark-single-white.png"}]]
-      [:div.ovpr-sub
-        [link ovpr-url {:class "abbrev"} "OVPR"]
-        [link ovpr-url {:class "full"} "Office of the Vice President for Research"]]
-      [:ul.nav.navbar-nav.red-button-menu.pull-right
-        [uconn-banner-right-menu-item "http://uconn.edu/search" :search]
-        [uconn-banner-right-menu-item "http://uconn.edu/az/" :sort-alpha-asc]]]))
+  (let [page-with-args (subscribe [:page-with-args])]
+    (fn []
+      (let [[page _] @page-with-args
+            slim? (not= :home page)
+            ovpr-url "http://research.uconn.edu"]
+        [:nav.navbar.uconn-banner
+          {:class (classes {:slim slim?})}
+          [link "http://uconn.edu" {:class :navbar-brand}
+            [:img {:src "/img/uconn-wordmark-single-white.png"}]]
+          [:div.ovpr-sub
+            [link ovpr-url {:class :abbrev} "OVPR"]
+            [link ovpr-url {:class :full} "Office of the Vice President for Research"]]
+          [:ul.nav.navbar-nav.red-button-menu.pull-right
+            [uconn-banner-right-menu-item "http://uconn.edu/search" :search]
+            [uconn-banner-right-menu-item "http://uconn.edu/az/" :sort-alpha-asc]]]))))
 
 ;; ----------------------------------------------------------------------------
 ;; main

diff --git a/src/cljs/ulysses/pages/builder.cljs b/src/cljs/ulysses/pages/builder.cljs
@@ -147,10 +147,10 @@
           [:h3 "Word Cloud"]]]]])
 
 (defn builder-header
-  [op]
+  [{:keys [title purpose]}]
   [:div.builder-header
-    [:h3.text-xs-center.mb-15 (:title op)]])
-
+    [:h3.text-xs-center.mb-15 title]
+    [:p purpose]])
 
 ;; ----------------------------------------------------------------------------
 ;; main

diff --git a/src/sass/components/_uconn-banner.scss b/src/sass/components/_uconn-banner.scss
@@ -1,25 +1,62 @@
+@mixin slim-uconn-banner {
+  height: 40px;
+  margin-bottom: 0;
+
+  .ovpr-sub {
+    margin-top: 10px;
+
+    a {
+      font-size: 1rem;
+    }
+  }
+
+  .navbar-brand {
+    // margin-top: 10px;
+    padding: 10px 12px;
+
+    img {
+      width: 100px;
+    }
+  }
+
+  .red-button-menu {
+    margin-top: 0;
+
+    .nav-item {
+      .btn {
+        padding-top: 8px;
+      }
+    }
+  }
+
+  .banner-menu {
+    margin-top: 1px;
+  }
+}
+
 .uconn-banner {
   @include clearfix;
 
-  background-color: transparentize($gray-lighter, .3);
+  background: $gray-lighter;
   border-radius: 0;
   height: 60px;
   left: 0;
   margin-bottom: 8px;
   padding: 0 1rem;
-  // position: absolute;
   top: 0;
   user-select: none;
   width: 100%;
-  // z-index: 101;
 
   @media screen and (max-height: 400px) {
     display: none;
   }
 
+  &.slim {
+    @include slim-uconn-banner;
+  }
+
   .navbar-brand {
     background-color: $uconn-blue;
-    // margin-top: 14px;
     // padding: 18px 20px; // for overflowing brand
     padding: 14px 20px; // for flush
 
@@ -105,39 +142,7 @@
   }
 
   @media screen and (max-width: 850px) {
-    height: 40px;
-    margin-bottom: 0;
-
-    .ovpr-sub {
-      margin-top: 10px;
-
-      a {
-        font-size: 1rem;
-      }
-    }
-
-    .navbar-brand {
-      // margin-top: 10px;
-      padding: 10px 12px;
-
-      img {
-        width: 100px;
-      }
-    }
-
-    .red-button-menu {
-      margin-top: 0;
-
-      .nav-item {
-        .btn {
-          padding-top: 8px;
-        }
-      }
-    }
-
-    .banner-menu {
-      margin-top: 1px;
-    }
+    @include slim-uconn-banner;
   }
 
   @media screen and (max-width: 470px) {