XF2 [8WR] XenPorta 2 (Portal) PRO [Paid] 2.2.0.7

[Jaxel]

Jaxel updated XF2 [8WR] XenPorta 2 (Portal) PRO with a new update entry:

2.2.0.6 - CHANGELOG

• Huge changes to the way the articles listing is represented. If things look weird to you, revert your templates and update your style settings.
  • Articles list has been redesigned in a CSS3 flex grid format. It no longer follows XenForo's built-in responsive design settings, as this is no longer needed. Instead, articles will have a baseline width set in style settings and will auto-expand and contract based on the fluidity of your skin.
  • The baseline height setting will...

Read the rest of this update entry...

 

[blackhawk74]

Hi Jaxel, nice update! One issue I noticed after the update is some posts do not seem to fit properly:

 

[Jaxel]

Hi Jaxel, nice update! One issue I noticed after the update is some posts do not seem to fit properly:

View attachment 243613

Add to extra.css: .porta-article-item .message-main { max-width: 100%; }
I will add it in the next release in the core code.

 

[Goddi]

Where can I display the articles in 2 columns again?



This was my old depiction.



And this is the new one.

 

[fionix]

After upgrade I only have 2 columns before I had 3 which looked much better.. it was setup as you demonstrated but that seem not possible any longer?

 

[l3ta]

@Jaxel Is there any way to have two columns again? I'm not happy with 3 on desktop. Thanks.

 

[Mendalla]

@Jaxel Is there any way to have two columns again? I'm not happy with 3 on desktop. Thanks.

In the Style Properties, make Masonry Baseline Width higher. It defaults to 350px but I found 500px worked to get the two column look. I do plan to experiment more on the weekend.

 

[Mendalla]

In the Style Properties, make Masonry Baseline Width higher. It defaults to 350px but I found 500px worked to get the two column look. I do plan to experiment more on the weekend.

Scratch that. Doesn't work on mobile. Too wide. Hadn't tested on my phone yet (I only have the new version in my dev).

 

[Mendalla]

Actually, even the default 350px is a bit too wide for my Galaxy S9. Not enough to affect readability but I can slightly side scroll. Turning off Masonry gives the best results on mobile, actually. I am thinking I might keep my prod on 2.2.0.5 for now until I can tinker more. This doesn't quite work as i would like.

 

[l3ta]

Actually, even the default 350px is a bit too wide for my Galaxy S9. Not enough to affect readability but I can slightly side scroll. Turning off Masonry gives the best results on mobile, actually. I am thinking I might keep my prod on 2.2.0.5 for now until I can tinker more. This doesn't quite work as i would like.

Thanks, Mendalla. It worked well on desktop, but not on tablet or mobile. This update is a disaster. My portal is totally ruined

 

[Mendalla]

Thanks, Mendalla. It worked well on desktop, but not on tablet or mobile. This update is a disaster. My portal is totally ruined

Your live? Restore or remove Xenporta and reinstall 2.2.0.5 (or whatever version you used to be on) and restyle. That's why I tried in my dev first.

 

[l3ta]

Your live? Restore or remove Xenporta and reinstall 2.2.0.5 (or whatever version you used to be on) and restyle. That's why I tried in my dev first.

Yes. Jaxel's updates are usually stable and improve things, but this one failed big time with the new flex box thingy. It doesn't fit well on mobile or tablet. 😭

 

[Gemma]

It worked well on desktop, but not on tablet or mobile. This update is a disaster. My portal is totally ruined

I've not used xenPorta for a while but I used to set the widths at either 500px or 250px for mobile device, not sure if that would be any help here though

.porta-masonry {
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

@media (max-width: @xf-responsiveWide)
{
.porta-masonry {
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}
}
@media (max-width: @xf-responsiveMedium)
{
.porta-masonry {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}

@media (max-width: @xf-responsiveNarrow)
{
.porta-masonry {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}

 

[l3ta]

I've not used xenPorta for a while but I used to set the widths at either 500px or 250px for mobile device, not sure if that would be any help here though

Thanks a bunch, Gemma. Unfortunately, the issue goes further than width. There used to be a nice gap between the articles on tablet that is no longer there. And I cannot revert to the older version either. Hopefully Jaxel will rectify all these issues soon. 😭

 

[Goddi]

Thanks, Mendalla. It worked well on desktop, but not on tablet or mobile. This update is a disaster. My portal is totally ruined

Me too. I have Infinite an Masonary disable in the Style Property. At the moment I use 1 boxes with the same width. But this cannot be the future.

 

[Jaxel]

You'll have to show screenshots or links. Because everything looks fine for me. On every skin.

 

[l3ta]

You'll have to show screenshots or links. Because everything looks fine for me. On every skin.

You are correct, Jaxel. Upon further inspection, some of the custom changes on many of my styles were responsible for the issues. However, when I tested the portal on a fresh default style, some issues such as horizontal scrolling and the blocks not fitting right remained on mobile and tablet. I have now reverted to the previous version and all is good again.

 

[Mendalla]

Okay, some screenshots to illustrate. These are done "out of box" with Default Style so that my styling is not a factor.

With the default "Masonry baseline width" setting of 350px, we get this on desktop:



Which does this on mobile (it's just a bit too wide, not terrible but a bit messy):

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Now, that is fixable by changing to 300px but it still leaves us with three columns on desktop.

However, what I want (and I think @l3ta, too ) is something like this, which requires going to a higher px (this is 500):



However, that gives us this on mobile, which I cannot go to prod with:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

So what we are asking is how to get a 2 column display on desktop and still have it adapt properly to a mobile screen. With the previous version, we could set "Masonry columns" to 2 to get the desired desktop display and that adapted properly down to one column on a small screen like my Galaxy.

 

[Goddi]

I played around a bit and tested. This are my preliminary results.





I have made the following settings.
2 columns



3 columns



It does not work 100%, but its near by.
Thanks for the input.

 

[Mendalla]

I played around a bit and tested. This are my preliminary results.

View attachment 243788

View attachment 243789

I have made the following settings.
2 columns

View attachment 243791

3 columns

View attachment 243792

It does not work 100%, but its near by.
Thanks for the input.

How does it look on a mobile device, though? I can get it the way I want on a desktop. It's on phones that @l3ta and I are having problems.