Modifying <%= f.submit %>'s default CSS input class - css

I have been trying without much luck to get <%= f.submit %> to appear as the same as my other "buttons", all in a row. I have found this helpful post on modifying the class of f.submit, but realized upon examining its element in browser that it took on the class of input, regardless of which additional classes I added as option parameters, thus restricting its appearance.
Essentially, each of my other buttons has the following form:
<div class="sort-nav">
<ul>
<li><h4><%= link_to "Some stuff", some_link_path %></h4></li>
</ul>
</div>
And I was wondering if there is a way to fit all of these styles compacted into one class, and override that of the input class contained in f.submit. Thanks.
For edification, this button is going to be my "Follow"/Unfollow" button used to create or destroy Relationships, which I first intend to render a _follow_form partial with the following code:
<% if current_user.following?(#course) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
With each of the individual _followpartial looking like the following:
<%= form_for(current_user.relationships.build(followed_id: #course.id)) do |f| %>
<%= f.hidden_field :followed_id %>
<%= f.submit "Follow course" %>
<% end %>

a bit hackish but you can always use js to submit the form so instead of using f.submit, change it to
<div class="sort-nav">
<ul>
<li>
<h4><%= link_to_function "Some stuff", '$(this).closest("form").submit()' %></h4
</li>
</ul>
</div>

Related

How I take a link from my JSON data and make it into an image via Ruby on Rails?

<%= #schedule["data"][0]["visitorTeam"]["data"]["name"] %>
<%= #schedule["data"][0]["visitorTeam"]["data"]["logo_path"] %>
<%= #schedule["data"][0]["localTeam"]["data"]["name"] %>
<%= #schedule["data"][0]["localTeam"]["data"]["logo_path"] %>
Renders me
Rangers
https://cdn.sportmonks.com/images/soccer/teams/30/62.png
Celtic
https://cdn.sportmonks.com/images/soccer/teams/21/53.png
I'm creating a schedule page, so I'd like to set up the view so that it just goes to the same area of the respective JSON for each image. How do I make it so that it recognizes the link and turns it into an image every time it goes to "logo_path"?
I've tried something like
<%= image_tag <%= #schedule["data"][0]["localTeam"]["data"]["logo_path"] %> %>
but it didn't work for me. Any suggestions?
<%= image_tag #schedule["data"][0]["localTeam"]["data"]["logo_path"] %>
No need of an extra <%=.

Using article frontmatter when iterating in Middleman blog

Not the best title, but I'm honestly not sure on how to properly explain what I'm looking for help for.
So I'm using Middleman blog to well create my blog. Anyways, I'm using frontmatter to pass css that change the look of each page individually. I'm using 4 variables, link_color, text_color, bg_link. So what I want to do is reuse that same frontmatter information in the layout.html.erb file.
So the layout.html.erb is the standard
<% if paginate && num_pages > 1 %>
<p>Page <%= page_number %> of <%= num_pages %></p>
<% if prev_page %>
<p><%= link_to 'Previous page', prev_page %></p>
<% end %>
<% end %>
<% page_articles.each_with_index do |article, i| %>
<li class="article_summary">
<h1><%= link_to article.title, article, id: "#{i}" %></h1>
</li>
<% end %>
<% if paginate %>
<% if next_page %>
<p><%= link_to 'Next page', next_page %></p>
<% end %>
<% end %>
What I'm trying to do is for each article within that iterator is if the article has bg_color frontmatter then use that and change the color of the article.title if not, then do nothing. Currently if I try with something like:
<style>
<% if article.data.bg_color? %>
.article_summary a#<%= i %>{
color: rgb(<%=article.data.bg_color %>);
}
<% end %>
</style>
I'm doing it this way because my blog lives on Github.
Currently it works, but since it's just a simple iteration it gives every article that same color and not on a per article basis. So I'm trying to figure out the best way to utilize the index as some sort of id so that they're targeted individually.
Perhaps changing the li from a class to an id consisting of the index, but then I won't be able to apply a global style from the scss in the stylesheet folder no?
I've found a dirty method that works.
<% page_articles.each_with_index do |article, i| %>
<li class="article_summary" id="test_<%=i %>">
<h1><%= link_to article.title, article %></h1>
<style>
<% if article.data.bg_color? %>
#test_<%=i%> a{
color: <%=article.data.bg_color %>;
}
<% end %>
</style>
</li>
<% end %>
Pretty much added "test_" to the id (before I was just doing the index itself) and viola!

How to include "span" and "class" with submit button?

How can I make the new_value_path actually be a submit button that creates a new value instead of just refreshing back onto itself?
My current new.html.erb:
<h1>New Value</h1>
<%= render 'form' %>
<%= link_to new_value_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
I want to keep the class: 'btn' and the span class="glyphicon glyphicon-plus" I think it has something to do with CRUD, but I haven't found an answer that specifically deals with including a class and a span.
I had to solve the answer in the _form itself using f.submit

Dynamic css classes inside embedded ruby

A Persona has persona_id of either 1, 2 or 3. I want to assign a class type of either persona-1-button, persona-2-button or persona-3-button inside the embedded ruby. The following code is not working and I don't know why:
<% current_user.personas.each do |persona| %>
<% foo = persona.persona_id.to_s %>
<% bar = "persona-" + foo + "-button" %>
<%= link_to "Persona", persona_path(persona), class: "btn btn-medium bar" %>
<% end %>
I didn't do it the follwoing way because it seems you can't have a <%=%> inside a <%=%>:
<% current_user.personas.each do |persona| %>
<%= link_to "Persona", persona_path(persona), class: "btn btn-medium persona<%=persona.persona_id%>button" %>
<% end %>
You have it almost correct already.
The thing you need to realise is that when you're inside the <%/%> tags, you're in a Ruby context. That means, that the "..." creates a String inside which you can use regular Ruby string interpolation, like this:
<%= link_to "Persona", persona_path(persona), class: "btn btn-medium #{bar}" %>
You're placing a variable in Ruby context where you are bound by the rules of Ruby, not ERB. And in Ruby it's done using string interpolation:
<%= link_to "Persona", persona_path(persona), class: "btn btn-medium #{bar}" %>

How to apply custom size to text field in rails

I am writing a form with three text input fields. I have used text_field_tag to create them
<%= text_field_tag(:input_first) %>
<%= text_field_tag(:input_second) %>
<%= text_field_tag(:input_first) %>
Am using bootstrap css. I want to make the second input larger than the first and the third input. How can I achieve that?
I have tried the below, and even more and the input field size is not changing.
first
<%= text_field_tag(:input_second, :input_html => { :class => "input-large"}) %>
second
<%= text_field_tag(:input_second, nil, :class => "input-large") %>
third
<%= text_field_tag(:input_second, nil, :size=> 30) %>
fourth
<span class="input-large">
<%= text_field_tag(:input_second) %>
</span>
What wrong am I doing? Am a beginner in rails/css/html
ps: should I use text_field_tag or text_field ?
Bootstrap utilizes specific classes to control the width of input elements:
In a Rails template, you'd invoke a text_field_tag in the following manner:
<%= text_field_tag('input_second', nil, class: 'input-large') %>

Resources