Now I have the button with which, I can follow user, or un-follow.
Now when the target user is already followed. it's shown just like this.
Then the target user is not followed, it's shown just like this.
I'd like it to be shown 'following' when the target user is already followed.
Then when I bring mouse cursor over the button, the display should be changed to 'Un-Follow'.
How can I do that with bootstrap?
view
<% if user_signed_in? %>
<% unless user == current_user %>
<% if current_user.following?(user) %>
<%= link_to(unfollow_user_path(user), :remote => true, :class => 'btn') do %>
<i class="icon-remove"></i>
Un-Follow
<% end %>
<% else %>
<%= link_to(follow_user_path(user) ,:remote => true, :class => 'btn btn-primary') do %>
<i class="icon-ok icon-white"></i>
Follow
<%end%>
<% end %>
<% end %>
<% else %>
<%= link_to(new_user_session_path , :class => 'btn btn-primary') do %>
<i class="icon-ok icon-white"></i>
Follow
<%end%>
<% end %>
HTML
<a href="/user/1/follow" class="btn btn-primary" data-remote="true">
<i class="icon-ok icon-white"></i>
Follow
</a>
<a href="/user/1/unfollow" class="btn btn-primary" data-remote="true">
<i class="icon-remove icon-white"></i>
Un-Follow
</a>
UPDATE:
<a href="/user/1/unfollow" class="btn" data-remote="true" onhover="someFunction()">
<i id="Following" class="icon-remove"></i>
Following
</a>
Using the onHover event You can use jQuery to change the "class" attribute of the button you want to change the text too.
i.e.
<a href="/user/1/follow" onHover="someFunction();" class="btn btn-primary" data-remote="true">
<i id="Following" class="icon-ok icon-white"></i>
Following
</a>
someFunction() {
$('i#Following').attr("class", "icon-ok icon-white").innerText("Unfollow");
}
you get the picture hopefully.
Edit:
This is the full code that should fire the code in someFunction on mouse over.
<html>
<head>
<script type="text/javascript">
function someFunction()
{
alert("Hello");
}
</script>
</head>
<body>
<a href="/user/1/unfollow" class="btn" data-remote="true" onmouseover="someFunction();return true;" >
<i id="Following" class="icon-remove"></i>
Following
</a>
</body>
</html>
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I am trying to align my words with icon. I tried the methods from this site: Vertical alignment of text and icon in button
current state
My code:
<div class = "row">
<div class = "col-md-8">
<h3><%= link_to item.title, item , id: "font-colour" %></h3>
<p><%= if item.description.length > 70
item.description[0..70].gsub(/\s\w+\s*$/, '...')
else
item.description
end
%></p>
</div>
<%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
<i class="fa fa-square-o fa-2x align-center"></i>
<% end %>
<div class = "col-md-1">
<%= link_to item_path(item), id: "font-colour", method: :delete do %>
<i class="fa fa-trash fa-2x align-center"></i>
<%end%>
</div>
</div>
Adding display: flex;align-items: center; to row could be helpful:
<div class = "row" style="display: flex;align-items: center;">
<div class = "col-md-8">
<h3><%= link_to item.title, item , id: "font-colour" %></h3>
<p><%= if item.description.length > 70
item.description[0..70].gsub(/\s\w+\s*$/, '...')
else
item.description
end
%></p>
</div>
<%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
<i class="fa fa-square-o fa-2x align-center"></i>
<% end %>
<div class = "col-md-1">
<%= link_to item_path(item), id: "font-colour", method: :delete do %>
<i class="fa fa-trash fa-2x align-center"></i>
<%end%>
</div>
</div>
I have a simple form that simply sets the #active attribute to true/false. Within the form there is only one single hidden_field. Here is how I currently have the submit button for the form looking when the #active status is true.
When clicked, the form will submit and change the #active attribute to false. When redisplayed it will look like this:
.
Basically the form functions as a toggle switch that behind the scenes submits a form which toggles an attribute to true/false.
It works wonderfully. However, I do not want any of the default button styling. I don't want that gray box or the border. Instead: I only want to show that font-awesome glyphicon for the button, and that is it.
Here is the code I currently have which displays the glyphicon with the gray button css:
<td>
<%= form_for blog do |f| %>
<% if blog.active %>
<%= f.hidden_field :active, value: false %>
<% else %>
<%= f.hidden_field :active, value: true %>
<% end %>
<% if blog.active? %>
<%= f.button do %>
<i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
<% end %>
<% else %>
<%= f.button do %>
<i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
<% end %>
<% end %>
<% end %>
</td>
Question: How can I take the button styling off of the f.submit button and only have the glyphicon to represent the submit button?
Would love to hear if there is a better solution. Basically all I did was added a new css class which sets the background property to none and the border property to none.
<% if blog.active? %>
<%= f.button, class: 'remove-submit-btn-style' do %>
<i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
<% end %>
<% else %>
<%= f.button, class: 'remove-submit-btn-style' do %>
<i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
<% end %>
<% end %>
And then in app/assets/stylesheets/application.scss
.remove-submit-btn-style {
background: none;
border: none;
}
This is the code I have:
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in", omniauth_authorize_path(resource_name, provider) %>
<% end -%>
<% end -%>
</div>
From the code above how can I change link_to "Sign in" with:
<button class="btn btn-facebook btn btn-lg btn-block"><i class="fa fa-facebook fa-2x"></i> | Connect with <br> Facebook</button>
So instead of "sign in" simple button, I will show my custom made Facebook button.
Answer: this is how i solved it
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to omniauth_authorize_path(resource_name, provider), class: 'btn btn-facebook btn btn-lg btn-block' do %>
<i class="fa fa-facebook fa-2x"></i>
|Connect with <br> Facebook
<% end %>
<% end -%>
<% end -%>
</div>
and it looks like this
when someone clicks on that,it gets redirected to the required path,which is omniauth_authorize_path(resource_name, provider)
for those who need the css code for this button here it is
.btn-facebook.btn.btn-lg.btn-block {
color: white;
background-color: DodgerBlue;
font-size: 1em;
&:hover {
color: white;
background-color: RoyalBlue;
}
}
I would appreciate if someone,would tell me how to make the "f" icon,to be in the center of the button.
Thank you
What I did:
<%= link_to raw('<span class="fa fa-facebook"></span> Ingresa con Facebook'), user_omniauth_authorize_path(:facebook), :class => 'btn btn-block btn-social btn-facebook form-control' %>
Im using the bootstrap-social gem and the font-awesome gem to style it exactly like facebook looks :P
https://github.com/gavinkflam/bootstrap-social-rails
Here is the code i have for my modal window it is located in views/devise/registration/_newfile.html.erb folder
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<div id="normalModal" class="modal fade" data-toggle="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title">Signup to sharebox</h1>
</div>
<div class="modal-body">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is the button that this form makes
When clicked it gives the proper modal window,which appears as a popup,and the screen in the background gets darker as it should,everything works fine.
Question: How to put this button in my navigation bar,in the header? which is located in views/layouts/_header.html.erb,(my
layouts/application.erb file calls this partial)
I tried to put in my _header partial this code
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><%= render "users/registrations/newfile" %></li>
<% end %>
</ul>
</div>
</nav>
As you see i used <%= render "users/registrations/newfile" %>
and the form appeared literally in my navbar,when i click on sign up button
When it actually should appear in the main layout,so the button is in my header but the form must appear in the main body or layout.
how can i fix it?
thank you
I think you need to show the signup dialog anywhere in the site where the SignUp button exists in the navigation bar. So for this make these changes in the code:
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<% end %>
</ul>
</div>
</nav>
And outside this nav where you body is rendered using <%= yield %> or in the container whatever your layout is using for the main body in that add this
<%= render "users/registrations/newfile" %>
And from this partial remove:
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
as you have added this in the nav bar.
I hope this will do the job. Basically what you are doing is writing the dialog code in the layout itself but outside the nav bar. In the body of you view. Not in header.
I am iterating through a database and displaying the results of each in two columns on the same row. Currently, the image is always displayed in the first column of every row. I would like to alternate this so on every other the image is on the right and the description on the left.
<% #guide.in_groups_of(2, false).each do |guide_row| %>
<% for guide in guide_row %>
<div class='row guide-row'>
<div class="col-md-6">
<%= link_to image_tag(guide.image(:large)), guide.image(:xlarge), :class => 'guide-image' %>
</div>
<div class="col-md-6 guide-list ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<h2 class='guide'><%= guide.title %></h2>
</a>
<h4 class='guide'>From <%= guide.date_starting.strftime("%a %b #{guide.date_starting.day.ordinalize}") %> to <%= guide.date_ending.strftime("%a %b #{guide.date_starting.day.ordinalize}") %></h4>
<div class='col-md-12'>
</div>
<div class="accordion" id="categories">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle btn glyphicon" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<i class='glyphicon glyphicon-info-sign info-icon'></i>
</a>
<% unless guide.extra_info.nil? %>
<%= link_to ' ', guide.extra_info, :class => 'glyphicon glyphicon-globe info-icon' %>
<% end %>
<div id="info_<%= guide.id %>" class="accordion-body collapse">
<div class="acccordion-inner">
<% if guide.description.empty? %>
<h4>No description available</h4>
<% else %>
<p class='guide-description'><%= guide.description %></p>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
I am not sure how you are iterating through your rows, it's not really clear from the above.
But I would suggest you create 2 partials (small erb files), one for the even row and one for the odd row. Then based on your iterator, you would render either the even partial or the odd partial, each partial have the image and text swapped from each other.
Basically something like this: (not tested, but should give you the idea.
<%= #even_row? ? render 'shared/even_row' : render 'shared/odd_row' %>
to figure out which pair is even vs odd you can do something like this:
<% #guide.in_groups_of(2, false).each_with_index do |guide_row, index| %>
<%= index.even? ? render 'shared/even_row' : render 'shared/odd_row' %>
then you can use index.even?to determine which partial to render.
Hope that helps