Methinks these need some revamping, and I'd like to tackle them fairly soon.
First thing (IMO) is to dump the old windowbg and windowbg2 classes from the table_list class. Since all cells already have their own classes (.info, .stats, etc) there's no point in keeping windowbg and windowbg2, so we might as well save some clutter in the markup. I think this one is a no-brainer.
Second thing is the table_grid class. We can drop the old windowbg and windowbg2 here as well.
At the moment we have to apply colour classes to every cell, which is inefficient if we are styling by row. The row styling is currently done by CSS3 nth-child() stuffz, which isn't supported by IE8 anyway, and we are supposed to be supporting IE8 (generally). Using nth-child isn't particularly efficient in terms of CSS selectors either.
Seems to me the best option would be to adapt the old PHP to style by row, which means setting up a counter in sources (like the one that handles alternating post backgrounds in Display.controller.php). Then , all we need are some class names that actually make sense for a change. :D
I'm thinking this:
Standard row: table_row
Alternate row: table_row_alt
Sticky rows: sticky_row sticky_row_alt
Locked rows: locked_row locked_row_alt
Locked and sticky: lockedsticky_row lockedsticky_row_alt
Unapproved topic: approvetopic_row approvetopic_row_alt
Unapproved posts: approve_row approve_row_alt
That should cover all bases. Using alt seems more logical than using 2, since there's only one row #2 but heaps of alternate rows.
The underscores before row and alt just makes things more readable. I found the longer class names became a bit of a blur without some punctuation.
If everyone is cool with this plan, can someone help me out with setting up the required counters? Offhand, I think we'd need them in Errors, GenericList, Memberlist, and MessageIndex. I think that's all of them.
ETA: Hmm. Buglet. The editor appears to be slightly borking formatting with Firefox.
I'm not a big friend of those $alternate things.. however it's simple to implement.. You don't need to edit the sources files, it can be done in template files, too .. And since it's stuff for the UI it should be in the template anyway.
Quick sample (you'd need a foreach or while loop), hope it's easy to understand:
//Set the initial state of our variable $alternate, should be somewhere at the beginning of that loop
$alternate = true;
foreach ($bla as $blub)
{
// Output, emtpy if $alternate is true and 2 if $alternate is false
echo '<div class="windowbg', $alternate ? '' : '2','">';
// at the end of that loop we switch $alternate to a reverted status.
$alternate = !$alternate;
}
Oh ok. I'll have a go at that then. :D Shouldn't be too hard to figure out after I get past the first half dozen parse errors and undefined whatnots. I've got the general idea.
Thing about using one of these is it'll simplify CSS (better for inexperienced admins/themers) and make for better CSS performance, and give automatic IE8 support too. Since this is arguably a readability benefit, I think we should do IE8 if we can.
Damn, fixed a typo:
$alternate = !$alternate; (not $alternate =! $alternate;)
Hmm. T'aint working. Runs without errors, and calls the colours from the css ok, but the alternating bit isn't working so all rows are the same colour.
I've got this:
foreach ($context['topics'] as $topic)
{
// Set the initial state of the variable.
$alternate_class = true;
// Is this topic pending approval, or does it have any posts pending approval?
if ($context['can_approve_posts'] && $topic['unapproved_posts'])
$color_class = !$topic['approved'] ? 'approvetopic_row' : 'approve_row';
// We start with locked and sticky topics.
elseif ($topic['is_sticky'] && $topic['is_locked'])
$color_class = 'locked_row sticky_row';
// Sticky topics should get a different color, too.
elseif ($topic['is_sticky'])
$color_class = 'sticky_row';
// Locked topics get special treatment as well.
elseif ($topic['is_locked'])
$color_class = 'locked_row';
// Last, but not least: regular topics.
else
$color_class = 'table_row';
// [WIP] Markup can be cleaned up later.
echo '
<tr class="', $color_class, '', ($alternate_class ? '_alt':''), '">
<td class="icon2">
<div>
<img src="', $topic['first_post']['icon_url'], '" alt="" />
', $topic['is_posted_in'] ? '<img src="'. $settings['images_url']. '/icons/profile_sm.png" alt="" class="fred" />' : '','
</div>
</td>
<td class="subject">
<div ', (!empty($topic['quick_mod']['modify']) ? 'id="topic_' . $topic['first_post']['id'] . '" ondblclick="oQuickModifyTopic.modify_topic(\'' . $topic['id'] . '\', \'' . $topic['first_post']['id'] . '\');"' : ''), '>';
// [WIP] Methinks the orange icons look better if they aren't all over the page.
// Is this topic new? (assuming they are logged in!)
if ($topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $topic['new_href'], '" id="newicon' . $topic['first_post']['id'] . '"><span class="new_posts">' . $txt['new'] . '</span></a>';
echo '
', $topic['is_sticky'] ? '<strong>' : '', '<span class="preview" title="', $topic[(empty($settings['message_index_preview_first']) ? 'last_post' : 'first_post')]['preview'], '"><span id="msg_' . $topic['first_post']['id'] . '">', $topic['first_post']['link'], ($context['can_approve_posts'] && !$topic['approved'] ? ' <em><img src="' . $settings['images_url'] . '/admin/post_moderation_moderate.png" style="width:16px" alt="' . $txt['awaiting_approval'] . '" title="' . $txt['awaiting_approval'] . '" />(' . $txt['awaiting_approval'] . ')</em>' : ''), '</span></span>', $topic['is_sticky'] ? '</strong>' : '', '
<p>', $txt['started_by'], ' ', $topic['first_post']['member']['link'], '
<small id="pages' . $topic['first_post']['id'] . '">', $topic['pages'], '</small>
</p>
</div>
</td>
<td class="stats">
', $topic['replies'], ' ', $txt['replies'], '
<br />
', $topic['views'], ' ', $txt['views'], ' / ',
$topic['likes'], ' ', $txt['likes'], '
</td>
<td class="lastpost">
<a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.png" alt="', $txt['last_post'], '" title="', $txt['last_post'], '" /></a>
', $topic['last_post']['time'], '<br />
', $txt['by'], ' ', $topic['last_post']['member']['link'], '
</td>';
// Show the quick moderation options?
if (!empty($context['can_quick_mod']))
{
echo '
<td class="moderation centertext" >';
if ($options['display_quick_mod'] == 1)
echo '
<input type="checkbox" name="topics[]" value="', $topic['id'], '" class="input_check" />';
else
{
// Check permissions on each and show only the ones they are allowed to use.
if ($topic['quick_mod']['remove'])
echo '<a href="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], ';actions[', $topic['id'], ']=remove;', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['quickmod_confirm'], '\');"><img src="', $settings['images_url'], '/icons/quick_remove.png" style="width:16px;" alt="', $txt['remove_topic'], '" title="', $txt['remove_topic'], '" /></a>';
if ($topic['quick_mod']['lock'])
echo '<a href="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], ';actions[', $topic['id'], ']=lock;', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['quickmod_confirm'], '\');"><img src="', $settings['images_url'], '/icons/quick_lock.png" style="width:16px" alt="', $txt['set_lock'], '" title="', $txt['set_lock'], '" /></a>';
if ($topic['quick_mod']['lock'] || $topic['quick_mod']['remove'])
echo '<br />';
if ($topic['quick_mod']['sticky'])
echo '<a href="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], ';actions[', $topic['id'], ']=sticky;', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['quickmod_confirm'], '\');"><img src="', $settings['images_url'], '/icons/quick_sticky.png" style="width:16px" alt="', $txt['set_sticky'], '" title="', $txt['set_sticky'], '" /></a>';
if ($topic['quick_mod']['move'])
echo '<a href="', $scripturl, '?action=movetopic;current_board=', $context['current_board'], ';board=', $context['current_board'], '.', $context['start'], ';topic=', $topic['id'], '.0"><img src="', $settings['images_url'], '/icons/quick_move.png" style="width:16px" alt="', $txt['move_topic'], '" title="', $txt['move_topic'], '" /></a>';
}
echo '
</td>';
}
echo '
</tr>';
// Reset the variable to other state.
$alternate_class != $alternate_class;
}
argh, my fault again .. please don't kill me. the initial $alternate_class = true; needs to be outsite the foreach, sorry..
$alternate_class = true;
foreach ($context['topics'] as $topic)
{ ...
:D Yeah I thought that might be the case. Ok, will try that.
Ok now have this, but still not stripey.
// Set the initial state of the variable.
$alternate_class = true;
foreach ($context['topics'] as $topic)
{
// Is this topic pending approval, or does it have any posts pending approval?
if ($context['can_approve_posts'] && $topic['unapproved_posts'])
$color_class = !$topic['approved'] ? 'approvetopic_row' : 'approve_row';
// We start with locked and sticky topics.
elseif ($topic['is_sticky'] && $topic['is_locked'])
$color_class = 'locked_row sticky_row';
// Sticky topics should get a different color, too.
elseif ($topic['is_sticky'])
$color_class = 'sticky_row';
// Locked topics get special treatment as well.
elseif ($topic['is_locked'])
$color_class = 'locked_row';
// Last, but not least: regular topics.
else
$color_class = 'table_row';
// [WIP] Markup can be cleaned up later.
echo '
<tr class="', $color_class, '', ($alternate_class ? '':'_alt'), '">
<td class="icon2">
<div>
<img src="', $topic['first_post']['icon_url'], '" alt="" />
', $topic['is_posted_in'] ? '<img src="'. $settings['images_url']. '/icons/profile_sm.png" alt="" class="fred" />' : '','
</div>
</td>
<td class="subject">
<div ', (!empty($topic['quick_mod']['modify']) ? 'id="topic_' . $topic['first_post']['id'] . '" ondblclick="oQuickModifyTopic.modify_topic(\'' . $topic['id'] . '\', \'' . $topic['first_post']['id'] . '\');"' : ''), '>';
// [WIP] Methinks the orange icons look better if they aren't all over the page.
// Is this topic new? (assuming they are logged in!)
if ($topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $topic['new_href'], '" id="newicon' . $topic['first_post']['id'] . '"><span class="new_posts">' . $txt['new'] . '</span></a>';
echo '
', $topic['is_sticky'] ? '<strong>' : '', '<span class="preview" title="', $topic[(empty($settings['message_index_preview_first']) ? 'last_post' : 'first_post')]['preview'], '"><span id="msg_' . $topic['first_post']['id'] . '">', $topic['first_post']['link'], ($context['can_approve_posts'] && !$topic['approved'] ? ' <em><img src="' . $settings['images_url'] . '/admin/post_moderation_moderate.png" style="width:16px" alt="' . $txt['awaiting_approval'] . '" title="' . $txt['awaiting_approval'] . '" />(' . $txt['awaiting_approval'] . ')</em>' : ''), '</span></span>', $topic['is_sticky'] ? '</strong>' : '', '
<p>', $txt['started_by'], ' ', $topic['first_post']['member']['link'], '
<small id="pages' . $topic['first_post']['id'] . '">', $topic['pages'], '</small>
</p>
</div>
</td>
<td class="stats">
', $topic['replies'], ' ', $txt['replies'], '
<br />
', $topic['views'], ' ', $txt['views'], ' / ',
$topic['likes'], ' ', $txt['likes'], '
</td>
<td class="lastpost">
<a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.png" alt="', $txt['last_post'], '" title="', $txt['last_post'], '" /></a>
', $topic['last_post']['time'], '<br />
', $txt['by'], ' ', $topic['last_post']['member']['link'], '
</td>';
// Show the quick moderation options?
if (!empty($context['can_quick_mod']))
{
echo '
<td class="moderation centertext" >';
if ($options['display_quick_mod'] == 1)
echo '
<input type="checkbox" name="topics[]" value="', $topic['id'], '" class="input_check" />';
else
{
// Check permissions on each and show only the ones they are allowed to use.
if ($topic['quick_mod']['remove'])
echo '<a href="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], ';actions[', $topic['id'], ']=remove;', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['quickmod_confirm'], '\');"><img src="', $settings['images_url'], '/icons/quick_remove.png" style="width:16px;" alt="', $txt['remove_topic'], '" title="', $txt['remove_topic'], '" /></a>';
if ($topic['quick_mod']['lock'])
echo '<a href="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], ';actions[', $topic['id'], ']=lock;', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['quickmod_confirm'], '\');"><img src="', $settings['images_url'], '/icons/quick_lock.png" style="width:16px" alt="', $txt['set_lock'], '" title="', $txt['set_lock'], '" /></a>';
if ($topic['quick_mod']['lock'] || $topic['quick_mod']['remove'])
echo '<br />';
if ($topic['quick_mod']['sticky'])
echo '<a href="', $scripturl, '?action=quickmod;board=', $context['current_board'], '.', $context['start'], ';actions[', $topic['id'], ']=sticky;', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['quickmod_confirm'], '\');"><img src="', $settings['images_url'], '/icons/quick_sticky.png" style="width:16px" alt="', $txt['set_sticky'], '" title="', $txt['set_sticky'], '" /></a>';
if ($topic['quick_mod']['move'])
echo '<a href="', $scripturl, '?action=movetopic;current_board=', $context['current_board'], ';board=', $context['current_board'], '.', $context['start'], ';topic=', $topic['id'], '.0"><img src="', $settings['images_url'], '/icons/quick_move.png" style="width:16px" alt="', $txt['move_topic'], '" title="', $txt['move_topic'], '" /></a>';
}
echo '
</td>';
}
echo '
</tr>';
// Reset the variable to other state.
$alternate_class != $alternate_class;
}
Could the problem be with my ternary? It seems to be doing everything right except for applying the_alt bit.
// [WIP] Markup can be cleaned up later.
echo '
<tr class="', $color_class, '', ($alternate_class ? '':'_alt'), '">
I sorta guessed at the syntax there. :D
Nah, it's again my fault ...
/me is running away, needs a bed ...
Edit: Fixed my sh*t in the posts above.
;D Ummmmmmmmmmm. Still not stripey. Thing is I can't just use windowbg. I have to set up the $color_class first, then apply the alt to that.
// Set the initial state of the variable.
$alternate_class = false;
foreach ($context['topics'] as $topic)
{
$alternate_class != $alternate_class;
// Is this topic pending approval, or does it have any posts pending approval?
if ($context['can_approve_posts'] && $topic['unapproved_posts'])
$color_class = !$topic['approved'] ? 'approvetopic_row' : 'approve_row';
// We start with locked and sticky topics.
elseif ($topic['is_sticky'] && $topic['is_locked'])
$color_class = 'locked_row sticky_row';
// Sticky topics should get a different color, too.
elseif ($topic['is_sticky'])
$color_class = 'sticky_row';
// Locked topics get special treatment as well.
elseif ($topic['is_locked'])
$color_class = 'locked_row';
// Last, but not least: regular topics.
else
$color_class = 'table_row';
// [WIP] Markup can be cleaned up later.
echo '
<tr class="', $color_class, '', $alternate_class ? '':'_alt', '">
Which is the important bit. After that is just a pile of markup until the closing tag for the row.
ok, can't test it but please try this and check the rendered html sources from your browser:
I've marked changes in red, unfornunately I can't test it now (no proper test system set up, am currently @work)
Yay!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
It must have been the != instead of the =! that was stopping it. That was the only significant change. Anyway it works now. Thanks.
Glad it works now :)
Y'know, I'm seriously tempted to rewrite some of the index pages with display: table; ul's n stuff. Some of our tables really do present tabular content (ie: recent posts in info centre, memberlist, etc) so a table is a sound choice for those.
OTOH, our board and message indexes are really a case of massive markup abuse, because the data isn't tabular at all. It could be, if we added about four more cells for every board, but that would be madness. The tables we're using for the board and message index pages already require a pile of css to run them, so we're not saving anything there. Doing it tableless would mean slightly less markup, and more sensible markup, and still handles rtl with a simple dir change (ie: virtually no rtl.css required).
/me tried that too and would be very happy to see tables disappear from board index and message index. O:-)
Ok, I'll do it. ;D
TBH I hadn't really bothered playing with table-cell display before last night, because I can do most things without it, but just for a change I marked up a "table" (actually based on a ul) at the bottom of MessageIndex.template.php and spent an hour or so messing around with it. I can see it having a lot of potential, and it's very easy to implement.
If adopted in several places it should end up saving on rtl.css at least, although it probably wont do much to reduce index.css. Still, if we can automate the majority of rtl.css that's gotta help. If anyone is still on IE6 or 7 (I know some public library pooters in the UK are) it just defaults to block display, which is stable if not terribly exciting for layout.
I started playing with the messageindex, converting it to an unsorted list, but more to completely change its aspect:
http://www.elkarte.net/index.php?topic=271.msg2114#msg2114
to try something "new", not the boring tabular look. O:-)
Ok, I had a play around with the display: table-cell; idea. It wont provide advantages in all areas. We'll still be using floats for some things, which is fair enough (that's why they invented floats). However, it's great for board index and message index.
I really am not that interested in board stats, so was thinking maybe they should be shunted off to the right (a la vB). That way your eye just flows from board name/description to latest post stuff. After trying it out, I rather like it that way. Some people wouldn't like it though, and would prefer the old SMF style.
So, I thought a bit more and got cunning with the markup (still simple) and managed to get it all quite swap-around-able very easily. Check out the screenshot. This is all the same markup for each row, and the layout changes are just very simple alterations to one or two floats and a bit of padding. So, it allows four stable layouts without any markup hacking at all, and without needing to be a CSS genius.
Add in some media queries, and the whole thing will become nicely responsive right down to phone size.
I've checked it in FF, Chrome, Opera, Safari, IE9 and IE8, with a variety of font sizes. No problems. :)
ETA: ROFL. I just thought of something. I can actually get eight layouts, not four. That's not counting setting things to straight block display so they stack down the page. I mean I can get eight layout choices in each "table row". That should keep anyone happy.
The other four aren't just done with float tweaks. They require direction tricks as well, but it's still easy. Will get it into a real template scenario with proper CSS. I've just been playing with it all hard coded with inline CSS. Should be able to sort it easily over the weekend. :)
ETA again: Added an extra screeny to show all eight layouts. They can be tweaked for borders, paddings, etc of course. This is just proof of concept.
Ok, ths is nuts. :D I thought a bit more about this when I woke up early this morning. In theory there are 24 posssible stacking orders (anyone remember factorials?) for the "four blocks" (ie: icon, board name/description, stats, last post). Having thought them through, I'm pretty sure that all of them could be stable on a fixed width site, given suitable choices of margins, paddings and widths. This is taking into account user-selectable text size in the browser, of course.
Fluid width is trickier. Making some of the permutations stable on fluid width might not be possible, but I'd have to test them thoroughly to be sure. I may also have missed that some permutations are effctively identical, given how hard it is to mentally keep track of 24 of them early in the morning. :D
However, I quite certain that there are at least another eight which would be easy to do in stable form on a fluid width site. So, even if not the ultimate in flexibility of presentation, it provides a very high degree of independence from source order.
That got me thinking about what happens on narrow screens, when things start stacking vertically. I haven't tested this yet, but after thinking it through a bit I'm fairly sure there should be a high degree of independence there too. How much of this would be useful or desirable to use in practice is another matter, but there's definitely scope for experimentation when someone has the time and inclination.
tl:dr version: this sucker totally kills tables. :)
I think you should go a completely different route...
In first column, use the last poster's avatars. In the bottom right-hand corner of the avatar, show a green dot to illustrate a "new post". In the second column, show the last post info, then in the third show the board title and description. Board icons are a waste in alot of ways, they server no purpose other than to illustrate a new topic or not. If the board icon for each board could be different/custom, then that would be a completely different matter entirely, sense it would act as a proper illustration. However, since Elkarte doesn't have custom board icons, show the last poster's avatar in it's place(for visual flow). From there multiple methods could be used to indicate a new post or not, such as: avatar opacity, red/green borders or dots, or whatever you can come up with.
Ok, but that's just tweaks to content. The basic markup has awesome flexibility with very little CSS knowledge being required, so what it means is that regardless of what content you put in what blocks, anyone (almost) can re-shuffle them to get the presentation order they want.
Also, TBH I'm not sure I'd be keen on avatars by default. I like clean presentation on a site's front page, and having defined icons is more consistent and (IMO) more pleasing than an assortment of avatars. It's also faster to load, and will still look good if someone has images disabed.
Ok, examples. :)
Assuming the
latest theme stuffz PR (https://github.com/elkarte/Elkarte/pull/605) has been applied on your test site (not in the repo yet, they're busy) this will give an idea of the options available with the new non-tabular markup.
This code can be pasted into index.css, or a variant css file, anywhere after the new board index stuffz. You can try out the options just by commenting and un-commenting examples as you go. Position is everything. :D
/* --------------------------------------------------------------------- */
/* The following are alternative layout orders for the board index rows. */
/* They can be commented and un-commented to see them in action.
/* --------------------------------------------------------------------- */
/* This one simply puts the board stats back in the old SMF location. */
/*
.board_stats {
text-align: left;
padding: 1px 6px 1px 0;
float: left;
}
*/
/* This one flips the row left to right, and sets the lastpost text to LTR. */
/*
.board_row {
direction: rtl;
}
.board_latest {
direction: ltr;
border: none;
}
*/
/* This one does the LTR flip, and puts the board icon at far right. */
/*
.board_row {
direction: rtl;
}
.icon_anchor {
float: right;
padding: 2px 0 0 6px;
}
.board_latest {
direction: ltr;
border: none;
}
*/
/* ------------------------------------------------------ */
/* This is where the fun starts. Absolute positioning. :D */
/* ------------------------------------------------------ */
/* This one takes the previous example, and puts the board icon back to far left. */
/*
.board_row {
direction: rtl;
position: relative;
}
.icon_anchor {
position: absolute;
left: 8px;
}
.board_latest {
direction: ltr;
border: none;
padding-left: 66px;
}
*/
/* You want more? Ok. This one does the above, but also puts board stats over
/* at far right, and sets board name and description back to left aligned. */
/*
.board_row {
direction: rtl;
position: relative;
}
.board_info {
direction: ltr;
padding-right: 8.4em;
}
.icon_anchor {
position: absolute;
left: 8px;
}
.board_description, .moderators {
margin: 0;
}
.board_latest {
direction: ltr;
border: none;
padding-left: 66px;
}
.board_stats {
position: absolute;
right: 8px;
}
*/
/* There are more options, but those should be enough to give the general idea. */
/* ----------------------------------------------- */
/* End alternative layouts. Back to standard stuff.*/
/* ----------------------------------------------- */
Screenshots to go with the examples. Screenies are ordered the same as the CSS bitz. Standard first, then down the list of options. :)
Note that these are just quick proof of concept demos, and could obviously be tweaked further for styling and whatever.
Nice one, my personal favorite is Alternative1.
/me is a creature of habbit.