Forum list layout

[Arty]

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

[Mess]

+1

[Arty]

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

[Arty]

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.

[Arty]

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.

[Pete77s]

+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.

[imkingdavid]

+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.

[DionDesigns]

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.

[Arty]

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;
}

[Pony99CA]

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