I'm using Bootstrap 3 and Rails.
I have a Model called Work, with many records.
I would like to create a dynamic grid on which the column widths vary depending on its row. Something Like this:
My erb view:
<ul class="row">
<% #works.each do |s| %>
<li class="col-sm-4"><%= s.name %></li>
<% end %>
</ul>
This way, each li element will have a col-sm-4 width everytime.
I need to tell Rails "Every 4 elements change the column width to x..."
Any help? Thanks!
Something like this:
<% #works.each_with_index do |s,index| %>
<li class="col-sm-<%= index%4 == 0 ? '4': '6' %>"><%= s.name %></li>
<% end %>
I finally used your each_with_index to customize the layout as it follows:
<% #services.each_with_index do |s, index| %>
<% if index < 2 %>
<li class="col-sm-6"><%= s.name %></li>
<% elsif index.between?(2,4) %>
<li class="col-sm-4"><%= s.name %></li>
<% elsif index > 4 %>
<li class="col-sm-6"><%= s.name %></li>
<% end %>
<% end %>
Thanks!!
Related
Specs :
Ubuntu 16.04 LTS i686
, Ruby 2.1.5 , Rails 4.2.7 , sqlite 3 , devise 4.3
when I loop through each user in users , it's rendering the users + a query output from rails console.
Devise model name : User .
controller name: users.
I tried this code:
users_controller.rb
def index
#users = User.all()
end
routes.rb
resources :users, only: [:index, :show]
views/users/index.html.erb
<%= #users.each do |user| %>
<%= link_to user do %>
<li>
<img src="images/avatar.jpg" alt="">
<div class="user_overview">
<h2><%= user.title %></h2>
<p class="posts_count">1 post</p>
</div>
</li>
<% end %>
<% end %>
In your view, just remove = from <%= #users.each do |user| %>.
It will become like:
<% #users.each do |user| %>
<%= link_to user do %>
<li>
...
...
...
...
</li>
<% end %>
<% end %>
= in erb is used for displaying the content that's why your loop is displaying the enumerator.
Read more details on Expression Printing Tags
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!
I have a navbar that is a partial view that I need to render on a devise page for the user to edit their profile. As it is, I only have one page, but adding the path to perform account maintenance has messed up my navbar loading because of the instance variable not being present. How can I get a global instance variable that works across the board for my navbar, no matter what?
application_helper.rb
def get_company
#company = current_user.company
end
def get_locations(company)
#locations = if #company
current_user.company_locations.order(:name)
else
[]
end
end
pages_controller.rb
def home
#company = get_company
#locations = get_locations(#company)
#reports = if #company
#company.reports.order("created_at DESC").limit(5)
else
[]
end
end
views/devise/registrations/edit.html.erb
<%= render partial: "pages/navigation" %>
... devise form ....
pages/_navigation.html.erb
<li class="right-menu-item">
<button class="btn dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown">
<% if #company %>
<%= #company.name %>
<% else %>
<%= current_user.email %>
<% end %>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<% #locations.each do |location| %>
<li role="presentation">
<%= link_to root_path(location_id: location.id), role: "menuitem", tabindex: "-1" do %>
<%= image_tag "check-green.svg" if location == #location %>
<span><%= location.name %></span>
<% end %>
</li>
<% end %>
</ul>
Where the issue lies:
What am I missing here to get this working across all views?
Thanks!
Ok, seems that Where is the controller of Devise ? how to add data from other models in users/edit page? was helpful. I had to do the following to make this work in the partial for the devise views:
rails g devise:controllers users -c registrations
which made a registrations controller under controllers/users/registrations.rb, then i was able to add the instance variables I needed do the edit method:
def edit
#company = get_company
#locations = get_locations(#company)
end
Had to also change the route.rb file around a little to facilitate the new controller:
devise_for :users, skip: [:sessions],
controllers: {
registrations: 'users/registrations'
}
Hi I'm using silverstripe 2.4.7 and I'm having difficulty getting the pagination to work. I've created a function in my page.php to get the latest articles like so
function AllNewsPosts($num=1) {
$news = DataObject::get_one("NewsHolder");
return ($news) ? DataObject::get("NewsEntry", "ParentID > 0", "Date DESC", "", $num) : false;
}
Then when i put this function into the control and pagination tags one article shows up however the links to the concurrent articles do not work - essentially the pagination is not working and I'm not sure how to fix it
<% if AllNewsPosts %>
<% control AllNewsPosts %>
<div class="event">
<h2>$MenuTitle |<span class="date"> $Date.Time $Date.Long</span></h2>
<p>$Content.FirstParagraph</p>
See more about this event
</div>
<% end_control %>
<% else %>
<div class="no-entry">'There are no entries'</div>
<% end_if %>
<% if AllNewsPosts.MoreThanOnePage %>
<div id="PageNumbers">
<p>
<% if AllNewsPosts.NotFirstPage %>
<a class="prev" href="$AllNewsPosts.PrevLink" title="View the previous page"><span class="yellow-background">Prev</span></a>
<% end_if %>
<span>
<% control AllNewsPosts.PaginationSummary(0) %>
<% if CurrentBool %>
<span class="current">$PageNum</span>
<% else %>
<% if Link %>
$PageNum
<% else %>
…
<% end_if %>
<% end_if %>
<% end_control %>
</span>
<% if AllNewsPosts.NotLastPage %>
<a class="next" href="$AllNewsPosts.NextLink" title="View the next page"><span class="yellow-background">Next</span></a>
<% end_if %>
</p>
</div>
<% end_if %>
Any help is much appreciated
Note: The following answer is for Silverstripe 2.4. This should not be used for Silverstripe 3.0+ sites. From 3.0 and onwards the PaginatedList object makes pagination much easier.
You are not setting a limit on how many entries to retrieve in your query, or where to start from.
The following tutorial explains how to apply pagination to a set of data objects exactly as you are trying to do:
http://www.ssbits.com/tutorials/2010/paginating-a-filtered-dataobjectset/
Here is an attempt at altering your function to include limit and start as needed for pagination:
PHP
function AllNewsPosts() {
if(!isset($_GET['start']) || !is_numeric($_GET['start']) || (int)$_GET['start'] < 1)
{
$_GET['start'] = 0;
}
$SQL_start = (int)$_GET['start'];
$newsEntries = DataObject::get('NewsEntry', '', 'Date DESC');
$doSet = new DataObjectSet();
foreach ($newsEntries as $newsEntry) {
if ($newsEntry->canView()) {
$doSet->push($newsEntry);
}
}
$doSet->setPageLimits($SQL_start, 10, $doSet->Count());
return $doSet;
}
Note the above will display 10 items per page. You can change this to however you need per page.
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>