News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Need a bit of help with board index

Started by TwitchisMental, March 23, 2013, 06:51:21 PM

Previous topic - Next topic

TwitchisMental

Okay so I have gotten some time to work on my theme again. I have been trying to mess around with the board index layout and with some success.


However I have run into a problem when it comes to child boards.. Whenever there is a child board it messes up the layout.


I think I know what I have to do (an if and else statement),but I plain suck at php.


I have attached a screenshot and the board index.


If someone could point me in the right direction on what I have to do I would be thankful.



Antechinus

Colspan problem. It's easy to fix, but exactly what do you want the finished thing to look like?

TwitchisMental

Quote from: Antechinus on March 23, 2013, 11:59:57 PM
Colspan problem. It's easy to fix, but exactly what do you want the finished thing to look like?


Its not a colspan problem(atleast I don't think so) ,but a problem of showing things when I don't want them shown.


The finished product should look like the attachment.

TwitchisMental

I also had a way to get it show up correctly for child boards,but wouldn't show at all if there was no child board.


See attachment for what I mean. I will have the board index attached aswell for how I got it set. (This method also brings a few validation errors)








Antechinus

Ok, I just wasn't sure if you wanted the child boards going all the way to the left. Anyway, I can see some problems with the code.

You had a stray td closing tag on Line 196 of the first template you attached. The colspan on the first cell in tr.boardstats should be 2, not 3. Also you were echoing the stats stuff twice when there was a child board.

This should work if you substitute it for the code you had:

<tr class="boardstats">
<td class="windowbg" colspan="2">';

// Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
if (!empty($board['children']))
{
// Sort the links into an array with new boards bold so it can be imploded.
$children = array();
/* Each child in each board's children has:
id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
foreach ($board['children'] as $child)
{
if (!$child['is_redirect'])
$child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')"><img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="" />' : '') . '</a>';
else
$child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . '">' . $child['name'] . '</a>';

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

$children[] = $child['new'] ? '<strong>' . $child['link'] . '</strong>' : $child['link'];
}
echo '
<strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children);
}

echo '
</td>
<td class="windowbg" style="font-size: 12px; text-align: center;"><p>', comma_format($board['posts']), ' ', $board['is_redirect'] ? $txt['redirects'] : $txt['posts'], '</p></td>
<td class="windowbg" style="font-size: 12px; text-align: center;"><p>', $board['is_redirect'] ? '' : comma_format($board['topics']) . ' ' . $txt['board_topics'], '</p></td>
</tr>';

}
echo '
</tbody>';


I moved the child boards stuff so it's inside the right td, and of course only echoes if there is a child board (otherwise, empty cell as usual). I'd move the inline css out to index.css too. ;)

TwitchisMental

Well that worked sorta... However it brings the same problem I had before.. It only shows correctly when there is a child board otherwise everything is off. Hence why I was thinking an if and else was needed.


See the attachment for more info


Thanks again for your assistance :).

Antechinus

#6
Ah. I missed something. You'd put colspan="2" up on td.info. I didn't look that far up the file. You also have a syntax error here:

<td class="lastpost" colspan=2>';

The 2 needs the double apostrophes around it, like this:

<td class="lastpost" colspan="2">';


However, you say it is correct with a child board. Although it looks good (I prefer it) it's not the same as what you originally asked for. Originally you wanted the child board row going all the way to the left edge of the forum.

If you want it to look like that, remove the colspan="2" from td.info and fix the syntax error mentioned above. You will also need to change this:

<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>

to this:

<td class="icon windowbg">


IF you're happy with what it currently shows with a child board, with the child board row stopping at the icon table cell, and the icon cell spanning two rows in height, remove the colspan="2" from td.info and from here:

<tr class="boardstats">
<td class="windowbg" colspan="2">';


as well as fixing the syntax error on td.lastpost, but leaving the default rowspan code on td.icon.

There ya go. Two different options that should both work. Take your pick. :)

TwitchisMental

I am sorry if I was not clear enough before,but I did want it to to work with the childboard and without.


Doing what you have suggested, thanks again for your help. You are one of the most helpful in my opinion :).

TwitchisMental

Okay I followed what you said and it still did not work.


I think I haven't explain this to you to well, so I have attached a picture of what I am trying to achieve.


I am sorry for the confusion.

Antechinus

ROFL. Yes you can do that too. Doing that requires a combination of the two options. You'd want to keep the default ternary for rowspan on the icon cell, and you'd want to add another ternary for colspan on the cell that holds the child boards stuff.

So, if there's no child board, rowspan for the icon cell stays at 1 and colspan for the empty child board cell stays at 2. If there is a child board, rowpsan for the icon cell changes to 2, and colspan for the child board cell changes to 1.

TwitchisMental

Why the laughing... I am simply trying to make sure everything is clear to not waste time.


I think I have got everything as you told me to do, but there seems to be a problem. Which I am sure is from me misunderstanding something ...


I have attached the board index and a new screenshot.


TwitchisMental

Well that is getting closer to the solution.


Result attached

Antechinus

Ok so now you just have to sort your css to make the cells the widths you want. The layout is fine.

TwitchisMental

#14
Well I am getting it to semi look right....


However there is 3 main problems.. (Fixed 1 and 2 with a quick css edit I missed)


The post and topics cells are not under the last post cell. (Which probably has to do with how I got the board description to look right)


The child board no matter what I seem to do will not expand....


Also the child board seems to be one cell over due to the post icon cell taking the first cell.. 


Other then that it is working and I am happy.


I have attached the board index and a screen shot .





Antechinus

Don't use centred text on the child board cell. :P

TwitchisMental

#16
Edit : NVM got it fixed by adding a rowspan to the icon cell and changing the below cell to colspan 1 :) .


Thanks again for your help, this can be marked solved :) .



Advertisement: