XF 2.2 Is there any way to contract this repetitive syntax?

securedme

Active member
Code:
[data-template="forum_view"][data-container-key='node-19']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-12']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-11']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-49']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-17']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}
[data-template="forum_view"][data-container-key='node-39']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

And would there be any difference in terms of script execution for expanded and contracted syntax? Thanks.
 
Solution
You can approach it like this:

Code:
[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'],
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
    }
}

Then you can easily add other elements:

Code:
[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'],
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }...

Brogan

XenForo moderator
Staff member
This should work:

HTML:
[data-template="forum_view"][data-container-key='node-19'],[data-container-key='node-12'],[data-container-key='node-11'],[data-container-key='node-49'],[data-container-key='node-17'],[data-container-key='node-39']  .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

There won't be any difference in performance.
 

securedme

Active member
Thanks. I followed your instruction and found the following doesn't work (padding not added) except for node-5:

Code:
[data-template="forum_view"]
[data-container-key='node-1'],
[data-container-key='node-2'],
[data-container-key='node-3'],
[data-container-key='node-4'],
[data-container-key='node-5'] .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

But this (another part) works though:

Code:
@media (max-width: @xf-responsiveMedium) {
[data-template="forum_view"]
[data-container-key='node-1'],
[data-container-key='node-2'],
[data-container-key='node-3'],
[data-container-key='node-4'],
[data-container-key='node-5'] {
    .structItem-cell.structItem-cell--meta {
        display: none;
    }
    .structItem-cell.structItem-cell--latest {
        display: none;
    }
    .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd {
        display: none;
    }
}
}

No errors reported.
 
Last edited:

securedme

Active member
I simplified it to two nodes:

CSS:
[data-template="forum_view"][data-container-key='node-149'],[data-container-key='node-7'] .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

Only node-7 got executed.

If I rearranged it to:


CSS:
[data-template="forum_view"][data-container-key='node-7'],[data-container-key='node-149'] .structItem-cell.structItem-cell--icon {
    padding: 9px 15px 9px 9px;
}

Only node-149 got executed.
 

Brogan

XenForo moderator
Staff member
It works for me on my local, using this for example:
HTML:
[data-template="forum_view"][data-container-key='node-2'],[data-container-key='node-26'],[data-container-key='node-80']
.p-title
{
    color: red;
}
 

Kirby

Well-known member
Code:
[data-template="forum_view"][data-container-key='node-19']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-12']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-11']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-49']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-17']  .structItem-cell.structItem-cell--icon,
[data-template="forum_view"][data-container-key='node-39']  .structItem-cell.structItem-cell--icon
{
    padding: 9px 15px 9px 9px;
}
should work.
 

Russ

Well-known member
You can approach it like this:

Code:
[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'],
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
    }
}

Then you can easily add other elements:

Code:
[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'],
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
        .structItem-title
        {
            font-size: 22px;
        }
    }
}
 
Solution

securedme

Active member
That does the job. Thanks a lot!

I combined the codes above to a very much simplified one:

Code:
[data-template="forum_view"]
{
    &[data-container-key='node-1'],
    &[data-container-key='node-2'],
    &[data-container-key='node-3'],
    &[data-container-key='node-4'], 
    &[data-container-key='node-5']
    {
        .structItem-cell.structItem-cell--icon
        {
            padding: 9px 15px 9px 9px;
        }
        @media (max-width: @xf-responsiveMedium)
        {
            .structItem-cell.structItem-cell--meta
            {
                display: none;
            }
            .structItem-cell.structItem-cell--latest
            {
                display: none;
            }
            .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd
            {
                display: none;
            }
        }   
    }
}

This really looks neat. Thanks again @Russ.
 
Last edited:
Top