I'm very new to RoR and have been following along with Michael Hartl's tutorial and have now been stuck on the part that introduces the Bootstrap framework. All gems are being updated and installed.
locales/application.rb
require File.expand_path('../boot', __FILE__)
# Pick the frameworks you want:
require "active_record/railtie"
require "action_controller/railtie"
require "action_mailer/railtie"
require "sprockets/railtie"
# require "rails/test_unit/railtie"
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env)
module SampleApp
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "default", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "default", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
home.html.erb
<% provide(:title, 'Home') %>
<div class="center hero-unit">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "bttn btn-large btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
custom.css.scss
#import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
border-style: {
padding-top: 60px;
}
section {
overflow:auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
Something that I've gathered is most likely incorrect is the fact that the source code of /home.html.erb does not make any references to /styles/bootscrap.css . Should I have a bootstrap.css file along with my other stylesheets? If so it's not mentioned in the tut.
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<link data-turbolinks-track="true" href="/stylesheets/default.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/javascripts/default.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="n2QVul+/didf2xA6jj3QelpDZdOrUpgaWcDp1XFQACM=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<! [endif]
This is what /static_pages/home looks like for me :
my home
vs. the one from the tutorial : tutorial home
I can't think of anything else to include but if I've missed something I'll be sure to follow up quickly. Thanks!
In application.html.erb,
it should be "application", not "default".
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
https://github.com/railstutorial/sample_app_rails_4/blob/master/app/views/layouts/application.html.erb
Related
I have a controller method with custom layout and I cannot access the instance variables on corresponding views.
When I changed back to the default application layout. I can access the instance variables.
pages_controller.rb
def payment_summary
render layout: "content"
if session[:new_company_id].present?
#company = Company.find(session[:new_company_id])
end
#var = "this is test"
end
payment_summary.html.erb
<div class="row">
<div class="col-sm">
Company Info
<div class="card">
<%= #company.name %>
<%= #var %>
</div>
</div>
<div class="col-sm">
Due Today
</div>
</div>
layouts/content.html.erb
<!DOCTYPE html>
<html>
<head>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- Font Awesome 5 Free -->
<script src="https://kit.fontawesome.com/9da10782cc.js"></script>
<!-- for js cookie use -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
</head>
<body class="content-pages <%= body_class %>">
<%= yield %>
</body>
</html>
When I remove, render layout content everything works fine.
render in this case is "order dependent". Move it down, as the last statement within your action body:
def payment_summary
if session[:new_company_id].present?
#company = Company.find(session[:new_company_id])
end
#var = "this is test"
render layout: "content"
end
in my current Rails app, I have a partial in my layouts folder for a navigation sidebar. I would like this sidebar to render for every page of my app except the new and thankyou actions of my score controller, because those two views are going to be a part of an iframe. To do this, I'm making another layout called iframe.html.erb where I'd like to put the logic to exclude the navigation sidebar.
Here is my application.html.erb layout file
<!DOCTYPE html>
<html>
<head>
<title>NPS</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="wrapper">
<%= render 'shared/navigation' %>
<%= yield %>
</div>
</body>
</html>
And here is my iframe.html.erb file
<!DOCTYPE html>
<html>
<head>
<title>NPS</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="wrapper">
<%= if (current_page?(controller: 'scores', action: 'new') || current_page?(controller: 'scores', action: 'thankyou' )) do %>
<%= yield %>
<% end %>
</div>
</body>
</html>
I initially just had an unless statement in my application layout but that wouldn't work on the sign-in page because devise would be looking for those scores views in the devise folder. I'm also not very good with html.erb so I'm sorry if it's just a syntax thing.
Edit:
Here is the error I get with devise
ActionController::UrlGenerationError at /users/sign_in
No route matches {:action=>"new", :controller=>"devise/scores"}
Thanks
in your application.html.erb...
<%= render 'shared/navigation' unless #disable_nav %>
Then in your score controller where you have you have your two views...
def new
#disable_nav = true
# ...
end
def thankyou
#disable_nav = true
# ...
end
You don't need two layouts for that and your syntax is incorrect. Remove iframe.html.erb.
There are several ways to do it. Try this one in application.html.erb:
<div id="wrapper">
<% if !current_page?(controller: 'scores', action: 'new') && !current_page?(controller: 'scores', action: 'thankyou') %>
<%= render 'shared/navigation' %>
<% end %>
<%= yield %>
</div>
It should just work. However, it can be improved. Move this logic into your application_helper.rb:
def should_show_navigation?
!current_page?(controller: 'scores', action: 'new') &&
!current_page?(controller: 'scores', action: 'thankyou')
end
And then, in your layout file (application.html.erb):
<div id="wrapper">
<% if should_show_navigation? %>
<%= render 'shared/navigation' %>
<% end %>
<%= yield %>
</div>
It gets more readable.
I'm trying to add a title tag to my website using ROR.
After adding the desired changes to ... in aplication.html.erb, then commiting and deploying it, I still do not see the complete title tag present with the changes I just made when I view the website on search results.
Why is this the case and is there anything I am forgetting to include?
<!DOCTYPE html>
<html>
<head>
<title>Website Name - Desired title tag added here but doesn't show in search results</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= render 'shared/user_info' %>
</head>
<body>
<div id="body-interior">
<%= render 'shared/header' %>
<div class="container">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<%= yield %>
</div>
<%= render 'shared/footer' %>
</div>
<%= render 'shared/final_scripts' %>
</body>
</html>
Thanks!
When you say search results, I assume you mean search engines like Google? If so, you need to know that changes like these won't be recognized instantly by Google. The changes should be visible as soon as Google (or any other robot) crawls the page in question again.
As far as I know you can force this process with Google's Webmaster Tools.
So I have built a 'web app' using ruby 2.1.5 on rails 4.2.0.
What I want now is a single-page landing-page. I don't want this landing page to be influenced by any other existing css files that I have in my stylesheets layout.
The landing page (ideally) uses a css file named freelancer.css and the rest of my site uses default.css.
So in short; how can I specifically call a stylesheet for a single view/controller while escaping the rest of my css/scss files for the rest of my app.
The landing page has its own controller named Welcome.
class WelcomeController < ApplicationController
def index
render layout: false
end
end
I have defined a custom route.
authenticated :user do
root 'pages#home', as: "authenticated_root"
end
root 'welcome#index'
And my Welcome controller's index is as such.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<%= favicon_link_tag 'notes.png' %>
<title>Balern Edu.</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script src='assets/moment.min.js'></script>
<script src='assets/fullcalendar.js'></script>
<link rel='stylesheet' href='assets/fullcalendar.css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
My application.css.scss file:
*
*= require_self
*= require 'masonry/transitions'
*= require font-awesome
*= require_tree .
*/
#import 'bootstrap';
#import 'bootstrap/theme';
#import 'chosen';
#import 'image-select';
Instead of using render layout: false, you can use layout: "welcome" at the top of your WelcomeController, where the layout page is called welcome.html.erb. There, you can call whatever stylesheets you want.
You can include css or JavaScript file only for custom page putting this code in your custom view:
<% content_for :head do %>
<%= javascript_include_tag "posts" %>
<% stylesheet_link_tag "posts" %>
<% end %>
Also you need to put this code in application.html.erb:
<head>
<%= yield :head %>
</head>
I've been having trouble integrating bootstrap-sass into any of my Rails 4 projects. So far i'm only getting partial rendering of the bootstrap assets. I've resorted to using using the railstutorial.org in my search for bootstrap functionality. I'm using the ch5 (listing 5.4) source code yielding the following results:
The classes btn-lg, btn-primary, and navbar-right classes are working. The page yields buttons and a partially structured navbar with the links to the right. However, the navbar classes for the most part are not working. The navbar has no 'inverse' styling, the entire div is washed out with no text styling whatsoever.
I've been using 'rake assets:precompile' and restarting the server after every update to the assets pipeline.
Gemfile contains the following above the 'jquery-rails' gem
gem 'rails', '4.2.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '>= 3.2'
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap"
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</div>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Buttons in home.hrml.erb
<% provide(:title, "Home") %>
<div class="center jumbotron">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
How are you handling your application.css file?
Make sure the bootstrap is being loaded after self
For example, in my application.css I have
/*
*= require_self
*= require main
*/
And in my main.scss I have my bootstrap
#import "bootstrap-sprockets";
#import "bootstrap";
You can also try cleaning the assets, though I don't think this is the issue