I'm trying to convert
<!-- application.html.erb -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
into an embedded Ruby HTML file.
The code I have so far is:
# app/devise/user/_login_items.html.erb
<% if user_signed_in? %>
<%= link_to destroy_user_session_path, :method => :delete, :class => 'nav-link' do %>
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-out') %>
Sign out
<% end %>
<% else %>
<%= link_to 'Log in', new_user_session_path, :class => 'nav-link' do %>
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-in') %>
Log in
<% end %>
<% end %>
I have the partials set up in application.html.erb:
<ul class="nav navbar-nav navbar-right">
<%= render 'devise/menu/registration_items' %>
<%= render 'devise/menu/login_items' %>
</ul>
The error I'm getting is:
undefined method `to_sym' for {:span=>"test", :class=>"glyphicon glyphicon-log-out"}:Hash
Did you mean? to_s
to_yaml
to_set
and is highlighting
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-out') %>
I don't know how to fix it, I've tried using the span class as HTML code but that wasn't working either. The original code works in the application.html.erb file.
I'm assuming it doesn't know how to convert into a symbol as that's part of Bootstrap.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<!--<a class="navbar-brand" href="#">Navbar</a>-->
<%= link_to 'A2Z.ie', home_path, :class => 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li> --> <!-- Dropdown links not working with partials. -->
<li class="nav-item">
<!-- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> -->
<%= link_to 'Home', home_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Locations', locations_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Departments', departments_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Employees', employees_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Products', products_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Customers', customers_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Payments', payments_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Orders', orders_path, :class => 'nav-link' %>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<%= render 'devise/menu/registration_items' %>
<%= render 'devise/menu/login_items' %>
</ul>
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
</body>
</html>
https://apidock.com/rails/ActionView/Helpers/TagHelper/content_tag
You need to structure it like this:
<%= content_tag(:span, 'test', :class => 'glyphicon glyphicon-log-out') %>
Or with the new ruby syntax:
<%= content_tag(:span, 'test', class: 'glyphicon glyphicon-log-out') %>
Created images folder
Added the "glyphicon glyphicon-user" and "glyphicon glyphicon-log-in" images from examples on getbootstrap.com, used image link in link_to, e.g.
<%= link_to image_tag("Search.png", :border=>0), destroy_user_session_path, :method => :delete, :class => 'nav-link' %>
UPDATE
You are using Bootstrap 4.3.x which dropped the usage of Glyphicon. You should use FontAwesome like they suggest here. That's why it doesn't work!
You should use this:
content_tag(:span, "test", class: ["glyphicon", "glyphicon-log-out"])
UPDATE 2: RAILS 5 & Font Awesome
Please try this:
Add:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
to your application.html.erb file after the last stylesheet_link_tag tag.
And modify the following file like this:
# app/devise/user/_login_items.html.erb
<% if user_signed_in? %>
<%= link_to destroy_user_session_path, :method => :delete, :class => 'nav-link' do %>
<i class="fas fa-sign-in-alt"></i> Sign out
<% end %>
<% else %>
<%= link_to 'Log in', new_user_session_path, :class => 'nav-link' do %>
<i class="fas fa-sign-out-alt"></i> Log in
<% end %>
<% end %>
I hope this helps!
PS: Never give up!
Related
I am trying to create a dropdown of sub-links in a Navbar dropdown menu. Here is my current progress. I am not able to introduce the toggle button and proper toggle mechanism. When I press on the テンプレート管理, the entire dropdown menu disappeared, and I have to click the navbar menu again to see the list. The expected result is in the screenshot, not sure if Bootstrap has such similar component to use.
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<div class="dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 0.5rem 0">
<%= inline_svg_tag 'setting.svg' %>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-end" aria-labelledby="dropdownMenu2" >
<li class="mt-2" >
<%= link_to hospital_manage_hospitals_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'hospital.svg' %> 医療機関管理
<% end %>
</li>
<li class="mt-2">
<%= link_to hospital_manage_hospital_admin_contacts_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'logout.svg' %> 担当者管理
<% end %>
</li>
<li class="mt-2">
<%= link_to hospital_manage_referral_companies_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'handshake.svg' %> 人材紹介会社管理
<% end %>
</li>
<li class="mt-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" >
<%= link_to hospital_manage_referral_companies_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'template.svg' %> テンプレート管理
<% end %>
</li>
<div class="collapse" id="collapseExample">
<ul>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
スポット求人
<% end %>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
常勤・非常勤求人
<% end %>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
勤務票
<% end %>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
メッセージ
<% end %>
</ul>
</div>
</ul>
</div>
I'm currently building a marketplace with Ruby on Rails. Right now I'm trying to build a profile page with devise (based on this tutorial: https://www.youtube.com/watch?v=BEkpwM-GvMQ) .
For devise I've created the user model.
For the profile page I've created the users controller.
For the marketplace I've created the scaffold page(pages).
Every user has a id and the profile page is basically based on that id.
Does somebody know how I can link somebodys profile page in his navbar?
app/controllers/users_controller.rb
class UsersController < ApplicationController
def show
#user = User.find(params[:id])
#user_pages = #user.pages
end
end
app/views/layouts/application.html.erb (basically the navbar)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<header>
<!--NAVBAR-->
<nav class="navbar navbar-expand" style="background-color: #B1D3FE;">
<div class="container-fluid">
<a class="navbar-brand" href="../pages"><%= image_tag("navbar/logo.png") %></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto ">
</ul>
<% if !user_signed_in? %>
<li class="nav-item list-unstyled" >
<%= link_to 'Login/Register', new_user_session_path, class:"btn", style:"background-color: #00188A; color: white;" %>
</li>
<% end %>
<% if user_signed_in? %>
<li class="nav-item dropdown list-unstyled me-5">
<a class=" btn nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="background-color: #00188A; color: white;">
Profile
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<%= link_to "My Profile", users_path , class:" dropdown-item" %>
</li>
<li>
<%= link_to "Edit Profile", edit_user_registration_path, class:" dropdown-item" %>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<%= link_to "Settings", edit_user_registration_path, class:" dropdown-item" %>
</li>
<li>
<%= link_to "Logout", destroy_user_session_path, method: :delete, class:" dropdown-item" %>
</li>
</ul>
</li>
<% end %>
</div>
</div>
</nav>
</header>
<body>
<% if notice %>
<%= render 'layouts/alerts' %>
<% end %>
<%= yield %>
app/views/users/show.html.erb
<%= #user.email %>
<% #user_pages.each do |pages| %>
<%= link_to pages.title, page_path(pages) %>
<% end %>
app/config/routes.rb
Rails.application.routes.draw do
devise_for :users
resources :pages
resources :users
root to: 'pages#index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
When I clicK on the My-Profile link on the navbar (<%= link_to "My Profile", users_path , class:" dropdown-item" %>) I land on this page:
profile page bug
Thank you for reading. It would help me allot if somebody would know how to fix this.
The users_path links to the index page which shows all the users. The reason you are seeing the error is because you only have the show action setup in the controller. To link to a specific users profile page, you would link to the show path which would be user_path(#user). You need to pass the #user in order for rails to know which user to show on the page.
The link would look something like this:
<%= link_to "My Profile", user_path(#user), class:" dropdown-item" %>
I have a simple drop down menu which works great locally but when I deploy my application to Heroku, it doesn't work. It doesn't show menu options. So, when I click on Account, nothing happens.
I have added this in my production.rb file
config.assets.compile = true
config.serve_static_assets = true
config.assets.digest = true
Tired this before pushing code to Heroku, But still it not working for me
RAILS_ENV=production bundle exec rake assets:precompile
git add public/assets
git commit -m "compiled assets"
git push heroku master
Here is my code:
<% if user_signed_in? %>
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false">
My Account <i class="caret"></i>
</a>
<ul class="dropdown-menu dropdown-settings">
<li>
<%= link_to user_path(current_user) do %>
<i class="fa fa-user"></i> Profile
<% end %>
</li>
<li>
<%= link_to edit_user_path(current_user) do %>
<i class="fa fa-pencil"></i> Edit Profile
<% end %>
</li>
<li>
<%= link_to edit_user_registration_path do %>
<i class="fa fa-unlock"></i> Change Password
<% end %>
</li>
<li class="divider"></li>
<li>
<%= link_to destroy_user_session_path, method: :delete do %>
<i class="fa fa-sign-out"></i> Log out
<% end %>
</li>
</ul>
</li>
<li>
<div class="m-t-sm">
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'fa fa-sign-out'%>
</div>
</li>
<% else %>
<li>
<div class="m-t-sm">
<%= link_to "Sign in", new_user_session_path, :class => 'btn btn-link btn-md'%> or
<%= link_to "Sign up", new_user_registration_path, :class => 'btn btn-md btn-success btn-rounded m-l'%>
</div>
</li>
<% end %>
I have solved this issue by removing this code from application.html.erb file:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
New to Rails and getting this error:
SyntaxError in RestaurantsController#index
/home/action/workspace/yelp_demo/app/views/layouts/_navbar.html.erb:40: syntax error, unexpected keyword_ensure, expecting end-of-input
but the error, I think is here:
app/views/layouts/application.html.erb:12:in `_app_views_layouts_application_html_erb___1775868341330703453_36033920'
So here's the application.html.erb code:
<!DOCTYPE html>
<html>
<head>
<title>Yelpdemo</title>
<%= render 'layouts/bootstrap' %>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/navbar' %>
<div class="container-fluid">
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= name == "notice" ? "success" : "danger" %> alert-dismissable">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
Here's my _navbar.html.erb:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Yelpdemo", root_path, class: "navbar-brand" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "About", pages_about_path %></li>
<li><%= link_to "Contact", pages_contact_path %></li>
</ul>
<%= form_tag search_restaurants_path, method: :get, class: "navbar-form navbar-left" do %>
<p>
<%= text_field_tag :search, params[:search], class: "form-control" %>
<%= submit_tag "Search", name: nil, class: "btn btn-default" %>
</p>
<% end %>
<% end %>
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Sign up", new_user_registration_path %></li>
<li><%= link_to "Sign in", new_user_session_path %></li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I'm sure I'm missing something here...but what? TIA for your help!!
Looks like you have an extra <%end%> in your _navbar.html.erb file.
I don't seem able to get navbar collapse to work on my rails app
application.html.erb is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<%= analytics_init if Rails.env.production? %>
<title>Guidelines for Me</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script type="text/javascript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
function clearText(){
search = $('.search-query');
if (search.defaultValue==search.value)
search.value = ""
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<% if Guideline.count % 100 ==0 %>
<%= link_to "#{Guideline.count}" " guidelinesforme available - yay!", guidelines_path, :class => 'brand' %>
<% else %>
<%= link_to "#{Guideline.count}" " guidelinesforme available!", guidelines_path, :class => 'brand' %>
<% end %>
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
List guidelines by...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "...Topic", topics_path %></li>
<li><%= link_to "...Hospital", hospitals_path %></li>
<li><%= link_to "...Specialty", specialties_path %></li>
</li>
</ul>
<% if user_signed_in? %>
<li><%= link_to "Favourites", favourites_path %></li>
<% else %>
<li><%= link_to "Favourites", register_path %></li>
<% end %>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<% if user_signed_in? %>
<%= current_user.first_name %>
<% else %>
Log in or Sign up
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% if user_signed_in? %>
<li ><%= link_to "Edit profile", edit_path %></li>
<li> <%= link_to "Log out", logout_path %></li>
<li> <%= link_to "My additions", profiles_show_path(id: current_user.profile_name) %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
<% end %>
<li><%= link_to "About us", about_path %></li>
</li>
</ul>
<li class="nav pull-right">
<%= form_tag guidelines_path, :class => 'navbar-search pull-right', :onSubmit=>"clearText(this)",:method => :get do %>
<%= text_field_tag :search, params[:search], :class => 'search-query input-small', :placeholder=>"Search", :ONFOCUS=>"clearDefault(this)" %> <% end %></li>
</ul>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class="alert <%= flash_class type %>">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
<%= yield %>
</div>
</body>
<script src="/assets/js/bootstrap-dropdown.js"></script>
</html>
in my application.js
$(".collapse").collapse()
I'm not using the bootstrap gem, I just added bootstrap manually. I'm not sure if it's an issue with the plugin requirement or how to solve this.
Thanks
you need add
<script src="/assets/js/bootstrap-dropdown.js"></script>
at the end of the template
and
$(".collapse").collapse()
is inside of your_scripts.js not in your style.css file