#108 Add stylized dogs#index page

[edwinthinks]

Resolves Issue #108 & partly #106

This PR adds the dogs#index page with styling to match the mock-up. Pull this branch down and goto the "/dogs" page.

Here are some high-level details worth noting:

• Added the nice_partials gem which allows us to enhance the partials by allowing you to define "slots". This is possible without the library but isn't as clean IMO.
• Took some styling liberties to move the navigation to the right side and space them out.
• This PR doesn't utilize any "real" dog data, it generates it randomly upon load. Enjoy the pics!
• Utilizing a component-based approach which I've found works well with Tailwind. That is you can see that a components/_header and components/_textbody partial was added so we can keep the styles consistent and avoid duplication. Changing the individual partials will change the page styling. This was only used on components that I actually think we be reused

Note

• I usually add specs but didn't really feel the need for it yet! We should certainly investigate adding some test/specs in the near future for this new page.
• I didn't figure out what font this is, so this PR is somewhat incomplete without the correct font.

Here's a demo picture of it in desktop & mobile view:

[edwinthinks]

Interesting the spec locally doesn't fail for me, but it is failing in CI.... Hmmm

[ejuten]

Interesting the spec locally doesn't fail for me, but it is failing in CI.... Hmmm

I found this: https://github.com/tailwindlabs/tailwindcss/discussions/6738

Looks like if you add config.assets.css_compressor = nil to the config/environments/production.rb file it may solve the issue.

[edwinthinks]

@ejuten I can try that. Though I'am not entirely sure why this is causing an issue since the test should be running on the test environment.... hmm I can try this in test.

[ejuten]

@edwinthinks solid point. shrug

I rewrote what you just put above. I should go to bed.

[edwinthinks]

@ejuten looks like it worked. Let me see if it has to do with the NODE_ENV though, maybe its trying to compile production but should be test. Lemme try that.

[ejuten]

What an odd issue, this comment is interesting and maybe what the issue is? Not sure if it's worth it if the compressor line works?

Ok, so by default rails (6) comes with gem 'sass-rails' and app/assets/stylesheets/application.css.scss. 
In my case this file had only *= require_self. The rabbit hole took me down to sassc-rails, 
which depends on sassc, which depends on LibSass, which tends to be behind with features 
and everyone moved to Dart.

I actually don't need sass as in my case everything is being handled through jsbundling-rails with 
esbuild that uses sassPlugin and postcss. After I dropped it from gemfile and removed 
application.css.scss doing rake assets:precompile passed.

Other people who can't drop sass-rails may not be so fortunate.

Thx adam for pointing me the right way.

[edwinthinks]

@ejuten yesss! It works. So I removed sass-rails as per the comment you shared since I saw we only used it for one file and it wasn't even using .scss syntax.

All green :)

[kinduff]

Does this also cover #103? I'm looking to contribute to that page

[edwinthinks]

@kinduff kind of - this doesn't handle any of the data modelings of dogs yet which I think is a requirement.

[freestylebit]

Blargh yea. Guess the mini test equivalent of this that at least verified the response is 200 and the header text exists.

On Wed, Aug 24, 2022, 10:50 Edwin Mak @.***> wrote:

@.**** commented on this pull request.

In app/controllers/dogs_controller.rb https://github.com/rubyforgood/shelter-assist/pull/112#discussion_r953902298 :

@@ -0,0 +1,31 @@ +class DogsController < ApplicationController +

• def index

Yep, can do. Though I think we are using minitest?

— Reply to this email directly, view it on GitHub https://github.com/rubyforgood/shelter-assist/pull/112#discussion_r953902298, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD3S4W4EY7PIM47ZWOMNJ3DV2YZCFANCNFSM57NPLUNQ . You are receiving this because your review was requested.Message ID: @.***>