Improved restaurant listing styles

goodybag / cater-api-server

hacking this together as fast as possible but with an eye for re-organization

1 stars 0 forks source link

Improved restaurant listing styles #2324

Closed L8D closed 8 years ago

L8D commented 8 years ago

[x] Remove ugly borders around images
[x] Lighten border color
[x] Add transition to hover gradient
[x] Vastly improve load speed by inlining the background-image reference (as style="background-image: url('{{filepicker list_photo_url}}');")

L8D commented 8 years ago

restaurant listing demo

jrf0110 commented 8 years ago

This looks great! Somebody made the images lazily load on scroll so we're not attempting to request 150 images (I think chrome only does like 6 at a time anyway). I'll take a looksie and make sure we're not killing perf on some devices. Though, scrolling on iOS as it currently stands is already janky

L8D commented 8 years ago

I wonder if there's a simple way to implement it where the first dozen images are inlined and the rest are loading on appear. It'd just come down to a conditional check in handlebars

jrf0110 commented 8 years ago

This PR breaks IE10's click target (you can't click the image to go to the restaurant)

L8D commented 8 years ago

@john I couldn't reproduce locally but I've added pointer-events: none to the gradient just in case.

L8D commented 8 years ago

Now only the first 12 restaurants are pre-loaded. This branch is good to go

jrf0110 commented 8 years ago

Looks great! And still works nicely in IE9

bs_win7_ie_9 0