Rails 3: How do you style will_paginate links? - html

In coding layout is the link styled like
<span>Previous</span>
<a href="#" class="class1 class2 class3"><span>Next</span>
I tried to search and I found some possible modifications of a shape of these two links. It's:
<div class="pag">
<%= will_paginate #data, :page_links => false, :next_label => '' %>
</div>
<div class="pag">
<%= will_paginate #data, :page_links => false, :previous_label => '' %>
</div>
My question: How can I update the second example to the shape of the first example? My problem is those two span elements...
Thanks

It's can be very easy - just add html markup for your paginate components to your config/locales/en.yml file
for example:
en:
hello: "Hello world"
will_paginate:
previous_label: <span class="glyph glyph-prev"></span>
next_label: <span class="glyph glyph-next"></span>
It's all!

http://thewebfellas.com/blog/2010/8/22/revisited-roll-your-own-pagination-links-with-will_paginate-and-rails-3 You can have your own formatter so you can customize anything you want.

Wiki
en:
will_paginate:
previous_label: "← Previous"
next_label: "Next →"
page_gap: "…"
https://github.com/mislav/will_paginate/wiki/I18n#translating-will_paginate-output

Related

How to display a models attribute in a read only text area

For background I am using Ruby on Rails with the Devise gem. One of the Users attributes is a string called bio. My goal is for a profile page to display the bio in a read only text box. I feel the lines the text box displays gives a nice aesthetic. I am also using bootstrap.
Pages Controller:
def profile
user=User.all
respond_to do |format|
format.html { render :profile, locals: { user: user } }
end
end
The code for my profile.html.erb
<div class="row">
<div class="col-5">
<%= current_user.text_area :bio, readonly: true %>%
</div>
The error I am getting is NoMethodError in Pages#profile - undefined method `text_area'
Use css in order to achieve the same result as text_area. Place your current_user.bio attribute in a <p> or <div> element and give specific width to that element so the line can break. For example:
<div class="row">
<div class="col-5">
<p class='specific-width'> <%= current_user.bio %> </p>
</div>
</div>
Then in css file:
.specific-width{
width: 30px;
}

Rails: Why does simple_format add a leading newline?

I'm creating an app that has a form where the user enters data into text areas. I want to display these entries, and simple_format is pretty great since it converts the user's end-of-lines into break statements for HTML -- but it's adding a disgusting newline to the front! This is causing the content of 'entry' to be one line lower than it should be (with a blank 'newline' directly above it), and it's throwing off the formatting everywhere on my webpage.
def display_entry(entry)
if entry.blank?
'n/a'
else
simple_format(entry)
end
I tried this:
def display_entry(entry)
if entry.blank?
'n/a'
else
entry.slice!(0) # delete disgusting newline
simple_format(entry)
end
But to no avail -- this merely sliced off the first character of my content, and the disgusting newline persevered. This makes me think simple_format is arbitrarily adding a newline to text that doesn't begin with newline. Why?? And how do I kill it??
EDIT: code from view:
<h2 align="center"> User </h2>
<div id="left_half">
<div class="ibox">
<h3 align="center"> User Info</h3>
<div class="left">
<%= f.label :name, 'name' %>
</div>
<div class ="right">
<%= f.text_field :name, class: 'small-text-area' %>
</div>
...
...
When I display name, it has the leading newline.
<input class="toggle-box" id="id1" type="checkbox">
<label for="id1">User</label>
<div>
<div class="ibox_show">
<div class="left_show">
<%= 'name' %>
</div>
<div class ="right_show">
<%= display_entry(#user.name) %>
</div>
...
...
Are you sure that it's not wrapping entry in
<p>
tags that you need to style?
use this:
style_format(your_Text, html_options = {style: "display: inline"})
this should do the trick to get rid of an ending newline (referred to https://apidock.com/rails/v5.2.3/ActionView/Helpers/TextHelper/simple_format)
simple_format(f.text_field, {}, wrapper_tag: "div",)
the curly braces ARE IMPORTANT as the 2nd parameter. do not leave them out. Simple_format defaults to "p" tag which ends up giving a trailing line break.

Rails: Adding an empty tag plus content to link_to

I'm trying to generate a link using the link_to helper that will output the following HTML:
<i class="some_class"></i>Link Name
However the code I'm using to try to accomplish this:
link_to(tag("i", class: options[:icon]) + title, url)
...is outputting:
<i class="some_class">Link Name</i>
Why is it doing this, and how can I fix it? Thanks.
EDIT:
I believe I found the issue.
<i> tags are not self-closable tags in HTML5. Therefore the text after the i is treated as that element's content.
Have you tried using the block format of link_to?
<%= link_to url do %>
<%= tag("i", class: options[:icon]) %>
Link Name
<% end %>
Tweak that to your needs and maybe you'll get what you're looking for.
This is the icon tag helper I use in my applications which I frequently pass as the first argument to link_to, which can either be used to create a icon tag alone, or an icon tag followed by text.
def icon_tag(icon, *args)
options = args.extract_options!
text = args.first || options.delete(:text)
if text.nil?
content_tag :i, "", class: ["icon", "icon-#{icon}"] + options[:class].to_a
else
"#{icon_tag icon} #{text}".html_safe
end
end

Reindenting HTML with Embeded Ruby Code (erb)

I'm wondering if there's an existent solution to the following problem:
I have the following code:
<div>
<div>
<div><%= {:something => 'abc',
:else => 'abc',
:nice => 'ok'} %>
</div>
</div>
</div>
As you can see it's unested and hard to read. I was wondering if there's an existent tool preferably in ruby which could reindent the document (no modifications or validations to the source). Just reindent.
The expected result would be:
<div>
<div>
<div>
<%= {:something => 'abc',
:else => 'abc',
:nice => 'ok'} %>
</div>
</div>
</div>
Also, on a side not I want to implement this as a command on Textmate.
Implementing in Textmate? You do know about ⌘⌥[ i.e. Cmd+Alt+[ (or choose it from the application menu with Text > Indent Selection)?
It's not exactly what you try to achieve in your example, but perhaps it's close enough. This is the output when applying it on your code in Textmate:
<div>
<div>
<div><%= {:something => 'abc',
:else => 'abc',
:nice => 'ok'} %>
</div>
</div>
</div>
It works in any Textmate bundle that supports indentation.

Div Tables with ASP.NET MVC

I'm trying to find a better way to use a div table with ASP.NET MVC, the problem I see is that you need to do loads of looping, rather than one loop if I had to use a traditional <table> table.
Example
<div class="column">
<div class="row">Name</div>
<% foreach (Person person in (List<Person>)ViewData.Model) {%>
<div class="row"><%= Html.Encode(person.Name) %></div>
<%} %>
</div>
<div class="column">
<div class="row">Email</div>
<% foreach (Person person in (List<Person>)ViewData.Model) {%>
<div class="row"><%= Html.Encode(person.Email) %></div>
<%} %>
</div>
<div class="column">
<div class="row">Phone</div>
<% foreach (Person person in (List<Person>)ViewData.Model) {%>
<div class="row"><%= Html.Encode(person.Phone) %></div>
<%} %>
</div>
If it looks like a table and smells like a table why not use a table?
But if you want to do it in this way well try to build a extention method for your Html property that generates this html code and have the list as a parameter and maybe a list for your columns, To generate your html code you can use the TagBuilder class.
It's rather subjective issue, but I think you don't really need to use divs to do so, coz you are simply displaying table of data and this is why we need "table" tag.
The introduction of div and CSS layout is not to replace the table tag, but to free table tag from doing formatting and layout job.
Edit
Moreover, you can still do your job in one loop. Rather than loop through columns, why not loop through rows (name, phone... )
<% foreach(Person person in (List<Person>)ViewData.Model)) %>
<div class="row">
Name: <%= Html.Encode(person.Name) %>
Email: <%= Html.Encode(person.Email) %>
...
</div>
Although I personally still prefer using table (together with tr and td) instead.
If you are dislaying tabular data, that's why the table tag is there. People only suggest div, instead of table when it's about layout. So it's perfectly OK to use the table tag when you are displaying key-value type of information.
I agree with what everyone else have said (that you really should just use a table) - however I will try to come up with a solution to your issue too.
I don't think there's an elegant way to overcome the "loop more than once" issue, but at the very least we can make it a bit "easier" to add new columns to the list:
var myList = (List<Person>)ViewData.Model;
var myColumns = new Dictionary<string, List<string>>();
myColumns.Add("Name", new List<string>());
myColumns.Add("Email", new List<string>());
myColumns.Add("Phone", new List<string>());
foreach(var person in myList){
myColumns["Name"].Add(Html.Encode(person.Name));
myColumns["Email"].Add(Html.Encode(person.Email));
myColumns["Phone"].Add(Html.Encode(person.Phone));
}
Then now you can do this:
<% foreach(var column in myColumns){ %>
<div class="column">
<div class="row"><%= column.Key %></div>
<% foreach (string value in column.Value) {%>
<div class="row"><%= value %></div>
<%} %>
</div>
<% } %>
It is still poor performance compared to using the -tag and really I don't see why you'd want to avoid that in this scenario.