Forum list layout

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Forum list layout

Post by Arty » Wed Apr 10, 2013 12:07 pm

Currently forums/topics lists uses mix of pixels and percentages for width of each component:
- Forum name + icon: width = 50% + padding-left: 45px + padding-right: 5px, making total width = 50% + 50px
- Topics and post counters: width = 8% + left border: 1px, making total width = 8% + 1px
- Last post information: width = 25% + left border: 1px, making total width = 25% + 1px

So total width of each row is 83% + 52px.

It is fine on common width of 1000-1500px. On lower resolution it causes last column to break layout and go on next line. On higher resolution it causes columns to be unreasonably wide.

It was done that way in prosilver because back then browsers did not support box-sizing:border-box, but now all browsers do. Even IE8. So its time to do it properly.

I suggest to change box-sizing to border-box and adjust all widths to numbers in pixels, similar to old width if total width was 1000px. Use negative margin-right for first column and positive margin-right for its content to counter that negative margin, float other columns to left:
- Forum name + icon: float: left; margin-right: -410px; width: 100%;
- - Inner div: margin-right: 410px to counter negative margin for parent element
- Topics and post counters: float: left; width: 80px
- Last post: float: left; width: 250px

It will require changing templates a bit, not just CSS: every <dt> will have to have inner <div>

Advantages of doing that:
- Forums/topic lists will take full width of its container
- It will look the same on all screen resolutions
- It will make it easy to hide columns for low screen resolution, allowing to implement responsive design
- Mod authors can easily adjust margin-right of first column to add extra columns

Disadvantages of doing that:
- Minor adjustments to HTML code will be required to add inner div for <dt>
- IE7 will require minor tweaks
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Mess
Registered User
Posts: 197
Joined: Wed Jun 13, 2012 10:14 am

Re: Forum list layout

Post by Mess » Wed Apr 10, 2013 12:40 pm

+1

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Forum list layout

Post by Arty » Wed Apr 10, 2013 4:09 pm

Updated RFC a bit. Forgot that this method requires adding inner div element for <dt> to counter negative margin for <dt>.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Forum list layout

Post by Arty » Wed Apr 10, 2013 8:00 pm

Almost finished working on implementation. It works with all browsers, including outdated IE up to IE7.

Solution will also fix another issue: notification settings layout. Currently it uses same layout as forums list, but amount of <dt class="mark"> can be infinite, potentially breaking layout. It should be replaced with table.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Forum list layout

Post by Arty » Wed Apr 10, 2013 8:17 pm

Ticket: http://tracker.phpbb.com/browse/PHPBB3-11489
PR: https://github.com/phpbb/phpbb3/pull/1331

New .topiclist lists have additional class name that indicates how many columns list includes. Columns are split in 3 categories:
- 80px wide column: dd.posts, dd.topics, dd.views, dd.extra, dd.mark
- 250px wide column: dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info
- 125px wide column (used only once, 2 such columns in a row making total of 250px): dd.option

All width values in CSS starting with asterisk are for IE7 (such as *width:79px;). Other browsers ignore it.

.topiclist lists by default have 410px margin on right side, allowing for 1x 250px column and 2x 80px columns in addition to main column.
Additional classes were created for lists that use different column layouts:
- .missing-column: list that is missing one 80px wide column
- .two-columns: list that has only 1x 80px column in addition to main column
- .two-long-columns: list that has only 1x 250px column in addition to main column

Contents of all <dt> elements were wrapped into <div class="list-inner">. Contents of <div class="list-inner"> were moved to the right by one tab character to keep structure.

Patch was tested with modern browsers and IE7. Lists look exactly the same as they used to at about 1000px width, you'll notice difference in layout only if you change browser width.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Pete77s
Registered User
Posts: 43
Joined: Mon Feb 07, 2005 4:55 am

Re: Forum list layout

Post by Pete77s » Thu Apr 11, 2013 5:07 pm

+1 guess it doesn't matter. most ppl change the defualt anwyay, others do not and probably cus it doesn't matter to them either.

User avatar
imkingdavid
Registered User
Posts: 1050
Joined: Thu Jul 30, 2009 12:06 pm

Re: Forum list layout

Post by imkingdavid » Thu Apr 11, 2013 5:09 pm

Pete77s wrote:+1 guess it doesn't matter. most ppl change the defualt anwyay, others do not and probably cus it doesn't matter to them either.
Most styles are based on either prosilver or subsilver. Those based on prosilver will benefit from changes to the base style even if you aren't using prosilver itself.

Anyway, in general I think this is a good idea, so +1.
I do custom MODs. PM for a quote!
View My: MODs | Portfolio
Please do NOT contact for support via PM or email.
Remember, the enemy's gate is down.

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Forum list layout

Post by DionDesigns » Thu Apr 11, 2013 6:50 pm

With Microsoft forcing IE10 upgrades through Windows Update, IE7 has officially, FINALLY, become a thing of the past. The only people who could possibly be using IE7 at this point are those still using WinXP or who disabled Windows Update, and those people have the ability to upgrade to IE8 (XP) or IE10 at any time. It's time for phpBB to stop supporting the piece of garbage known as IE7.

If phpBB makes this decision, I would suggest an alternative to the above...using display:table;width:100% on the DL element and display:table-cell on the DT/DD elements. It has all the benefits of the above and it's supported by IE8. Since it doesn't require additional elements, floats, and negative margin hacks, the CSS/HTML will be clean and easy to understand. It also fixes the ugly, amateurish borders on the DD elements which have existed since phpBB3 was released.

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Forum list layout

Post by Arty » Thu Apr 11, 2013 6:57 pm

Problem with display:table is it ignores width limitations. If content is too wide, it will stretch whole row. Also splitting content into 2 rows on small devices is a problem with tables.

I did try tables solution in several of my styles, it caused more troubles than solved problems. Never again. It doesn't work well with dynamic content like forums.

Borders can be fixed another way by mixing negative bottom margin and positive bottom padding:

Code: Select all

ul.topiclist dd {
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: Forum list layout

Post by Pony99CA » Thu Apr 11, 2013 10:54 pm

I thought that best practice was to avoid using pixels for specifying most things and use either percentages or points to allow flexible layouts and user-specified font sizes. Sites that either don't respect the browser's text size setting or break the layout with larger text sizes aren't good for people with poor vision.

Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

Post Reply