Row, col-md-4 adding a new post - ruby-on-rails

I started learing ruby and i wanted to create an album page when you can add posts with images. I came across a problem when I add a post it is not aligned, like on bootstrap album example: https://getbootstrap.com/docs/4.5/examples/album/
Look at what i've done https://iv.pl/image/bootstrap.Gt2w3RT
<!DOCTYPE html>
<html>
<head>
<title>AlbumSite</title>
<%= csrf_meta_tags %>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/">
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body>
<section class="jumbotron text-center">
<div class="container">
<h1>Simple album</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
Add a new album
The first page
</p>
</div>
</section>
<div class="postsSection bg-light">
<div class="container col-md-4" >
<div class="postBox">
<%= yield %>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</body>
</html>
<% #posts.each do |post| %> <!-- no %= because this isn an output, tylko przy pokazywaniu zmiennych tego sie uzywa -->
<div class="row">
<div class="card mb-4 shadow-p">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
<div class="btn-group">
<div>
<%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
<div class="btn-group">
<div>
<%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
</div>
</div>
</div>
</div>
<% end %>

The row has to go before you go through each post
<div class="row">
<% #posts.each do |post| %>
<div class="col-md-4">
<div class="card">
<div class="card-title">
<%= post.title %>
</div>
</div>
</div>
<% end %>
</div>

Related

Using Rails 7 and Taildwincss to put a picture and a card next each other

I'm trying to implement the following design, using Rails 7 with Tailwindcss:
I'm new to Taildwincss and I realize there are many ways to achieve this design. However I cannot fully replicate it. This is the code I'm using in my view:
<div class="grid gap-1 grid-cols-12 grid-rows-1">
<% #user.each do |user| %>
<% if user.photo? %>
<div class="p-5 col-span-2">
<div class="bg-white p-5 rounded-lg shadow-lg">
<%= image_tag "user_photo.png", width: 100 %>
</div>
</div>
<% else %>
<%# ToDo: %>
<%# image_tag user.photo, width: 100 %>
<% end %>
<div class="p-5 col-span-10">
<div class="bg-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-2 text-gray-800"><%= user.name %></h2>
<p class="text-gray-700 text-right">Number of posts: <%= user.posts.count %></p>
</div>
</div>
<%end%>
</div>
And this is the result:
What could I change to get a bit closer to the wireframe?
Keep both the div containing both the image and card in flex and add item-center class to it.
Refer to this pseudo code
<div class="flex flex-row item-center">
<div class="bg-white rounded-lg shadow">Image</div>
<div class="bg-white rounded-lg shadow">
card
</div>
</div>
And here is the solution code
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row items-center">
<div class="p-10">
<div class="rounded-lg bg-gray-200 p-10 shadow-lg">%></div>
</div>
<div class="p-5">
<div class="rounded-lg bg-gray-200 p-5 shadow-lg">
<h2 class="mb-2 text-2xl font-bold text-gray-800">Lily</h2>
<p class="ml-28 text-right text-gray-700">Number of posts: 2</p>
</div>
</div>
</div>

How to iterate through a bootstrap card with rails

I'm not sure where put the start and end of my iteration
Im using bootstrap frame work and its supposed to look like this
what bootstrap looks like
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
This is what mine looks like
what mine loos like
<div class="row row-cols-1 row-cols-md-3">
<% #apparels.each do |apparel| %>
<div class="col mb-4">
<div class="card h-100">
<%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
<div class="card-body">
<h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
<p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
</div>
</div>
</div>
<% end %>
</div>
Not sure what I'm doing wrong
Since you want each 3 boxes per-row, you can change line 3 to col-md-4, total each column is 12, so 12/4 = 3 it will automatically moving to next row
<div class="row row-cols-1 row-cols-md-3">
<% #apparels.each do |apparel| %>
<div class="col-md-4">
<div class="card h-100">
<%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
<div class="card-body">
<h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
<p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
</div>
</div>
</div>
<% end %>
</div>

How to use link_to in rails to put multiple things in a single link?

This is my code:
<div class="column">
<div class="post-module">
<a href="https://www.livescience.com/59802-should-we-fear-
intelligent-robots.html" >
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div>
<img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of Intelligent
Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
</a>
</div>
</div>
I want to make that code in rails but I am just a beginner in rails and I wasn't able to find something that could help me in this. I only know the basic idea of the link_to in rails.
link_to method can take a block and display it's evaluation as a link content:
<%= link_to "https://www.livescience.com/59802-should-we-fear-intelligent-
robots.html" do %>
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div><img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of
Intelligent Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
<% end %>

Rails HTML embedding not working correctly

so I'm trying to show some blog-type data on one of my pages. It works fine, but is posting the posts all at the end of the div as well.
Like this:
Image
<div class="style-2 mb-20 shadow bordered light-gray-bg news-margin col-md-5">
<!-- page-title start -->
<!-- ================ -->
<h1 class="page-title">Latest News</h1>
<div class="separator-2"></div>
<!-- page-title end -->
<p class="lead">The latest news will be posted here:</p>
<div class="row grid-space-12">
<%=# news.each do |news| %>
<div class="col-sm-12">
<div class="image-box style-2 mb-20 shadow bordered text-center">
<div class="overlay-container">
<i class="fa fa-newspaper-o fa-5x p-20"></i>
<div class="overlay-to-top">
<p class="small margin-clear"><em> <%= news.topic %> <br> <%= news.created_at.strftime("%A, %b %d") %></em>
</p>
</div>
</div>
<div class="body">
<h3><%= news.header %></h3>
<div class="separator"></div>
<p>
<%=n ews.content %>
</p>
Read More<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<% end %>
</div>
</div>
Figured it out, I had the = in with <%= news.each do |news| %>, which was printing that info out...

why is my bootstrap view for my rails app acting funny?

I'm using the bootstrap-sass gem and for some reason in the navbar I'm using the active class for one of the li's below, however it doesn't appear pressed down.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) %></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= params[:controller].parameterize %>_controller">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<%= link_to 'evoALL', root_path,
html_options = {:class => 'brand'} %>
<% navArr = ["Dashboard", "Help People",
"Get Help", "Contact Us"] %>
<% flash.each do |key, value| %>
<p class="lead"><%= value %></p>
<% end %>
<ul class="nav">
<% navArr.each do |value| %>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<%= yield %>
<div class="container">
<div id="footer"><!-- footer start -->
<div class="row-fluid">
<div class="span12">
<p class="pull-right">
© <%= Date.today.year %>
</p>
</div>
</div>
</div><!-- footer end -->
</div>
</div> <!-- close container div -->
</body>
</html>
index.html.erb for the view file of the index method of the main controller that gets routed to for the root of the application:
<%= provide(:title, 'evoALL') %>
<%= provide(:navActive, 'Get Help') %>
<div class="container">
<div class="row">
<div class="span12">
<p>Needs Home Page</p>
</div>
</div>
</div>
I was applying the active class to the a tag instead of the li tag.
The correct solution would be to replace this:
<% navArr.each do |value| %>
<ul>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
</ul>
<% end %>
with this:
<ul class="nav">
<% navArr.each do |value| %>
<li
<% if (yield(:navActive)==value) %>
class="active"
<% end %>>
<a href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>

Resources