search

Leeflets / leeflets

Beautifully Simple Websites
128 stars 29 forks source link

Make the editable content hover dark and fade to clear on hover #75

Closed itsdavidmorgan closed 11 years ago

itsdavidmorgan commented 11 years ago

What do you guys think about the yellow highlight for selecting editable content?

Is there a more elegant solution?

What about having all editable content at like 50% opacity, then editable sections fade in when hovered over? Would this be difficult to implement @bradt?

The lower opacity solution may make it more noticeable to users that they are not editing the live site as well, making the need to publish the saved changes more obvious.

jptksc commented 11 years ago

I think you're right about there being a more elegant solution. The opacity idea would be really easy to implement. Just change the yellow to "rgba(255, 255, 255, 0.5);" and swap the behavior. Instead of "on-hover, fade in" do "on-hover, fade out".

bradt commented 11 years ago

Great idea! This is going to make it soooo much better.

itsdavidmorgan commented 11 years ago

Cool, I think it will look more elegant as well. Although, I'm not sure the white overlay has the effect I'm looking for. I applied the CSS changes locally for the overlay, see attached image, but it still doesn't feel right.

Screen Shot 2013-04-11 at 2 25 32 PM

I think having the actual content be faded, then become clear when hovered would be nicer. Since the edit boxes are empty divs, I'm unsure the best way to go about this without @bradt's help.

bradt commented 11 years ago

Hey guys, please check out the new branch I just pushed and let me know what you think.

itsdavidmorgan commented 11 years ago

I like the black color overlay more than the white overlay I tried locally. I'd change the bg color to "rgba(0, 0, 0, 0.25)" instead of "rgba(0, 0, 0, 0.15)" to give a little more pop.

Ideally, I'd rather see an opacity change of the content, or maybe even a blur to focus effect. However, since the edit boxes are empty divs on top of the content I'm not sure that can be achieved easily. Maybe through some JS? If that change would be too time consuming, I don't think it's worth spending the time on at this stage.

Regardless, I like this change more than the yellow boxes.