Side by side boards and info centre help

[greymuzzles]

Tumbleweed
That looks great, thank you! And not to worry about the 'delay' - I know from my own coding attempts that it's easy to 'break' things, and in all honesty I was expecting a delay anyway because of time zone differences.

[Tumbleweed]

I accidentally fell asleep before I posted the coding. I don't ever fall asleep unless I intend to fall asleep so not sure what happened there. lol


Again, don't be surprised if we need to tweak something on your site.

This is the "Board List" template:




{foreach $[board]}
    <div class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 0} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">
    <table>
        <tbody>
<!-- <tr>
<th class="icon"></th>
<th class="main">Board</th>
<th class="threads">Threads</th>
<th class="posts">Posts</th>
<th class="latest last">Last Post</th>
</tr>-->
           
           
            {if !$[board.is_redirect]}
                <tr id="$[board.content_id]" class="$[board.content_class]">
                 
<!--<td class="icon">$[board.icon]</td>-->
<td class="main clickable">
                               <table>
                                   <tr>
                                       <td>
<div class="link">$[board]</div>
                                  </td>
                                   </tr>
                                   <tr>
                                    <td id="dtp_cell">
<div class="description">$[board.description]</div>
                    <div class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}<div id="hover-content">Threads</div></div>
                      <div class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}<div id="hover-content">Posts</div></div>
                              <p style="clear:both;"></p>
                                    </td>
                                   </tr>
                                   <tr>
                                       <td>
                    <div class="latest last">
                      {if $[board.posts] > 0}
                          {if $[board.last_thread]}  $[board.last_thread.recent_link]
                              by $[board.last_thread.last_post.created_by]
                                <span class="date">$[board.last_thread.last_post.created_on]</span>
                            {/if}
                        {else}
                            No posts have been made on this board.
                        {/if}
                    </div>
                                    </td>
                                   </tr>
                               </table>
                                     
                           
<!--{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />-->
                           
                   <!-- {if $[board.num_mods]}
                            <p class="moderators">
                            Moderator{if $[board.num_mods] != 1}s{/if}:
                            {foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
                            {foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
                          </p>
                      {/if}-->
<!-- {if $[board.sub_board]}
<p class="sub-boards">
Sub-board{if $[board.sub_board] != 1}s{/if}:
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}
</p>
{/if}-->
                   
</td>
</tr>
</tbody>
</table>
</div>
       
{else}
<table class="table_two">
    <tbody>
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
            </tr>
{/if}
{if !$[board]}
               <tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
           {/if}
       </tbody>
   </table>
{/foreach}
<p style="clear:both;"></p>


And this is the css which should go at the very bottom of your style sheet.


/*board list changes*/
.table_two{width:100%;
}
div.content.cap-bottom{
background-color:@content_background;
}
.boards table{width:100%;}
.boards div.list { float: left;width:50%;
table-layout: fixed;
border:0px;background:@container_background_color_1;
}
.boards .main.clickable {height:130px;margin-bottom:8px;
padding:4px;
background: lighten(@body_background_color, 10%)!important;    
border-radius: 5px;  border:8px solid @container_background_color_1;
vertical-align:top!important;
}
/*this is for the board title*/
.boards .main .link a{text-align:center!important;}
.boards .main .link {
background:@body_background_color;
width:98%!important;
padding:4px;text-align:center; float:left;
}
/*This is the table cell that holds the description threads posts*/
.dtp_cell{height:70px;vertical-align:top;padding-top:4px;
}
.boards .main .description{float:left; width:76%!important;
padding:4px;
}
.boards .main .threads{float:left;margin:2px;
background-color:@body_background_color;
padding:4px;
}
.boards .main .posts{float:left;margin:2px;
background-color:@body_background_color;
padding:4px;
}
.boards .main .latest{width:98%;text-align:left;
height:26px;padding-left:4px;
}
/*this is the hover part for posts and thread count*/
#hover-content {
display:none;
}
.boards .main .posts:hover #hover-content {
display:block;position:relative;top:-35px;
background: lighten(@body_background_color, 10%); z-index:100;
margin-bottom:-16px;
}
.threads:hover #hover-content {
display:block;position:relative;top:-35px;left:-5px;
background: lighten(@body_background_color, 10%); z-index:100;
margin-bottom:-16px; width:66px;
}
/*this was added because thread lists had the wrong background color*/
.container.threads .list .item>.main{
background:@container_background_color_1!important;
width: 41%;text-align:left!important;
}


Just ask if something isn't quite right.

[greymuzzles]

Tumbleweed
No problem—I’d guess you were over-tired or something.

Thanks again for the code! The CSS side is mostly fine (except for the fact that the board background are a shade of purple rather than blue on this theme, but I can live with that). However, for some reason the boards aren’t showing up side-by-side, but are instead being displayed in rows…

[Tumbleweed]

Apr 9, 2017 10:55:07 GMT -8 greymuzzles said:

Tumbleweed
No problem—I’d guess you were over-tired or something.

Thanks again for the code! The CSS side is mostly fine (except for the fact that the board background are a shade of purple rather than blue on this theme, but I can live with that). However, for some reason the boards aren’t showing up side-by-side, but are instead being displayed in rows…

That's because I didn't check the width of your forum (duh) and I have this code set up so if on a smaller device they stack up like that. Give me a bit to set my test site to the same width of your forum and tweak things and then I'll tell you what to tweak.

 Checking your site via inspect element, my css isn't over-riding that blue/purple you have there, it seems.
In the css I gave you find the class: .main.clickable   .....and add !important to the end like I did below:

background: lighten(@body_background_color, 10%)!important;

Also, while we are talking about this, you can change that 10% to be 5% or 3%, or whatever.

I'll get back to you in bit once I have the other fix for the boards to be side by side.

[greymuzzles]

Tumbleweed

That would makes sense! Hopefully the tweak is easy to find/make

Aand that tweak you suggested, mixed with a percent change, seems to have done the trick on the colour front—it’s much closer to the colouring I was after now, so thank you~

[Tumbleweed]

Well, I hate to do this to you but you need to go back to my post with the coding and recopy both the template and the css and replace what I gave you before. Sorry, I ended up adding a table to the template and changed a lot of the css so that code in my previous post is different.

Again, we still need to make some tweaks.

One reason why I redid the template (a bit) was because I didn't know how long your descriptions would be and if one was say 3 lines, then everything went wonky and wasn't lined up nice.

So if you plan to have short descriptions and think the gap in that area is too big  in height you will need to find the class .dtp_cell  ... and change the 70px to something smaller that looks good to you.


.dtp_cell{height:70px;vertical-align:top;padding-top:4px;
}

If you feel the boards height is a bit too tall you'll need to change the 130px, below in blue:

.boards .main.clickable {height:130px;margin-bottom:8px;
padding:4px;
background: lighten(@body_background_color, 10%)!important;
border-radius: 5px; border:8px solid @container_background_color_1;
vertical-align:top!important;
}

By the way, your info center isn't spaced anymore. Did you figure that out?

[greymuzzles]

Tumbleweed
No problem! It’s pretty easy to switch two pieces of code round like this, especially when there are nice little titles to help identify things~

Looks like your changes did the trick in terms of making the boards display side-by-side! Unfortunately I’m now having alignment issues, and I’m guessing that’s because the board descriptions are different lengths? I have a mix of short and long-ish on that front, since some need a little more info than others. Is that something that could be fixed by adjusting the board heights?



Aand the info center spacing is less of a ‘fix’ and more of a compromise. The coding you gave me before removed the spacing from the entire forum, rather than just the info table, so I’ve just…fiddled with the px on it until I found a number that made everything else less crowded without spacing out the info centre too much again. It’s not perfect/ideal, but it’s better than it was.

[Tumbleweed]

Unfortunately, it is because of longer descriptions as you said and in order to keep the boards aligned with each other, they will all have to be made taller to accommodate the longer descriptions in some. And to do that, just do what I said in my previous post, but in this case, you'll make things bigger. So maybe add 30 px to each so these would become:


.dtp_cell{height:100px;vertical-align:top;padding-top:4px;
}

.boards .main.clickable {height:160px;margin-bottom:8px;..more css here...

If you don't like the idea with a bunch of space on two boards side by side that have short descriptions,  another option would be to manually target the board next to it to make it the same size but that might be tricky. (I was just trying to find a way and could not so far.)
Another option would be to add a scroll bar or a clicking action to expand to read the whole thing but then I'd need to revamp the template again because descriptions is within the "clicking" area.

There just isn't a good way to make the board next to the one with the long description to expand to match. Looking at your site, most of your boards have good sized descriptions so making them all a bit bigger probably would look best. Up to you which option you want to go with and I'll do my best to go that route.

[Star's Legacy]

Tumbleweed, Wouldn't you be able to wrap the board descriptions in a scroll bar and set it to be a specific height that way all will be the same just some will scroll more than others?

[Tumbleweed]

Apr 10, 2017 22:04:03 GMT -8 Star's Legacy said:

Tumbleweed , Wouldn't you be able to wrap the board descriptions in a scroll bar and set it to be a specific height that way all will be the same just some will scroll more than others?

I mentioned that in my last post as an option and actually added it on my test site to see how it looks. Not sure if Greymuzzles would like that though with the "minimalistic" look she has going on. As I said, I'll need to change my template as the description is in the clickable area so if you tried to scroll you'd just get taken into that board.

Guess we'll just wait to see what option Grymuzzles prefers. Thanks though for trying to help. One of these days, I need to sit down and make a side by side board list template where I really thought all things out and don't have to keep revamping. lol

[greymuzzles]

Tumbleweed
That makes sense, and the size changes you suggested have done the job perfectly! It does leave a fair bit of empty space on the boards with smaller descriptions, but I think a scroll bar option might start to get a bit much, and the click-to-expand option perhaps a little clunky? Changing the sizes of individual boards sounds a bit on the over-complicated side, too, so I think I’ll stick with things as they are

Thanks again for all your help, Tumbleweed! And Star's Legacy : thank you for your suggestions, too~

[Star's Legacy]

Nevermind me I'm clearly blind. XD

[Tumbleweed]

Apr 11, 2017 13:38:47 GMT -8 Star's Legacy said:

Nevermind me I'm clearly blind. XD

You mean like I am half of the time? lol