Skip to main content
Topic: Table classes stuff. (Read 17945 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Table classes stuff.

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:

Code: [Select]
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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #1

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:
Code: [Select]
//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;
}
Last Edit: June 26, 2013, 03:44:04 am by TE
Thorsten "TE" Eurich
------------------------

Re: Table classes stuff.

Reply #2

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #3

Damn, fixed a typo:
$alternate = !$alternate; (not $alternate =! $alternate;)
Last Edit: June 26, 2013, 03:44:25 am by TE
Thorsten "TE" Eurich
------------------------

Re: Table classes stuff.

Reply #4

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:

Code: [Select]
		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'] ? '&nbsp;&nbsp;<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;

}
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #5

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)
{ ...
Thorsten "TE" Eurich
------------------------

Re: Table classes stuff.

Reply #6

:D Yeah I thought that might be the case. Ok, will try that.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #7

Ok now have this, but still not stripey.

Code: [Select]
		// 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'] ? '&nbsp;&nbsp;<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.
Code: [Select]
			// [WIP] Markup can be cleaned up later.
echo '
<tr class="', $color_class, '', ($alternate_class ? '':'_alt'), '">

I sorta guessed at the syntax there. :D
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #8

Quote   // Show each theme.... with X for delete and a link to settings.
   $alternate = false;

   foreach ($context['themes'] as $theme)
   {
      $alternate = !$alternate;

      echo '
      <div class="title_bar">
         <h3 class="titlebg">', $theme['name'], '</h3>
      </div>
      <div class="windowbg', $alternate ? '' : '2','">

Nah, it's again my fault ...
 TE is running away, needs a bed ...

Edit: Fixed my sh*t in the posts above.
Thorsten "TE" Eurich
------------------------

Re: Table classes stuff.

Reply #9

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

Code: [Select]
		// 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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #10

ok, can't test it but please try this and check the rendered html sources from your browser:
Quote      // 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', '">
I've marked changes in red, unfornunately I can't test it now (no proper test system set up, am currently @work)
Thorsten "TE" Eurich
------------------------

Re: Table classes stuff.

Reply #11

Yay!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

It must have been the != instead of the =! that was stopping it. That was the only significant change. Anyway it works now. Thanks.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #12

Glad it works now :)
Thorsten "TE" Eurich
------------------------

Re: Table classes stuff.

Reply #13

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).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #14

 emanuele tried that too and would be very happy to see tables disappear from board index and message index. O:-)
Bugs creator.
Features destroyer.
Template killer.