Topic List Item Click Animation

[Don]

	Summary	Topic List Item Click Animation
	Preview	Theme Creator
	Repository	GitHub - VaperinaDEV/topic-list-item-click-animation: This theme component adds a nice animation when you hover or click the topic list item.
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

This theme component adds a nice animation when you hover or click the topic list item.

Hello

The component requires slider loader.

This component makes the full row clickable and add a click animation to the topic list item. You can choose from some animation.

1. push (default on touch devices): when you click it, it pushes in and adds a background effect.
   

2. background (default on no-touch devices): when you click it, it adds a background…
   

3. slider: when you click it, it adds slider loader under the topic list item and hide the top main slider.
   

   
   

4. blur: when you click it, it blurs out the other topics on the list.
   

---

Theme Settings

You can select animations separately on no-touch and touch devices.

[Canapin (Coin-coin le Canapin)]

It felt and looked so natural I couldn’t see what changed when I previewed the component.

Would it be possible to have the push animation on click on desktop, during the loading, or is there anything that prevents that in any way?

[Don]

@Canapin

Would it be possible to have the push animation on click on desktop, during the loading, or is there anything that prevents that in any way?

The idea behind this is make a natural app-like tap on touch devices. So the push animation is works on desktop view too if it is touch device.

But yeah, I think it can easily work on no-touch devices too. It’s probably worth an extra setting.

[Don]

Hello

I pushed an update to the component. DEV: Refactored how the component works and add a new slider animation by VaperinaDEV · Pull Request #1 · VaperinaDEV/topic-list-item-click-animation · GitHub

@Don

3. slider: when you click it, it adds slider loader under the topic list item and hide the top main slider.

---

Theme Settings

You can select animations separately on no-touch and touch devices.

[Lilly]

this is really nicely done. great work as always Don.

[Don]

Hello
New animation (blur)

@Don

4. blur: when you click it, it blurs out the other topics on the list.

[Canapin (Coin-coin le Canapin)]

@Don

slider: when you click it, it adds slider loader under the topic list item and hide the top main slider.

Smart. I like it

[davidkingham]

Very nicely done Don! I tried this out with Topic List Thumbnails and it mostly works out of the box. Push and Blur work as expected, but Slider shows at the top of all the thumbnails rather than following the thumbnail, and background does nothing (which makes sense). Any chance you would give this a little more love? I’d love to have the slider on desktop, or some other brilliant idea I’m sure you’ll come up with!

[Don]

Hey David

I merged an update Move topic slider loader from template to pseudo element by VaperinaDEV · Pull Request #5 · VaperinaDEV/topic-list-item-click-animation · GitHub
I used plugin outlet after-topic-list-item template to show the slider but Topic List Thumbnails component adds grid layout to topic list which means it handle the plugin outlet as a topic list item and pushed next to each other. Now I move the loader from template to pseudo element which will add more compatibility.

---

I missed to adding a z-index to it which is required to show it with Topic List Thumbnail. Please update the component.

[davidkingham]

Thank you Don! I gave it a try and it is working, but the color of the slider isn’t correct, or maybe it’s a z-index issue? The slider in this video should be the gold color but it’s grey. I believe it should be tertiary? I’m testing this with no other CSS just so you know. It was displaying the gold color before the update, that’s why I’m thinking z-index

[Don]

I checked your site and you are using the previous version which not contains the z-index fix. Please update the component to the latest.

[davidkingham]

Thanks Don, all is well now, I must have updated too quickly

One suggestion; have an option to turn this off for non-touch altogether. Now that I’ve tried the slider I’m not sure that I like it since it gets rid of the default slider and is making the ux not consistent.

[denvergeeks]

@Don - Love this! I would prefer (as in the Clickable Topic Theme Component) on hover, that everywhere within a row/item, the cursor should be the pointer…

.topic-list-item:hover,
.latest-topic-list-item:hover {
    cursor: pointer;
}

[denvergeeks]

@Don - It seems that the setting for the background color for the hovering effect takes effect only after clicking or tapping on the row/item, and not on conventional prior hovering (as in the Clickable Topic Theme Component).

[Don]

Hello David

This is a great idea. I merged an update to adds a setting to turn off the animation (component) separately on touch or non-touch devices.

Now you can select the option none which will completely turn off the component.

[Don]

Hello @denvergeeks

@denvergeeks

on hover, that everywhere within a row/item, the cursor should be the pointer…

The component is only makes clickable the topic list item full row yet. So the latest topic list item works as default now. This is why the cursor pointer only appears on topic list item non-touch devices.

@denvergeeks

It seems that the setting for the background color for the hovering effect takes effect only after clicking or tapping on the row/item, and not on conventional prior hovering

The component handle the non-touch and touch devices separately. The background is activate when hovering, on non-touch devices and touch devices after tapping it. But I think it should need some update because the hover won’t work for example on touch screen laptops which might has cursor. I think we can activate it globally on desktop view and pointer too.

---

I’ve merged these changes.

[ChrisBeach (Chris)]

@Don

The component requires slider loader.

Could you elaborate on what you mean by the dependency on “slider loader” please. Is this another theme, or plug-in, or a JavaScript library or something else?

[Canapin (Coin-coin le Canapin)]

The slider is the new page loading animation. When you load a page in Discourse, there’s a horizontal progress bar on top of the screen. That’s the slider.

It’s now set as a default but can be reverted to the original loading spinner via the page loading indicator setting.

[digitaldominica]

Hi Don is there no way possible to make this work with the spinner preloader? I honestly prefer the spinner than slider loader for my forum.

[Don]

Hello

The reason it works only with slider because when you click a topic than the page content is instantly clear and change to the spinner. So there is no time to do an animation. With slider, it keeps us on the current page during the next page loading so we have time to run an animation.