I have the following in my index:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<% render partial: 'booksocial', locals: {book: book} %>
</div>
Then in my partial:
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=I Like BIg Books&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://books.com/book/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
The page is rendering with the dropdown button but it's actually not rendering the dropdown options. Is there something in my code preventing the list from rendering?
Easy answer that I'm surprised no one chimed in with. I'm not actually outputting the partial at the moment.
<%= render partial: 'booksocial', locals: {book: book} %>
Related
I have a page (show route) that looks like this:
and i would like to position the link to "All Camgrounds" to the right of the card. I tried several things like adding classes like "text-right" or "justify-content-end", but it did not work.
I am using the framework Boostrap-5.
Any help would be much appreciated. Here is the code for the SHOW page :
<% layout('layouts/boilerplate') %>
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-header">
<h2>
<%= campground.title %>
</h2>
</div>
<img src="<%= campground.image %>" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<%= campground.description %>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted">
<%= campground.location %>
</li>
<li class="list-group-item">
$ <%= campground.price %> /night
</li>
</ul>
<div class="card-body">
<a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
<a class="card-link d-inline text-right" href="/campgrounds">All
campgrounds</a>
</div>
</div>
</div>
</div>
There are many different ways to align right in Bootstrap 5.
In your case it's probably easiest to use float-end.
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-header">
<h2> Title </h2>
</div>
<img src="//via.placeholder.com/500" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text"> campground.description </p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted"> campground.location </li>
<li class="list-group-item"> $ 39/night </li>
</ul>
<div class="card-body">
<a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
<a class="card-link float-end" href="/campgrounds">All campgrounds</a>
</div>
</div>
</div>
</div>
https://codeply.com/p/S9PyKHZC9y
Also note, left and right have been replaced with start and end in Bootstrap 5.
I'm trying to create a bootstrap carousel for the homepage of a blog that scrolls through the last three articles from the database. I got it working for a carousel that advances automatically but I wanted to have the next and previous buttons but when I try in that one it does not work. I can get the first which is the last article in the table to display but it will not advance.
I couldn't figure out out a better way to get the last three articles so here is ow I did it. I am definitely open to suggestions to make this better. My home action for the pages_controller is:
def home
#articles = Article.last(3).reverse
#art1 = #articles.pop
#art2 = #articles.pop
#art3 = #articles.pop
end
Now the carousel:
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#art3.image.url, width: '100%') %>
<div class="carousel-caption d-none d-md-block">
<h5><%= #art3.title %></h5>
</div>
</div>
<div class="carousel-item">
<%= image_tag(#art2.image.url, width: '100%') %>
<div class="carousel-caption d-none d-md-block">
<h5><%= #art2.title %></h5>
</div>
</div>
<div class="carousel-item">
<%= image_tag(#art1.image.url, width: '100%') %>
<div class="carousel-caption d-none d-md-block">
<h5><%= #art1.title %></h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
This works in the works in a version of the carousel that does not have buttons but advances automatically.
I have this sidebar and I am having troubles to open sub-menus.
When I click on a sidebar-dropdown it opens and closes immediately. The more I click the less it opens, and then it doesn't open anymore. Unless I reload...
I tried to disable Turbolink in this menu by adding data-turbolinks="false"in the html. It partially works but this implies other troubles.
The sidebar-dropdowns open and close as expected and for some reason I can't explain after some click in the the main navbar they become unclickable unless I reload the page...
A #appears at the end the url when clcik fails.. like so: http://localhost:3000//categories/66# (it happends if turbolink is enabled or disabled"
There are no error at all in the browser console.
In My app I also use gem 'webpacker', '~> 3.5.5'
Any idea of what could be wrong? What direction to take to fix this?
<div class="page-wrapper chiller-theme toggled"> <!--data-turbolinks="false" is added in the div when turbolink is disabled -->
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
Menu pro
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-menu">
<ul>
<li class="sidebar-dropdown">
<a href="#">
<i class="fas fa-cart-arrow-down"></i>
<span>Orders</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<%= link_to "Orders", orders_path, class: "list-item" %>
<%= link_to "New Orders", incoming_orders_path, class: "list-item" %>
</li>
</ul>
</div>
</li>
<li>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fas fa-truck"></i>
<span>Market</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<%= link_to "Markets", market_path, class: "list-item" %>
</li>
</ul>
</div>
</li>
<li>
</li>
<li class="sidebar-dropdown">
<a href="#" id="suppliers">
<i class="fas fa-address-book"></i>
<span>Suppliers</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<%= link_to "New Suppliers", new_supplier_path, class: "drop-item" %>
</li>
<li>
<%= link_to "Suppliers", suppliers_path, class: "drop-item" %>
</li>
</ul>
</div>
</li>
<li>
<li>
<%= link_to clients_customization_path, class: "list-item" do %>
<i class="fa fa-palette"></i> Customisation
<% end %>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
</nav>
</div>
and this is the js file:
// the below turbolink:load is commented when turbolink is disabled
$(document).on('turbolinks:load', function() {
// The below commented jQuery line is commented when turbolink is disabled and uncommented when trubolink is enabled
// jQuery(function ($) {
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if ($(this).parent().hasClass("active")) {
$(".sidebar-dropdown").removeClass("active");
$(this).parent().removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this).next(".sidebar-submenu").slideDown(200);
$(this).parent().addClass("active");
}
});
$("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
$(".page-wrapper").addClass("toggled");
});
// });
});
UPDATE > I figured out that in the case of turbolink is disabled that sidebar-dropdowns become unclickable after I visit a show page (any show pages make sidebar fails)In my show page I use turbolink for bootstrap carrousel.
So the deal is to find HOW I can make turbolink working correctly everywhere
I think you need to prevent the actual behaviour of the link that toggles the drowpdown.
$(".sidebar-dropdown > a").click(function(e) {
e.preventDefault();
....the rest
At least that will prevent the '#' on the url.
I'm working on restructuring my code to clean it up and I'm trying to move over into using view helpers to do this. Right now I have the following in my views file:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=Book Subject&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://url.com/books/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-facebook fb-share-button" id="fbid">
<div data-href="http://url.com/books/<%= book.book_name %>" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore jssocials-share-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.url.com%2Fsomebooks%2Fbooks%2F<%= book.book_name%>&src=sdkpreparse">
<i class="fa fa-facebook jssocials-share-logo"></i><span class="jssocials-share-label">Share</span>
</a>
</div>
</div>
</li>
The only thing I can think of to alter this to a view helper is to go to books_helper.rb and do something like:
module BooksHelper
def social_sharing (media)
when 'email'
content_tag(:div, class: 'jssocials-share jssocials-share-email')
end
end
I've barely scratched the service here but I feel as even that is incorrect. I've nothing that's looking for the media type so email is worthless. Plus there's a div class around the href I'm hitting but the href has it's own class and an onclick plus styling. Any nudge would be appreciated. I have never built out a custom view helper.
You could pass a block...
<%= social_sharing 'email' do %>
Print
<i class="jssocials-share-logo"></i>
<% end %>
And define your helper method as...
module BooksHelper
def social_sharing(media, &block)
case media
when 'email'
content_tag :div, class: 'jssocials-share jssocials-share-email', &block
end
end
But I think that might just make your code more obscure even if it does DRY up the jssocials classed divs. I highly recommend "99 Bottles" by Sandi Metz which amongst other things talks about producing clear, maintainable code.
https://www.sandimetz.com/99bottles/
Some of my html.erb files are very long. Due to multiple attributes and sometimes conditions.
For example:
<div class="comment-container">
<div class="comments">
<div class="user-info"></div>
<span class="toggle-comments pull-right comment-activity <%= 'hidden' unless #item.comment_threads.size != #item.root_comments.size %>" data-id="<% item.id %>" data-commentid="<% comment.id %>" data-userid="<% user.id %>">
<i class="fa fa-comment-o fa-lg"></i>
</span>
</div>
</div>
What is the best way to format something like this? Should I use a content_tag? Just leave it as is?
You can take <%= 'hidden' unless #item.comment_threads.size != #item.root_comments.size %> and put in on a helper method:
def hidden(item)
'hidden' unless item.comment_threads.size != item.root_comments.size
end
Then in your view you just call your method:
<div class="comment-container">
<div class="comments">
<div class="user-info"></div>
<span class="toggle-comments pull-right comment-activity <%= hidden(#item) %>" data-id="<%= item.id %>" data-commentid="<%= comment.id %>" data-userid="<%= user.id %>">
<i class="fa fa-comment-o fa-lg"></i>
</span>
</div>
</div>
You won't get rid of the whole line, but makes it cleaner.
If you still don't like that long line, you can break the attributes into different lines, something like this:
<div class="comment-container">
<div class="comments">
<div class="user-info"></div>
<span
class="toggle-comments pull-right comment-activity <%= hidden(#item) %>"
data-id="<%= item.id %>"
data-commentid="<%= comment.id %>"
data-userid="<%= user.id %>">
<i class="fa fa-comment-o fa-lg"></i>
</span>
</div>
</div>
I prefer breaking the attributes in new lines, but not everybody likes it, so use the one that you are more comfortable with.