XF 2.2 Removing User Title, Location and Stats from Reactions List

[Mouth]

The Reactions List overlay is HUGE, way more info than necessary.
One of my site users recently said, "it's like performing a dating background check"
So I want to remove the Users Title, Location, and Stats from the Reactions List overlay.

I thought that adding the following to EXTRA.LESS would work, removing this superfluous info from wherever the reactions list is shown, but it appears the data-template isn't changed/referenced when loading the page/template within an overlay.

[data-template="reaction_list"] {
    .contentRow-lesser, .contentRow-minor { display: none; } 
}

I can add to the CSS with the data-template for every page that has the reactions list (example below), which works for removing the superfluous, but means identifying every page and listing it. Is there a way in CSS to reference all overlay content with a single statement?

[data-template="reaction_list"], &[data-template="thread_view"] , &[data-template="conversation_view"] {
    .contentRow-lesser, .contentRow-minor { display: none; } 
}

 

[RobinHood]

I had a similar issue the other day when trying to style overlay contact forms.

You can target the overlays using the .overlay class, but that's not great if you're then targetting pretty generic building blocks within that as it may affect other overlays.

Overlays could do with a data attribute of the template they loaded, would make things like this easier.

For now you could edit the reaction_list template and add your own class to target when it gets loaded in an overlay.

 

[Paul B]

I haven't checked the templates but what other overlays are affected if you just use:

[data-template="reaction_list"],
.overlay-content
{
    & .contentRow
    {
        &-lesser,
        &-minor,
        {
            display: none;
        }
    }
}