Jump to content

Ограничиваем отображение подфорумов

Если на вашем форуме большое количество подфорумов, имеет смысл часть из них скрыть, дабы подфорумы не забирали на себя бОльшую часть экрана.

 

Приступим  

Открываем шаблон includeJS и в самый верх вставляем:

Spoiler 
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.1.1/jquery-migrate.min.js'></script>
<script type='text/javascript'>
	$.noConflict();
	jQuery(document).ready(function($) {
		$('.subforums').each(function() {
			var n = $(this).height();
			if(n > 100) { $(this).addClass('c1'); 
				$(this).parent('.subforums_container').siblings('.minmax_click').show();
			}
			else {
				$(this).find('.minmax_bottom').hide();
			}
		});
		$('div.subforums_container').each( function(i, el){
			$(this).siblings('.minmax_click').find('span.minmax_size').html( $(this).find('ol.subforums li').size() -1)
		});
		$('a.minmax_click').on('click', function(){
			$(this).siblings('.subforums_container').find('.subforums').toggleClass('c1', 'c2');
			$(this).toggleClass('hover');
		})
		$('#carousel-wrapper').jcarousel({
			wrap: 'circular',
			auto: 5,
			scroll: 1,
			buttonNextHTML: '<a>›</a>',
			buttonPrevHTML: '<a>‹</a>'
		});
	});
</script> 

Далее Список форумов --> boardIndexTemplate

Найти:

Spoiler 
<if test="showSubForums:|:$forum_data['show_subforums'] AND count( $forum_data['subforums'] ) AND $forum_data['show_subforums']">
														<br />
														<ol class='ipsList_inline ipsType_small subforums' id='subforums_{$forum_data['id']}'>
															<foreach loop="subforums:$forum_data['subforums'] as $__id => $__data">
																<if test="showSubForumsLit:|:$__data[3]"><li class='unread'><else /><li></if>
																	<a href="{parse url="showforum={$__data[0]}" seotitle="{$__data[2]}" template="showforum" base="public"}" title='{parse expression="IPSText::striptags( IPSText::htmlspecialchars($__data[1]) )"}'>{$__data[1]}</a><if test="isNotLast:|: empty($__data[4] )">,</if>
																</li>
															</foreach>
														</ol>
													</if> 

Заменить на:

Spoiler 
<if test="showSubForums:|:$forum_data['show_subforums'] AND count( $forum_data['subforums'] ) AND $forum_data['show_subforums']">
														<br />
														<div class='subforums_container'>
														<ol class='ipsList_inline subforums' id='subforums_{$forum_data['id']}'>
															<foreach loop="subforums:$forum_data['subforums'] as $__id => $__data">
																<if test="showSubForumsLit:|:$__data[3]"><li class='unread'><else /><li></if>
																	<a href="{parse url="showforum={$__data[0]}" seotitle="{$__data[2]}" template="showforum" base="public"}" title='{$__data[1]}'>{$__data[1]}</a><if test="isNotLast:|: empty($__data[4] )">,</if>
																</li>
															</foreach>
																<li><div class='minmax_bottom'></div></li>
														</ol>
														
														</div>
													</if> 

В ipb_styles.css добавляем:

Spoiler 
table.ipb_table .subforums.minimized { max-height: 62px !important; overflow: hidden; }
table.ipb_table .subforums.maximized { max-height: auto; overflow: visible; }
.c1{ height: 52px; overflow: hidden;}
.c2{ height: auto; overflow: auto; }
.c1 .minmax_bottom {
	background: -moz-linear-gradient(top, rgba(253,250,247,0) 0%, rgba(253,250,247,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,250,247,0)), color-stop(100%,rgba(253,250,247,1)));
	background: -webkit-linear-gradient(top, rgba(253,250,247,0) 0%,rgba(253,250,247,1) 100%);
	background: -o-linear-gradient(top, rgba(253,250,247,0) 0%,rgba(253,250,247,1) 100%);
	background: -ms-linear-gradient(top, rgba(253,250,247,0) 0%,rgba(253,250,247,1) 100%);
	background: linear-gradient(to bottom, rgba(253,250,247,0) 0%,rgba(253,250,247,1) 100%);
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 20px;
	width: 100%;
}

.subforums_container { position: relative; }

.minmax_click {
	color: #7e7770;
	margin-left: 20px;
	text-decoration: underline;
}

	.minmax_click:hover {
		text-decoration: none;
	}

	.minmax_click:before {
		content: "Все объекты"
	}
	.minmax_click.hover:before {
		content: "Свернуть"
	}

	tr.unread .minmax_bottom {
		background: -moz-linear-gradient(top, rgba(248,244,239,0) 0%, rgba(248,244,239,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,244,239,0)), color-stop(100%,rgba(248,244,239,1)));
		background: -webkit-linear-gradient(top, rgba(248,244,239,0) 0%,rgba(248,244,239,1) 100%);
		background: -o-linear-gradient(top, rgba(248,244,239,0) 0%,rgba(248,244,239,1) 100%);
		background: -ms-linear-gradient(top, rgba(248,244,239,0) 0%,rgba(248,244,239,1) 100%);
		background: linear-gradient(to bottom, rgba(248,244,239,0) 0%,rgba(248,244,239,1) 100%);
	} 

 

Готово, пользуемся 

 

Копирование разрешено только с указанием первоисточника с активной ссылкой - __ipbmafia.ru

User Feedback

Recommended Comments

Комментариев пока нет

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Добавить комментарий...