I am working on a rails project using the spree ecommerce engine.
I am wanting to edit the links just above the search bar but can not find them in the partial _nav_bar.html.erb
I also can not find the Deface overrides or js code that adds these fields. In the _nav_bar partial I have
<nav id="top-nav-bar" class="columns omega ten">
<ul id="nav-bar" class="inline" data-hook>
<h2>This happens before</h2>
<li id="search-bar" data-hook>
<h2>This happens after</h2>
<%= render :partial => 'spree/shared/search' %>
</li>
</ul>
</nav>
And it results in the code:
<nav id="top-nav-bar" class="columns omega ten"><ul id="nav-bar" class="inline" data-hook>
<h2>This happens before</h2>
<li>My Account</li>
<li>Logout</li>
<li id="search-bar" data-hook>
<h2>This happens after</h2>
............
</nav>
Where do these two links come from? How do I edit them? Why are they not simply held in this partial?
Thanks!
it is an override of the spree_auth_devise extension. See auth_shared_login_bar.rb where it inserts the links before li#search-bar
Related
I have partials which display in sidebar like below
__side_bar_partials.html.erb
<div class="col-sm-3">
<div class="account-left">
<ul>
<li class="active">Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
</div>
now what i need when i render this partial i want to add css class active added on selected menu
right now i render it with normal way
<%= render "profile_sidebar"%>
what i need to include in above code so it will add active class on selected menu
Basically you have 2 choices.
First one is to check the current page and highlight the right menu choice.
<div class="col-sm-3">
<div class="account-left">
<ul>
<li class="<%= 'active' if current_page?(menu1_path) %>">Menu1</li>
<li class="<%= 'active' if current_page?(menu2_path) %>">>Menu2</li>
<li class="<%= 'active' if current_page?(menu3_path) %>">>Menu3</li>
<li class="<%= 'active' if current_page?(menu4_path) %>">>Menu4</li>
<li class="<%= 'active' if current_page?(menu5_path) %>">>Menu5</li>
</ul>
</div>
</div>
But since you are looking for more elegant way, I would suggest second choice: doing a separate helper for your list elements. The solution with helper is perfectly described here.
Hope it helps.
playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.
I have bought a twitter bootstrap theme from wrapbootstrap.
I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application.
I am new to this and I have no idea how to do it. After doing a lot of research on this, I found only a very few discussion regarding this issue. As for example I found this post: Implementing WrapBootstrap theme into Rails App
But, I am not totally sure how the assets from the theme will be applied to my application. I have copied all the assets under my project's app/assets/images, app/assets/javascripts and app/assets/stylesheets folders from the theme's corresponding folders. Then, I got several error when I tried to run my app locally. I deleted my application.css file, after that it started working. But, I can not see any design from the theme being applied yet. What should I do to make this theme work into my rails app?
First check this screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
then I would add a bootstrap gem like bootstrap-sass, then add the JS files through the gem by adding them to the manifest, something like this:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
then i would get the css files that you bought from wrapboostrap and place them in you assets/stylesheets folder, then add the necesary markup and clases to your app this is how ive done it before.
hope it helps
EDIT:
Markup:
Check the template you downloaded, lets start with the navbar for example
Code from template:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<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="container">
<a class="brand" href="index.html">Gaia Business</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Service</li>
<li>FAQ</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Dropdown 4</li>
<li>Dropdown 5</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Now you need to place yourself in your app, if the navbar shows in every view on your app, you should mention it on the layouts/application.html.erb something like this:
<!DOCTYPE html>
<html>
<head>
<title>Golden Green Chlorella</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>
and last, do your navbar partial
_navbar.html.erb:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
</a>
<div class="container">
<%= link_to "Your app", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
<li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>
<li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>
<li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>
<li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>
<!-- <li class="active">Home</li> -->
</ul>
<ul class="nav pull-right">
<li><%= link_to "English", static_english_path%></li>
<li><%= link_to "Español", static_spanish_path%></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
That was only for the navbar, now you need to do the rest, add the markup your template shows you to do, with all your app, its not an easy job, but thats how its done.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply your new theme.
I'm a front-end web developer working on my first serious rails project (v3.2.8). I've successfully installed Foundation version 3.2.0 using the gem.
I am having trouble with the navigation toggle, which appears on smaller screen sizes and is used to expand and collapse the navigation links. When I click on it, it does nothing.
(You can see the documentation for the responsive zurb nav on their website: http://foundation.zurb.com/docs/navigation.php).
The code in question is:
<nav class="top-bar">
<ul>
<li class="toggle-topbar">
</li>
</ul>
<section>
<ul class="right">
<li class="has-dropdown">
<%= link_to "#{#user.email} | #{#user.credits_count}",
dashboard_path, :class => 'first-link' %>
<ul class="dropdown">
<li>
Settings<i class="icon-cog"></i>
</li>
<li>
Downloads<i class="icon-cloud-download"></i>
</li>
<li>
Subscription<i class="icon-calendar"></i>
</li>
<li>
<%= link_to 'Purchase Credits <i class="icon-money"></i>'
.html_safe, credits_path %>
</li>
<%= render "shared/menu_bar" %>
</ul>
</li>
</ul>
</section>
</nav>
The odd part is, when I remove:
<ul>
<li class="toggle-topbar">
</li>
</ul>
... Everything works as it should, but the first link:
<%= link_to "#{#user.email} | #{#user.credits_count}",
dashboard_path, :class => 'first-link' %>
... appears twice - Once where the actual toggle arrow should be and again once you click it to expand the navigation links.
Why would the navigation work properly when the toggle is not in the code and malfunction when it is?
Any help would be greatly appreciated.
I found this answer on another forum.
https://groups.google.com/forum/#!topic/foundation-framework-/-5F_kQWfNQ4
Put the following in the html:
<script src="http://foundation.zurb.com/public/assets/marketing_docs.js"></script>
And at least for me, the dropdown now works...
EDIT: as of Foundation 5 the marketing_docs file is no longer available
I'm currently trying to understand why the toggle isn't working.
I'm using will_paginate in my rails application, it's working fine but I would like to use ul li list for my webdesigner layout. Actually with my code, it's only rendering
my view :
<div class="pagination">
<ul><li><%= will_paginate #organizations %></li></ul>
</div>
My source code:
<ul><li><div class="pagination">
<span class="previous_page disabled">← Previous</span>
<em>1</em>
<a rel="next" href="/organizations?page=2&search=2&submit_search=ok">2</a>
3
<a class="next_page" rel="next" href="/organizations?page=2&search=2&submit_search=ok">Next →</a>
</div></ul>/<li>
I would like to have this kind of result :
<div class="pagination">
<ul>
<li class="prev"><span>Prev</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li class="next"><span>Next</span></li>
</ul>
</div>
How can it be done?
The will_paginate docs link to an example that is nearly identical to what you're asking for here.
Scroll down to "Doing it Your Way."