Round location buttons, horizontal

app/assets/javascripts/application.js.erb

@@ -24,6 +24,29 @@ function toggleData(name, id) {
   $('#' + name + main).toggle();
 }
 
+function toggle_machine_data(name, id) {
+  if (name == 'add_machine_location') {
+    $('#add_machine_location_' + id).toggle();
+  } else {
+    $('#add_machine_location_' + id).hide();
+  }
+  if (name == 'add_picture_location') {
+    $('#add_picture_location_' + id).toggle();
+  } else {
+    $('#add_picture_location_' + id).hide();
+  }
+  if (name == 'recent_location_activity_location') {
+    $('#recent_location_activity_location_' + id).toggle();
+  } else {
+    $('#recent_location_activity_location_' + id).hide();
+  }
+  if (name == 'former_machines_location') {
+    $('#former_machines_location_' + id).toggle();
+  } else {
+    $('#former_machines_location_' + id).hide();
+  }
+}
+
 function clearInfoWindows() {
   if (markers) {
     for (i in markers) {

app/assets/stylesheets/application.scss.erb

@@ -1861,7 +1861,9 @@ div.machine_condition_meta {
 }
 
 .add_picture_location,
-.add_machine_location {
+.add_machine_location,
+.recent_location_activity_location,
+.former_machines_location {
   background-color: var(--bg_vlightpurple);
 }
 
@@ -2188,17 +2190,47 @@ input.lookup_search_input:focus {
   width: 100%;
 }
 
+.quick_buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.quick_button_sub_container {
+  flex-direction: column;
+  align-items: center;
+  max-width: 80px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.quick_button_desc {
+  color: var(--brightpurple);
+  font-family: $Nunito_600SemiBold;
+  font-size: 15px;
+}
+
+.quick_button_content_header {
+  color: var(--dark);
+  font-family: $Nunito_700Bold;
+  font-size: 18px;
+  padding: 15px;
+  text-align: center;
+}
+
 .add_picture_location_toggle,
 .add_machine_location_toggle,
 .recent_location_activity_location_toggle,
 .former_machines_location_toggle {
   color: #000e18;
   font-family: $Nunito_600SemiBold;
   background: var(--buttons);
-  @include radius(10px);
+  @include radius(25px);
   margin: 10px auto;
   text-align: center;
-  width: 300px;
+  width: 50px;
+  height: 50px;
   box-shadow: 2px 5px 10px var(--shadow);
   -webkit-box-shadow: 2px 5px 10px var(--shadow);
 }
@@ -2403,7 +2435,7 @@ input.score {
 .desc_show_location {
   color: var(--darkgrey);
   font-size: 13px;
-  line-height: 15px;
+  line-height: 18px;
   font-family: $italic;
   white-space: pre-wrap;
   margin-left: 23px;
@@ -2544,6 +2576,10 @@ img.banner_icon {
   padding: 0 8px 0 0;
 }
 
+.quick_buttons img.banner_icon {
+  padding: 0;
+}
+
 img.score_banner_icon {
   height: 26px;
   background: none;

app/assets/stylesheets/mobile-application.css.erb

@@ -805,7 +805,8 @@ span.machine_condition_text {
 .add_machine_location_toggle.sub_nav_item,
 .recent_location_activity_location_toggle.sub_nav_item,
 .former_machines_location_toggle.sub_nav_item {
-  width: 90%;
+  width: 50px;
+  height: 50px;
 }
 
 #search_results {

app/controllers/location_picture_xrefs_controller.rb

@@ -3,6 +3,10 @@ class LocationPictureXrefsController < InheritedResources::Base
   has_scope :region
   before_action :authenticate_user!, except: %i[index show]
 
+  def form
+    render partial: 'location_picture_xrefs/form', locals: { l: Location.find(params[:id]) }
+  end
+
   def create
     @location_picture_xref = LocationPictureXref.new(location_picture_xref_params)
 

app/controllers/locations_controller.rb

@@ -1,7 +1,7 @@
 class LocationsController < InheritedResources::Base
   respond_to :xml, :json, :html, :js, :rss
   has_scope :by_location_name, :by_location_id, :by_ipdb_id, :by_opdb_id, :by_machine_id, :by_machine_single_id, :by_machine_name, :by_city_id, :by_state_id, :by_machine_group_id, :by_zone_id, :by_operator_id, :by_type_id, :by_at_least_n_machines, :by_at_least_n_machines_city, :by_at_least_n_machines_zone, :by_at_least_n_machines_type, :by_center_point_and_ne_boundary, :region, :by_is_stern_army, :user_faved, :manufacturer
-  before_action :authenticate_user!, except: %i[index show autocomplete autocomplete_city render_machines render_machines_count render_machine_names_for_infowindow render_scores render_last_updated render_location_detail]
+  before_action :authenticate_user!, except: %i[index show autocomplete autocomplete_city render_machines render_machines_count render_machine_names_for_infowindow render_scores render_last_updated render_location_detail render_former_machines render_recent_activity]
 
   def create
     @location = Location.new(location_params)
@@ -94,6 +94,14 @@ def render_location_detail
     render partial: 'locations/render_location_detail', locals: { l: Location.find(params[:id]) }
   end
 
+  def render_former_machines
+    render partial: 'locations/render_former_machines', locals: { l: Location.find(params[:id]) }
+  end
+
+  def render_recent_activity
+    render partial: 'locations/render_recent_activity', locals: { l: Location.find(params[:id]) }
+  end
+
   def update_metadata
     l = Location.find(params[:id])
 

app/helpers/locations_helper.rb

@@ -8,6 +8,15 @@ def banner(type, header_text, icon, obj = nil)
     html.html_safe
   end
 
+  def quick_buttons(type, icon, obj = nil)
+    html = <<HERE
+  <div id="#{type}_banner#{"_#{obj.id}" if obj}" class="sub_nav_item #{type}_toggle" onclick="toggle_machine_data('#{type}'#{", #{obj.id}" if obj});">
+  #{icon}
+  </div>
+HERE
+    html.html_safe
+  end
+
   def search_banner(type, header_text)
     html = <<HERE
   <div id="#{type}_banner" class="search_banner">

app/views/location_picture_xrefs/_add_picture.html.haml

@@ -1,10 +1,10 @@
-- icon_path = image_tag('icons/image.svg', :alt => 'Upload Picture Icon', :class => 'banner_icon')
-- if !user_signed_in?
-  =link_to new_user_session_path, :class => "no_underline" do
-    %div.sub_nav_item.add_picture_location_toggle
-      =icon_path
-      %span Upload a picture
-- else
-  = banner('add_picture_location', 'Upload a picture', icon_path, location)
-  %div[location, :add_picture]{:style => 'display:none;'}
-    = render :partial => 'location_picture_xrefs/form',  :locals => {:location => location}
+%div[location, :add_picture]{:style => 'display:none;'}
+
+:javascript
+  $(function() {
+    $('#add_picture_location_banner_#{location.id}').click(function () {
+      $('#add_picture_location_#{location.id}').html(loadingHTML());
+      $('#add_picture_location_#{location.id}').load('/location_picture_xrefs/#{location.id}/form');
+    });
+  });
+

app/views/location_picture_xrefs/_form.html.haml

@@ -1,15 +1,16 @@
+%div.quick_button_content_header Upload a Picture
 %span.red.font14.p_10.block Choose a picture that gives a feel for the place. No need to include a picture of every single machine.
-= form_for LocationPictureXref.new, :id => "new_location_picture_xref_#{location.id}", :html => {:id => "new_location_picture_xref_#{location.id}", :multipart => true}, :remote => true do |f|
-  = f.hidden_field :location_id, { :value => location.id }
+= form_for LocationPictureXref.new, :id => "new_location_picture_xref_#{l.id}", :html => {:id => "new_location_picture_xref_#{l.id}", :multipart => true}, :remote => true do |f|
+  = f.hidden_field :location_id, { :value => l.id }
   = f.file_field :photo, :id => 'file_chooser_button'
   %br/
   = f.submit "Upload", :class => 'submit_picture'
 
 :javascript
-  $('#new_location_picture_xref_#{location.id}').submit(function () {
+  $('#new_location_picture_xref_#{l.id}').submit(function () {
     var form = $(this);
     $(".submit_picture").attr('disabled', true);
-    $("#add_picture_location_#{location.id} .info").html(loadingHTML());
+    $("#add_picture_location_#{l.id} .info").html(loadingHTML());
     $.ajax({
       url: form.attr('action'),
       type: 'POST',
@@ -18,13 +19,13 @@
       contentType: false,
       success: function(data) {
         window.alert("Thanks for uploading that picture!");
-        toggleData('add_picture_location', #{location.id});
-        document.getElementById('new_location_picture_xref_#{location.id}').reset();
+        toggleData('add_picture_location', #{l.id});
+        document.getElementById('new_location_picture_xref_#{l.id}').reset();
         $(".submit_picture").attr('disabled', false);
 
-        $("#location_detail_location_#{location.id}").html(loadingHTML());
-        $.get("/locations/#{location.id}/render_location_detail", function(data) {
-          $("#location_detail_location_#{location.id}").html(data);
+        $("#location_detail_location_#{l.id}").html(loadingHTML());
+        $.get("/locations/#{l.id}/render_location_detail", function(data) {
+          $("#location_detail_location_#{l.id}").html(data);
         });
       }
     });

app/views/locations/_add_machine.html.haml

@@ -1,17 +1,9 @@
-- icon_path = image_tag('icons/plus.svg', :alt => 'Add Machine Icon', :class => 'banner_icon')
-- if !user_signed_in?
-  =link_to new_user_session_path, :class => "no_underline" do
-    %div.sub_nav_item.add_machine_location_toggle
-      =icon_path
-      %span Add a machine
-- else
-  = banner('add_machine_location', 'Add a machine', icon_path, location)
-  %div[location, :add_machine]{:style => 'display:none'}
+%div[location, :add_machine]{:style => 'display:none'}
 
-  :javascript
-    $(function() {
-      $('#add_machine_location_banner_#{location.id}').click(function () {
-        $('#add_machine_location_#{location.id}').html(loadingHTML());
-        $('#add_machine_location_#{location.id}').load('/locations/#{location.id}/render_add_machine');
-      });
+:javascript
+  $(function() {
+    $('#add_machine_location_banner_#{location.id}').click(function () {
+      $('#add_machine_location_#{location.id}').html(loadingHTML());
+      $('#add_machine_location_#{location.id}').load('/locations/#{location.id}/render_add_machine');
     });
+  });

app/views/locations/_former_machines.html.haml

@@ -0,0 +1,9 @@
+%div[location, :former_machines]{:style => 'display:none;'}
+
+:javascript
+  $(function() {
+    $('#former_machines_location_banner_#{location.id}').click(function () {
+      $('#former_machines_location_#{location.id}').html(loadingHTML());
+      $('#former_machines_location_#{location.id}').load('/locations/#{location.id}/render_former_machines');
+    });
+  });

app/views/locations/_recent_activity.html.haml

@@ -0,0 +1,9 @@
+%div[location, :recent_location_activity]{:style => 'display:none'}
+
+:javascript
+  $(function() {
+    $('#recent_location_activity_location_banner_#{location.id}').click(function () {
+      $('#recent_location_activity_location_#{location.id}').html(loadingHTML());
+      $('#recent_location_activity_location_#{location.id}').load('/locations/#{location.id}/render_recent_activity');
+    });
+  });

app/views/locations/_render_add_machine.html.haml

@@ -1,4 +1,5 @@
-%span.info Select a machine and then click the Add button.
+%div.quick_button_content_header Add a Machine
+%span.red.font14.p_10.block Select a machine and then click the Add button.
 = form_tag location_machine_xrefs_path, :method => 'post', :id => "add_new_machine_#{l.id}" do
   = hidden_field_tag :location_id, l.id
   = select_tag "add_machine_by_id_#{l.id}", options_for_select(['']) + options_from_collection_for_select(Machine.all.sort_by(&:massaged_name), 'id', 'name_and_year', params["add_machine_by_id_#{l.id}"]), :class => 'lookup_search_select'

app/views/locations/_render_former_machines.html.haml

@@ -1,11 +1,8 @@
-- icon_path = image_tag('machine-pink.png', :alt => 'Recent Activity Icon', :class => 'banner_icon former_machines')
-= banner('former_machines_location', 'Former machines', icon_path, location)
-%div[location, :former_machines]{:style => 'display:none;'}
-  %span.font16.center.block.mb_20.mt_20 Machines that used to be here
-  - location.former_machines.each do |former_machines|
-    %div.recent_activity_container{:style => 'padding-left: 20px;'}
-      %div.recent_activity_submission.font16.bold.brightpurple #{former_machines.machine_name}
-      %div.former_machines_date.font14
-        Removed on
-        %br/
-        #{former_machines.created_at.strftime("%b %d, %Y")}
+%div.quick_button_content_header Machines That Used to be Here
+- l.former_machines.each do |former_machines|
+  %div.recent_activity_container{:style => 'padding-left: 20px;'}
+    %div.recent_activity_submission.font16.bold.brightpurple #{former_machines.machine_name}
+    %div.former_machines_date.font14
+      Removed on
+      %br/
+      #{former_machines.created_at.strftime("%b %d, %Y")}

app/views/locations/_render_location_detail.html.haml

@@ -29,8 +29,41 @@
 	= render :partial => 'locations/render_update_metadata', :locals => {:l => l}
 %div.location_thumbs[l, :thumbs]
 	= render :partial => 'location_picture_xrefs/show_thumbs', :locals => {:location_picture_xrefs => l.location_picture_xrefs}
-= render :partial => 'locations/render_recent_activity', :locals => {:location => l}
-= render :partial => 'locations/render_former_machines', :locals => {:location => l}
+%div.quick_buttons
+	- icon_path3 = image_tag('icons/plus.svg', :alt => 'Add Machine Icon', :class => 'banner_icon')
+	%div.quick_button_sub_container
+		- if !user_signed_in?
+			=link_to new_user_session_path, :class => "no_underline" do
+				%div.sub_nav_item.add_machine_location_toggle
+					=icon_path3
+					%div.quick_button_desc Add a machine
+		- else
+			= quick_buttons('add_machine_location', icon_path3, l)
+			%div.quick_button_desc Add a machine
+
+	- icon_path4 = image_tag('icons/image.svg', :alt => 'Upload Picture Icon', :class => 'banner_icon')
+	%div.quick_button_sub_container
+		- if !user_signed_in?
+			=link_to new_user_session_path, :class => "no_underline" do
+				%div.sub_nav_item.add_picture_location_toggle
+					=icon_path4
+					%div.quick_button_desc Upload a picture
+		- else
+			= quick_buttons('add_picture_location', icon_path4, l)
+			%div.quick_button_desc Upload a picture
+
+	- icon_path = image_tag('icons/newspaper-variant-multiple-outline.svg', :alt => 'Recent Activity Icon', :class => 'banner_icon recent_activity')
+	%div.quick_button_sub_container
+		= quick_buttons('recent_location_activity_location', icon_path, l)
+		%div.quick_button_desc Recent Activity
+
+	- icon_path2 = image_tag('machine-pink.png', :alt => 'Recent Activity Icon', :class => 'banner_icon former_machines')
+	%div.quick_button_sub_container
+		= quick_buttons('former_machines_location', icon_path2, l)
+		%div.quick_button_desc Former machines
+
+= render :partial => 'locations/recent_activity', :locals => {:location => l}
+= render :partial => 'locations/former_machines', :locals => {:location => l}
 = render :partial => 'locations/add_machine', :locals => {:location => l}
 = render :partial => 'location_picture_xrefs/add_picture', :locals => {:location => l}
 = render :partial => 'locations/render_machines_count', :locals => {:location => l}