playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.
Related
I've been looking through some posts on the internet about Materialize in Rails, however this area seems to be very fuzzy. I am currently using the materialize-sass gem.
I didn't find very many helpful posts, I decided to resort here.
Here's my code for a page I have pages/discover.html.erb
<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
<div class="row">
<div class="col s12 m5">
<div class="card">
<div class="card-image b">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg">
<span class="card-title">Cregg Cobb Is Back At It Again, But Only This Time He Has Guns</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<div class="chip">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg" id="cobb">
Like
</div>
</div>
</div>
</div>
</div>
I want to make the <img> darker by using filter: brightness(50%);
How do I go about doing this? Where do I begin?
Bonus: If you know where I can add the jQuery stuff that Materializecss.com mentions when discussing components and transitions, it would be greatly appreciated!
Since it's just a single override, you could add a new .css file to assets (or wherever you're storing static stuff), with a !important class:
img.darker {
filter: brightness(50%) !important;
}
Then import it at the top of your template:
<%= stylesheet_link_tag "/path/to/css.file" %>
And add the class to your image tag:
<img src="/my/img.png" class="darker">
Alternatively you could just style the image tags individually:
<img src="/my/img.png" style="filter:brightness(50%)">
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
I'm trying to make a simple website following the One Month Rails tutorial online, and since bootstrap is constantly updating I've decided to mess around with it by myself.
I have the following file home.html.erb and tried to apply the jumbotron effect from bootstrap
http://getbootstrap.com/components/#jumbotron
<div class = "jumbotron">
<h1>Welcome to One Month Rails</h1>
<p>
You've found the home page!! <%= link_to "Google", "http://www.google.com"%>
</p>
<p>
<%= link_to "Sign Up Now!", "#" %>
</p>
</div>
The page, however, does not show the jumbotron effect. What am I doing wrong? I know that bootstrap should be working because I've added some styling effects using bootstrap classes like nav and btn
Edit: I've read from a few other questions and apparantly the jumbotron class is bugged with the rails gem. I will try to manually incoporate bootstrap and see how it turns out.
Can you try adding something else to this particular page and style it using bootstrap (like a simple button)? That way you can ensure bootstrap is working on this specific page.
I don't see any problem with the code you pasted.
EDIT:
Try this sample code:
<div class="container">
<div class="jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a>
</p>
</div>
</div>
Question about Rails4, I trying to retrieve the "Find Stuff" variable, in the erb form. This
is a search field, using zurb foundation - so the extra styling annotations floating around.
I don't have a model as this is just a form for reading the search input field - which is
in the tag, with placeholder as "Find Stuff".
To use normal Rails4 terminology, I would
like to pass the value of the "Find Stuff" field to the salutation controller, and I tried
many ways, but was unsuccessful, when I used render params[:post].inpect, it shows nil -the
variables that I pass to the controller, on clicking on the "Search" link_to, link. I tried adding an id field to the tag, and that too showed nil on render params[:post].inspect.
Any help, thanks in anticipation.
hello.html.erb form below.
<html>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Hello World!</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" placeholder="Find Stuff" >
</div>
<div class="large-4 small-3 columns">
<%= link_to "", :controller =>
'salutation', :action =>'hello',
:class=>"alert button expand" %>
</div>
</div>
</li>
</ul>
</section>
</nav>
</body>
</html>
Controller follows
Salutation Controller follows
class SalutationController < ApplicationController
def new
#test = ''
end
def hello
#message = 'Hello World!'
#test = params[:Find_Stuff]
end
end
Wrap your search box in a form element, give your input a name and away you go. You can use the rails form helpers as well - see http://guides.rubyonrails.org/form_helpers.html which has a nice intro to creating a search form
<div class="row collapse">
<%= form_tag("/salutation/hello", method: "post") do %>
<div class="large-8 small-9 columns">
<%= text_field_tag(:find_stuff) %>
</div>
<div class="large-4 small-3 columns">
<%= submit_tag("Search") %>
</div>
<% end %>
</div>
Further to #slapthelownote's answer, the reason you're getting an error is because you're not passing any params to your controller
We've got something like what you want working at http://firststopcosmeticshop.co.uk (top search box) -- using a form_tag
If you want to see live code, I'll be happy to post!
Params
Using a form allows you to set various variables & then submit them to the controller as you've set them. I'd recommend using the form in the other answer, but to understand how it works, you need to read up on the Rails forms tutorial
Basically, the params hash is populated in the middleware of Rails -- from any data sent by HTTP to your backend
With links, you can only send GET params (domain.com/route¶ms=value), whilst with HTML forms, you can set POST params which are passed through the browser (not the URL)
This is mostly an implementation question for a webapp I'm trying to develop. I'm relatively inexperienced so I want to check if my idea for implementation is decent or if there's a much easier way.
The Problem
I want to create a scrollable sidebar that automatically fills with small containers that hold a user profile photo and their name. The basic idea is that a user is a member of a class and the sidebar should hold all of their classmates. The sidebar should be a fixed size and the user should be able scroll down through their classmates and click on a user if they want visit their page.
My Ideas For Implementing
It seems to me that I will need to use some embedded ruby to direct the filling process. Some psuedocode would be something along the lines of "For every user in this class, create a container with their picture and name". I haven't given a lot of thought as to actually handle this step but I'm mostly concerned with the actual html structure.
My idea is to do something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!-- for each user in class -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span">
<!-- Load appropriate user data -->
</div> where appropriate...
Is this the "proper" way to go about implenting this? I haven't been able to find much information on the idea and visit an example site's source code isn't all that helpful as the sidebar is already filled...
I would separate your sidebar HTML and logic into a partial, E.g. "app/views/shared/_sidebar.html.erb". From there on, you can accept a collection of data from whatever view you're rendering.
View file
<div class="container-fluid">
<div class="row-fluid">
<%= render "shared/sidebar", collection: #users %>
</div>
</div>
Sidebar partial
<div class="span2">
.....
<% #users.classmates.each do |e| %>
<%= e.name %>
<% end %>
.....
</div>