Core Responsiveness

RobParker · Jul 10, 2013

Great job on making Core responsive.

There's just a few little things that could be fixed (I don't know if these are part of Core or part of XF though). I can post screenshots tonight to explain better.

1) When going to a small browser window the sidebar drops below the node list but it doesn't expand to the same width (it's slightly less) until you go to an even smaller browser window when it then actually expands to match the width of the node list.

2) The Advanced footer doesn't go responsive very elegantly with some parts pushed below and then no longer aligned. I'd suggest as soon as the page is too narrow for the 3 panel footer, to push it so it's only 1 panel wide and all 3 are below each other.

3) When using the User Bar, below a certain width the account options all disappear (they actually drop to a new line and are hidden). I imagine a longer username makes this worse. I think you need at least a dropdown icon to remain in the top right whatever the resolution is. i.e. Inbox and Alerts can both go if it gets really narrow but turning the username into an icon and having it link to index.php?account is fairly vital.

Russ · Jul 10, 2013

1.) It's actually as designed, it functions the same way as the default XenForo install. While it would be easy enough to expand the sidebar with a media query such as....

Code:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .sidebbar
    {
        width: 100%;
    }
}
</xen:if>

The download with that you'll need to expand the sidebarbg manually or else it'll turn out like this:

2.) I'll need to mess with it, the downside is there's many resolutions out there and honestly the best might be to have the expand footer link on the mediumwidth as well(which is the tablet size that knocks 1 or two blocks down)

3.) Browse to Appearance -> Style Properties -> [XB] Header & Navigation -> User Bar CSS,

Remove the "height" completely it's set at 32px right now. That will actually drop the username/inbox/alerts down to the next line like a normal behavior. Of course only admins/mods will have it dropped down like that.

RobParker · Jul 10, 2013

Russ said:
3.) Browse to Appearance -> Style Properties -> [XB] Header & Navigation -> User Bar CSS,

Remove the "height" completely it's set at 32px right now. That will actually drop the username/inbox/alerts down to the next line like a normal behavior. Of course only admins/mods will have it dropped down like that.

Perfect, thanks.

To explain #1 a little better

Here the sidebar is fixed/narrow while the forum is wider:

Here you see the sidebar width is 100% but the forum blocks aren't ("Hidden" is a forum category)

I think it might just be a padding issue...?

RobParker · Jul 10, 2013

Another question

For my notices I currently have this as the template/CSS:

Code:

<img src="/images/notices/sc.png" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />
 
<div class="signup_Intro" style="position:absolute; top:0; left:0; height:100%; width:290px;">
<div style="padding: 10px;">
<h4>Welcome</h4>
<p>Please <a href="index.php?login/">Register</a> to access the whole of the site and to post on the forums.</p>
<div class="noticeButtonContainer">
<label for="LoginControl" id="SignupButton"><a href="index.php?login/" class="inner"><b>Sign Up Now!</b></a></label>
<br />
<div class="signup_Member">Already a member? <a href="login/">Login Now!</a></div>
</div>
</div>
</div>
[code]
 
The notice container is already responsive so that's all fine. The only thing I'd like is to either change the background image width:
 
[code]
<img src="/images/notices/sc.png" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />

depending on the responsive layout or alternatively remove the image completely and replace it with a solid bg colour.

Do you think that's possible?

Russ · Jul 10, 2013

First padding one I got you now, you can try this in the extra.css:

Code:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .forum_list .sectionMain
    {
        padding: 10px 0px;
    }
}
</xen:if>

Could you give me a screenshot of your notice setup by chance?

RobParker · Jul 10, 2013

This is at desktop width

This is when the browser is shrunk a bit. You can see as the container is responsive it just displays less of the image. When the image is just a background that's fine but if the image has text/logo on it then it's not perfect to cut half of it off (but not sure if we can come up with a solution to that).

This is at mobile resolution. At this res I don't see the point in having the image load any more as it's not really visible and is just behind the text. Changing the background image to a solid colour here would be useful.

RobParker · Jul 10, 2013

Russ said:
First padding one I got you now, you can try this in the extra.css:

Code:

<xen:if is="@enableResponsive"> @media (max-width:@maxResponsiveNarrowWidth) { .forum_list .sectionMain { padding: 10px 0px; } } </xen:if>

Yep, that fixed it

Steve · Jul 10, 2013

You can assign a class to your image and then use a display: none; when in responsive view.

HTML:

<img src="/images/notices/sc.png" class="noticeImage" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />
 
<div class="signup_Intro" style="position:absolute; top:0; left:0; height:100%; width:290px;">
<div style="padding: 10px;">
<h4>Welcome</h4>
<p>Please <a href="index.php?login/">Register</a> to access the whole of the site and to post on the forums.</p>
<div class="noticeButtonContainer">
<label for="LoginControl" id="SignupButton"><a href="index.php?login/" class="inner"><b>Sign Up Now!</b></a></label>
<br />
<div class="signup_Member">Already a member? <a href="login/">Login Now!</a></div>
</div>
</div>
</div>
[code]
 
The notice container is already responsive so that's all fine. The only thing I'd like is to either change the background image width:
 
[code]
<img src="/images/notices/sc.png" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />

Notice the class I added to the <img>

And add this to your extra.css

Code:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .noticeImage
    {
        display: none;
    }
}
</xen:if>

Edit: Also that notice setup looks like my resource that I submitted a while back but is now deleted. I am going to redo that to be more user friendly and less in-line styling.

RobParker · Jul 11, 2013

Russ said:
First padding one I got you now, you can try this in the extra.css:

Code:

<xen:if is="@enableResponsive"> @media (max-width:@maxResponsiveNarrowWidth) { .forum_list .sectionMain { padding: 10px 0px; } } </xen:if>

What's the easiest way to remove the padding and make the responsive view 100%?

RobParker · Jul 11, 2013

In firebug, setting these values to 0px (as opposed to clearing them) does what i want but I can't seem to find the correct style property option.

I thought it was here:

but that doesn't seem to affect anything...

Russ · Jul 11, 2013

RobParker said:
In firebug, setting these values to 0px (as opposed to clearing them) does what i want but I can't seem to find the correct style property option.

View attachment 236

I thought it was here:

View attachment 237

but that doesn't seem to affect anything...

You need to add it in a media query:

Code:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    #content .pageContent
    {
        padding: 0px !important;
    }
}
</xen:if>

RobParker · Jul 11, 2013

That just leaves me with this problem for the sidebar with the blue bar sticking out.

RobParker · Jul 11, 2013

Ah is that because the sidebar image is only 316px wide?

RobParker · Jul 11, 2013

Is this correct or is there a better way?

Code:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    #content .pageContent
    {
        padding: 0px !important;
    }
    
        .forum_list .sectionMain
    {
        padding: 10px 0px;
    }
    
    .sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
    background-size: 320px;
    }
    
}
</xen:if>

Russ · Jul 12, 2013

RobParker said:
Ah is that because the sidebar image is only 316px wide?

This would be why, I suppose I need to extend it a bit, I've mentioned it before I could of taken a different approach to it and I may of actually just thought of one that will make it so the icon next to the title will be different image than the black gradient.

But for now you could extend that image on the right side.

RobParker · Jul 12, 2013

So this is ok?

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background-size: 320px;

Russ · Jul 12, 2013

RobParker said:
So this is ok?

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background-size: 320px;

I meant stretch the image using like photoshop, extend the right side out using photoshop.

RobParker · Jul 12, 2013

Yep I know but is there a downside in doing it via CSS?

Core Responsiveness

Support Forums

Documentation

Bug Reports

Ticket Support

RobParker

Registered

Russ

RobParker

Registered

RobParker

Registered

Russ

RobParker

Registered

RobParker

Registered

Steve

RobParker

Registered

RobParker

Registered

Russ

RobParker

Registered

RobParker

Registered

RobParker

Registered

Russ

RobParker

Registered

Russ

RobParker

Registered

Pre-Sale Questions

Products & Services

Useful Links

Support

Important Links