I am having a bit of trouble figuring out how to create a link_to tag for the syntax below.
<li class="bg-master-lighter">
<a href="#" class="clearfix">
<span class="pull-left">Logout</span>
<span class="pull-right"><i class="pg-power"></i></span>
</a>
</li>
I am using devise gem so i am trying to add a logout method to the link but my styling goes like above
As per Devise manual the link should look like this:
<li class="bg-master-lighter">
<%= link_to destroy_user_session_path, method: :delete, class: "clearfix" do %>
<span class="pull-left">Logout</span>
<span class="pull-right"><i class="pg-power"></i></span>
<% end %>
</li>
Related
Rails js load issue Turbolinks gem.
Navbar Dropdown one click not open after page refresh or second click to open dropdown how to solve this isssue. and also kuse turbolinks gem and boostrap gem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<% if current_user.present? %>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<% Tabs::NAVBAR.each do|tab_key, tab|%>
<% if tab[:type].eql?('dropdown_tab') %>
<li class="nav-item dropdown <%= active_navbar(tab_key) %>">
<% if current_user.projects.present? %>
<%= link_to tab[:title], fetch_route(tab_key), class: 'nav-link dropdown-toggle', id: 'myTab', data: { toggle: "dropdown" }%>
<%else%>
<%end%>
<div class="dropdown-menu">
<% dropdown_options(tab_key).each do|option| %>
<%= link_to option[:title], option[:path], class:'dropdown-item' %>
<% end %>
</div>
</li>
<% else %>
<li class="nav-item <%= active_navbar(tab_key) %>">
<%= link_to tab[:title], fetch_route(tab_key), class: 'nav-link'%>
</li>
<% end %>
<% end %>
</ul>
<div class="dropdown">
Profile <b class="caret"></b>
<div class="dropdown-menu dropdown-menu-right">
<li><%= link_to " Profile", edit_user_registration_path, class: "dropdown-item" %></li>
<li><%= link_to " Sign Out", destroy_user_session_path, method: :delete, class: "dropdown-item" %></li>
</div>
</div>
<%end%>
</div>
</nav>
I think you need to reinitialize the elements that requires bootstrap js when the event turbolinks:load is fired, check this question Rails Bootstrap 4 with Turbolinks
It's about the tooltip js, but the same applies for any element that requires js initialization.
Something like:
$(document).on('turbolinks:load', function() {
$('.dropdown-toggle').dropdown()
})
May be you need Dropdown.parseDocument(element) or Bulma(element).dropdown() in turbolinks:load event when used #vizuaalog/bulmajs.
// global `bulmaOptions` object should be defined before BulmaJS has loaded
// disable autoParse to prevent repeated `turbolinks:load` event
window.bulmaOptions = {
autoParseDocument: false
}
// import Dropdown from '#vizuaalog/bulmajs/src/plugins/dropdown';
import Bulma from "#vizuaalog/bulmajs";
document.addEventListener("turbolinks:load", () => {
Bulma.parseDocument();
// Dropdown.parseDocument(document.getElementsByTagName('body')[0]);
Array.from(document.querySelectorAll('.dropdown')).forEach(element => {
Bulma(element).dropdown();
});
});
Note: bulmaOptions.autoParseDocument = false
so I'm a total newbie, please do bear with me.
I'm following a course online where the instructor shows navbar appearing on homepage root path but also on other pages like the posts page. I followed exactly his instructions, but for some reason the navbar which is a partial, is only appearing on the homepage but NOT on the posts page - the code for navbar is as follow and the code for the other pages are all on https://github.com/cheese1884/-mywebsite
Thanks, guys.
<div class='container'>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to "LessonRoll", root_path, class: 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<%= link_to 'Home', root_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Posts', posts_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<% if current_user %>
<li class="nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Admin Menu<span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "App Settings", app_setting_path(#app_setting), class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
Link
</div>
</li>
<% end %>
</ul>
<ul class="nav navbar-nav ml-auto">
<% if !current_user %>
<li class="nav-item">
<%= link_to "Sign Up", new_user_registration_path, class: 'nav-link' %>
</li>
<li><%= link_to "Log In", new_user_session_path, class: 'nav-link' %>
</li>
<% else %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download"><%= current_user.username if current_user %> <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "Edit Profile", edit_user_registration_path, class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
<%= link_to "Log Out", destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
</div>
</li>
<% end %>
</ul>
</div>
</nav>
</div>
In your yeti.html.erb, you need to put the navbar outside the yield section:
<body>
<%= render partial: 'navbar' %> <!-- or code for navbar -->
<div>
<%= yield %>
</div>
</body>
Edit : multiple layouts explaination
Rails uses a simple convention to find the correct layout for your
request. If you have a controller called ProductsController, Rails
will see whether there is a layout for that controller at
layouts/products.html.erb. If it can't find a layout specific to your controller, it'll use the default layout at app/views/layouts/application.html.erb.
(source)
In your case you can add a custom layout such as yeti.html.erb and specify your PostsController to use this layout with layout 'yeti'
Why the navbar is appearing on homepage but not on post page (original question)
Because as i answered above, you need to add the navbar partial inside the yeti.html.erb layout same as you did in the application.html.erb layout.
Why the navbar design is different
Because in application layout you link the application.scss stylesheet which only imports bootstrap (here)
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
In the yeti layout, you link yeti/theme_manifest.scss as stylesheet which imports both "bootstrap" and the overriding "theme" (here)
<%= stylesheet_link_tag 'yeti/theme_manifest', media: 'all', 'data-turbolinks-track': 'reload' %>
I hope this will help you to see more clearly.
My apologies for the confusing title. I am not very sure how to describe this question, please suggest alternative titles if possible!
I'm building a web app where you can like an answer, like most social apps. The problem is, I am new to using coffeescript and erb, so I am not sure how to target my jQuery animations to specific elements.
So my html.erb file looks like this. It has a ERB loop where I go through each answer and display it.
<% #question.answers.each do |answer| %>
<div class="row">
<div class="col-lg-2 col-sm-2">
<div class="like">
<button class="heart-btn">
</button>
<div class="liked">
+1
</div>
</div>
<div class="option">
<a href='/'>Report</a>
<br><a href='/'>Edit</a>
<br>
<%= link_to 'Delete', question_answer_path(#question, answer), method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="row" style="margin:0">
<!-- USER PROFILE -->
<a href='/users/2/profile'>
<div class="mini-profile">
<%= image_tag(#tutor.picture_url) %>
<ul style="list-style-type:none">
<li class="username"><%= #tutor.username %></li>
<li><i class="fa fa-flag" style="padding: 2px"></i><%= #tutor.country %></li>
<li><i class="fa fa-graduation-cap"></i><%= #tutor.educational_level %></li>
</ul>
</div>
</a>
</div>
<div class="row">
<div class="ans-box">
<ul style="list-style-type:none">
<li><strong>This answer was written on:</strong> <%= answer.created_at %></li>
<li class="ans-content"><strong>This is my answer:</strong> <%= raw answer.answercontent %></li>
</ul>
</div>
</div>
</div>
</div>
<hr class="line">
<% end %>
Now, for the div of class 'like', I have the following js written (document ready omitted):
# Heart like
$(".heart-btn").click ->
$(this).toggleClass('clicked')
$(".liked").show().fadeOut(500)
the 'liked' class is the +1 that will show when the heart is clicked.
But as you can probably imagine, this makes ALL the hearts on the page display the '+1'. I want to target only the 'heart' of the 'answer' that was clicked. I reckon I can do this by referencing the current 'answer' as a dom object, but I am unsure on how to do this. My attempt is doing something like:
# Heart like
current_ans = <%= answer %>
$(".heart-btn").click ->
$(this).toggleClass('clicked')
current_ans.$(".liked").show().fadeOut(500)
But the syntax seems very off to me and it doesn't seem to work.
(I think partially I'm not finding the solution because I cannot phrase my question so well. Please advise if this is the case. Thanks!)
jQuery closest is ideal for this:
$(".heart-btn").click ->
$(this).toggleClass('clicked')
$(this).closest('.like').find(".liked").show().fadeOut(500)
I am looking to make a link_to based on the following href. I'm not sure how to put the <i> element inside the link_to.
Any ideas?
<i class="fa fa-folder"></i> View
You can wrap any thing you need inside the link_to opening with do and closing it with end:
<%= link_to '', class: 'btn btn-white btn-sm' do %>
<i class="fa fa-folder"></i> View
<% end %>
That will generate:
<a class="btn btn-white btn-sm" href="">
<i class="fa fa-folder"></i> View
</a>
Note the first argument must be '', this way all inside of it will act as content inside an <a> tag.
By default the links in the dropdown for the mobile container are on the left (as shown below):
Is there a way to get them to show up on the right and not the left? I tried using text-align:right; but it's not showing up clean:
You can create your own class, for example .align-right and add it to the .nav-collapse container to align the links to the right. This way your changes won't affect the other elements that rely on that class on the bootstrap stylsheet. Try this:
.nav-collapse.align-right {
text-align:right;
}
Then you can do this:
<div class="nav-collapse align-right"> ..links.. </div>
And your links will be placed on the right side instead.
Demo: http://jsfiddle.net/PWFSX/
From Bootstrap documentation:
http://getbootstrap.com/components/#navbar
You have to use these classes "navbar-form navbar-left
I used them like that:
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="span10"></span>
</button>
<%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
<ul class='nav navbar-nav navbar-right'>
<% if user_signed_in? %>
<li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li>
<% else %>
<li><%= link_to 'Sing in', new_user_session_path %> </li>
<% end %>
</ul>
</div>
</div>