I have followed Hartl's tutorial to make a ToDoList with a tagging system, also with the help of this word guide and video.
However, as a consequence of making an additional page for filtered tasks, the html isn't rendering in a nice aligned manner as before. This can be seen from the footer file's image, which is not centralised, hence not aligned with the footer's sentence(which is still centralised),
while my home page doesn't seem to have this problem.
Does anyone know the solution to the problem? I'm really bad with working with these html files embedded with Ruby due to the fact the rendering occurs almost everywhere. Moreover, I didn't really understand how the tutorial was able to the filtering possible the moment we click the tags. I do not need the text box as per the home page feed. Do let me know if more information is required.
Html code for involved files in log
application.html.erb(the general layout of any page)
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= render 'layouts/rails_default' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<!-- <%= debug(params) if Rails.env.development? %> -->
</div>
</body>
</html>
<script>
$(document).on('ready page:load', function () {
$('#micropost_tag_ids').chosen({
allow_single_deselect: true,
width: '100%'
})
});
</script>
micropost/index.html.erb (Filtered Page)
<h1>Filtered Micropost Page</h1>
<div class = "col-md-8 offset-2">
<% #microposts.each do |micropost| %>
<p><%= truncate(micropost.content, length: 50) %></p>
<p><small>Tags: <%= raw micropost.tags.map(&:name).map { |t| link_to t, tag_path(t) }.join(', ') %></small</p>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
<% if current_user?(micropost.user) %>
<%= link_to "Done", micropost_path(micropost), method: :delete, data: { confirm: "Keep up the good work!" } %>
<% end %>
</span>
<% end %>
</div>
Footer.html.erb
<footer class="footer">
<small>
A To-Do Manager</a>
by Prashin for
Prashin,
based on the rails tutorial guide by
Michael Hartl.
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</nav>
<br>
<br><br>
<p align = center>
<%= link_to image_tag("AikenDueet.jpg", alt: "KenyuDueet"),
'www.google.com' %>
<br>I can do it!</p>
</footer>
header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "To-Do App", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Users <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "All Users", users_path %></li>
<li><%= link_to "Administrators", users_admin_path %></li>
</ul>
</li>
<% if logged_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "#{current_user.name}", current_user %></li>
<li><%= link_to "Account Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: :delete %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>
Log
Rendered microposts/index.html.erb within layouts/application (199.0ms)
Rendered layouts/_rails_default.html.erb (55.9ms)
Rendered layouts/_shim.html.erb (0.2ms)
Rendered layouts/_header.html.erb (0.7ms)
Rendered layouts/_footer.html.erb (0.8ms)
Completed 200 OK in 278ms (Views: 259.1ms | ActiveRecord: 11.4ms)
This seems like a bootstrap grid system problem, you have your main content inside a div.container, but your footer is inside the same container and you don't define some columns on it.
Solution 1: Put the footer inside a row and define your columns
<div class="container">
<div class="row">
<%= render 'layouts/footer' %>
</div>
</div>
Solution 2: Put your footer on its own div.container and define your columns for it
<div class="container">
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<% end %>
<%= yield %>
<!-- <%= debug(params) if Rails.env.development? %> -->
</div>
<div class="container">
<%= render 'layouts/footer' %>
</div>
Related
When I added the logo using navbar-brand to my header page, it overlaps the divs on various pages rather than being encapsulated by the header, as seen in the picture attached:
header overlapping divs
Does anyone know how to make sure the logo is in the same div as the rest of the header?
Here is my code:
<header>
<nav class="navbar bg-transparent navbar-fixed-top py-5">
<div class="navbar-inner">
<div class="container">
<nav class= "py-5">
<% if logged_in? %>
<div class="col-sm-2">
<%= link_to image_tag("logo1.png", size: "150x100", alt: "logo"), explore_path, class: 'nav navbar-brand navbar-left', id: 'logo-image' %>
</div>
<ul class="nav navbar-nav navbar-right">
<% #mentee = Mentee.find_by(user_id: current_user.id) %>
<% #mentor = Mentor.find_by(user_id: current_user.id) %>
<% if #mentee.nil? && #mentor.nil?%>
<li><%= link_to "Log out", logout_path, method: :delete %></li>
<% elsif current_user.mentee? %>
<li><%= link_to "Profile", menteeprofile_path(#mentee), method: :get %></li>
<li><%= link_to "Matches", matches_path, method: :get %></li>
<li><%= link_to "Log out", logout_path, method: :delete %></li>
<% elsif current_user.mentor? %>
<li><%= link_to "Profile", mentorprofile_path(#mentor), method: :get %></li>
<li><%= link_to "Matches", matches_path, method: :get %></li>
<li><%= link_to "Log out", logout_path, method: :delete %></li>
<% else %>
<li><%= link_to "Profile", userprofile_path(current_user), method: :get %></li>
<li><%= link_to "Matches", matches_path, method: :get %></li>
<li><%= link_to "Profile", profile_path, method: :get %></li>
<li><%= link_to "Log out", logout_path, method: :delete %></li>
</ul>
<% end %>
<% else %>
<%= link_to image_tag("logo1.png", size: "150x100", alt: "logo"), "/", id: 'logo-image'%>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign up", "/users/new" %></li>
</ul>
<% end %>
</nav>
</div>
</div>
</div>
</nav>
</header>
header {
position: relative;
width: 100%;//footer = 100, topmenu = 50
max-width: 100%;
min-height: auto;
text-align: center;
color: #fff;
padding-bottom: 65px;
}
Here are two button tabs :
How to express
1:
<% if logged_in? %> then hide b button tag
2:
<% if studentlogged_in? %> then hide A button tag
both methods<% if logged_in? %> , <% if studentlogged_in? %> are valid
<% if logged_in? %> <<==#A button tab
<li><%= link_to "Users", users_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Tutor Center", login_path %></li>
<% end %>
<% if studentlogged_in? %> <<==#B button tab
<li><%= link_to "StudentUsers", student_users_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", studentcurrent_user %></li>
<li>
<%= link_to "Settings", edit_user_path(studentcurrent_user) %>
</li>
<li class="divider"></li>
<li>
<%= link_to "Log out", studentlogout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Student Center", studentlogin_path %></li>
<% end %>
Maybe you mean this structure:
<% if studentlogged_in? %>
...
<% elsif logged_in? %>
...
<% end %>
Where that shows the student one, the regular one, or nothing, but never both.
I think this is what you want:
<% if logged_in %>
# render partial containing html code for button A
<% elsif studentlogged_in %>
# render partial containing html code for button B
<% else %>
# render both partials
<% end %>
I'm trying to get my navbar to scale to a dropdown menu when the screen is made smaller. The dropdown menu does appear on a smaller screen, however, when I press the dropdown menu, nothing happens. It's supposed to present the navbar options up but this isn't happening, I'm wondering what I may be doing wrong.
This is my code in my application.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>FYP</title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<%= 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>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "SL League", welcome_index_path, id: "logo" %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<% if current_user %>
<li><%= link_to current_user.email, user_path(current_user.id) %> </li>
<li><%= link_to "Log Out", logout_path %></li>
<% else %>
<li><%= link_to "Sign Up", signup_path %></li>
<li><%= link_to "Log In", login_path %></li>
<% end %>
<li><%= link_to "Home", welcome_index_path %></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<%= yield %>
</div>
<% flash.each do |key, value| %>
<%= content_tag(:div, class: "alert alert-#{key}") do %>
<p><%= value %></p>
<% end %>
<% end %>
</body>
</html>
I also have imported bootstrap into my application css file but this doesn't do anything either.
I am using bootstrap for creating twitter like app. The contents on the nav bar, under "nav pull-right" disappears when the window size resized to small. How do i do that? Here is my erb file..
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "cntwitter", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right" id="right_nav">
<li><%= link_to "Home", root_path %></li>
<% if signed_in? %>
<li><%= link_to "Users", users_path %></li>
<li id="fat-menu" class="dropdown">
Account <b class="caret"></b>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
The twitter bootstrap scaffolding, or grid, is static by default. It sounds like you want the contents of your web page to scale with the browser window. In that case, I would recommend using the "fluid" scaffolding :: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
how can i join the ruby code with the html code? I want that the html "href" link with the path (ruby). Could somebody help me? For example: <li class="active">Home</li> , the href linked to Ruby <%= link_to "Home", root_path %> .
Ill want that my Button Home, for example is linked with the Ruby root_path.
HTML Code
> <div class="navbar navbar-fixed-top">
> <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="#">My Workingtimes</a>
> <div class="nav-collapse">
> <ul class="nav">
> <li class="active">Home</li>
> <li>Log In</li>
> <li>Sign In</li>
> </ul>
> </div><!--/.nav-collapse -->
> </div>
> </div>
> </div>
RUBY CODE
<div id="container">
<div id="content">
<% if flash[:notice] %>
<p id="notice">
<%= flash[:notice] %>
</p>
<% end %>
<% if flash[:alert] %>
<p id= "alert">
<%= flash[:alert] %>
</p>
<% end %>
</div>
<div id="footer">
<%= link_to "Home", root_path %> |
<%= link_to "Sign In", new_user_path %> |
<% if user_signed_in? %>
<%= link_to "Logout", logout_path, method: :delete %> |
<%= link_to "My Workingtimes", mytimes_path %>
<% else %>
<%= link_to "Login", login_path %>
<% end %>
<%= yield %>
</div>
</div>
You can run rake routes and see what, for instance, root_path points to.
Unless you haven't made any changes, it probably points to /, in which case you can have href = "/"
This is assuming that you absolutely need to enter the path name in the HTML. Otherwise, I would highly recommend converting your .html to .html.erb and then use something like <%= link_to "Home", root_path %> as you had mentioned.