I am trying to dry up my code and decided to use a partial for my page title and pass a local variable into it. It works, but I want to know if I am conforming to the Rails best practice.
partials/_page-header.html.erb
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
<%= title %>
</h1>
<h2 class="subtitle">
Hero subtitle
</h2>
</div>
</div>
</section>
static_pages/home.html.erb
I would add this to the top of all my views
<% provide(:title, 'Home') %>
...
application.html.rb
<!doctype html>
<html lang="en">
<head>
<%= render 'partials/head' %>
<%= render 'partials/head-scripts' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'partials/nav' %>
<%= render 'partials/page-header', title: yield(:title) %>
<section class="section">
<div class="container">
<div class="content">
<%= yield %>
</div>
</div>
</section>
<%= render 'partials/footer' %>
<%= render 'partials/footer-scripts' %>
</body>
</html>
Related
I started learing ruby and i wanted to create an album page when you can add posts with images. I came across a problem when I add a post it is not aligned, like on bootstrap album example: https://getbootstrap.com/docs/4.5/examples/album/
Look at what i've done https://iv.pl/image/bootstrap.Gt2w3RT
<!DOCTYPE html>
<html>
<head>
<title>AlbumSite</title>
<%= csrf_meta_tags %>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/">
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body>
<section class="jumbotron text-center">
<div class="container">
<h1>Simple album</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
Add a new album
The first page
</p>
</div>
</section>
<div class="postsSection bg-light">
<div class="container col-md-4" >
<div class="postBox">
<%= yield %>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</body>
</html>
<% #posts.each do |post| %> <!-- no %= because this isn an output, tylko przy pokazywaniu zmiennych tego sie uzywa -->
<div class="row">
<div class="card mb-4 shadow-p">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
<div class="btn-group">
<div>
<%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
<div class="btn-group">
<div>
<%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
</div>
</div>
</div>
</div>
<% end %>
The row has to go before you go through each post
<div class="row">
<% #posts.each do |post| %>
<div class="col-md-4">
<div class="card">
<div class="card-title">
<%= post.title %>
</div>
</div>
</div>
<% end %>
</div>
I am using kaminari to paginate the index pages of some of my models, and it works quite well. I'm using it with the bootstrap4 theme, and while it looks great, it does not resize well on mobile devices. More specifically, I mean that these links don't resize at all (or if they do, it's minimal), and they extend well beyond the screen to the right, which is annoying. I've tried putting these links inside a bootstrap container, but that didn't cause them to properly resize.
How do I resize kaminari pagination for mobile devices?
Here is the relevant view code:
<div class="container">
<h1>All Leagues</h1>
<hr />
<% #leagues.each do |league| %>
<p><%= link_to league.name, league %></p>
<% end %>
<hr />
<div class="container">
<%= paginate #leagues %>
<%= page_entries_info #leagues %>
</div>
</div>
Thank you!
Try with adding this into your section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
if this doesn't help then try this:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>All Leagues</h1>
<hr />
<% #leagues.each do |league| %>
<p><%= link_to league.name, league %></p>
<% end %>
<hr />
<%= paginate #leagues %>
<%= page_entries_info #leagues %>
</div>
</div>
</div>
I am putting together a basic website from One Month Rails and can't seem to figure out how to get the navigation bar to show at the top. I have spent a few hours and would like to go to the community. Here is the code from the _header.html.erb (using bootstrap sass)
<div class="navbar navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<li><%= link_to 'Login', '#' %></li>
</ul>
</div>
</div>
</div>
</div>
Here is the code from the application.html.erb tab:
<!DOCTYPE html>
<html>
<head>
<body>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You seem to have some HTML errors in application.html.erb. But most modern browsers will fix those errors for you when loading the page. Here's a better version:
<!DOCTYPE html>
<html>
<head>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You should also make sure your _header.html.erb is in app/views/layouts/.
Finally, don't forget to add bootstrap's css file to app/assets/stylesheets/.
I am using gmap4rails on jQueryMobile but the map is not showing when I'm doing a redirecting to the page showing the map. The map shows normally when I refresh the map page, but not when I redirect to the page showing the page. Does anyone have an idea why? Thanks! Below is the code
/app/views/items/map.html.erb
<div data-role="header">
<h1>Market</h1>
<%= link_to 'Sell/Buy', new_item_path, "data-icon" => "plus", "class" => "ui-btn-right" %>
<%= link_to 'Back', root_path, "class" => "ui-btn-left" %>
</div>
<div class="center-wrapper">
<div data-role="controlgroup" data-type="horizontal">
List
Map
</div>
</div>
<div data-role="content">
<%= gmaps4rails(#json) %>
</div>
/app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<%= javascript_include_tag "application" %>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<%= csrf_meta_tag %>
</head>
<body>
<div data-role="page">
<%= yield %>
<%= yield :scripts %>
</div>
</body>
</html>
/config/routes.rb
ProjectZ::Application.routes.draw do
...
match '/map', to: 'items#map'
end
I'm using the bootstrap-sass gem and for some reason in the navbar I'm using the active class for one of the li's below, however it doesn't appear pressed down.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) %></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= params[:controller].parameterize %>_controller">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<%= link_to 'evoALL', root_path,
html_options = {:class => 'brand'} %>
<% navArr = ["Dashboard", "Help People",
"Get Help", "Contact Us"] %>
<% flash.each do |key, value| %>
<p class="lead"><%= value %></p>
<% end %>
<ul class="nav">
<% navArr.each do |value| %>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<%= yield %>
<div class="container">
<div id="footer"><!-- footer start -->
<div class="row-fluid">
<div class="span12">
<p class="pull-right">
© <%= Date.today.year %>
</p>
</div>
</div>
</div><!-- footer end -->
</div>
</div> <!-- close container div -->
</body>
</html>
index.html.erb for the view file of the index method of the main controller that gets routed to for the root of the application:
<%= provide(:title, 'evoALL') %>
<%= provide(:navActive, 'Get Help') %>
<div class="container">
<div class="row">
<div class="span12">
<p>Needs Home Page</p>
</div>
</div>
</div>
I was applying the active class to the a tag instead of the li tag.
The correct solution would be to replace this:
<% navArr.each do |value| %>
<ul>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
</ul>
<% end %>
with this:
<ul class="nav">
<% navArr.each do |value| %>
<li
<% if (yield(:navActive)==value) %>
class="active"
<% end %>>
<a href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>