New green dots on DMS Members

DMS General
#1

Everyone who is a member of the Talk group DMS_Members should have a green “avatar flair” attached to them. This is a green dot about 1/4" in diameter. It will show up in over the avatar on posts, PMs, and if you click on the user avatar from a post it will show up on the link to the profile.

(EDITED: When this first went live the dot was in a different location so this has been edited to show the correct location. Luke fixed it!)
(EDIT2: Clarified profile view is only on the link to the profile. You will have to post or reply to something to see your dot).

image

This is being done with the concurrence of the Board.

If you are a DMS member and you don’t see one of these green dots attached to your profile, you should create an Issues & Requests post asking to be added to the DMS_Members group. Please include your actual name in your I&R Post. Your request should tag @Team_Admin. This will enable you to view/respond to the four restricted categories.

DO NOT RESPOND HERE ASKING TO BE ADDED.

EDIT: Please also include your name in the request unless that is your Talk ID. Many people’s names don’t match their Talk ID and it takes some sleuthing to confirm whether they are active members.

Getting the right people into and out of the DMS_Members group is a manual process so please bear with us as we get it set straight.

If you see a post with a green dot on it, it was posted by a person who is currently a DMS member. However, please recognize that the dot is generated based on the current group membership of the person, not their status at the time of the post.

3 Likes
#2

I’m convinced it showing in the bottom right of a post is a bug with the CSS.

Here’s how it’s supposed to look:
image

#3
#4

I’d be thrilled if it showed in the right place. Do you have a way to troubleshoot it? Or would updating the Discourse version help?

#5

Phew! I thought there was some odd disease going around…

2 Likes
#6

If you clear your cache it should be in the right place. I modified Discourse’s CSS lol

I also changed the color to be a bit lighter, is that ok?

1 Like
#7

You fixed it!

I don’t care what color green it is, as long as it is green.

I will edit the post above to show the correct location.

1 Like
#8

This doesn’t work great on mobile interface (Android on Motorla g5 with Chrome version whateveritis for me, specifically).
The number of posts thingy covers it up in portrait mode, and it does not appear at all on the profile page (mobile doesn’t appear to get the “pop up”, just goes straight to the profile page, where it does not appear)…

EDIT screen cap of the BEST appearance. Note, it only shows on the “current” post.

Screenshot_20180630-142153
Screenshot_20180630-142153.png1080×1920 198 KB

And this is what you see most of the time (dot hidden behind the past/count position display).

Screenshot_20180630-142332
Screenshot_20180630-142332.png1080×1920 211 KB

1 Like
#9

You’re cached with the default broken version, can you try incognito mode?

#10

Might be time for a Discourse upgrade lol

#11

It appears the same in incognito, but I can’t screen cap because incognito blocks it.

#12

I need to remember later to make sure I applied the style to mobile also!

3 Likes
#13

For what it’s worth, I prefer something smaller and out of the way of the clickable avatar…

.avatar-flair.rounded {
    background-size: 18px 18px;
    border-radius: 12px;
    width: 12px;
    height: 12px;
    bottom: 0;
    right: 0;
    top: 53px;
    left: 38px;
}

Next the moniker may be a good position. Right side seems good. Then it “reads” Brian … who is a member.

1 Like
#14

Luke … if you want to implement this suggestion, that’s fine with me. I lack the skills to do it.

EDIT: Let’s hold off on doing this. I have an accessibility question I want to resolve first.

1 Like
#15

Any idea what size the current dot is?

#16

In this case, I know that’s not true!

The file in question is…
https://talk.dallasmakerspace.org/stylesheets/2/common-scss-testing.scss

The current contents should be this…

// Theme: Testing
// Target: common scss
// Last Edited: 2018-06-30 19:16:25 UTC

.topic-avatar .avatar-flair.rounded, .avatar-flair-preview .avatar-flair.rounded {
    background-size: 18px 18px;
    border-radius: 12px;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    top: 45px;
    left: 30px;
}

The width / height are different and the top / left are different.

20px by 20px. (“px” is “pixels” in CSS speak.)

1 Like
#17
#18
#20

We are limited by two things … what Discourse allows us to do and what I am capable of implementing. Guess which one is a larger impediment … :smile:

  1. Dwight @denzuko asked if we could use the DMS logo instead of the green dot. Discourse supports using an image instead of a dot, but it’s so tiny.

Here’s a comparison. While the DMS logo is unambiguous, the green dot is conspicuous.

image

  1. @Brian proposed a smaller dot in a slightly different location (and provided the code to implement it!)

image

I agree it’s less obtrusive.

To me, the accessibility is more important than the aesthetics but I could be open-minded. I’d be very interested if anyone who is personally visually impaired would weigh in with an opinion. My opinion of what a visually-impaired person can or cannot see isn’t worth anything. I would try the Chrome No Coffee extension to simulate visual impairments in the browser but I don’t use Chrome …

1 Like
#21

Perhaps you want a scarlet letter on the non-members instead.

3 Likes