Reload the sidebar after each PJAX request

- Add a border radius, whiten the "guide page"
- Extract organization actions into partial

app/assets/javascripts/organizations.js

@@ -1,12 +1,17 @@
-$(document).pjax('a.organization-link', '#organization-content', {push: false} );
-$(document).pjax('a.edit-link-pjax', '#organization-content', {push: false} );
+$(document).pjax('a.organization-link', '#organization-content', {push: false});
+$(document).pjax('a.edit-link-pjax', '#organization-content', {push: false});
 
 $(document).on('submit', '#edit-form form', function(event) {
-    $.pjax.submit(event, '#organization-content', {push: false});
+  $.pjax.submit(event, '#organization-content', {push: false});
 });
 
 $('#organization-content').on('pjax:success', function() {
-    if (('.org-address').length >= 1 ){
-        displayMap($('.org-address').text());
-    }
-})
+  if (('.org-address').length >= 1 ) {
+    displayMap($('.org-address').text());
+  }
+
+  $.pjax.reload("#sidebar-pjax-container", {
+    url: "/organizations/sidebar",
+    push: false,
+  });
+});

app/assets/stylesheets/_layout.scss

@@ -1,5 +1,6 @@
 body {
   background-color: $base-background-color;
+  background-color: #F2F2F2;
 }
 
 .content {

app/assets/stylesheets/_sidebar.scss

@@ -1,9 +1,13 @@
-.organization {
-  $actions-height: 3 * $base-spacing;
+.sidebar-container {
+  @include span-columns(3 of 12);
 
-  &-sidebar {
-    @include span-columns(3 of 12);
+  .organization-sidebar {
+    @include fill-parent;
   }
+}
+
+.organization {
+  $actions-height: 3 * $base-spacing;
 
   &-listing {
     $listing-height: 2 * $base-spacing;
@@ -55,9 +59,14 @@
   &-details {
     @include padding($base-spacing);
     @include span-columns(9 of 12);
-    border: $base-border;
     bottom: 0;
     position: absolute;
     top: $actions-height;
+    background-color: #fff;
+    box-shadow: 0 0 6px rgba(#000, 0.3);
   }
 }
+
+.button {
+  @include button;
+}

app/controllers/organizations_controller.rb

@@ -9,6 +9,10 @@ def pending
     @organizations = Organization.where(status: "pending")
   end
 
+  def sidebar
+    @organization_groups = Organization.all.group_by(&:status)
+  end
+
   def show
   end
 

app/views/organizations/_individual_actions.html.erb

@@ -0,0 +1,23 @@
+<div class="organization-actions organization-details-actions">
+  <%= link_to(
+    "Edit",
+    edit_organization_path(@organization),
+    class: "edit-link-pjax",
+  ) %>
+
+  <% if @organization.status == "pending" %>
+    <%= link_to(
+      "Approve",
+      organization_path(@organization, organization: { status: "approved" }),
+      class: "button edit-link-pjax",
+      method: :put,
+    ) %>
+  <% else %>
+    <%= link_to(
+      "Unapprove",
+      organization_path(@organization, organization: { status: "pending" }),
+      class: "button edit-link-pjax",
+      method: :put,
+    ) %>
+  <% end %>
+ </div>

app/views/organizations/_sidebar.html.erb

@@ -0,0 +1 @@
+sidebar.html.erb

app/views/organizations/index.html.erb

@@ -1,28 +1,5 @@
-<div class="sidebar organization-sidebar">
-  <div class="organization-search">
-    <input type="search" />
-  </div>
-
-  <% @organization_groups.each do |status, group| %>
-    <div class="organization-category"%>
-      <h2><%= status.titleize %> Records (<%= group.count %>)</h1>
-    </div>
-
-    <ul class="organization-list">
-      <% group.each do |organization| %>
-        <%= content_tag(:li, class: "organization-listing organization-#{
-            organization.valid? ? "valid" : "invalid"
-        }") do %>
-          <%= link_to(
-            organization.name,
-            organization,
-            remote: true,
-            class: 'organization-link'
-          ) %>
-        <% end %>
-      <% end %>
-    </ul>
-  <% end %>
+<div class="sidebar-container" id="sidebar-pjax-container">
+<%= render 'sidebar' %>
 </div>
 
 <div class="main organization-main">

app/views/organizations/show.js.erb

@@ -1,4 +1,4 @@
-<%= link_to 'Edit', edit_organization_path(@organization), remote: true, class: 'edit-link-pjax' %>
+<%= render "individual_actions" %>
 
 <p>
   <strong>Name:</strong>
@@ -42,9 +42,3 @@
 </p>
 
 <div id="map-canvas" style="height: 300px;"></div>
-
-<% if @organization.status == 'pending' %>
-  <%= link_to 'Approve', organization_path(@organization, organization: { status: 'approved' }), :method => :put %>
-<% else %>
-  <%= link_to 'Unapprove', organization_path(@organization, organization: { status: 'pending' }), :method => :put %>
-<% end %>

app/views/organizations/sidebar.html.erb

@@ -0,0 +1,26 @@
+<div class="sidebar organization-sidebar">
+  <div class="organization-search">
+    <input type="search" />
+  </div>
+
+  <% @organization_groups.each do |status, group| %>
+    <div class="organization-category"%>
+      <h2><%= status.titleize %> Records (<%= group.count %>)</h1>
+    </div>
+
+    <ul class="organization-list">
+      <% group.each do |organization| %>
+        <%= content_tag(:li, class: "organization-listing organization-#{
+            organization.valid? ? "valid" : "invalid"
+        }") do %>
+          <%= link_to(
+            organization.name,
+            organization,
+            remote: true,
+            class: 'organization-link'
+          ) %>
+        <% end %>
+      <% end %>
+    </ul>
+  <% end %>
+</div>

config/routes.rb

@@ -4,6 +4,7 @@
   get "/api", to: "api#all"
   get "/pending", to: "organizations#pending", as: :pending_organizations
 
+  get "/organizations/sidebar", to: "organizations#sidebar"
   resources :organizations
 
   root to: "organizations#index"