Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Brogan

XenForo moderator
Staff member
@Ozzy I should be able to take a look next week.

It rained all day Saturday and I've (stress) fractured my right arm and left ankle so progress is slower than I'd like (using the mallet hurts, a lot).

Should be finished with the pavers tomorrow though then I just need to infill.

20210426_143603.jpg
 

Brogan

XenForo moderator
Staff member
@Ozzy My path project expanded so I didn't have time to look at it this week.

I've pencilled it in to my task list for next week.
 

Brogan

XenForo moderator
Staff member
@Ozzy47 My project expanded (again) 🙄 😕 :cry:

However, I made some time tonight to look into it.

Out of the box, there's no sticky class for article view thread so it needs to be added.

Edit the post_article_macros template.
Add this -- $thread.sticky ? 'message--articlePreview--sticky' :'' }}{{ -- like so on line 224:

HTML:
    <article class="message message--article message--articlePreview {{
        $thread.sticky ? 'message--articlePreview--sticky' :'' }}{{
        $thread.discussion_state == 'moderated' ? 'is-moderated' : '' }}{{
        $thread.discussion_state == 'deleted' ? 'is-deleted' : ''
        }} js-inlineModContainer js-threadListItem-{$thread.thread_id}">

1620693083450.png

Then add this section of code to the cta_article_grid.less template, or extra.less template, depending on which you are using:
Less:
&--sticky
{
    grid-area: a !important;
}

Here's the full file so you can see where it's added - line 55:
Less:
@media (min-width: @xf-responsiveMedium)
{
    @__ctaArticleFooter: 40px;

    .block.block--articles.block--previews .block-body .message--articlePreview
    {
        margin-top: 0;

        &:nth-of-type(n)
        {
            grid-area: unset;

            & .articlePreview
            {
                &-main
                {
                    flex-direction: column;
                    min-height: 100%;
                    padding-bottom: @__ctaArticleFooter;
                }

                &-image
                {
                    width: 100%;
                }

                &-title
                {
                    font-size: @xf-fontSizeLarger;
                }

                &-content
                {
                    margin-bottom: -@__ctaArticleFooter;
                }

                &-footer
                {
                    position: relative;
                    bottom: @__ctaArticleFooter;
                }

                &-meta
                {
                    border-top: solid 1px @xf-borderColor;

                    & .articlePreview-by
                    {
                        display: none;
                    }
                }
            }
        }

        &--sticky
        {
            grid-area: a !important;
        }
    }
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
    background: none;
}

The result is this:

1620693301400.png


Note that this only works if there is a single sticky thread.
 
Top