initial implementation of Materialize/ initial work on nav behavor on…

… various screen sizes
zluo16 · Jun 21, 2017 · fc294a1 · fc294a1
1 parent 8aa3947
commit fc294a1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 28 deletions.
diff --git a/Gemfile b/Gemfile
@@ -14,6 +14,7 @@ gem 'pg'
 gem 'puma', '~> 3.7'
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0'
+
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # See https://github.com/rails/execjs#readme for more supported runtimes

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -80,6 +80,8 @@ GEM
       nokogiri (>= 1.5.9)
     mail (2.6.6)
       mime-types (>= 1.16, < 4)
+    materialize-sass (0.98.2)
+      sass (~> 3.3)
     method_source (0.8.2)
     mime-types (3.1)
       mime-types-data (~> 3.2015)
@@ -183,6 +185,7 @@ DEPENDENCIES
   coffee-rails (~> 4.2)
   jbuilder (~> 2.5)
   listen (>= 3.0.5, < 3.2)
+  materialize-sass
   pg
   pry
   puma (~> 3.7)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,45 +2,56 @@
 <html>
   <head>
     <title>RecipeSharing</title>
+    <!-- Latest compiled and minified CSS -->
     <%= csrf_meta_tags %>
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <!--Import Google Icon Font-->
+      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
+    <script type="text/javascript" src="js/materialize.min.js"></script>
   </head>
 
   <body>
-    <!--  navbar -->
-    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-      <div class="container">
-        <div class="navbar-header">
-          <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <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" href="<%= root_url %>"/>Home</a>
-        <%if logged_in?%>
-          <a class="navbar-brand" href="<%= user_path(current_user) %>"/>Hi, <%= current_user.name%></a>
-          <%= link_to "Log Out", signout_path, method: :post, class: "navbar-brand"%>
-
-          <%= link_to "All Users", users_path, method: :get, class: "navbar-brand"%>
-        <% else %>
-        <a class="navbar-brand" href="<%= new_user_path %>"/>Sign Up</a>
-        <a class="navbar-brand" href="<%= signin_path %>"/>Sign In</a>
-          <%end%>
-        </div>
-
+    <!--Import jQuery before materialize.js-->
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <!-- Compiled and minified JavaScript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
 
+    <!-- Dropdown Structure -->
+    <ul id="dropdown1" class="dropdown-content">
+      <%if logged_in?%>
+        <li><a href="<%= user_path(current_user) %>">My Profile</a></li>
+        <li><%= link_to "Sign Out", signout_path, method: :post%></li>
+      <% else %>
+      <li class="show-on-medium-and-down"><a href="<%= new_user_path %>">Sign Up</a></li>
+      <li class="show-on-medium-and-down"><a href="<%= signin_path  %>">Sign In</a></li>
+      <%end%>
+        <li class="divider"></li>
+        <li class="show-on-small"><a href="<%= users_path %>">All Users</a></li>
+        <li class="show-on-small"><a href="<%= recipes_path %>">All Recipes</a></li>
+    </ul>
+    <nav>
+      <div class="nav-wrapper">
+        <a href="<%= root_url %>" class="brand-logo left">RecipeSharingApp</a>
+        <ul class="right">
+          <li class="hide-on-med-and-down"><a href="<%= users_path %>">All Users</a></li>
+          <li class="hide-on-med-and-down"><a href="<%= recipes_path %>">All Recipes</a></li>
+          <%if logged_in?%>
+          <!-- Dropdown Trigger -->
+            <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hi, <%= current_user.name%><i class="material-icons right">arrow_drop_down</i></a></li>
+          <% else %>
 
-        <div class="navbar-collapse collapse">
-          <ul class="nav navbar-nav">
-           <!--  nav here -->
-          </ul>
-        </div><!--/.nav-collapse -->
+            <li class="hide-on-small"><a href="<%= new_user_path %>">Sign Up</a></li>
+            <li class="hide-on-small"><a href="<%= signin_path  %>">Sign In</a></li>
+          <%end%>
+        </ul>
       </div>
-    </div>
+    </nav>
 
     <%= yield %>
+
   </body>
 </html>