Skip to:
Content

Opened 6 years ago

Closed 5 years ago

Last modified 2 years ago

#4610 closed defect (bug) (fixed)

Ajax button CSS quirk

Reported by: jbobich Owned by:
Milestone: 1.7 Priority: normal
Severity: minor Version: 1.7
Component: Templates Keywords:
Cc: jbobich

Description

In the new legacy theme, when you click any button on the frontend that does an AJAX call, it will oddly pop out 25px and then pop back. -- I think you guys originally had an AJAX loader icon here before, but now you've gotten rid of it with the new theme system.

So I've removed this extra padding that gets added onto the general "loading" CSS class. Then I also set it up so the button's border darkens along with a drop shadow appearing when clicked. If you're using any modern browser other than IE9, this style change will pulsate in and out with CSS3 animation until the AJAX call is finished.

This adds a way to tell the user something is loading without changing the DOM or popping that button over wider to insert some sort of loader icon.

Attachments (2)

4610.patch (1.3 KB) - added by jbobich 6 years ago.
CSS changes to general "loading" class in legacy theme.
4610-2.patch (1.3 KB) - added by jbobich 6 years ago.
I had a typo on the webkit box shadow color on the original patch. This fixes that little guy.

Download all attachments as: .zip

Change History (7)

@jbobich
6 years ago

CSS changes to general "loading" class in legacy theme.

@jbobich
6 years ago

I had a typo on the webkit box shadow color on the original patch. This fixes that little guy.

#1 follow-up: @DJPaul
6 years ago

  • Keywords dev-feedback added
  • Milestone changed from Awaiting Review to 1.7

The pulse thing is quite an interesting idea; it's a shame IE8/9 don't support CSS3 Animations. Suspect we'll need to re-add the spinner, but thanks for the patch and suggestions :)

#2 in reply to: ↑ 1 @jbobich
6 years ago

Replying to DJPaul:

The pulse thing is quite an interesting idea; it's a shame IE8/9 don't support CSS3 Animations. Suspect we'll need to re-add the spinner, but thanks for the patch and suggestions :)

Awesome, yeah I totally understand. -- If you do add the loader icon back, another idea you could consider is to have some sort of other icon that is there already before the button is clicked and then gets swapped with the loader icon during the Ajax action. This way, the DOM isn't changed when people are clicking these buttons, which just makes for some funky issues when theming. Anyway, just a thought.

#3 @johnjamesjacoby
5 years ago

(In [6556]) Loading (bp-legacy):

  • No more ajax spinner, try a throbbing shadow instead.
  • Will need additional work for IE.
  • Props jbobich.
  • See #4610.

#4 @johnjamesjacoby
5 years ago

  • Keywords has-patch dev-feedback removed
  • Resolution set to fixed
  • Status changed from new to closed

Calling this fixed. We can revisit in 1.8 if we'd like to.

#5 @DJPaul
2 years ago

  • Component changed from Appearance - Template Parts to Templates
Note: See TracTickets for help on using tickets.