Forums

Unfortunately no one can be told what FluxBB is - you have to see it for yourself.

You are not logged in.

#1 2020-09-28 09:20:02

JamesDean
Member
Registered: 2020-09-28
Posts: 19

Your Opinion Please! @Visman

Visman, I currently have a horrible problem with bloated forums ( 83 Categories, and 952 forums ). Mostly all of the forums are active, which leaves me with a massive layout problem. I solved most of the problems by condensing the forums into collapsible accordion ( I'm using bootstrap 4.5 currently ), and i've solved the massive forums list by embedding forums list as a bootstrap carousel inside of each category. This has allowed mobile swipe for cluttered forums ( swipe left to right ) and screen-press /or/ swipe up and down on categories, to expand.

The layout seems to work well on even tiny phone devices that allow html5... However, i dislike the layout with the specific forums list, and would appreciate your opinion & feedback:

<div id="viewforum_accordion" class="accordion container-fluid card border-0 my-1" role="tablist" aria-multiselectable="false"><div class="card-body p-0">
{foreach $FORUMS.{$smarty.const.QUERY_STATS}.CAT_FORUM_IDS as $c => $f name=cat}
<div class="card mt-1">
    <div class="card-header p-1 px-3 d-flex justify-content-between align-items-center collapsed" data-toggle="collapse" data-target="#C_{$c}" aria-expanded="false" aria-controls="{$FORUMS.{$smarty.const.QUERY_CAT}.$c.cat_title}">
        <span class="font-weight-bold">{$FORUMS.{$smarty.const.QUERY_CAT}.$c.cat_title}</span>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <div id="C_{$c}" class="card-body p-1 collapse" data-parent="#viewforum_accordion" role="tabpanel" aria-labelledby="{$FORUMS.{$smarty.const.QUERY_CAT}.$c.cat_title}">
    {if isset($FORUMS.{$smarty.const.QUERY_STATS}.CAT_FORUM_CHUNKS.$c)}
    <div id="C_{$c}_carousel" class="carousel d-flex flex-row">
        <a class="carousel-prev border rounded mr-1 d-none" href="#" role="button" data-target="#C_{$c}_carousel" data-slide-to="prev"><i class="align-self-center fa fa-chevron-circle-left fa-2x px-1" aria-hidden="true"></i></a>        
        <div class="carousel-inner" role="listbox">
        {/if}    
        <ul class="d-flex flex-column list-unstyled mb-0">
        {foreach $f as $i => $d name=forum}
            {if isset($FORUMS.{$smarty.const.QUERY_STATS}.CAT_FORUM_CHUNKS.$c.START.$i)}<div class="carousel-item{if $smarty.foreach.forum.first} active{/if}">{/if}     
            <li class="list-group-item-action px-1 border rounded row no-gutters">
                <a class="col-xl-10 col-lg-10 col-md-8 col-6 no-gutters text-reset d-flex flex-row align-items-center" href="#">
                    <span class="fa fa-folder-open-o fa-2x" aria-hidden="true"></span>
                    <div class="d-flex flex-column ml-1">
                        <div class="font-weight-bold">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_name}</div>
                        <div class="d-none d-md-block small">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_desc}</div>
                    </div>
                    <div class="d-none d-md-block ml-auto">
                        <div class="d-flex flex-column align-items-center mx-1">
                            <div class="small text-nowrap"><span class="badge badge-pill badge-primary">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_topics}</span>_TOPICS</span></div>
                            <div class="small text-nowrap"><span class="badge badge-pill badge-primary">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_posts}</span>_POSTS</span></div>
                            <div class="small text-nowrap"><span class="badge badge-pill badge-primary">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_link_count}</span>_VIEWS</span></div>
                        </div>
                    </div>                                                                                
                </a><a class="col-xl-2 col-lg-2 col-md-4 col-6 no-gutters media text-reset" href="#"> 
                  {if $FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_poster}<img class="img-fluid rounded-circle align-self-center" src="images/avatars/avatar6.png" alt="" style="max-height: 48px;">{/if}
                  <div class="media-body flex-truncate ml-2 align-self-center text-muted">
                        {if $FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_poster} 
                        <time class="timeago text-truncate" datetime="{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_time}" title="{{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_time}|date_format:{$datetimeformat}}">{{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_time}|date_format:{$datetimeformat}}</time>
                        <div class="small text-truncate">_BY <span>{$PINFO.{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_poster}.username}</span></div>
                        {else}
                        <div class="small text-truncate">No Records Available</div>
                        {/if}
                  </div>     
                </a>
                <!-- <div class="col-12 border-top mx-0 mt-1 small">_MODERATORS: <span>JoshuaJones</span></div> -->
                {if isset($FORUMS.{$smarty.const.QUERY_STATS}.CAT_SUB_FORUMS.$i)}
                <div class="col-12 border-top mx-0 mt-1">
                    <div class="row-fluid">
                        <a class="col text-reset small text-truncate px-1 px-md-3" href="#"><i class="fa fa-folder-open-o pr-1" aria-hidden="true"></i>Sub Forum One</a>
                        <a class="col text-reset small text-truncate px-1 px-md-3" href="#"><i class="fa fa-folder-open-o pr-1" aria-hidden="true"></i>Sub Forum Two</a>
                        <a class="col text-reset small text-truncate px-1 px-md-3" href="#"><i class="fa fa-folder-open-o pr-1" aria-hidden="true"></i>Sub Forum Three</a>
                    </div>
                </div>
                {/if}            
            </li>
            {if isset($FORUMS.{$smarty.const.QUERY_STATS}.CAT_FORUM_CHUNKS.$c.STOP.$i)}</div>{/if}
        {/foreach}                         
        </ul>
        {if isset($FORUMS.{$smarty.const.QUERY_STATS}.CAT_FORUM_CHUNKS.$c)}  
            <div class="carousel-indicators-custom text-center border rounded py-1 mt-1">
                <button type="button" class="btn btn-outline-primary btn-sm font-weight-bold active" data-target="#C_{$c}_carousel" data-slide-to="0">1</button>
                <button type="button" class="btn btn-outline-primary btn-sm font-weight-bold" data-target="#C_{$c}_carousel" data-slide-to="1">2</button>
            </div>
        </div>
        <a class="carousel-next border rounded d-flex ml-1" href="#" role="button" data-target="#C_{$c}_carousel" data-slide-to="1"><i class="align-self-center fa fa-chevron-circle-right fa-2x px-1" aria-hidden="true"></i></a>
        </div>
        {/if}
    
    </div>
</div>
{/foreach}
</div></div>

Ignore the CAT_FORUM_CHUNKS, which is nothing more than a start/stop parser to break the forums into groups based on a user defined number ( default is 25 ), but for the sake of this demo, its set to 5.

Im unsure of the most efficient way to tunicate Forum Title, and Forum Description, as well as a layout to display the forum moderators ( commented out with <!-- tags -->

Any suggestions?

Offline

#2 2020-09-28 16:28:53

JamesDean
Member
Registered: 2020-09-28
Posts: 19

Re: Your Opinion Please! @Visman

Well, i managed to find a solution for truncation ... flex in bootstrap is min-width: auto by default ... so rules for block objects dont "know" to comply and do exactly as "flex rules tell it to"

appending ( style="min-width: 0;" ) to any parent of a flex child you want text to be truncated solves the overflow of text issue:

<div class="d-flex flex-column ml-1" style="min-width: 0;">
                        <div class="font-weight-bold text-truncate">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_name}</div>
                        <div class="d-none d-md-block small text-truncate">{$FORUMS.{$smarty.const.QUERY_FORUM}.$i.forum_desc}</div>
                    </div>

as an example.

I suppose a dirty trick would be to append a css rule:

.flex-row, .flex-column { min-width: 0; }

would be a valid solution, but im not sure what that will break in other parts of bootstrap, so im just going to manually append to the html where needed until i know more of the consequences.

I'm still having difficulty with layout of moderators, and then where to place the buttons for moderator/admin functions ( most admin /mod functions are inline ). But where to place buttons that dont make the layout sacrifice space?

Ill add Screenshots when the forums allow!

Offline

Board footer

Powered by FluxBB