Skip to main content
Topic: You guys are scary (chanelling SMF 2.0.x) (Read 2404 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

You guys are scary (chanelling SMF 2.0.x)

Ok, so being a naive and unsuspecting lad, I went to look at a reported bug in the Silence theme. This involved me looking at the board management page, which is where things got scary. :D

Code: [Select]
		// Boards table header.
echo '
<form action="', $scripturl, '?action=admin;area=manageboards;sa=newboard;cat=', $category['id'], '" method="post" accept-charset="UTF-8">
<div class="windowbg">
<div id="category_', $category['id'], '" class="content">
<ul class="nolist">';

if (!empty($category['move_link']))
echo '
<li><a href="', $category['move_link']['href'], '" title="', $category['move_link']['label'], '"><img src="', $settings['images_url'], '/smiley_select_spot.png" alt="', $category['move_link']['label'], '" /></a></li>';

$alternate = false;
$first = true;
$depth = 0;

// If there is nothing in a category, add a drop zone
if (empty($category['boards']))
echo '
<li id="cbp_' . $category['id'] . ',-1,"></li>';

// List through every board in the category, printing its name and link to modify the board.
foreach ($category['boards'] as $board)
{
// Going in a level deeper (sub-board)
if ($board['child_level'] > $depth)
echo '
<ul class="nolist">';
// Backing up a level to a childs parent
elseif ($board['child_level'] < $depth)
{
for ($i = $board['child_level']; $i < $depth; $i++)
echo
'
</li>
</ul>';
}
// Base node parent but not the first one
elseif ($board['child_level'] == 0 && !$first)
echo '
</li>';

echo '
<li id="cbp_' . $category['id'] . ',' . $board['id'] . '"', ' class="windowbg', $alternate ? '' : '2', (!empty($modSettings['recycle_board']) && !empty($modSettings['recycle_enable']) && $modSettings['recycle_board'] == $board['id'] ? ' recycle_board' : ''), '" style="', $board['move'] ? ';color: red;' : '', '">
<span class="floatleft"><a href="', $scripturl, '?board=', $board['id'], '">', $board['name'], '</a>', !empty($modSettings['recycle_board']) && !empty($modSettings['recycle_enable']) && $modSettings['recycle_board'] == $board['id'] ? '&nbsp;<a href="' . $scripturl . '?action=admin;area=manageboards;sa=settings"><img src="' . $settings['images_url'] . '/post/recycled.png" alt="' . $txt['recycle_board'] . '" /></a></span>' : '</span>', '
<span class="floatright">', $context['can_manage_permissions'] ? '<span class="modify_boards"><a href="' . $scripturl . '?action=admin;area=permissions;sa=index;pid=' . $board['permission_profile'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '">' . $txt['mboards_permissions'] . '</a></span>' : '', '
<span class="modify_boards"><a href="', $scripturl, '?action=admin;area=manageboards;move=', $board['id'], '">', $txt['mboards_move'], '</a></span>
<span class="modify_boards"><a href="', $scripturl, '?action=admin;area=manageboards;sa=board;boardid=', $board['id'], '">', $txt['mboards_modify'], '</a></span></span><br style="clear: right;" />';
Holy fornicating armadillos, Batman. It doesn't need to be this complicated.

Ok, for a start, there's no need to declare two wrapper divs (.windowbg and .content). The classes could easily be combined on one div to get exactly the same presentation. The double divs are very SMF 2.0.x-ish but not the really scary bit.

The really scary bit is what's inside the li's. Starting at the end for a change, the only reason you have thrown a br style="clear: right;" in there is because your li was collapsing due to the li not being floated while its content is floated. This doesn't need a br to fix it. Just setting auto overflow on the li will fix it. Even setting hidden overflow on the li will fix it.

If you don't want auto or hidden overflow (sometimes you don't) there's another option which will give automatic RTL support and doesn't even need any classes declared. All you have to do is set the two spans that are directly inside the li to table-cell display. This aint floated, so doesn't cause problems with other non-floated elements. To get the buttons aligned to the right in the second span, you just need nth-child(2) set to text-align: right;

Anyway, moving on to what's inside that second span: teh buttonz. These are scary too. Don't let kiddies look at these after dark without supervision or the poor little blighters will be scarred for life. There are spans in there! One for each button! This is despite there also being perfectly good anchors in there. Anchors are cool. You can set them to inline-block and give them classes and everything. Just like spans. Which means you don't need the spans. The anchors can be made into perfectly serviceable buttons all by themselves. I'm pretty sure there was even an existing class for this, so the modify_boards class may not even be required on the anchors.

So by changing the CSS a little bit you can save three spans and one br for each board, without limiting presentation or ease of customisation.
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: You guys are scary (chanelling SMF 2.0.x)

Reply #1

In 1.1 at least the windowbg div was removed, I'm pretty sure I removed those everywhere, but the rest of the nightmare you described remains !  I'll track this so it gets looked at.

In 1.0 the presentation of that list is also pretty blasé , it was somewhat improved in 1.1.  That ugly look was an after effect of adding the drag/drop board ordering.

Re: You guys are scary (chanelling SMF 2.0.x)

Reply #2

I cleared up a fair chunk of stuff like this, but there is just. So. Much.

Re: You guys are scary (chanelling SMF 2.0.x)

Reply #3

It's most likely left over from SMF 2.0.x, at a guess. The markup definitely has the 2.0.x look about it (IOW, megafugly). There was a lot of work done rationalising umpteen other templates, and this one may have been overlooked.
Master of Expletives: Now with improved family f@&king friendliness! :D

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