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>
Related
I've spent some time on trying to add function of uploading, posting and displaying images in my application. I've tried different methods, eventually finding out that 'Trix' is what I need to reach that goal.
The issue here is that my application structure is quite different from those that I see in 'trix' tutorials, and I have no idea what I am doing :(((
Let's start from the fact that my application.js is located in ->
[app]>
-[javascript]
-[packs]
-application.js
and looks very different from what I see in tutorials. However, I tried to adapt like so -
...
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('trix')
...
Instead of writing //= require trix.
Another slight difference is that my "application.css" is not ".scss", but I figured it is not that big of a deal. So I went ahead and pasted *= require trix in there.
At first , when I loaded page I've got an error couldn't find file 'trix' with type 'text/css' , but after restarting server it wasn't there anymore (which is normal). Next step would be adding the code ... but it seems that most people have _form.html.erb. And here is where I need help. my "Post" structure is like this ->
[views]>
- edit.html.erb
- index.html.erb
- new.html.erb
- show.html.erb
where new.html.erb contains the form for submitting a post ->
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">Create a new post</h1>
<%= form_tag("/posts/create") do %>
<div class="form">
<div class="form-body">
<% #post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= #post.content %></textarea>
<input type="submit" value="Post">
</div>
</div>
<% end %>
</div>
</div>
This is where the difference really confuses me... Where do I add 'trix' ? I've tried replacing textarea with trix-editor, the only changes I've got , where two small overlapping squares instead of submit form.
Help. :(
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 using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.
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.