according to this answer https://stackoverflow.com/a/11335283/2397494
i'm trying to make tree menu for my appliction
this answer working only for root and first children.
I'm looking for suggestion to transform this code, work well with n childrens.
<ul id="menu">
<% Hub.roots.each do |category| %>
<li> <%= link_to h(category.title), category %>
<% unless category.children.empty? %>
<ul id="sub-menu">
<% category.children.each do |subcategory| %>
<li><%= link_to h(subcategory.title), subcategory %></li>
<% end %>
</ul>
<% end %>
</li>
<% end %>
</ul>
<% Hub.roots.each do |category| %>
<div> <%= link_to h(category.title), category %>
<% if category.children.present? %>
<div id="submenu">
<%= render 'hubs/sub', category: category %>
</div>
<% end %>
</div>
<% end %>
partial _sub
<ul>
<% category.children.each do |sub| %>
<li>
<%= link_to_unless_current sub.title, sub %>
<%= render 'hubs/sub', category: sub %>
</li>
<% end %>
</ul>
and css
#submenu > ul, ol {
margin-right: 20px;
li {
font-size: 11px;
margin: 4px 0;
margin-bottom:-5px !important;
}
ul, ol {
font-size: 11px;
margin: 0;
padding-left: 16px;
margin-bottom:-5px !important;
li {
margin: 4px 0;
}
}
}
Related
I have this loop :
<div>
<% #ingredientsOfRecipes.each do |item| %>
<ul>
<%= item["name"] %>
<%#fridge.each do |f|%>
<% item['ingredients'].each do |ingredient| %>
<li style="display: flex; flex-drirection: row; align-items: center">
<% if ingredient.include? f.content%>
<p style="color: green">
<%=ingredient%>
<i class="fa-solid fa-check" style="color: green; margin-left: 10px"></i>
</p>
<% elsif ingredient.exclude? f.content%>
<p style="color: red">
<%=ingredient%>
<i class="fa-solid fa-xmark" style="color: red; margin-left: 10px"></i>
</p>
<%end%>
</li>
<% end %>
<%end%>
</ul>
<% end %>
On the #fridge variables, I have 4 values.
and once I loop on a particular ingredient, I don't want to loop on it anymore.
There are some things that are not clear for me in your code, but right now I can't do questions, so I hope you can correct me if something is not working. Why you have elseif instead of only else?
If you want to stop the loop, simple use the break word wherever you need:
<% #ingredientsOfRecipes.each do |item| %>
<ul>
<%= item["name"] %>
<% #fridge.each do |f|%>
<% item['ingredients'].each do |ingredient| %>
<li style="display: flex; flex-drirection: row; align-items: center">
<% break if ingredient.include? 'my_ingredient_that_should break_the_loop'%>
<% if ingredient.include? f.content %>
<p style="color: green">
<%=ingredient%>
<i class="fa-solid fa-check" style="color: green; margin-left: 10px"></i>
</p>
<% elsif ingredient.exclude? f.content%>
<p style="color: red">
<%=ingredient%>
<i class="fa-solid fa-xmark" style="color: red; margin-left: 10px"></i>
</p>
<%end%>
</li>
<% end %>
<%end%>
</ul>
<% end %>
And trying to do your code more clear: supposing #fridge is a collection of objects and item['ingredients'] is an array of strings (so ingredient is a String) you can try something like this:
<% #ingredientsOfRecipes.each do |item| %>
<ul>
<%= item["name"] %>
<% item['ingredients'].each do |ingredient| %>
<li style="display: flex; flex-drirection: row; align-items: center">
<% break if ingredient.include? 'my_ingredient_that_should break_the_loop'%>
<% if #fridge.collect(&:content).any? {|c| ingredient.include? c } %>
<p style="color: green">
<%= ingredient %>
<i class="fa-solid fa-check" style="color: green; margin-left: 10px"></i>
</p>
<% else %>
<p style="color: red">
<%= ingredient %>
<i class="fa-solid fa-xmark" style="color: red; margin-left: 10px"></i>
</p>
<%end%>
</li>
<%end%>
</ul>
<% end %>
Is that your question?
i'm trying to group items (games) by month in rails and SQL3 but it generates this :
Error
March 17th
<% #game_months.each do |month, games| %>
<% for game in games %>
<a href="<%= game_path(game)%>" class="col-md-4 m-t-md">
<div class="box b-a m-a" style="box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.02);">
Here is my games controller
class GamesController < ApplicationController
def index
#game = current_user.games
#games = Game.all.order("created_at DESC")
#game_months = #games.group_by {|g| g.created_at.beginning_of_month }
end
My view
<% #game_months.each do |month, games| %>
<% for game in games %>
<a href="<%= game_path(game)%>" class="col-md-4 m-t-md">
<div class="box b-a m-a" style="box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.02);">
<div class="item b-b">
<div><%= image_tag game.photos[0].image.url(:medium), class:"img-responsive" if game.photos.length > 0 %></div>
</div>
<div class="p-a text-left white">
<h6 class="text-md text-black block p-b-sm"><strong><%= game.game_name %></strong></h6>
<span class="text-muted p-t-md"><%= game.game_description %></span>
<div class="m-t-md">
<span><%= image_tag avatar_url(game.user), class:"w-24 circle b-a" %></span>
<span class="m-t-sm text-black pull-right text-md"></span>
</div>
</div>
</div>
</a>
<% end %>
<% end %>
I don't know what i'm doing bad. Please help, i don't know what to do to solve this!
CHEERS! :)
Change
#games = Game.all.order("created_at DESC")
#game_months = #games.group_by {|g| g.created_at.beginning_of_month }
To
#game_months = Game.all.group_by { |g| g.created_at.month }
It should produce hash looking like this:
{1=>[GameObject1], 2=>[GameObject3, GameObject4], 3=>[GameObject2] ...}
Now iterate over hash and do what you want to do.
I am applying the Bootstrap 4 album template to a Ruby on Rails website I am developing. The original album template looks like this:
But mine is not displaying like that. It's displaying as a list, one beneath the other, similar to what a blog page would look like.
I believe the file where I need to make the necessary changes is here in app/views/products/index.hmtl.erb:
<div class="album text-muted">
<div class="container">
<div class="row">
<div class="card">
<%= render #products %>
<% #products.each do |product| %>
<%= product.image %>
<% end %>
<p class="card-text">
<% #products.each do |product| %>
<%= product.description %>
<% end %>
</p>
</div>
</div>
</div>
</div>
<%= paginate #products %>
<%= link_to 'New Product', new_product_path if logged_in?(:site_admin) %>
I am not missing any of the Bootstrap classes from the original template, so I am wondering if its my code that is causing it not to render appropriately.
Here is the stylesheets/products.scss file:
// Place all the styles related to the products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
#import "font-awesome";
body {
min-height: 75rem; /* Can be removed; just added for demo purposes */
}
.navbar {
margin-bottom: 0;
}
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
margin-bottom: 0;
background-color: #fff;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
}
.card > img {
margin-bottom: .75rem;
}
.card-text {
font-size: 85%;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
/*
* Custom styles
*/
.social-links li a {
font-size: 1.5em;
}
try this code for your index.html.erb:
<div class="album text-muted">
<div class="container">
<div class="row">
<% #products.each do |product| %>
<div class="card">
<%= image_tag("picture_holder")%>
<strong class="card-text"><%= product.summary %></strong>
<a href="<%= product_path(product) %>"><%= image_tag("picture_holder")%><a>
<p class="card-text"><%= product.price %></p>
<p class="card-text"><%= product.description %></p>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-12">
<%= paginate #products %>
</div>
</div>
</div>
</div>
it should work.
I'd like for you to try to output the image and the description in the same iteration.
<% #products.each do |product| %>
<div class="card">
<%= product.image %>
<p class="card-text">
<%= product.description %>
</p>
</div>
<% end %>
Note that here I can see they are displaying their images like so
<img data-src="holder.js/100px280/thumb"
alt="100%x280" style="height: 280px; width: 100%;
display: block;" src="some/path/" data-holder-rendered="true">
Notice the inline styles that are being applied here. Also, I'm not sure if product.image is a path to an image or an actual binary image. if it's the former you'll need to put it into the src= attribute of an img tag similar to the one bootstrap uses in their example.
<img scr='<%= product.image %>' />
view
<% if current_user.challenges.badges.count > 0 %>
<%= link_to new_duel_path(:challenge_daddy => #user.id), class: "btn", style: "padding-top: 10px; padding-bottom: 10px; margin-top: 15px; color: white;" do %>
<span class='glyphicon glyphicon-tower'></span> Duel
<% end %>
<% else %>
# user will be sent to performance page
<%= link_to performance_path, class: "btn", style: "padding-top: 10px; padding-bottom: 10px; margin-top: 15px; color: white;" do %>
<span class='glyphicon glyphicon-tower'></span> Duel
<% end %>
<% end %>
controller
def performance
#user = current_user
# only if the user is brought to performance via the above link_to should this be flashed
flash[:alert] = "YOU'RE NOT AUTHORIZED TO INITIATE A DUEL UNTIL YOU BECOME A NINJA, BUT YOU CAN BE INVITED TO A DUEL"
end
I tried to send the flash directly in link_to, but nothing happened: link_to performance_path(:alert => "Flash message") also tried (:error => "Flash message")
view
<%= link_to performance_path(alert: true), class: "btn", style: "padding-top: 10px; padding-bottom: 10px; margin-top: 15px; color: white;" do %>
<span class='glyphicon glyphicon-tower'></span> Duel
<% end %>
controller
def performance
#user = current_user
flash[:alert] = "YOU'RE NOT AUTHORIZED TO INITIATE A DUEL UNTIL YOU BECOME A NINJA, BUT YOU CAN BE INVITED TO A DUEL" if params[:alert].present?
end
performance view
<% if flash[:alert] %>
<%= flash[:alert] %>
<% end %>
I created a loop to show all blog posts. I am getting an error that displays random text after the loop:
It looks like there's a stack of texts with all the post information listed at the end of the loop, I have no idea how it happened and how to fix it.
I checked my HTML and CSS, but couldn't figure out what caused the issue.
Below is the HTML and CSS code:
<section id="posts" class="wrapper">
<h2>My Latest Articles</h2>
<hr>
<div class="post_container">
<%= #posts.each do |p| %>
<div class="article">
<h3 class="post_title"><%= link_to p.title, p %></h3>
<p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
<p class="content"><%= truncate(p.content, length: 400) %></p>
</div>
<% end %>
</div>
<div class="button_wrapper">
More Articles
</div>
</section>
CSS
#posts {
padding: 6.5em 0 10em 0;
h2 {
text-align: center;
color: $text;
margin-bottom: 1.25rem;
}
.post_container {
padding: 6em 0 6em 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
.article {
max-width: 28%;
}
.post_title {
color: $text;
font-size: 1.6em;
}
.post_date {
padding: .75rem 0;
color: $accent;
font-size: 1.2em;
}
.content {
color: $grey;
}
}
}
<%= #posts.each do |p| %>
Should be
<% #posts.each do |p| %>
Do not output the result of .each.
Its because your using <%= at the beginning of your loop. You would use <% instead
Change the post_container div to this:
<div class="post_container">
<% #posts.each do |p| %>
<div class="article">
<h3 class="post_title"><%= link_to p.title, p %></h3>
<p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
<p class="content"><%= truncate(p.content, length: 400) %></p>
</div>
<% end %>
</div>
Use
<% #posts.each do |p| %>
because <= %> use for print the value in your case it'll print the whole loop