Skip to content

Commit

Permalink
update: css style improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarahcssiqueira
sarahcssiqueira committed Sep 29, 2024
1 parent 2d1bae4 commit 34daf23
Show file tree
Hide file tree
Showing 8 changed files with 126 additions and 97 deletions.
30 changes: 29 additions & 1 deletion app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,32 @@
*= require_self
*/

@import "bootstrap";
@import "bootstrap";


.image-crop {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
border-radius: 50%;
border: 5px solid #fff;
box-shadow: 0 0 10px #333333;
}

.image-crop img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
}

.qr-code {
width: 300px;
height: 300px;
border: 1px solid #fff;
box-shadow: 0 0 10px #333333;
}
31 changes: 17 additions & 14 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
</div>
</header>

<div class="container my-5">
<div class="bg-light py-4 mb-5 rounded">
<h2 class="display-5">Give Your Pet the Safety They Deserve</h2>
<div class="container my-5 ">
<div class="bg-light py-4 mb-5 rounded p-5">
<h2 class="display-5 text-center mb-3">Give Your Pet the Safety They Deserve</h2>
<p>We believe every pet deserves to be safe and secure. That's why we're excited to introduce our <strong>Free Pet Tag Generator</strong> – a simple and efficient way to ensure your furry friends are always protected.</p>
</div>

<div class="bg-light py-4 mb-5 rounded">
<h2 class="display-5">What is the Free Pet Tag Generator?</h2>
<div class="bg-light py-4 mb-5 rounded p-5">
<h2 class="display-5 text-center mb-3">What is the Free Pet Tag Generator?</h2>
<p>Our Free Pet Tag Generator is an easy-to-use online tool that lets you create personalized pet tags at no cost. With just a few clicks, you can generate a unique QR code that will be linked to a dedicated webpage with all the information you provide about your pet.</p>
</div>

<div class="bg-light py-4 mb-5 rounded">
<h2 class="display-5">How It Works</h2>
<div class="bg-light py-4 mb-5 rounded p-5">
<h2 class="display-5 text-center mb-3">How It Works</h2>
<ul class="list-unstyled">
<li><strong>Register Your Pet:</strong> Fill out a simple form with details about your pet, including their name, your contact information, and any other important notes.</li>
<li><strong>Generate a QR Code:</strong> Our generator will create a custom QR code that you can print on a tag. This QR code will direct anyone who scans it to a webpage with the information you’ve provided.</li>
Expand All @@ -25,8 +25,8 @@
</ul>
</div>

<div class="bg-light py-4 mb-5 rounded">
<h2 class="display-5">Why Use This Pet Tag Generator?</h2>
<div class="bg-light py-4 mb-5 rounded p-5">
<h2 class="display-5 text-center mb-3">Why Use This Pet Tag Generator?</h2>
<ul class="list-unstyled">
<li><strong>Free and Easy:</strong> No costs, no hassle. Create your pet's tag in minutes.</li>
<li><strong>Instant Access:</strong> The QR code provides quick access to your pet's information.</li>
Expand All @@ -35,18 +35,21 @@
</ul>
</div>

<div class="bg-light py-4 mb-5 rounded">
<h2 class="display-5">Ready to Get Started?</h2>
<div class="bg-light py-4 mb-5 rounded p-5">
<h2 class="display-5 text-center mb-3">Ready to Get Started?</h2>
<ol>
<li><strong>Create a free <%= link_to 'account: ', new_user_path, class: 'cta-button' %></strong> Sign up to access the pet management features.</li>
<li><strong>Create a free <%= link_to 'account', new_user_path, class: 'cta-button' %></strong>: Sign up to access the pet management features.</li>
<li><strong>Add Your Pet: </strong>Enter details about your pet to create a profile.</li>
<li><strong>Fill in the pet's information: </strong>Provide important details like name, breed, and any special notes.</li>
<li><strong>Print and Attach the QR Code: </strong>A QR code is automatically generated—simply print it and attach it wherever needed (e.g., on a pet tag, collar, or carrier).</li>
</ol>

<p>Make sure your pet is always safe and secure with our Free Pet Tag Generator. It’s a small step that can make a big difference.</p>
<h2 class="display-5 text-center mb-3 mt-5">Make sure your pet is always safe and secure with our Free Pet Tag Generator!</h2>
<p class="text-center">It’s a small step that can make a big difference.</p>

<%= link_to 'Get Started Now!', new_user_path, class: 'cta-button' %>
<div class="text-center">
<%= link_to 'Get Started Now!', new_user_path, class: 'btn btn-primary m-3 p-3' %>
</div>
</div>
</div>

27 changes: 15 additions & 12 deletions app/views/layouts/_navbar.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@
<!-- app/views/layouts/_navbar.html.erb -->

<div class="container-flouid">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">

<a class="navbar-brand" href="/">
<h3>Pet Tag Generator</h3>
<h1>Pet Tag Generator</h1>
</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">

<ul class="navbar-nav me-auto d-flex">
<li class="nav-item mt-3">
<%= link_to 'Home', root_path, class: 'nav-link active' %>
</li>
<li class="nav-item">
<li class="nav-item mt-3">
<%= link_to 'Pet Members', pets_path, class: 'nav-link active' %>
</li>
<li class="nav-item">
<li class="nav-item mt-3">
<%= link_to 'Open Source', github_repo_path, class: 'nav-link active', target: '_blank' %>
</li>
<li class="nav-item">
<%= link_to "Add Pet", new_pet_path, class: "btn btn-primary mt-3" %>
</li>
<div class="nav-item mb-3">
<%= link_to "Add Your Pet", new_pet_path, class: "btn btn-primary mt-3" %>
</div>
</ul>

<form class="form-inline" method="post" action="<%= logout_path %>">
<%= hidden_field_tag :_method, :delete %>
<% if current_user %>
Expand All @@ -34,7 +37,7 @@
<%= submit_tag 'Logout', class: 'btn btn-outline-success' %>
<% else %>
<%= link_to 'Login', login_path, class: 'btn btn-outline-primary mr-2' %>
<%= link_to 'Become Member', new_user_path, class: 'btn btn-outline-success' %>
<%= link_to 'Become Registered Tutor', new_user_path, class: 'btn btn-outline-success' %>
<% end %>
</form>

Expand Down
48 changes: 14 additions & 34 deletions app/views/pets/_pet.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
<div id="<%= dom_id pet %>" class="text-center mx-auto">
<div class="container">

<!-- Pet Name and ID -->
<p>
<strong>Name:</strong>
<%= pet.name.present? ? pet.name : "N/D" %>
</p>
<p>
<strong>ID:</strong>
<%= pet.id %>
</p>

<!-- Pet Photo -->
<p>
<%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name || 'Pet'} photo", class: "img-fluid mx-auto d-block", size: "250x250") %>
</p>
<div class="container my-3">
<div>
<strong class="display-3 my-3"><%= pet.name.present? ? pet.name : "N/D" %></strong>
<p>ID:
<strong><%= pet.id %></strong>
</p>
</div>

<!-- Three Column Layout for Tutor Info, Pet Details, and Social Media -->
<div class="row mt-4">
<%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name || 'Pet'} photo", class: "img-fluid mx-auto d-block image-crop") %>

<div class="row bg-light py-5 rounded">

<!-- Tutor Info Column -->
<div class="col-md-4">
<h5><strong>Tutor Info</strong></h5>
<p>
Expand All @@ -36,7 +27,6 @@
</p>
</div>

<!-- Pet Details Column -->
<div class="col-md-4">
<h5><strong>Pet Details</strong></h5>
<p>
Expand All @@ -47,17 +37,9 @@
<strong>Coat Color:</strong>
<%= pet.pet_coat_color.present? ? pet.pet_coat_color : "N/D" %>
</p>
<%
=begin%>
<p>
<strong>Birthday:</strong>
<%= pet.birthday.present? ? pet.birthday.strftime("%B %d, %Y") : "N/D" %>
</p>
<%
=end%>

</div>

<!-- Social Media Column -->
<div class="col-md-4">
<h5><strong>Social Media</strong></h5>
<p>
Expand All @@ -71,14 +53,12 @@
</div>
</div>

<!-- QR Code Section with Highlighting -->
<div id="printableArea" class="qr-code-container mb-4 mt-4">
<strong>QR Code:</strong><br>
<%= image_tag(url_for(pet.qrcode), class: "img-fluid mx-auto d-block", style: "width: 300px; height: 300px;") %>
<div id="printableArea" class="my-5">
<%= image_tag(url_for(pet.qrcode), class: "img-fluid mx-auto d-block qr-code") %>
</div>

<!-- Print QR Code Button -->
<button type="button" class="btn btn-primary" onclick="printDiv('printableArea')">Print QR Code</button>

</div>
</div>

Expand Down
30 changes: 17 additions & 13 deletions app/views/pets/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

<% content_for :title, "Pets" %>

<h1>Pet Members</h1>
<h1 class="text-center mb-5">Pet Members</h1>

<div class="mb-3">
<div class="mb-3 text-center mb-5">
<% if current_user %>
<%= link_to "Add Pet", new_pet_path, class: "btn btn-primary mt-3" %>
<%= link_to "Add New Pet", new_pet_path, class: "btn btn-primary mt-3" %>
<% end %>
</div>

Expand All @@ -16,21 +16,25 @@
<div class="row">
<% @pets.each do |pet| %>
<div class="col-12 col-sm-6 col-md-4 mb-4">
<div class="card">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
<p><strong>ID:</strong> <%= pet.id %></p>
<h5 class="card-title text-center"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
<p class="text-center"><strong>ID:</strong> <%= pet.id %></p>

<%= link_to pet_path(pet) do %>
<%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block", size: "250x250" )%>
<%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block image-crop" )%>
<% end %>

<% if current_user %>
<%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
<% end %>
<% if !current_user %>
<%= link_to "More", pet, class: "btn btn-primary mt-3" %>
<% end %>
<div class="text-center">

<% if current_user %>
<%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
<% end %>
<% if !current_user %>
<%= link_to "More", pet, class: "btn btn-primary mt-3" %>
<% end %>

</div>
</div>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions app/views/pets/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<%= render @pet %>
<div class="container">

<div>
<% if @pet.user == current_user %>
<%= link_to "Update pet", edit_pet_path(@pet) %>
<%= link_to "Delete this pet", @pet, method: :delete , data: { confirm: "Are you sure?" }%>
<%= link_to "Back to pet members", pets_path %>
<%= link_to "Update pet", edit_pet_path(@pet), class: "btn btn-primary" %>
<%= link_to "Delete this pet", @pet, method: :delete , data: { confirm: "Are you sure?" }, class: "btn btn-primary"%>
<% end %>
</div>

<%= render @pet %>

</div>
3 changes: 0 additions & 3 deletions app/views/users/_user.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,4 @@
<%= user.name %>
</p>




</div>
43 changes: 27 additions & 16 deletions app/views/users/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,45 @@
<% if @user %>
<p>Welcome <strong><%= @user.name %>!</strong></p>
<p class="">Welcome <strong><%= @user.name %>!</strong></p>
<% else %>
<p>Welcome, guest!</p>
<p class="3">Welcome, guest!</p>
<% end %>

<% if @user %>
<div class="d-flex justify-content-center">
<div class="d-flex">
<div class="me-2">
<%= link_to 'Edit Profile', edit_user_path(@user), class: 'btn btn-primary w-100' %>
<%= link_to 'Edit Your Profile', edit_user_path(@user), class: 'btn btn-primary w-100' %>
</div>
<div>
<%= link_to "Add Pet", new_pet_path, class: "btn btn-primary w-100" %>
</div>
</div>

<h2 class="mb-5">My Pets</h2>
<h2 class="mb-5 mt-5">My Pets</h2>
<div class="row">
<% @user.pets.each do |pet| %>
<div class="col-md-4 mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
<p><strong>ID:</strong> <%= pet.id %></p>
<% if pet.pet_photo.present? %>
<%= image_tag pet.pet_photo, alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block" %>
<% end%>
<%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
<div class="col-12 col-sm-6 col-md-4 mb-4">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title text-center"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
<p class="text-center"><strong>ID:</strong> <%= pet.id %></p>

<%= link_to pet_path(pet) do %>
<%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block image-crop" )%>
<% end %>

<div class="text-center">

<% if current_user %>
<%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
<% end %>
<% if !current_user %>
<%= link_to "More", pet, class: "btn btn-primary mt-3" %>
<% end %>

</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
<% else %>
Expand Down

0 comments on commit 34daf23

Please sign in to comment.