Merge pull request #284 from TheDesignExchange/fix/navbar/#279

forget about using separate style sheet because sprockets is being annoying
TheDesignExchange · Nov 28, 2018 · fef9767 · fef9767
2 parents ce1763b + 06e635e
commit fef9767
Show file tree

Hide file tree

Showing 3 changed files with 220 additions and 9 deletions.
diff --git a/Gemfile b/Gemfile
@@ -77,3 +77,17 @@ gem "hash_control"
 
 
 gem 'recaptcha', :require => 'recaptcha/rails'
+
+gem 'sass-rails', '~> 5.0', '>= 5.0.6'
+
+# register sprockets
+if env.respond_to?(:register_transformer)
+  env.register_mime_type 'text/css', extensions: ['.css'], charset: :css
+  env.register_preprocessor 'text/css', MySprocketsExtension
+end
+
+if env.respond_to?(:register_engine)
+  args = ['.css', MySprocketsExtension]
+  args << { mime_type: 'text/css', silence_deprecation: true } if Sprockets::VERSION.start_with?("3")
+  env.register_engine(*args)
+end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -94,7 +94,7 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.7.0)
-    concurrent-ruby (1.0.5)
+    concurrent-ruby (1.1.3)
     countries (1.2.5)
       currencies (~> 0.4.2)
       i18n_data (~> 0.7.0)
@@ -166,7 +166,7 @@ GEM
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (4.2.1)
       railties (>= 3.2.16)
-    json (1.8.1)
+    json (1.8.6)
     kaminari (0.16.1)
       actionpack (>= 3.0.0)
       activesupport (>= 3.0.0)
@@ -246,6 +246,9 @@ GEM
       activesupport (>= 3.0)
       i18n
       polyamorous (~> 1.2)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
     recaptcha (1.1.0)
       json
     remotipart (1.2.1)
@@ -282,9 +285,13 @@ GEM
     ruby_parser (3.6.6)
       sexp_processor (~> 4.1)
     rubyzip (1.1.4)
-    sass (3.2.19)
-    sass-rails (5.0.4)
-      railties (>= 4.0.0, < 5.0)
+    sass (3.7.2)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sass-rails (5.0.7)
+      railties (>= 4.0.0, < 6)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
@@ -328,7 +335,7 @@ GEM
       daemons (>= 1.0.9)
       eventmachine (>= 1.0.0)
       rack (>= 1.0.0)
-    thor (0.20.0)
+    thor (0.20.3)
     thread_safe (0.3.6)
     tilt (2.0.8)
     turbolinks (2.2.2)
@@ -398,6 +405,7 @@ DEPENDENCIES
   rgl
   role_model (~> 0.8.2)
   rspec-rails (~> 3.5, >= 3.5.2)
+  sass-rails (~> 5.0, >= 5.0.6)
   seed_dump
   selenium-webdriver
   spreadsheet
@@ -412,4 +420,4 @@ DEPENDENCIES
   will_paginate
 
 BUNDLED WITH
-   1.16.2
+   1.17.1
diff --git a/app/views/layouts/_newestheader.html.haml b/app/views/layouts/_newestheader.html.haml
@@ -1,6 +1,7 @@
 %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}
 
-= stylesheet_link_tag "_headernav", :media => "all"
+-# sprockets doesn't work so abandoning this separate style sheet for now 
+-# = stylesheet_link_tag "_headernav", :media => "all"
 
 / Global site tag (gtag.js) - Google Analytics
 %script{:async => "", :src => "https://www.googletagmanager.com/gtag/js?id=UA-113963401-1"}
@@ -50,11 +51,199 @@
         $("#search-mobile").submit();
       }
     })
+  });
 
 
+:css
+  .navbar-nav .mobile-user-session {
+      display: none;
+  }
 
-  });
+  .navbar {
+      top: 0;
+      background-color: #ffffff;
+      position: fixed;
+      box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
+      font-family: 'Open Sans', sans-serif;
+      font-weight: normal;
+      font-size: 16px;
+      border: none;
+      border-radius: 0;
+      z-index: 2;
+      width: 100%;
+  }
+
+  .navbar a {
+      color: #4F4F4F;
+  }
+
+  .navbar .dropdown-menu {
+      font-size: 16px;
+  }
+
+  .navbar li a:hover, .navbar-nav li a:focus {
+      background-color: transparent;
+      color: #6BC06D;
+      opacity: 1;
+  }
+
+  .navbar li.active {
+      font-weight: 700;
+  }
+
+  li.active a {
+      color: #6BC06D;
+  }
+
+  #sign-in-btn {
+      border: 1px solid #828282;
+      font-size: 16px;
+      border-radius: 4px;
+      margin-left: 30px;
+  }
+
+  #sign-in-btn:hover {
+      color: #ffffff;
+      background-color:#828282;
+  }
+
+  .navbar-toggle .icon-bar {
+      background-color: #4F4F4F;
+  }
+
+  .navbar-toggle:hover .icon-bar {
+      background-color: #6BC06D;
+  }
+
+  #search-btn {
+      background-color: transparent;
+      position: relative;
+      top: 2px;
+      z-index: 2;
+  }
+
+  #search-btn:active, #search-btn:focus {
+      box-shadow: none;
+      outline: none
+  }
+
+  .search-icon {
+      background-color: transparent;
+      color: #4F4F4F;
+      cursor: pointer;
+      font-size: 16px;
+  }
+
+  .search-icon:hover {
+      color: #6BC06D;
+  }
+
+  #search-input {
+      position: absolute;
+      right: 0;
+      width: 0;
+      outline: none;
+      box-shadow: none;
+      border: none;
+  }
+
+  #search-input:focus {
+      border-bottom: 1px solid #4F4F4F;
+      width: 200px;
+  }
+
+
+  .search-group {
+      display: none;
+  }
+
+  #search {
+      display: block;
+  }
+
+  #search-mobile {
+      display: none;
+  }
+
+  // Collapse the navbar earlier and for smaller/mobile displays
+  @media (max-width: 850px) {
+
+      #mobile-login {
+          margin-top: 16px;
+      }
+
+      .navbar-nav .mobile-user-session {
+          display: block;
+          font-weight: bold;
+      }
+
+      #mobile-search-btn {
+          background-color: transparent;
+          z-index: 4;
+      }
+
+      #mobile-search-input {
+          outline: none;
+          box-shadow: none;
+          border: none;
+          border-bottom: 1px solid #4F4F4F;
+          position: absolute;
+          width: 200px;
+          right:16px;
+      }
 
+      #mobile-search-btn:active, #mobile-search-btn:focus {
+          box-shadow: none;
+          outline: none
+      }
+      .navbar-header {
+          float: none;
+      }
+      .navbar-toggle {
+          display: block;
+      }
+      .navbar-collapse {
+          border-top: 1px solid transparent;
+          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+      }
+      .navbar-collapse.collapse {
+          display: none!important;
+      }
+      .navbar-nav {
+          float: none!important;
+          margin: 7.5px -15px;
+      }
+      .navbar-nav>li {
+          float: none;
+      }
+      .navbar-nav>li>a {
+          padding-top: 10px;
+          padding-bottom: 10px;
+      }
+      .navbar-text {
+          float: none;
+          margin: 15px 0;
+      }
+      /* since 3.1.0 */
+      .navbar-collapse.collapse.in { 
+          display: block!important;
+      }
+      .collapsing {
+          overflow: hidden!important;
+      }
+      #search {
+          display: none;
+      }
+
+      #search-mobile {
+          display: block;
+          padding: 0 10px;
+      }
+
+      #sign-in-btn {
+          display: none;
+      }
+  }
 
 
 / bootstrap 3.3