I forked a Rails project that uses Haml, which I haven't really learned. There's an online converter that helped me with the HTML, but it ignores the erb, and when I tested my own conversion, the flash messages didn't have the classes associated with them, so I know I did it wrong, but I can't see why.
Note (don't worry about spacing in the haml. in the code i have
Original haml
- if flash[:notice]
.alert-message.warning
%p
= flash[:notice]
- if flash[:error]
.alert-message.error
%p
= flash[:error]
faulty Html translation
<% if flash[:notice] %>
<div class="alert-message.warning">
<p>
<%= flash[:notice] %>
</p>
</div>
<% end %>
<% if flash[:error] %>
<div class="alert-message.error">
<p>
<%= flash[:error] %>
</p>
</div>
<% end %>
You have a huge indentation after first line. It should be 2 spaces.
edited: In case you need to convert small part of haml you can learn how to convert it manually. There is the little haml tutorial where you can learn some basics.
That part of haml can be turned into following erb:
<% if flash[:notice] %>
<div class="alert-message warning">
<p><%= flash[:notice] %></p>
</div>
<% end %>
<% if flash[:error] %>
<div class="alert-message error">
<p><%= flash[:error] %></p>
</div>
<% end %>
where:
- same as <%
= same as <%=
%p (%tag_name) -> <p>
.class -> %div.class -> <div class="class"
edited#2:
judging by generated html <div class="alert-message.warning"> should be <div class="alert-message warning"> (dot replaced by space between classes)
Related
I'm currently trying to render a newsfeed, similar to that of FB on a Rails application I'm working on. Unfortunately, I'm not the greatest when it comes to CSS and I'm having some issues trying to display different posts. This issue occurs whether I'm using BootStrap or plain CSS. I do believe it's something to do with the loop that is created by <% #posts.each do |post| %> Currently, whenever a new post is made, it wraps inside the previous post; thus the more posts that are made, the thicker the border gets.
Image:
<% if #posts.any? %>
<% #posts.each do |post| %>
<div class="well">
<%= post.user.first_name %> <%= post.user.last_name %><br>
<% if !post.image.exists? %>
<h2> <%= post.text %> </h2>
<% else %>
<h2> <%= link_to post.text, post_path(post) %> </h2>
<%= link_to post_path(post) do %>
<p><%= image_tag post.image.url(:medium) %></p>
<% end %>
<% end %>
<% if #user %>
<% if current_user.voted_up_on?(post) %>
<%= link_to "Like", dislike_post_path(post), method: :put %>
<% else %>
<%= link_to "Like", like_post_path(post), method: :put %>
<% end %>
<% end %>
<%= "Likes: #{post.get_upvotes.size}" %>
<% if post.user == current_user %>
<%= link_to "Edit", edit_post_path(post) %>
<%= link_to "Delete", post_path(post), method: :delete %>
<% end %>
<div id='comments_div' class="comments-index">
<%= render post.comments %>
</div>
<% if current_user %>
<%= form_for [post, post.comments.new ], remote: true do |f| %>
<%= f.text_area :text, placeholder: 'Add a comment' %>
<%= f.submit 'Comment' %>
<% end %>
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
<% else %>
No posts have been added!
<% end %>
</div>
Any help would be greatly appreciated! Thanks.
Edit: OK, please take a look at the new image -- hopefully that will make the issue slightly more obvious. Additionally, I've removed all the dead tags and replaced them with just one: BootStrap's 'well' class. So, there you have it. All the information you need is within the code above.
from your description it sounds as though an html element is not being properly closed. Run the page source through an html validator and that could show you the problem.
If you don't want to take a structured problem solving approach, try adding another </div> to the end of your posts-index container.
Your issue is very simple, just that its not clear due to poor indendation.
A simple way to explain what you did is:
<-- if (start) -->
<-- do (start) -->
<-- post (start) -->
(post is not ending here, hence it breaks the layout)
<-- do (end) -->
<-- if (end) -->
<-- post (end) -->
Mistake in the above should be simple to understand so if you move your last </div>(of the well class) just before the second last <% end %>(of the <% #posts.each do |post| %> loop) it should fix the issue. So the last few lines should be
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>
Sounds to me like it could be a misplaced
<% end %>
or a missing
</div>
that is causing this behavior.
Proper indentation will point to where to close off actions or divs
While following a tutorial on building a Ruby-on-Rails blogging website, I'm running into some unexpected results. The project so far is stored on https://github.com/khpeek/jumpstart-blogger.
The main page is an "Articles" page, which looks like this:
So far, so good (except for the somewhat curious position of the "Create a New Article" button, which used to be directly below the articles).
The appearance of "All Articles" is governed by app/views/articles/index.html.erb, which reads
<h1>All Articles</h1>
<ul id="articles">
<% #articles.each do |article| %>
<li>
<%= link_to article.title, article_path(article), class: 'article_title' %>
</li>
<% end %>
</ul>
<%= link_to "Create a New Article", new_article_path, class: "new_article" %>
The h1 heading is the first thing in the .html.erb file, and also the first thing that appears on the web page.
However, if I click on an article link, say "Article with Ruby Tag", I see the page below:
Besides the desired box with the article, tags, and comments, there are also two submit buttons and "<< Back to Articles List" buttons which are neither desired nor expected.
The appearance of this page is governed, as I understand it, by app/views/articles/show.html.erb, which reads
<h1><%= #article.title %></h1>
<p>
Tags:
<% #article.tags.each do |tag| %>
<%= link_to tag.name, tag_path(tag) %>
<% end %>
</p>
<% if #article.image.exists? %>
<p><%= image_tag #article.image.url %></p>
<% end %>
<p><%= #article.body %></p>
<h3>Comments (<%= #article.comments.size %>)</h3>
<%= render partial: 'articles/comment', collection: #article.comments %>
<%= render partial: 'comments/form' %>
<%= link_to "<< Back to Articles List", articles_path %>
<% if logged_in? %>
<%= link_to "delete", article_path(#article), method: :delete, data: {confirm: "Really delete the article?"} %>
<%= link_to "edit", edit_article_path(#article) %>
<% end %>
The first line in this file is the h1 header, but the 'unexpected' contents seems to come before that. So I'm having trouble seeing where to start to remove this content. Any pointers?
You're dealing with layout Rails' concept. Read this.
Anyway, you probably have a layout file in app/views/layouts.
check your application.html.erb in layouts folder.. it is rendering in header on some condition
Is there a way that I can insert HTML tags with embedded Ruby?
I'm trying to loop over items in my database and need to put them in a bootstrap grid.
<% #div = "</div> <div class='row'> <div class='col-md-3'>" %>
<% #end = "</div>" %>
<div class="row">
<% #branches.each_with_index do |b, index| %>
<div class="col-md-3">
<div class="cardje transition">
<h2 class="transition"><%= b.description %></p>
<div class="cta-container transition">Import branch</div>
<div class="cardje_circle transition"></div>
</div>
</div>
<% if index+1%4 == 0 %>
<%= #div.html_safe %>
<% end %>
<% if index+1 == #branches.count %>
<% #end.html_safe %>
<% end %>
<% end %>
There must be a simpler way but I need this page to be done by tomorrow morning and I've been working way too long.
When I check the source code it's running only the loop and never implementing anything (so everything is on one row and overlapping).
I am building a panel with a partial, but I'd like to customise the inside of the panel with some html. Is there any way to write some HTML for a hash value?
I have a custom partial _panel_builder.html.erb that I takes as argument pclass, heading, body, etc., that I would like to use like this :
(The below syntax is bad, but I don't really understand how I could do something nice..)
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
# For the body param, I'd like to be able to use some HTML with occasional <%=...%> for variables, like :
body: (%>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<%).html_safe,
collapsable: true %>
<% end %>
EDIT : An idea of what my _panel_builder partial looks like :
<%
collapsable ||= false
pclass ||= "default"
footer ||= false
%>
<div class="panel panel-<%= pclass %> <%= if collapsable then "panel-collapsable " end %>">
<div class="panel-heading">
<%= heading %>
<% if collapsable %>
<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<% end %>
</div>
<div class="panel-body <%= if collapsable then "collapse" end %>">
<%= body %>
</div>
<% if footer %>
<div class="panel-footer <%= if collapsable then "collapse" end %>">
<%= footer %>
</div>
<% end %>
</div>
Okay so I was actually looking for the capture helper :
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
body: capture do %>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<% end %>,
collapsible: true %>
<% end %>
Note : in some cases, I also want to pass a complex HTML block as the header of footer, so I can't just have a helper that takes a block.
Note2 : My panel is a HTML template made for generic data. I cannot pass it a Ruby object
I have to localize a web site, everything is almost done, except I have ran into two problems. The code below is for a small input form, but where are the strings? There is a label for a text field and a button.
Secondly, I am receiving an error:
"undefined method `-' for "translation missing: lv.date.order":String".
Where do i have to create the translation? In the .yml file? If so, how?
Thanks in advance!
<%= form_for([:admin, #publisher]) do |f| %>
<% if #publisher.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#publisher.errors.count, t(:error)) %> <%=t(:prohibited_saved)%></h2>
<ul>
<% #publisher.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
This error means that Rails cannot find the translation for date.order in current locale file.
You should have a lv.yml file inside config/locales with this content:
lv:
date:
order:
- :day
- :month
- :year
It will instruct rails to show dates in a format: day/month/year