Redesign pricing table #162561701

SFDigitalServices / sf-dahlia-pattern-library

Pattern library for SF DAHLIA Housing Portal.

https://sf-dahlia-pattern-library.herokuapp.com/

3 stars 1 forks source link

Redesign pricing table #162561701 #89

Closed jrubenoff closed 5 years ago

jrubenoff commented 5 years ago

I've deployed a review app for this.

New components

In "Atoms -> Tables"

Pricing Table Hero - Rental
Pricing Table Hero - Sale
Pricing Table Listing - Rental
Pricing Table Listing - SRO
Pricing Table Listing - Sale With No Parking
Pricing Table Listing - Sale With Parking Lease
Pricing Table Listing - Sale With Parking

In "Organisms"

Property Card - Rental
Property Card - Sale
Results - Sale

Updated components

"Property Hero" and "Results" patterns now use the new pricing tables.
We still use the original Property Card pattern throughout the "Pages" section, so I renamed it to "Property Card Legacy."

Other changes

To give more space to the increased amount of text in the pricing tables, the thumbnails on the Buy and Rent pages are now 50% instead of 55%.
[unrelated] I fixed the oddly-aligned Favorite button in the property hero on small screens

akegan commented 5 years ago

@jrubenoff one small question on the examples. Would it be possible to add another row to one of the tables in the examples? I'm curious what they look like on mobile with >1 row per unit type

jrubenoff commented 5 years ago

@akegan Alrighty, just added some rows to the "Pricing Table Hero - Listing" patterns.

akegan commented 5 years ago

getting this error on SRO partial:

Not sure if it's new or if it was like that before.

I don't see any additional rows on the property hero pricing table examples (e.g. https://sf-dahlia-pl-pricing.herokuapp.com/components/detail/property-hero--multifamily.html). Am I looking in the wrong place or do you maybe need to re-deploy?

Edit: I found the examples in the atoms section, but I think the changes still haven't been deployed?

akegan commented 5 years ago

For pricing table hero - Sale, when I shrink to mobile view the column name changes from Sales price to "Min income" I don't think it will affect us using the pattern in the webapp, but might be good to fix: Mobile:

non-mobile:

jrubenoff commented 5 years ago

@akegan Cool, I'll try to fix those tonight!

Anything else you can think of?

akegan commented 5 years ago

@jrubenoff I think it looks good otherwise. Only other minor comment is that "Prices with/without parking" looks a bit funny when it becomes the label for only one value. Not sure if it makes sense because there's the price and the HOA dues, or if we should just update the column name to say "price without parking" instead

jrubenoff commented 5 years ago

@akegan Alright, fixed those issues and re-deployed.

Please re-review!

akegan commented 5 years ago

@jrubenoff I don't see any new commits on this branch since 2 days ago. Did you push up your changes?

jrubenoff commented 5 years ago

@akegan How about now?

akegan commented 5 years ago

ok looks good! Did you re-deploy too? I don't think I have access to see your review app on heroku

jrubenoff commented 5 years ago

This link works for me in an incognito window...

akegan commented 5 years ago

I just meant that I can't see the app on heroku so I can't see when it was last deployed or what was deployed. The link works fine though!

Just quickly reviewed the designs with Emily and she noticed that the reserved units look a bit funny. We're not sure where the orange dots are supposed to go

jrubenoff commented 5 years ago

Thanks for catching! Looks like a browser bug. (I was testing on Firefox.)

Don't have time to re-deploy today but it should be fixed if you run it locally.