Forum list layout

[DionDesigns]

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.

What you said above is certainly true...for mobile devices with screen widths less than roughly 350-400 pixels. For tablet and desktop devices, the use of display:table results in better looking pages than those in the Prosilver theme and those in the image URLs you posted in the pull request. This RFC is clearly designed to allow a responsive theme to better support mobile devices, but it would be at the expense of those using desktop devices with screen widths greater than roughly 1200 pixels. The wide screen display in the above image link looks horrifyingly similar to phpBB2...isn't the goal to move forward, not backward? Should phpBB have more container elements, and more margin/padding CSS hacks, than it already has?

I'm really curious why you think a good-looking base theme and a good-looking mobile-optimized theme for phpBB is an inferior solution to a responsive theme, when every example you've provided here and on the support board seems to demonstrate that the dual-theme solution for phpBB is superior to a single responsive theme.

[Arty]

What you said above is certainly true...for mobile devices with screen widths less than roughly 350-400 pixels. For tablet and desktop devices, the use of display:table results in better looking pages than those in the Prosilver theme and those in the image URLs you posted in the pull request.

Its not better. Columns become too wide and content is all over the place.

This RFC is clearly designed to allow a responsive theme to better support mobile devices

That's part of it, yes. Another part is to prevent layout from breaking and fixing illogical mix of pixels and percentages, which is the most important part here.

but it would be at the expense of those using desktop devices with screen widths greater than roughly 1200 pixels. The wide screen display in the above image link looks horrifyingly similar to phpBB2...isn't the goal to move forward, not backward? Should phpBB have more container elements, and more margin/padding CSS hacks, than it already has?

That's just an opinion, which I completely disagree with. And since when making something more logical is going backwards? Because it reminds you of subsilver2?

Did forums list ever break in subsilver2? No, it didn't. So how is that a bad thing?

The only problem it had (and people posted about that problem on almost daily basis when phpBB 2 was active) is that columns in different categories weren't aligned. That was caused by using tables. display:table will cause that problem again, your suggestion will not only make forums list look exactly like subsilver2, but also will have drawbacks of subsilver2 design.

So why are you first posting how this RFC is going backwards because it reminds you of subsilver2, then you suggest using method that will make forums list work exactly like subsilver2. Make up your mind.

I'm really curious why you think a good-looking base theme and a good-looking mobile-optimized theme for phpBB is an inferior solution to a responsive theme, when every example you've provided here and on the support board seems to demonstrate that the dual-theme solution for phpBB is superior to a single responsive theme.

What does this have to do with this topic? Absolutely nothing. I completely fail to see how any of this proves anything and how you came to this conclusion. Please stay on topic, do not turn this thread in another mobile style vs responsive design thread.

[hanakin]

problem is with the entirety of the html to establish the forums and the class names.

try something like this. This gives us plenty of wrapping and a very clean easy to read semantic approach... Ill leave the css fixes to you unfortunately as I do not begin to want to refactor prosilver css again I would much rather start fresh haha..

Code: Select all

<ol class="forums">
	<li class="forumset">
		<dl class="headers">
			<dt>
				<ul>
					<li><a href="#" title="forum title">Forum Title</a></li>
					<li>Topics</li>
					<li>Posts</li>
					<li>Last Post</li>
				</ul>
			</dt>
			<dd class="forumlist">
				<ol>
					<li class="row">
						<ul>
							<li class="title">
								<hgroup class="icon-class">
									<h3>
										<a href="#" title="forum">Forum Title</a>
										<small>Description of forum</small>
									<h3>
									<dl class="subs">
										<dt>
											Subforum:
										</dt>
										<dd>
											<a href="#" title="forum1">forum1</a>, <a href="#" title="forum2">forum2</a>
										</dd>
									<dl>
									<dl clas="mods">
										<dt>Moderators: </dt>
										<dd>
											<a href="#" title="mod-title">Mod Title</a>, <a href="#" title="mod-title">Mod Title</a>
										</dd>
									</dl>
								</hgroup>
							</li>
							<li class="topics">
								837
							</li>
							<li class="posts">
								678
							</li>
							<li class="latest">
								<cite>
									<a href="#" title="post title">Re: Post Title</a>
									by <a href="#">Author Name</a>
									<date>oday 5:51am</date>
								</cite>
							</li>
						</ul>
					</li>
				</ol>
			</dd>
		</dl>
	</li>
</ol>

I do agree that we should not use pixels though. However a grid system is really needed I am just starting a new project to work on a new semantic responsive theme from scratch leveraging the semantic grid system, normalize.css and stylus through a new prototyping framework i stumbled across called jeet, hopefully this will turn into something the the front-end can leverage in the future versions but if not can still refactor from it for prosilver i suppose.

[Arty]

I do like that approach, but unfortunately it requires way too many changes.

[keith10456]

+1 (initial post)

[hanakin]

I do like that approach, but unfortunately it requires way too many changes.

well you can break it up into smaller pieces focus just on refactoring the DT for the title block of the forum row, in fact that would probably not be more complicated then what you are currently doing other than the CSS. and for that if you have not stumbled upon this yet. http://brackets.io/

its a new beta code editor concept from the folks at adobe that allows you to selct a block of HTML in the editor and expand the css style from your project for it with in the HTML file directly underneath what you have selected with an simple keyboard shortcut. Hard to explain reference this screenshot to see better what I am referring too. This is extremely powerful and useful when trying to make changes to something as robust and extremely poorly styled as prosilver is.

[DionDesigns]

That's just an opinion, which I completely disagree with. And since when making something more logical is going backwards? Because it reminds you of subsilver2?

Your comment about your proposal being more logical is an opinion which I completely disagree with.

Did forums list ever break in subsilver2? No, it didn't. So how is that a bad thing?

It didn't break because it used tables.

The only problem it had (and people posted about that problem on almost daily basis when phpBB 2 was active) is that columns in different categories weren't aligned. That was caused by using tables. display:table will cause that problem again, your suggestion will not only make forums list look exactly like subsilver2, but also will have drawbacks of subsilver2 design.

The phpBB2 problem with alignment had nothing to do with it using tables; it had everything to do with CSS that was virtually non-existent.

You have created excellent desktop and mobile themes. I don't understand why you want to create a responsive theme that WILL be inferior to your individual creations.

Hmm...you know what, go right ahead and create a responsive theme, and I hope it becomes a part of phpBB3.1. I just fixed a website that was developed using Twitter Bootstrap. Typical problems...overlapping elements at intermediate resolutions. All I did was split the theme in two and use a simple detection algorithm to select the proper theme. Four hours of work and got paid $1500. A responsive theme in phpBB3.1 could be very profitable.