Merge pull request #112 from rubyforgood/styled-dogs

#108 Add stylized dogs#index page

Gemfile

@@ -18,6 +18,9 @@ gem "jsbundling-rails", "~> 1.0.3"
 # Easy React view integration
 gem "react-rails", "~> 2.6.1"
 
+# Upgrade partials to allow for defining slots
+gem "nice_partials"
+
 # Bundle and process CSS [https://github.com/rails/cssbundling-rails]
 gem "cssbundling-rails", ">= 1.1.1"
 
@@ -45,9 +48,6 @@ gem "bootsnap", ">= 1.12.0", require: false
 # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
 # gem "bcrypt", "~> 3.1.7"
 
-# Use Sass to process CSS
-gem "sassc-rails", "~> 2.1.2"
-
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 # gem "image_processing", "~> 1.2"
 
@@ -73,12 +73,13 @@ group :test do
   gem "selenium-webdriver", ">= 4.1.0"
   gem "webdrivers", "5.0.0"
   gem 'rexml', '~> 3.2.5'
+
+  # Provides extra assertions and matchers for testing controllers and views
+  gem 'rails-controller-testing'
 end
 
 gem 'devise'
 gem "passwordless", "~> 0.10.0"
 gem "rolify"
 
-gem 'sass-rails'
-
 gem "pg", "~> 1.4.1"

Gemfile.lock

@@ -104,7 +104,6 @@ GEM
     digest (3.1.0)
     erubi (1.10.0)
     execjs (2.8.1)
-    ffi (1.15.5)
     globalid (1.0.0)
       activesupport (>= 5.0)
     i18n (1.10.0)
@@ -146,6 +145,8 @@ GEM
       digest
       net-protocol
       timeout
+    nice_partials (0.1.9)
+      actionview (>= 4.2.6)
     nio4r (2.5.8)
     nokogiri (1.13.6)
       mini_portile2 (~> 2.8.0)
@@ -180,6 +181,10 @@ GEM
       activesupport (= 7.0.2.4)
       bundler (>= 1.15.0)
       railties (= 7.0.2.4)
+    rails-controller-testing (1.0.5)
+      actionpack (>= 5.0.1.rc1)
+      actionview (>= 5.0.1.rc1)
+      activesupport (>= 5.0.1.rc1)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
@@ -208,16 +213,6 @@ GEM
     rexml (3.2.5)
     rolify (6.0.0)
     rubyzip (2.3.2)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     selenium-webdriver (4.3.0)
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
@@ -275,15 +270,15 @@ DEPENDENCIES
   importmap-rails (>= 1.1.2)
   jbuilder (~> 2.11.5)
   jsbundling-rails (~> 1.0.3)
+  nice_partials
   passwordless (~> 0.10.0)
   pg (~> 1.4.1)
   puma (~> 5.6.4)
   rails (~> 7.0.2.2)
+  rails-controller-testing
   react-rails (~> 2.6.1)
   rexml (~> 3.2.5)
   rolify
-  sass-rails
-  sassc-rails (~> 2.1.2)
   selenium-webdriver (>= 4.1.0)
   sprockets-rails (>= 2.0.0)
   stimulus-rails (>= 1.0.4)

app/controllers/dogs_controller.rb

@@ -0,0 +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 

app/views/components/_container.html.erb

@@ -0,0 +1,15 @@
+<div class="fixed h-full w-full -z-10">
+  <div class="inset-0 bg-teal h-full"></div>
+</div>
+
+<div class="relative w-full h-full">
+  <div class='max-w-[1200px] mx-auto bg-white min-h-full p-12'>
+    <div class='flex justify-end space-x-6 mb-12'>
+      <%= partial.yield :header %>
+    </div>
+
+    <div class='px-0 lg:px-16'>
+      <%= partial.yield :content %>
+    </div>
+  </div>
+</div>

app/views/components/_header.html.erb

@@ -0,0 +1 @@
+<h1 class='text-4xl'> <%= local_assigns[:text] %></h1>

app/views/components/_textbody.html.erb

@@ -0,0 +1,3 @@
+<div class='text-xl text-gray-400'>
+  <%= yield %>
+</div>

app/views/dogs/_dog_card.html.erb

@@ -0,0 +1,35 @@
+<div class='shadow-2xl w-[300px] flex-grow mx-2 my-2 p-6 bg-white'>
+  <div class='h-62 overflow-hidden'>
+    <%= image_tag dog.image_src, class: 'object-cover w-full h-[325px] transition hover:scale-150 ease-in-out duration-[2000ms]' %>
+  </div>
+
+  <div class='text-center text-4xl font-bold uppercase my-2'>
+    <%= dog.name %>
+  </div>
+
+  <div class='space-y-2'>
+    <div class='flex'>
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Breed:</label>
+        <div class='text-[15px] font-medium'><%= dog.breed %></div>
+      </div>
+
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Age:</label>
+        <div class='text-[15px] font-medium'><%= dog.age %></div>
+      </div>
+    </div>
+
+    <div class='flex'>
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Sex:</label>
+        <div class='text-[15px] font-medium'><%= dog.sex %></div>
+      </div>
+
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Weight (lbs):</label>
+        <div class='text-[15px] font-medium'><%= dog.weight %></div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/dogs/index.html.erb

@@ -0,0 +1,13 @@
+<div>
+  <%= render 'components/header', text: 'Fosterable Dogs' %>
+
+  <%= render 'components/textbody' do %>
+    <p> 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. </p>
+  <% end %>
+
+  <div class='flex flex-wrap justify-center mt-6 content-between'>
+    <% @dogs.each do |dog| %>
+      <%= render 'dogs/dog_card', dog: dog %>
+    <% end %>
+  </div>
+</div>

app/views/layouts/_navigation_links.html.erb

@@ -4,9 +4,11 @@
     <%= render 'layouts/admin_menu' %>
   <% end %>
 <% end %>
+
 <% if !person_signed_in? %>
   <%= render 'layouts/visitor_menu' %>
 <% end %>
+
 <% if !person_signed_in? %>
   <%= render 'layouts/admin_login_menu' %>
   <%= link_to "Apply to Foster", new_signup_path %>

app/views/layouts/application.html.erb

@@ -14,7 +14,15 @@
         <p class="flash flash_<%= key %>"><%= flash[key] %></p>
       <% end %>
     <% end %>
-    <%= render 'layouts/navigation_links' %>
-    <%= yield %>
+
+    <%= render 'components/container' do |partial| %>
+      <%= partial.content_for :header do %>
+        <%= render 'layouts/navigation_links' %>
+      <% end %>
+
+      <%= partial.content_for :content do %>
+        <%= yield %>
+      <% end %>
+    <% end %>
   </body>
 </html>

config/routes.rb

@@ -2,6 +2,9 @@
   resources :animal_applications
   resources :homes
   resources :animals
+
+  resources :dogs, only: [:index]
+
   devise_scope :person do
     resources :people
   end

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        'teal': '#4FADBE',
         'landing': '#13C2C2',
       }
     }

test/controllers/dogs_controller_test.rb

@@ -0,0 +1,14 @@
+require "test_helper"
+
+class DogsControllerTest < ActionController::TestCase
+
+  test "should get index with proper content" do
+    get :index
+
+    assert_response :success
+    assert_not_nil assigns(:dogs)
+    assert_includes @response.body, "Fosterable Dogs"
+    assert_includes @response.body, "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
+
+end