From 8fe7b8d306ba01a6c217a7ad349d602f15a75c44 Mon Sep 17 00:00:00 2001 From: Edwin Date: Tue, 23 Aug 2022 20:14:54 -0500 Subject: [PATCH] Stylize dogs#index page to match style --- app/controllers/dogs_controller.rb | 25 +++++++++++++++++ app/views/components/_container.html.erb | 6 ++-- app/views/components/_header.html.erb | 1 + app/views/components/_textbody.html.erb | 3 ++ app/views/dogs/_dog.html.erb | 35 ++++++++++++++++++++++++ app/views/dogs/index.html.erb | 13 +++++++++ tailwind.config.js | 1 + 7 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 app/views/components/_header.html.erb create mode 100644 app/views/components/_textbody.html.erb create mode 100644 app/views/dogs/_dog.html.erb diff --git a/app/controllers/dogs_controller.rb b/app/controllers/dogs_controller.rb index 7cc4fbb..552ef37 100644 --- a/app/controllers/dogs_controller.rb +++ b/app/controllers/dogs_controller.rb @@ -1,6 +1,31 @@ class DogsController < ApplicationController def index + @dogs = fetch_mock_dog_data + end + + private + + # + # Returns an array of mock dog data + # @return [Array] + def fetch_mock_dog_data + names = [ "Bella", "Buddy", "Buster", "Cali", "Charlie", "Max", "Oliver", "Oscar", "Penny", "Riley", "Shadow", "Sophie", "Toby", "Tucker", "Winston" ] + ages = [ 'Puppy', 'Adult', 'Senior' ] + breeds = [ 'Labrador', 'Poodle', 'German Shepherd', 'Golden Retriever', 'Pug' ] + weights = [ 'Small', 'Medium', 'Large' ] + sexs = [ 'Male', 'Female' ] + + 12.times.map do |i| + name = names.sample + age = ages.sample + breed = breeds.sample + weight = weights.sample + sex = sexs.sample + + dog_photo = "https://placedog.net/500/280?id=#{rand(1..100)}" + OpenStruct.new(image_src: dog_photo, name: name, age: age, breed: breed, weight: weight, sex: sex) + end end end diff --git a/app/views/components/_container.html.erb b/app/views/components/_container.html.erb index 504338c..57194e2 100644 --- a/app/views/components/_container.html.erb +++ b/app/views/components/_container.html.erb @@ -1,5 +1,5 @@
-
+
@@ -8,6 +8,8 @@ <%= partial.yield :header %>
- <%= partial.yield :content %> +
+ <%= partial.yield :content %> +
diff --git a/app/views/components/_header.html.erb b/app/views/components/_header.html.erb new file mode 100644 index 0000000..135d064 --- /dev/null +++ b/app/views/components/_header.html.erb @@ -0,0 +1 @@ +

<%= local_assigns[:text] %>

diff --git a/app/views/components/_textbody.html.erb b/app/views/components/_textbody.html.erb new file mode 100644 index 0000000..48deb0f --- /dev/null +++ b/app/views/components/_textbody.html.erb @@ -0,0 +1,3 @@ +
+ <%= yield %> +
diff --git a/app/views/dogs/_dog.html.erb b/app/views/dogs/_dog.html.erb new file mode 100644 index 0000000..c946e4d --- /dev/null +++ b/app/views/dogs/_dog.html.erb @@ -0,0 +1,35 @@ +
+
+ <%= image_tag dog.image_src, class: 'object-cover w-full h-[325px]' %> +
+ +
+ <%= dog.name %> +
+ +
+
+
+ +
<%= dog.breed %>
+
+ +
+ +
<%= dog.age %>
+
+
+ +
+
+ +
<%= dog.sex %>
+
+ +
+ +
<%= dog.weight %>
+
+
+
+
diff --git a/app/views/dogs/index.html.erb b/app/views/dogs/index.html.erb index e69de29..4df1f7b 100644 --- a/app/views/dogs/index.html.erb +++ b/app/views/dogs/index.html.erb @@ -0,0 +1,13 @@ +
+ <%= render 'components/header', text: 'Fosterable Dogs' %> + + <%= render 'components/textbody' do %> +

Thinking about fostering? These adorable dogs from local rescues need someone to foster them while they await their furever home. Click on a dog below to see more information about each dog.

+ <% end %> + +
+ <% @dogs.each do |dog| %> + <%= render 'dogs/dog', dog: dog %> + <% end %> +
+
diff --git a/tailwind.config.js b/tailwind.config.js index f52ea56..e9a5453 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,6 +10,7 @@ module.exports = { theme: { extend: { colors: { + 'teal': '#4FADBE', 'landing': '#13C2C2', } }