Hide all but one custom field in the user approval review queue

Support
1

Can anyone help me with some CSS?

We’ve got a lot of User Customised Fields (UCFs) in our forum, of which only one is used for signup; this one is critical for deciding approval or not.

Hence I now want to hide all but that one (which happens to be first) in the review queue, so that my poor mods don’t have to look at a bunch of empy fields for each new user approval.

I’ve gotten this far:

.reviewable-user-details.user-field{
     display: none;
    /*attempt to hide UCFs in the review queue - at the mo hides them all*/
}

This hides the lot of them, but I still need to display the first one. I’ve tried &:nth-of-type(1), but it doesn’t work here - I think due to the way the html works. The elements don’t have classes.

Any suggestions?

1 Like
6

I made a minor change that will allow your &:nth-of-type(1) css to work, we had an extra containing div in there preventing it. This should be available if you update your site in a few hours.

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

6 Likes
7

You guys are amazing!!! Thank you!!!

2 Likes
8

I can see that the ember divs are now gone - thank you.

However, I still can’t get the CSS to work, and it just hides all of them. I’ve tried several variations on it; perhaps I’m doing something dumb. Also, I wonder what would happen if it does work as I’m aiming for: wouldn’t the 2nd or 3rd person needing approval have all of their fields hidden?

Here is what I’ve tried:

.reviewable-user-details.user-field {
    display: none;
            &:nth-of-type(1){
            display: block;
        }
}
2 Likes
9

Ah right that doesn’t work, and it’s expected… I always forget that nth-of-type focuses on the element, and not the class.

So in this case there’s no element and only class names so it’s not working, but if you do add the element (div in this case), it will then only match if the first div sibling also has the .user-field class (it doesn’t because there are other divs within this parent that come before the user-fields).

Anyway, long story short… a general sibling combinator works here instead. Within .reviewable-user-fields this selects all .user-field that are a sibling of the first .user-field.

.reviewable-user-fields .user-field ~ .user-field {
    display: none;
}
2 Likes
10

I have no idea what you are talking about - but it works a treat; thank you!

This may help others with a private forum who rely on the Custom Wizard Plugin at signup @Angus.

How would one go about revealing a 2nd or 3rd .user-field? I don’t need to (at the mo) but it might become necessary in the future.

2 Likes
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.