[DEPRECATED] Mobile user-cards

(Joe) #1

:warning: This theme component is deprecated in favor of a feature in Discourse core

This is a theme component that will allow you to show user-cards on mobile devices.

Github repository link:
https://github.com/hnb-ku/Discourse-mobile-user-cards

Demo
https://theme-creator.discourse.org/theme/Johani/mobile-user-cards


Samples:

Regular card

Card in a topic with a lot of posts


How do I install this component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here

20 Likes

Make the badge boxes for user card larger [mobile]
Discourse 2.3.0.beta6 Release Notes
(Jeff Atwood) #2

I am not really sure this should be a theme component, perhaps we should make it the new default behavior? What do you think @sam?

12 Likes

(Sam Saffron) #3

Maybe, @Johani can you enable this on all the themes on meta so we can try it out

6 Likes

(Joe) #4

The component is now enabled on all themes here on meta :+1:

10 Likes

(Sam Saffron) #5

I find the visuals fantastic, but don’t think the mechanics are quite right. On mobile we have extreme limited space so a modal with modal behavior makes much more sense. Also, on slow connections there is a large period of time where there is no visual feedback, it is easy to click again and head to user page.

I think that once we refine this we should move it to core!

11 Likes

(Christoph) #6

I’m using a dark theme (grey Amber, to be precise) and I think the user card could be bezter distinguishes from the background. If you’re not aware of the existence of usercards and you accidentally touch someone’s avatar, what you see looks a bit like a UI bug…

6 Likes

(Dave McClure) #7

Love this!

A couple small tweaks to suggest:

  1. I could imagine taking a bit of inspiration from the new slide out menus (e.g. for the hamburger menu), and darkening the rest of the site when the user card is displayed.
  2. Similarly, I can imagine having the location be fixed, always popping up in the middle of the screen, rather than relative to the clicked avatar.
11 Likes

(Dan Mc Grath) #8

Brilliant feature. Nice work!

2 Likes

(Dave McClure) #9

Just noticed here on meta: when I click outside the card to dismiss it, my click makes it through to whatever is beneath that area, often with unexpected results.

For instance, I popped up a user card on the topic list. When I clicked outside to dismiss, I ended up opening some random topic, when I wanted to just get back to the list and keep browsing.

10 Likes

Clicking outside of user card triggers redirect
(Sam Saffron) #10

Same I was just about to report this, easiest repro is to open the card on a post with a lightboxed image, then there is often a giant click target behind and it is super easy to open the light box

10 Likes

(Chaboi 3000) #11

After fixing some issues, I feel like this should go into core.

3 Likes

(Jeff Atwood) #12

Yes that is the plan, as previously stated in earlier posts.

3 Likes

(Vinoth Kannan) #13

I fixed this in the core

https://github.com/discourse/discourse/commit/be436066ffa2557427a75d9694da2021e2a31a7c

11 Likes

(Jeff Atwood) #15

Can we make this component a part of core now?

14 Likes

(Joe) #17

This took a little while because it was a good opportunity for a bit of tidying up.

Once that was done, I was able to focus on adding the feature to core

So, mobile user and group cards are part of core now :tada:

If you’re on the tests-passed branch, you can remove this theme component the next time you update.

If you’re on the stable branch, you can keep using the component until the next release, at which point I’ll nuke this component.

Thanks to everyone that provided feedback in this topic!

Special thanks to @joffreyjaffeux for providing tons of insight and for some ninja-level test debugging :heart_eyes:

13 Likes

(Joe) closed #18
0 Likes

(David Taylor) #19

To make double sure this happens, we could add the new maximum_discourse_version property to the component’s about.json. 2.3.0.beta5 should do the trick. Then the component will automatically disable itself for any Discourse versions higher than 2.3.0.beta5.

8 Likes