I have been trying to figure out how to make the progress bar display correctly for a while, but I can't seem to figure it out.
I have an integer value (<% goal.ppercent %>) that I want to set as the value of the progress of the bar. When I try to change any of the "aria-value" it doesn't change the progress bar, but when I change the style=" width: " value it changes the bar. Can somebody explain to me how to do the bootstrap progress bar correctly?
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow=
<% goal.ppercent %> aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<%= number_to_percentage(goal.ppercent, precision: 0) %>
</div>
</div>
You need to change the width of the inner .progress-bar in order to change the percentage.
ARIA just stands for Accessible Rich Internet Applications. It's just a set of attributes that make web content more accessible to people with disabilities. In fact, you don't have to have ARIA attributes in order for the process bar to work.
Since you have the percentage, just go ahead and update .process-bar's width as well.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow=<% goal.ppercent %> aria-valuemin="0" aria-valuemax="100"
style="width: <% goal.ppercent %>%;">
<%= number_to_percentage(goal.ppercent, precision: 0) %>
</div>
</div>
Related
I am trying to get iterate through rails to create cards that grid in 3 then new line etc using each. Currently the cards only stack vertically. I would like them to be in columns of 3 and then resize to stack when the screen is made small.
Currently my code looks like this:
https://i.imgur.com/mnbDIl5.png
And when I make my screen smaller it appears to go to a 3x3 like this:
https://i.imgur.com/G2T9leW.png
Could anyone please help/suggest where I am going wrong?
Currently using Bootstrap v5.2.2
Thanks in advance!
<div class="card text-center text-white row row-cols-3 row-cols-md-3" style="background-color:#ffa82e00;">
<% #drinks.each do |drink| %>
<div class="col-md-3">
<div class="card photo" class="card-img-top">
<%= cl_image_tag drink.photo.key, height: 350, width: 350, crop: :fit if drink.photo.attached? %>
<div class="card-body">
<h5 class="card-title"><%= link_to drink.name, drink_path(drink) %></h5>
<p class="card-text">Price: £<%= drink.price %></p>
<button type="button" class="btn btn-primary"><%= link_to "Buy now", new_drink_order_path(drink) %></button>
</div>
</div>
</div>
<% end %>
</div>
The cards only stack 1 by 1 no matter the viewport size, and my novice knowledge of bootstrap is hindering me from getting them to display in columns of 3.
Try this:
<div class="row">
<% #drinks.each do |drink| %>
<div class="col-12 col-lg-4">
<div class="card text-center text-white" style="background-color:#ffa82e00;">
<div class="card photo" class="card-img-top">
<%= cl_image_tag drink.photo.key, height: 350, width: 350, crop: :fit if drink.photo.attached? %>
<div class="card-body">
<h5 class="card-title"><%= link_to drink.name, drink_path(drink) %></h5>
<p class="card-text">Price: £<%= drink.price %></p>
<button type="button" class="btn btn-primary"><%= link_to "Buy now", new_drink_order_path(drink) %></button>
</div>
</div>
</div>
</div>
<% end %>
</div>
You can wrap cards in the grid like that. This will make a grid of 3 cards wide on lg screens and above then reduces down to 1 column below that.
The loop also changed slightly to more correctly duplicate the card itself, and not extra code.
https://getbootstrap.com/docs/5.2/layout/grid/
The docs above explain the columns in a bit more detail. Version 5.2 automatically handles wrapping columns after 12 columns are exceeded, so this should be all you need!
I'm trying to make a progress bar that changes its inner width depending on the conditions met in my Campaign instance.
In my view
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: <%= progress(campaign) %> %"></div>
I'm trying to make a helper method to make this:
def progress(campaign)
#count = 0
if c.paid?
#count += 25
end
if c.logo_design.present?
#count += 25
end
end
It's not working (conditions are met).
Can someone iluminate me on how is this approach done?
Thanks!
You should edit the aria-valuenow attribute instead I guess
<div role="progressbar" aria-valuenow="<%= progress(campaign) %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= progress(campaign) %>%"></div>
I am currently working on a project that requires me to create a (real) estate agent website. I have imported an XML list with all the properties and created the database, but when I go to create a properties list and insert the first image for each property, it creates two images (one for each property in the list) and assigns both images to each property.
The code is:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<% property.pictures.each do |picture| %>
<% if picture.name.eql?('Photo 10') %>
<img src="<%= picture.url %>" class="img-responsive center-block"/>
<% end %>
<% end %>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
The html output is:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>Pen Y Bryn, Llanfairfechan</h4>
<p>A semi detached three bedroom family home located in a quiet cul de sac in the upper part of the village of Llanfairfechan. The property benefits from double glazed windows, gas central heating, gardens to front and rear. This would make an ideal family home or investment property.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>33, Pen Y Bryn, Llanfairfechan LL33 0UH</h4>
<p>A semi detached three bedroom family home located in a quiet cul-de-sac in the upper part of Llanfairfechan village. The property benefits from double glazed windows, gas central heating, gardens to front and rear. Restrictions apply. Application fees apply. Deposit: £750.</p>
</div>
</div>
</div>
</div>
To me it seems that rails is looping throught the property.picture.each twice (or I'm guessing more if I had more properties) and inserting the output twice but I can't see why.
Many thanks
It looks like you have duplicate pictures with a name attribute of 'Photo 10'. Use your rails console to run a query to confirm this.
Picture.where(name: 'Photo 10').count
How many records are returned? Is your expectation that each property would have one picture with a name of 'Photo 10'? If so you you should expect to have as many pictures returned as properties, if not then you have duplicate entries with the name 'Photo 10' for each property. which brings me to my next point.
You should normalize your database. The fact that you are relying on a non unique attribute, and that there are multiple picture entries that point to the same url tells me that. You are also creating a lot of unnecessary picture entries in the picture table. Instead, I'd create a join table between between properties and pictures, maybe called PropertyPictures. For each unique picture url, create one entry in the Picture table. For each property that uses a picture, create an entry in the join table with that property_id and the desired picture's picture_id. This will help in case your pictures change. As you have it now, if one picture url changes it doesn't change in all places, even if it should. As far as your view goes, now that you have a unique and consistent picture_id, use that, it will be impossible to have duplicates. Also, instead of pulling all pictures, just get the one you want. You could write a method in your property model to do this. It might look like this:
def special_picture
pictures.where(id: 1)
end
And in your view:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img src="<%= property.special_picture.url %>" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
`
If you're only wanting the first image for each listing, why are you looping through all pictures for each listing?
You could do this instead:
<div class="col-sm-3">
<img src="<%= property.pictures.first.url %>" class="img-responsive center-block"/>
</div>
I am trying to display my posts organized by date created. Jquery Masonry works fine for the first container, but for the second container it fails to properly load. When I view the code in a web browser it shows this for the second container:
<div id="pins" class="transitions-enabled">
<div class="box panel panel-default">
</div>
</div>
when it should show this (content display for the first container):
<div id="pins" class="transitions-enabled masonry" style="position: relative; height: 247px; width: 448px;">
<div class="box panel panel-default masonry-brick" style="position: absolute; top: 0px; left: 0px;">
</div>
</div>
app/assets/javascripts/pin.js.coffee:
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
views/pins/index.html.erb:
<%= render 'pages/home' %>
<div id="pins-container" class="container">
<% #pins_by_day.each do |day, pins| %>
<h5 align="center"> <%= day.strftime('%B %d, %Y') %> </h5>
<div class="well well-sm">
<div id="pins" class="transitions-enabled">
<% for pin in pins %>
<div class="box panel panel-default">
<%= link_to pin %>
<div class="panel-body">
<p>
<%= pin.description %>
</p>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
I would appreciate it if someone could explain how to properly load jquery masonry for multiple containers on my page. The first section is loading properly, but the second container is just a single column.
HTML doesn't like it when you have more than one id per page. And jQuery will only find the first one. So if you're ever iterating over a partial or a template, make sure that you either don't use ids, or have the id be dynamic.
So instead of id="pins" try:
<div class="masonry-pins transitions-enabled">
And
$ ->
$('.masonry-pins').imagesLoaded ->
$('.masonry-pins').masonry
itemSelector: '.box'
isFitWidth: true
Also, I imagine inside imagesLoaded callback, you have access to the element at this? Instead of calling $('.masonry-pins').masonry you might just want to call $(this).masonry
Thanks for reading. Super frustrated (and maybe missing something fundamental, I've never been great with Nokogiri)
In short - I have a source:
<div class="schedule-page">
<h3>Sunday, September 1, 2013</h3>
<table class="views-table cols-1 schedule-table">
<div class="game">Game 1</div>
<div class="game">Game 2</div>
</table>
<h3>Sunday, September 7, 2013</h3>
<table class="views-table cols-1 schedule-table">
<div class="game">Game 1</div>
<div class="game">Game 2</div>
<div class="game">Game 3</div>
</table>
<!--and so forth.... -->
</div>
I am able to iterate through the source, grab each day and X number of games, and create the container for each day and fields for each game.
<% #schedule_array.each do |a_game| %> #
<div class="game-info">
<div class="date"><%= #the_date %></div>
<div class="single-game"> # this pulls info for each game, works fine.
<div class="game-home"><%= a_game.css('.field-home-team').text %></div>
<div class="game-score"><%= a_game.css('.field-score').text %></div>
<div class="game-away"><%= a_game.css('.field-away-team').text %></div>
<div class="game-time"><%= a_game.css('.field-game-date-start-time').text %</div>
</div>
</div>
<%end%>
But I really don't know how to retrieve the original date (h3) from the source and parse it in such a way so that I can use it as shown above.
I've tried a dozen variations of the example shown under Moving Nodes, here:
http://nokogiri.org/tutorials/modifying_an_html_xml_document.html
But nothing's working. Can anyone tell me the correct way to handle this? My method is gibberish and I'm not sure it's helpful to put it up.
I assume #schedule_array is coming from something like #schedule_array = Nokogiri::HTML( html_contents).css('.schedule-table').
In which case, you need to traverse back to the parent and go back to it's previous sibling and get the value:
game_date = a_game.parent.previous_element.text
So in your particular case, that line can be:
<div class="date"><%= a_game.parent.previous_element.text %></div>