Two Column Boards

[StarredSkies]

So I'm using the Reseller theme for my website. The default theme is one column for the boards, but I would like to test out a two column board with mobile-responsiveness (so that it moves back into one column). How would I accomplish this? Using CSS does not accomplish this and I am not well-versed on PHP, sadly.

I have attached the theme files for reference.

[Kindred]

In 2.0.x, that will require a fairly major redesign

[Antechinus]

Not that hard, really. The main problem is that 2.0.x puts the whole category list into one big table. If you simply move the table tags in the template, so that it makes a new table for each category, then you can go to town on re-jigging those however you like. You can leave them as display: table; or you can change them to flex or grid or whatever you like.

[Antes]

Code Select Expand

#boardindex_table tr.windowbg2 {
   display: inline-block;
   width: 50%;
}

The issue starts with child-boards because in SMF 2.0, child board container does not belong to the its upper-board container... But this is the very basic concept of how to do it. If you need better solution which requires rewrite (or semi-rewrite) of the board_index code block.

[Dzonny]

I did something similar on my forum. Works fine for my needs though, it required some tweaks but looks fine IMO.

[Antechinus]

Antes: That was my point. If you do it the way you suggest, it's screwed. If you reset the table tags to give one table per category, you can do two columns and get a clean result. It's simple edit, but effective.

If you want even more control you could, obviously, set a separate container for every board. That would be slightly more complex, but not much.

Anyway, I took a quick look at the Reseller online demo, and for some weird reason the author has edited that to have a separate table not only for each category, but for each category header as well. This is what is screwing StarredSkies up. Changing it to have the header and boards in the one table would be simple enough.

I have attached the theme files for reference.

I don't need the whole thing. Just the BoardIndex.template.php and (if you want child boards done as well) MessageIndex.template.php.

[StarredSkies]

After looking around for what works, the (screwed) code that is effective on this theme is: (Thank you for the help Antes! I was looking in the wrong spot at first.)

Code Select Expand

windowbg4 {
    display: inline-block;
    width: 50%;
}

That works just fine on desktop, but I would like to translate it to one box on mobile too. Instead of two boxes like this, it would have to revert back to it's one-column state (which is the theme's default) as shown here. I've experimented with box flexing, but to no avail it's not working.

Anyway, I took a quick look at the Reseller online demo, and for some weird reason the author has edited that to have a separate table not only for each category, but for each category header as well. This is what is screwing StarredSkies up. Changing it to have the header and boards in the one table would be simple enough.

You are EXACTLY right. I'm a beginner at this stuff, if you can't tell haha. Can you explain the process of rearranging the table tags, if you will? I would really enjoy learning more.

Apologies, attached the right files now!

[Antechinus]

Ok, having had a look at the markup, it should be really easy. The author has done some silly things, but in this case one of them is actually useful to you. Taking BoardIndex.template.php first, Reseller has this:

Code Select Expand

/* Each category in categories is made up of:
id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
and boards. (see below.) */
foreach ($context['categories'] as $category)
{
echo'
<div class="contentboard">';

So that's the class you want to target, because that's the class that is wrapping the individual categories. You can use any of several methods to get it into two columns. Inline-block will work, but my preference would be to use flex, because it avoids the issue of the .25em right margin that inline-block will put on things. That will just get in the way in this case, so IMO best to avoid it. You could use grid too, but it isn't really necessary and flex is a bit simpler.

There's another potential issue, in that Reseller has a hard-coded br tag inserted after every .contentboard div:

Code Select Expand

echo '
</tbody>
</table>';
}
echo '
</div>
<br />';
}

I suspect that is going to be annoying sometimes, so rather than have to include it in the responsive shenanigans I'd just get rid of it, and use a bottom padding or margin on .contentboard if I wanted one. You can get rid of the br in the template:

Code Select Expand

echo '
</tbody>
</table>';
}
echo '
</div>';
}

Which is the cleanest option. Or you could get rid of it via CSS if you don't want to edit the template:

Code Select Expand

.contentboard + br {display: none;}

Anyway, target .contentboard with your CSS. Something like this should do it:

Code Select Expand


]#boardindex_table {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contentboard {
width: 49%;
}
@media screen and (max-width: 50rem) {
#boardindex_table {
display: block;
}
.contentboard {
width: auto;
}
}


You don't really need to do the following, but I'd be inclined to do it anyway. Reseller lays out separate tables for the category header bars and the boards:

Code Select Expand

</tbody>
</table>';

// Assuming the category hasn't been collapsed...
if (!$category['is_collapsed'])
{

echo '
<table class="table_list">
<tbody class="content" id="category_', $category['id'], '_boards">';

This is inefficient and unnecessary, and is inconsistent with how MessageIndex.template is done. So for simplicity my preference would be to do this instead:

Code Select Expand

</tbody>';

// Assuming the category hasn't been collapsed...
if (!$category['is_collapsed'])
{

echo '
<tbody class="content" id="category_', $category['id'], '_boards">';

Then down at the other end of the table you'd have to do this to match:

Code (Find) Select Expand

echo '
</tbody>
</table>';
}
echo '
</div>

Code (Replace) Select Expand

echo '
</tbody>';
}
echo '
</table>
</div>

MessageIndex.template.php is a bit messier. It shouldn't be, because it should use exactly the same markup as BoardIndex.template, but for some obscure reason some idiocy slipped through the 2.0.x dev process, and people have perpetuated said idiocy ever since. One of those "Monkey see, monkey do" things I suppose.

Obvious thing to do here is to clean it up a bit, so you can use the same CSS on both templates. By default, Reseller has this up top:

Code Select Expand

if (!empty($context['boards']) && (!empty($options['show_children']) || $context['start'] == 0))
{
echo '
<div class="tborder childboards contentboard" id="board_', $context['current_board'], '_childboards">
<div class="cat_bar">
<h3 class="catbg">', $txt['parent_boards'], '</h3>
</div>
<div class="table_frame">
<table class="table_list">
<tbody id="board_', $context['current_board'], '_children" class="content">';

I'd replace that with this:

Code Select Expand

if (!empty($context['boards']) && (!empty($options['show_children']) || $context['start'] == 0))
{
echo '

<div id="boardindex_table">
<div class="contentboard childboards" id="board_', $context['current_board'], '_childboards">
<table class="table_list">
<tbody class="header" id="category_', $category['id'], '">
<tr>
<td>
<div class="cat_bar">
<h3 class="catbg">', $txt['parent_boards'], '</h3>
</div>
</td>
</tr>
</tbody>
<tbody id="board_', $context['current_board'], '_children" class="content">';

Which is basically an exact match for t'other template, so same CSS does both. You don't need to worry about the tags at the other end, because they just happen to work with this anyway (note that there is no hard-coded br on this template, which is a good reason to ditch it from BoardIndex).

I threw out the tborder class because it's a leftover from 1.1.x that nobody ever uses in 2.0.x. Left the childboards class in, just in case you ever want to use it to target child boards on this template.

Have attached both templates, edited as per the above recommendations.

[StarredSkies]

First of all, thank you for the help! That was a very easy to understand tutorial and I appreciate all the tips you included along the way. I have installed your edits in the meantime, but I appear to have come across some issues. This is most likely on my end though. Maybe I didn't install it right or went through the code and messed something up, although my program detects no issues with the PHP. Nevertheless, I am grateful for your help. Thank you so much.

So after installing the proper CSS and the files, my board looks like this here. While this is nice, I would prefer for the categories to instead stay together rather than having two different categories side-by-side with the gap at the bottom. Here is an example of what I mean with some minor coding (this is linked above and does not comply with the mobile extremities) and then with arrows and the current look. If this is harder to compile together or the intended result w/o a mistake, let me know.

I threw out the tborder class because it's a leftover from 1.1.x that nobody ever uses in 2.0.x. Left the childboards class in, just in case you ever want to use it to target child boards on this template.

Sounds good to me too! I didn't realize that class was present still.

[StarredSkies]

Update: Found an issue. Sorry for the double post!

[Antechinus]

Ok, you can do what you want to do with the boards, but you just said you wanted things in two columns, and when people say that they usually mean they want the categories in two columns. So yes, that was the intended result.

You're still going to get a gap though, unless you only put even numbers of boards in each category. I mean I'd call your example "a gap at the bottom" myself, but if you're ok with that then no worries. Just needs a different approach, so you'd have to scrap what I did before.

For what you want, it would make sense to stick with the default Reseller markup in BoardIndex.template.php. That way the separate table for the header bars becomes an advantage, and you just have to set the half width on the table rows for the boards. I'd still be inclined to do those with flex rather than inline-block. Reseller has the child boards done as p tags inside the same tr as everything else (unlike default 2.0.x) so they won't mess you up.

This should work:

Code Select Expand

.table_list + .table_list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.table_list>.windowbg4 {width: 49%;}

Then just switch display to block and width to auto at whatever break point you want to use. MessageIndex should still be changed to use the same markup as BoardIndex, to make the CSS/responsive stuff easier, but you can copy that over easily enough.

[StarredSkies]

Apologies! I should have phrased it differently.

I'm alright with 'a gap', just not the large gap that's within the two columns example compared to my own.

I added back the original BoardIndex.template.php, but kept the MessageIndex as you noted (for CSS/responsive stuff), then attempted your fix (added + table.table_list though so things were aligned). I'm still having trouble getting the two separate boards next to each other though, even with the block/auto width.

[Antechinus]

Without seeing exactly what you're running I'm at a bit of a loss now. Can you link a live example?

[gecitli]

hello review the codes of this theme gives you an information
http://smftheme.byethost18.com/index.php?theme=8

[StarredSkies]

Alright so I figured I'd come back to this topic after some time. So using Gecitli's example as a reference, I tried my best to replicate their results. Unfortunately, I am having no luck BUT I am getting the main concept of their code. Here are the differences between our codes in hierarchy order.

Their code:
block-body (surrounding list of boards)
<div id="board_#"> (the board itself)
<div class="node-wrapper"> (which wraps all the contents of that board together, such as the title/description/image/etc, so it can become one entity)
board title, description, etc (the info within the board)

Our theme's code:
<table class="table_list"> (surrounding list of boards + the header itself)
<tbody> (list of boards)
<tr id="board_#" class="windowbg4"> (the board itself)
<td id="info/icon/stats hidden/last post"> (the info within the board)

So what I need to install would be something similar to node-wrapper in the first code that would tie together my <td id="info/icon/stats hidden/last post"> information so it's one entity, instead of multiple. I am trying this, but I am running into problems. My issues are:
1) When trying to edit the code or insert any type of div, it either uses the echo code and places it where it's not supposed to be or says there is a syntax error, see next point.
2) Does whether or not the board being a table format, rather than a div, cause issues? Might contribute to 1.
3) The class 'table_list' includes the header/board category names, so editing that/moving it around causes issues with the collapsible bar and any integration.

How can I insert a box in this to tie things together?

Attaching my board index template below.

[Antechinus]

Just saw this. If you want something to wrap the td's, the tr does that already.

1/ Ok. This should be an easy fix.

2/ Yes, it will cause issues if you leave it at the default display: table;
That makes it all behave like a standard HTML table, which is not what you want for this exercise. You need to change it all to display "something else" for these sorts of shenanigans. Block, inline-block, flex and grid are all possibilities, depending on exactly what you want to do. IOW, this is a CSS issue, not a markup issue as such.

3/ Not sure what you mean here. It shouldn't cause issues if everything else is ok. It's just a wrapper for the whole kaboodle.

Will take a look at the template. Would also be handy to have a link to a live example of the problem. I assume you have an online test site.

ETA: I just took a look at your live site, and throwing a bit of custom CSS at your existing template I was able to get the boards sitting in two columns in a couple of minutes. The Reseller markup is a bit bonkers, but I can't see anything that would stop it working the way you want it. Will get a custom CSS file together later.

[Antechinus]

Ok, as a basic implementation: add this to the end of your index.css.

Code Select Expand

@media (min-width: 971px) {
    .table_list + .table_list {
        display: block;
    }
    .table_list + .table_list tbody {
        display: flex;
        flex-wrap: wrap;
        padding: 8px 0;
    }
    .table_list + .table_list tbody tr {
        display: inherit;
        width: 50%;
    }
    table.table_list td {
        flex: 1 1 auto;
    }
    table.table_list tbody.content td.icon {
        width: 50px;
        min-width: 50px;
    }
    .table_list td.info p {
        font-size: .875em;
    }
    table.table_list tbody.content td.stats {
        min-width: 13%;
    }
    table.table_list tbody.content td.lastpost {
        min-width: 30%;
    }
}

Note that some things are getting a bit crowded, so will be a nuisance to use on touchscreen. Mind you, the default layout is a bit of a nusance on touchscreen too, being designed for operation via mouse. Links are really too close together for best usability with fingers, and a rearranged layout within the table cells would be better.

Which is possible, and not terribly difficult either. It comes down to deciding, in detail, what layout you want,

[StarredSkies]

Apologies for the late reply, but that works WONDERFULLY! Thank you so much. I'm making some changes right now to ease up the spacing, but otherwise it's perfect. Thank you again. <333

[Kindred]

so much easier in 2.1


https://test2.turtleshellprod.com/

did the block variation in about 10 mins.

[Antechinus]

Um, dude, it only took a little bit of CSS and a bit of messing around in 2.0x too.

And you could do your exact layout easily on 2.0.x. It's only a matter of setting most of the td's to display: block; with the icon as a special case (position: absolute; would do it).
Or you could use grid instead. Either would work.

Things is, in either case (2.0.x or 2.1) you are dealing with basically the same boxes. The only difference is that in 2.0.x it's table display by default (easy to change) whereas in 2.1 it isn't.