Changing font style of rails "notices" => - css

I have the following notice when a user logs out of my website.
def destroy
session[:user_id] = nil
redirect_to root_url, :notice => "Logged out!"
end
Only slight little bugbear, the "Logged out!" notice is in a sans font style, rather than a font style more in keeping with my website (i.e., font-family: sans-serif).
How do I go about changing this...?
Perhaps:
def destroy
session[:user_id] = nil
redirect_to root_url, :notice => <div class="some_class">"Logged out!</div>
end
Where we can then edit the .some_class class within css...
Here is the application.html.crb code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<!--<div id="user_nav">
<% if current_user %>
Logged in as <%= current_user.email %>.
<%= link_to "Log Out", log_out_path %>
<% else %>
<%= link_to "Sign Up", sign_up_path %> or
<%= link_to "Log In", log_in_path %>
<% end %>
</div>-->
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>
<%= yield %>
</body>
</html>

Within application.html.crb, edit the following:
<div class="flash">
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>
</div>

Where there you go, you need to add the class there
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}", class: 'flash' %>
<% end %>

Related

Rails: Can't add CSS class from variable in link_to

SyntaxError occurs when:
<% #list1.each do |list| %>
<div class="well well-sm">
<%= list.test_name %> <%= link_to 'Do It', '#', class: <%= list.test_type %>
</div>
<% end %>
Tried also
class: <%= #{list}.test_type %>
and so on... what's wrong with it?
You have excess erb open tag <%=, instead:
<%= list.test_name %> <%= link_to 'Do It', '#', class: <%= list.test_type %>
^^^open close^^ ^^open ^^^open close^^
use:
<%= list.test_name %> <%= link_to 'Do It', '#', class: list.test_type %>
I suggest you read An Introduction to ERB Templating
try this:
<%= link_to 'Do It', '#', class: list.test_type %>
or
<%= link_to 'Do It', '#', class: "#{list.test_type}" %>

Can I create beautiful buttons inside a form_for helper?

I have a login form thanks to form_for helper and in my opinion it has an ugly button styling.
And I would like to have a button similar to this.
I'm wondering is there any way to customize form_for submit button?
_form.html
Log In
<%= form_tag '/authenticate' do %>
<div class="email">
<%= label_tag :email %><br />
<%= text_field_tag :email, params[:email] %>
</div>
<div class="password">
<%= label_tag :password %><br />
<%= password_field_tag :password %>
</div>
<%= submit_tag "Log In" %>
<% end %>
It looks like you are using bootstrap as CSS Framework, so you can do this:
<%= submit_tag 'Log In', class: 'btn btn-default' %>
You can add a class to the submit button, and then give style to that class.
<%= submit_tag 'Log In', class: 'button-class' %>

Class tag automation on form_for? What is the best practice for this syntax?

I was on developing Rails App with bootstrap CSS, depends on the DRY concept, can this form be simplified?
<%= form_for #user , :html => {:class => "form-horizontal"} do |f| %>
<fieldset>
<legend>Sign Up</legend>
<div class="form-group">
<%= f.label :email ,:class=>"control-label" %><br />
<%= f.text_field :email, :class =>"form-control", :placeholder=>"Email" %>
</div>
<div class="form-group">
<%= f.label :password ,:class=>"control-label" %><br />
<%= f.password_field :password, :class =>"form-control", :placeholder=>"Password" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation,:class=>"control-label" %><br/>
<%= f.password_field :password_confirmation , :class =>"form-control", :placeholder=>"Confirm Password" %>
</div>
<%= f.submit 'Submit', :class => 'btn btn-primary' %>
</fieldset>
<% end %>
I mean like the tag fieldset , legend, the :class=>"control-label" and the others.
What you need is a custom form builder. The basic point is to encapsulate field decoration (and even labeling, in many cases), so that you get similar output to your code above, with something like this:
<%= form_for #user, builder: MyFormBuilder do |f| %>
<%= f.input :email %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.button :submit %>
<% end %>
There are many tutorials on how to build your own, it can be extremely handy and it is a great way to learn more. If you want a prepared solution, have a look at the simple_form gem.

google-maps-api-3 ruby on rails

I am getting the following error
ReferenceError: Can't find variable: google
when I am rendering a page the first time which should display the google maps. The first part of the page is shown correctly, but at the bottom the entire div with the map is missing. After click on refresh the page is rendered correctly. This error is the same in dev and prod and shows up for page in the application containing a google map. Don't know how to fix it.
Here are more details about the error from the Safari's console:
TypeError: 'undefined' is not a constructor (evaluating 'new google.maps.OverlayView()')
TypeError: 'undefined' is not a constructor (evaluating 'new google.maps.OverlayView')
Below is the code of one of this pages generating the errors above.
<% provide(:title, 'Current TBMs Location and Statistics') %>
<% if signed_in? %>
<h3>TBMs location and statistics - Today's date: <%=#current_date%></h3>
<div>
<div class="pull-left">
<%= link_to "Daily Progress", progresstable_path, class: "btn btn-sm btn-primary" %>
<%= link_to "Daily Stats", tbms_stats_table_path, class: "btn btn-sm btn-primary" %>
</div>
<div class="pull-right">
<%= "Today's: " %>
<%= link_to "Schedule", schedules_path, class: "btn btn-sm btn-primary" %>
<%= link_to "Readings List", all_readings_path, class: "btn btn-sm btn-primary" %>
</div>
</div>
</br></br>
<div class="container">
<div class="pull-left">
<h5>
<%= "TBM ID: " %>
<%= #tbms_progress_W.tbm_id %>
<%= "aka TBM1 or 26900"%>
</h5>
<%= "Last Date: " %>
<%= #tbms_progress_W.daily_date %>
<%= "Max Station: " %>
<%= number_with_precision #tbm_w_location, precision: 2 %>
<%= "Status: " %>
<%= #tbms_progress_W.tbm_status %>
<%= "Since: " %>
<%= #tbm_w_days_since %>
</br>
<%= "Days total: " %>
<%= #tbm_w_days_since_commissioned %>
<%= "Days working: "%>
<%= #tbm_w_working_days %>
<%= "Days stopped: " %>
<%= #tbm_w_stopped_days %>
<%= "Located between: " %>
<% if #smp_w_after.present? %>
<%= #smp_w_after.smp_id %>
<% else %>
<%= "Unknown" %>
<% end %>
<%= " and: " %>
<% if #smp_w_before.present? %>
<%= #smp_w_before.smp_id %>
<% else %>
<%= "Unknown" %>
<% end %>
</br>
<%= "Total excavated: " %>
<% if #tbm_w_location.present? %>
<%= #tbm_w_location - #tbms_W_initial.max_station %> <%="m"%>
<% else %>
<%= "Unknown" %>
<% end %>
<%= "Excavation speed: " %>
<% if #tbm_w_location.present? %>
<%= number_with_precision (#tbm_w_location - #tbms_W_initial.max_station) / #tbm_w_working_days, precision: 2 %> <%="m/day"%>
<% else %>
<%= "Unknown" %>
<% end %>
<%= "Excavated since yesterday cut off time: " %>
<% if #tbm_w_location.present? %>
<%= #tbm_w_location - #tbms_progress_W2.max_station %> <%="m"%>
<% else %>
<%= "Unknown" %>
<% end %>
</br>
<%= "Average distance excavated in the previous 24 hours: " %>
<% if #tbm_w_location.present? %>
<%= #tbms_progress_W2.max_station - #tbms_progress_W1.max_station %> <%="m"%>
<% else %>
<%= "Unknown" %>
<% end %>
<% if #tbm_w_lat == nil or #tbm_w_lon == nil %>
</br>
<%= "TBM latitude and longitude cannot be calculated, missing near SMP northing and easting" %>
</br>
<%= "TBM approximate address: not available" %>
<% else %>
</br>
<%= "Latitude: " %>
<%= number_with_precision #tbm_w_lat, precision: 6 %>
<%= " Longitude: " %>
<%= number_with_precision #tbm_w_lon, precision: 6 %>
<%= "Address: " %>
<% if #tbm_w_result.empty? %>
<%= "Cannot calculate TBM W address, Geocoder unavailable" %>
<% else %>
<%= #tbm_w_result[0].address %>
<% end %>
<% end %>
<% if #current_date != #tbms_progress_W.daily_date %>
<h6 class="error-message">
<%= "Today's location for TBM W is not loaded" %>
<%= " Last TBM W recorded date was: " %>
<%=#tbms_progress_W.daily_date %>
</h6>
<% end %>
<h6> SMPs ahead of the current TBM W location: </h6>
<% if #tbm_w_location.present? and #smps_w_ahead.present? %>
<ol>
<li>
<%= "First line: " %>
<%= #smps_w_ahead[0].smp_id %> <%= #smps_w_ahead[0].final_inst_status %> <%= #smps_w_ahead[1].smp_id %> <%= #smps_w_ahead[1].final_inst_status %>
</li>
<li>
<%= "Second line: " %>
<%= #smps_w_ahead[2].smp_id %> <%= #smps_w_ahead[2].final_inst_status %> <%= #smps_w_ahead[3].smp_id %> <%= #smps_w_ahead[3].final_inst_status %>
</li>
<li>
<%= "Third line: " %>
<%= #smps_w_ahead[4].smp_id %> <%= #smps_w_ahead[4].final_inst_status %> <%= #smps_w_ahead[5].smp_id %> <%= #smps_w_ahead[5].final_inst_status %>
</li>
<li>
<%= "Fourth line: " %>
<%= #smps_w_ahead[6].smp_id %> <%= #smps_w_ahead[6].final_inst_status %> <%= #smps_w_ahead[7].smp_id %> <%= #smps_w_ahead[7].final_inst_status %>
</li>
</ol>
<% else %>
<%= "Unknown" %>
<% end %>
<h5>
<%= "TBM ID: " %>
<%= #tbms_progress_E.tbm_id %>
<%= "aka TBM2 or 27000"%>
</h5>
<%= "Last Date: " %>
<%= #tbms_progress_E.daily_date %>
<%= "Max Station: " %>
<%= number_with_precision #tbm_e_location, precision: 2 %>
<%= "Status: " %>
<%= #tbms_progress_E.tbm_status %>
<%= "Since: " %>
<%= #tbm_e_days_since %>
</br>
<%= "Days total: " %>
<%= #tbm_e_days_since_commissioned %>
<%= "Days working: "%>
<%= #tbm_e_working_days %>
<%= "Days stopped: " %>
<%= #tbm_e_stopped_days %>
<%= "Located between: " %>
<% if #smp_e_after.present? %>
<%= #smp_e_after.smp_id %>
<% else %>
<%= "Unknown" %>
<% end %>
<%= " and: " %>
<% if #smp_e_before.present? %>
<%= #smp_e_before.smp_id %>
<% else %>
<%= "Unknown" %>
<% end %>
</br>
<%= "Total excavated: " %>
<% if #tbm_e_location.present? %>
<%= #tbm_e_location - #tbms_E_initial.max_station %> <%="m"%>
<% else %>
<%= "Unknown" %>
<% end %>
<%= "Excavation speed: " %>
<% if #tbm_e_location.present? %>
<%= number_with_precision (#tbm_e_location - #tbms_E_initial.max_station) / #tbm_e_working_days, precision: 2 %> <%="m/day"%>
<% else %>
<%= "Unknown" %>
<% end %>
<%= "Excavated since yesterday cut off time: " %>
<% if #tbm_e_location.present? %>
<%= #tbm_e_location - #tbms_progress_E2.max_station %> <%="m"%>
<% else %>
<%= "Unknown" %>
<% end %>
</br>
<%= "Average distance excavated in the previous 24 hours: " %>
<% if #tbm_e_location.present? %>
<%= #tbms_progress_E2.max_station - #tbms_progress_E1.max_station %> <%="m"%>
<% else %>
<%= "Unknown" %>
<% end %>
<% if #tbm_e_lat == nil or #tbm_e_lon == nil %>
</br>
<%= "TBM latitude and longitude cannot be calculated, missing near SMP northing and easting" %>
</br>
<%= "TBM approximate address: not available" %>
<% else %>
</br>
<%= "Latitude: " %>
<%= number_with_precision #tbm_e_lat, precision: 6 %>
<%= " Longitude: " %>
<%= number_with_precision #tbm_e_lon, precision: 6 %>
<%= "Address: " %>
<% if #tbm_e_result.empty? %>
<%= "Cannot calculate TBM E address, Geocoder unavailable" %>
<% else %>
<%= #tbm_e_result[0].address %>
<% end %>
<% end %>
<% if #current_date != #tbms_progress_E.daily_date %>
<h6 class="error-message">
<%= "Today's location for TBM E is not loaded" %>
<%= " Last TBM E recorded date was: " %>
<%=#tbms_progress_E.daily_date %>
</h6>
<% end %>
<h6> SMPs ahead of the current TBM E location: </h6>
<% if #tbm_e_location.present? and #smps_e_ahead.present? %>
<ol>
<li>
<%= "First line: " %>
<%= #smps_e_ahead[0].smp_id %> <%= #smps_e_ahead[0].final_inst_status %> <%= #smps_e_ahead[1].smp_id %> <%= #smps_e_ahead[1].final_inst_status %>
</li>
<li>
<%= "Second line: " %>
<%= #smps_e_ahead[2].smp_id %> <%= #smps_e_ahead[2].final_inst_status %> <%= #smps_e_ahead[3].smp_id %> <%= #smps_e_ahead[3].final_inst_status %>
</li>
<li>
<%= "Third line: " %>
<%= #smps_e_ahead[4].smp_id %> <%= #smps_e_ahead[4].final_inst_status %> <%= #smps_e_ahead[5].smp_id %> <%= #smps_e_ahead[5].final_inst_status %>
</li>
<li>
<%= "Fourth line: " %>
<%= #smps_e_ahead[6].smp_id %> <%= #smps_e_ahead[6].final_inst_status %> <%= #smps_e_ahead[7].smp_id %> <%= #smps_e_ahead[7].final_inst_status %>
</li>
</ol>
<% else %>
<%= "Unknown" %>
<% end %>
</div>
</div>
<div style='width: 800px;'>
<div id="map" style='width: 920px; height: 500px;'></div>
</div>
<% else %>
<%= render 'instruments/unsigned' %>
<% end %>
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script>
<script type="text/javascript">
buildMap (<%=raw #hash.to_json %>);
</script>
Problem solved: put all links refs to css and js in application.html.erb, after turbolinks and good by errors. Seems that browsers need to cache all of this before page x in the app is due for render.

Rails form in one line with css

I am trying to create a rails form but I would like all of its input fields to appear in one line. I have no experience with css and I am relatively new to rails. My form is the following:
<%= form_for #need, url: shipping_company_fleet_ship_voyage_needs_path(:voyage_id => #voyage.id), :html => {:class => "needForm"} do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :quantity %>
<%= f.number_field :quantity %>
<%= f.hidden_field :voyage_id, :value => #voyage.id %>
<%= f.submit "Add need" %>
<% end %>
I have tried various things, like requesting for class .needForm float: left or display: inline but it does not seem to affect the input fields.
Can someone point me to a direction or an online example? I read all related questions here but the answers were not very helpful for me. Do I have to use bootstrap classes to make it work?
I managed to get the desired result by using bootstrap default styles for forms (check this link, I used 'form-inline' and 'input-mini': http://getbootstrap.com/2.3.2/base-css.html#forms)
<%= form_for #need, url: shipping_company_fleet_ship_voyage_needs_path(:voyage_id => #voyage.id), :html => {:class => "form-inline"} do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.number_field :quantity, :value => 1, class: 'input-mini' %>
<%= f.hidden_field :voyage_id, :value => #voyage.id %>
<%= f.submit "+", class: 'btn btn-small btn-primary' %>
<% end %>

Resources