Commit a12dd24f

mo <mokha@cisco.com>
2017-08-31 22:24:58
convert cakes index.
master
1 parent de9d124
Changed files (4)
app
views
cakes
_index.html.erb
index.html.erb
layouts
_header.html.erb
application.html.erb
app/views/cakes/_index.html.erb
@@ -1,20 +1,17 @@
-<div class="row-fluid">
-  <% @cakes.each_slice(6).each do |batch| %>
-    <ul class='thumbnails'>
-      <% batch.each do |cake| %>
-        <% cache cake do %>
-          <li class="span2">
-            <div class="thumbnail">
-              <%= link_to cake_path(cake) do %>
-                <%= image_tag cake.primary_image.url_for(:thumb), alt: cake.name %>
-              <% end %>
-            </div>
-          </li>
-        <% end %>
+<div class="card-columns">
+  <% @cakes.each do |cake| %>
+    <div class='card'>
+      <%= link_to cake_path(cake) do %>
+        <%= image_tag cake.primary_image.url_for(:thumb), alt: cake.name, class: 'card-img-top' %>
       <% end %>
-    </ul>
+      <div class="card-body">
+        <h4 class="card-title"><%= cake.name %></h4>
+        <p class="card-text"><%= cake.story %></p>
+        <p class="card-text"><small class="text-muted"><%= cake.created_at %></small></p>
+      </div>
+    </div>
   <% end %>
 </div>
-<div id='more-button-row' class="row-fluid">
+<div id='more-button-row' class="row">
   <%= link_to_next_page @cakes, 'More...', params: { cache: false, sort: params[:sort], q: params[:q] }, remote: true, class: 'btn pull-right more-button hidden', data: { disable_with: 'loading...' } %>
 </div>
app/views/cakes/index.html.erb
@@ -1,12 +1,13 @@
 <% provide(:description, "CakeSide is a free site to share your cake creations and ideas with other cake fanatics like yourself") -%>
 <% provide(:search_path, request.env['PATH_INFO'] || cakes_path) %>
-<% provide(:container_class, 'container-fluid') %>
+<% provide(:container_class, 'container') %>
+
 <% unless user_signed_in?  -%>
-  <div class="row-fluid">
-    <div class="span6">
+  <div class="row">
+    <div class="col">
       <%= image_tag "cakeside-logo.png", :alt => "Welcome to Cakeside", style: 'max-height:186px' %>
     </div>
-    <div class="span6">
+    <div class="col">
       <h1>Welcome cake enthusiast!</h1>
       <p style="font-size:15px;">
       <strong>Make</strong> cakes, <strong>sell</strong> cakes, or just <strong>love</strong> eating them? You've come to the right place!
@@ -19,16 +20,25 @@
 <% end -%>
 
 <div id="bakery">
-  <div class="row-fluid">
-    <ul class="nav nav-tabs">
-      <li class="<%= "active" if params["category"].blank? %>"><%= link_to "All", url_for(params.merge(category: nil)) %></li>
-      <% @categories.each do |category| %>
-        <li class="<%= "active" if params["category"] == category.slug %>"><%= link_to category.name.pluralize, url_for(params.merge(category: category.slug)) %></li>
-      <% end %>
-      <li class="<%= params[:sort] == "oldest" ? "active" : "" %> pull-right"><%= link_to "Oldest", url_for(params.merge(sort: "oldest")) %></li>
-      <li class="<%= params[:sort].blank? || params[:sort] == "newest" ? "active" : "" %> pull-right"><%= link_to "Newest", url_for(params.merge(sort: "newest")) %></li>
-    </ul>
+  <div class="dropdown float-right">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Sort
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      <%= link_to "Newest", url_for(params.merge(sort: "newest")), class: "dropdown-item" %>
+      <%= link_to "Oldest", url_for(params.merge(sort: "oldest")), class: "dropdown-item" %>
+    </div>
   </div>
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <%= link_to "All", url_for(params.merge(category: nil)), class: "nav-link #{"active" if params["category"].blank?}" %>
+    </li>
+    <% @categories.each do |category| %>
+      <li class="nav-item ">
+        <%= link_to category.name.pluralize, url_for(params.merge(category: category.slug)), class: "nav-link #{"active" if params["category"] == category.slug}" %>
+      </li>
+    <% end %>
+  </ul>
   <%= render partial: 'index' %>
 </div>
app/views/layouts/_header.html.erb
@@ -1,48 +1,49 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <%= link_to "Cakeside", root_path, class: 'navbar-brand', style: 'color:hotpink;' %>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item <%= "active" if params["controller"] == "cakes" %>">
-        <%= link_to "Cakes", cakes_path(q: params[:q]), class: 'nav-link' %>
-      </li>
-      <li class="nav-item <%= "active" if params["controller"] == "profiles" %>">
-        <%= link_to "Artists", profiles_path(q: params[:q]), class: 'nav-link' %>
-      </li>
-      <li class="nav-item <%= "active" if params["controller"] == "tutorials" %>">
-        <%= link_to "Tutorials", tutorials_path(q: params[:q]), class: 'nav-link' %>
-      </li>
-      <% if user_signed_in? %>
-      <li class="nav-item dropdown">
-        <%= link_to my_dashboard_path, id: 'navbarDropdownMenuLink', class: 'nav-link dropdown-toggle', data: { toggle: 'dropdown' }, 'aria-haspopup'=>"true", 'aria-expanded'=>"false" do %>
-          <%= avatar_for(current_user, size: 24) %> <%= current_user.name %>
-        <% end %>
-        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" data-no-turbolink>
-          <%= link_to my_root_path(anchor: 'cakes/new'), class: 'dropdown-item' do %>
-            <i class="fa fa-upload"></i> New Cake
-          <% end %>
-          <%= link_to my_root_path(anchor: 'tutorials/new'), class: 'dropdown-item' do %>
-            <i class="fa fa-pencil-square"></i> New Tutorial
-          <% end %>
-          <%= link_to my_dashboard_path, class: 'dropdown-item' do %>
-            <i class="fa fa-inbox"></i> Dashboard
+<div class="container">
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <%= link_to "Cakeside", root_path, class: 'navbar-brand', style: 'color:hotpink;' %>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item <%= "active" if params["controller"] == "cakes" %>">
+          <%= link_to "Cakes", cakes_path(q: params[:q]), class: 'nav-link' %>
+        </li>
+        <li class="nav-item <%= "active" if params["controller"] == "profiles" %>">
+          <%= link_to "Artists", profiles_path(q: params[:q]), class: 'nav-link' %>
+        </li>
+        <li class="nav-item <%= "active" if params["controller"] == "tutorials" %>">
+          <%= link_to "Tutorials", tutorials_path(q: params[:q]), class: 'nav-link' %>
+        </li>
+        <% if user_signed_in? %>
+        <li class="nav-item dropdown">
+          <%= link_to my_dashboard_path, id: 'navbarDropdownMenuLink', class: 'nav-link dropdown-toggle', data: { toggle: 'dropdown' }, 'aria-haspopup'=>"true", 'aria-expanded'=>"false" do %>
+            <%= avatar_for(current_user, size: 24) %> <%= current_user.name %>
           <% end %>
-          <%= link_to my_root_path(anchor: 'profile/me'), class: 'dropdown-item' do %>
-            <i class="fa fa-cog"></i> Settings
-          <% end %>
-          <%= link_to logout_path, method: :delete, class: 'dropdown-item' do %>
-            <i class="fa fa-sign-out"></i> Sign Out
-          <% end %>
-        </div>
-      </li>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" data-no-turbolink>
+            <%= link_to my_root_path(anchor: 'cakes/new'), class: 'dropdown-item' do %>
+              <i class="fa fa-upload"></i> New Cake
+            <% end %>
+            <%= link_to my_root_path(anchor: 'tutorials/new'), class: 'dropdown-item' do %>
+              <i class="fa fa-pencil-square"></i> New Tutorial
+            <% end %>
+            <%= link_to my_dashboard_path, class: 'dropdown-item' do %>
+              <i class="fa fa-inbox"></i> Dashboard
+            <% end %>
+            <%= link_to my_root_path(anchor: 'profile/me'), class: 'dropdown-item' do %>
+              <i class="fa fa-cog"></i> Settings
+            <% end %>
+            <%= link_to logout_path, method: :delete, class: 'dropdown-item' do %>
+              <i class="fa fa-sign-out"></i> Sign Out
+            <% end %>
+          </div>
+        </li>
+        <% end %>
+      </ul>
+      <%= form_tag(configuration_for(:search_path, search_path), method: :get, name: "search", class: "form-inline my-2 my-lg-0") do %>
+        <%= text_field_tag :q, params[:q], class: 'form-control mr-sm-2', placeholder: 'Search', 'aria-label' => "Search" %>
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       <% end %>
-    </ul>
-    <%= form_tag(configuration_for(:search_path, search_path), method: :get, name: "search", class: "form-inline my-2 my-lg-0") do %>
-      <%= text_field_tag :q, params[:q], class: 'form-control mr-sm-2', placeholder: 'Search', 'aria-label' => "Search" %>
-      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-    <% end %>
-  </div>
-</nav>
-
+    </div>
+  </nav>
+</div>
app/views/layouts/application.html.erb
@@ -19,10 +19,7 @@
 <%= favicon_link_tag 'apple-touch-icon-114x114.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "114x114" %>
 <%= yield :head %>
 <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
-<!--[if lt IE 9]>
-  <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
-<%= render "layouts/embedly"%>
+<%# render "layouts/embedly"%>
 <%= yield :javascript %>
 <%= csrf_meta_tags %>
 </head>
@@ -33,6 +30,6 @@
   <%= yield %>
 </div> <!-- /container -->
 <%= render "layouts/footer" %>
-<%= render "layouts/google_analytics" %>
+<%# render "layouts/google_analytics" %>
 </body>
 </html>