mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-06-26 03:30:48 +03:00
Frontend framework
* Добавлены универсальные dropdown'ы * Стили навигации вынесены во фреймворк * Исправлены мелкие баги
This commit is contained in:
Denis Shakhov
parent
65f5ab10de
commit
1dcba6297e
62
templates/framework/css/dropdowns.css
Normal file
62
templates/framework/css/dropdowns.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* Dropdowns
|
||||
*
|
||||
* TODO: Add submenu
|
||||
* TODO: Add arrow support in IE7
|
||||
*/
|
||||
|
||||
|
||||
/* Base class */
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
*display: inline; *zoom: 1; /* IE7 */
|
||||
background: #2891d3;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 5px 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown toggle */
|
||||
.dropdown-toggle {
|
||||
padding-right: 25px !important;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropdown-toggle:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%; right: 9px;
|
||||
height: 0; width: 0;
|
||||
margin-top: -1px;
|
||||
border: 4px solid transparent; /* IE7 */
|
||||
border: 4px solid rgba(255,255,255,0);
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.dropdown-toggle.active { background: #0088cc; color: #fff; }
|
||||
.dropdown-toggle.active:after { border-top-color: #fff; }
|
||||
|
||||
|
||||
/* Dropdown menu */
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 900;
|
||||
display: none;
|
||||
min-width: 150px;
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
.dropdown-menu li > a {
|
||||
display: block;
|
||||
padding: 5px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown-menu li.active > a { background: #c8ecff; color: #48a4d5; }
|
||||
.dropdown-menu li > a:hover { background: #0088cc; color: #fff; }
|
||||
|
||||
.dropdown-menu li.divider { height: 0; border-top: 1px solid #e1e1e1; margin: 5px 0; }
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
|
||||
|
||||
/* Floats */
|
||||
.fl-r { float: right !important; }
|
||||
.fl-l { float: left !important; }
|
||||
.fl-r, .float-right { float: right !important; }
|
||||
.fl-l, .float-left { float: left !important; }
|
||||
|
||||
|
||||
/* Misc */
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
|
||||
/* Width */
|
||||
/* @todo: Delete input-width */
|
||||
/* TODO: Delete input-width */
|
||||
.input-width-full, .width-full { width: 100%; }
|
||||
.input-width-50 , .width-50 { width: 50px; }
|
||||
.input-width-100, .width-100 { width: 100px; }
|
||||
|
|
@ -69,4 +69,9 @@
|
|||
.input-width-250, .width-250 { width: 250px; }
|
||||
.input-width-300, .width-300 { width: 300px; }
|
||||
.input-width-400, .width-400 { width: 400px; }
|
||||
.input-width-500, .width-500 { width: 500px; }
|
||||
.input-width-500, .width-500 { width: 500px; }
|
||||
|
||||
|
||||
/* Links */
|
||||
.link-dashed { text-decoration: none; border-bottom: 1px dashed; }
|
||||
.link-dotted { text-decoration: none; border-bottom: 1px dotted; }
|
||||
|
|
@ -1,14 +1,25 @@
|
|||
/* --------------------------------------------
|
||||
НАВИГАЦИЯ
|
||||
-------------------------------------------- */
|
||||
/*
|
||||
* Navs
|
||||
*/
|
||||
|
||||
.nav { overflow: hidden; zoom: 1; }
|
||||
.nav li { float: left; }
|
||||
|
||||
.nav li:last-child { border-right: none; }
|
||||
.nav li a { display: block; padding: 10px 15px; }
|
||||
.nav li a:hover { background: #f3f3f3; }
|
||||
.nav li.active a { background: #f3f3f3; }
|
||||
/* Base class */
|
||||
.nav { overflow: hidden; zoom: 1; }
|
||||
.nav li { float: left; }
|
||||
|
||||
.nav li:last-child { border-right: none; }
|
||||
.nav li a { display: block; padding: 10px 15px; }
|
||||
.nav li a:hover { background: #f3f3f3; }
|
||||
.nav li.active a { background: #f3f3f3; }
|
||||
|
||||
|
||||
/* Nav group */
|
||||
/* TODO: Add clearfix */
|
||||
.nav-group { position: relative; margin-bottom: 40px; }
|
||||
.nav-group .nav,
|
||||
.nav-group .nav.nav-pills { margin-bottom: 10px; }
|
||||
.nav-group .nav:last-child,
|
||||
.nav-group .nav.nav-pills:last-child { margin-bottom: 0; }
|
||||
|
||||
|
||||
/* Nav Pills */
|
||||
|
|
@ -32,6 +43,11 @@
|
|||
|
||||
.nav.nav-pills.nav-pills-profile { margin-bottom: 30px; }
|
||||
|
||||
/* Dropdown support */
|
||||
.nav.nav-pills .dropdown-toggle:after { border-top-color: #333; }
|
||||
.nav.nav-pills .dropdown-toggle.active { background: #2891D3; color: #fff; }
|
||||
.nav.nav-pills .dropdown-toggle.active:after { border-top-color: #fff; }
|
||||
|
||||
|
||||
/* Nav Menu */
|
||||
.nav.nav-menu { margin-bottom: 15px; }
|
||||
|
|
@ -53,23 +69,6 @@
|
|||
}
|
||||
|
||||
|
||||
/* Nav Topic Filter */
|
||||
.nav.nav-filter { margin-bottom: 1px; }
|
||||
.nav.nav-filter li { margin-right: 1px; position: relative; }
|
||||
.nav.nav-filter li a { background: #eee; color: #333; padding: 7px 13px; float: left; }
|
||||
.nav.nav-filter li a:hover { background: #ddd; }
|
||||
.nav.nav-filter li.active a { background: #333; color: #fff; }
|
||||
.nav.nav-filter li a.new { background: #d1d1d1; font-weight: bold; }
|
||||
.nav.nav-filter li a.new:hover { background: #ccc; }
|
||||
.nav.nav-filter li.active a.new { background: #444; }
|
||||
.nav.nav-filter li.active a.new:hover { background: #555; }
|
||||
|
||||
.nav.nav-filter.nav-filter-sub li a { padding: 5px 10px; font-size: 11px; color: #777; }
|
||||
.nav.nav-filter.nav-filter-sub li.active a { color: #fff; }
|
||||
|
||||
.nav-filter-wrapper { margin-bottom: 40px; }
|
||||
|
||||
|
||||
/* Userbar */
|
||||
#userbar {
|
||||
border: 1px solid #ddd;
|
||||
|
|
@ -97,6 +96,11 @@
|
|||
.nav.nav-userbar li.nav-userbar-username .avatar { position: absolute; top: 7px; left: 15px; }
|
||||
.nav.nav-userbar li .new-messages { color: #4AA731; font-weight: bold; }
|
||||
|
||||
/* Dropdown support */
|
||||
.nav.nav-userbar .dropdown-toggle:after { border-top-color: #000; }
|
||||
.nav.nav-userbar .dropdown-toggle.active { background: #0088cc; color: #fff; }
|
||||
.nav.nav-userbar .dropdown-toggle.active:after { border-top-color: #fff; }
|
||||
|
||||
|
||||
/* Nav Main */
|
||||
.nav.nav-main { border-radius: 4px; background: #222; background: -moz-linear-gradient(top, #333 0%, #222 100%); }
|
||||
|
|
@ -106,33 +110,11 @@
|
|||
.nav.nav-main li:last-child a { border-radius: 0 4px 4px 0; }
|
||||
.nav.nav-main li.active a { background: #3a3a3a; color: #bbb; -webkit-box-shadow: 0 0 7px rgba(0,0,0,.15) inset; box-shadow: 0 0 7px rgba(0,0,0,.15) inset; }
|
||||
|
||||
/* Dropdown support */
|
||||
.nav.nav-main .dropdown-toggle.active:hover { background: #0088cc; }
|
||||
|
||||
|
||||
/* Nav Profile */
|
||||
.nav.nav-profile { margin-bottom: 15px; }
|
||||
.nav.nav-profile li { float: none; margin-bottom: 2px; }
|
||||
.nav.nav-profile li a { padding: 7px 12px; color: #333; }
|
||||
|
||||
|
||||
/* Dropdown */
|
||||
.nav.nav-pills li.dropdown { position: relative; }
|
||||
.nav.nav-pills li.dropdown a { padding-right: 25px; }
|
||||
.nav.nav-pills li.dropdown i { position: absolute; top: 13px; right: 9px; height: 0; width: 0; border: 4px solid transparent; border-top-color: #fff; cursor: pointer; }
|
||||
.nav.nav-pills li.dropdown ul { display: none; position: absolute; }
|
||||
.nav.nav-pills li.dropdown.opened a { -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .5) inset; box-shadow: 0 0 7px rgba(0, 0, 0, .5) inset; }
|
||||
|
||||
.dropdown-menu { position: absolute; top: 32px; overflow: hidden; background: #fff; border: 1px solid #ccc; min-width: 150px; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2); box-shadow: 0 0 5px rgba(0,0,0,.2); border-radius: 3px; }
|
||||
.dropdown-menu li { font-size: 14px; line-height: 1em; }
|
||||
.dropdown-menu li a { display: block; padding: 10px 15px; }
|
||||
.dropdown-menu li a:hover { background: #fafafa; }
|
||||
.dropdown-menu li.active a { color: #aaa; }
|
||||
.dropdown-menu li.active a:hover { cursor: default; }
|
||||
|
||||
.dropdown-create { position: relative; margin-right: 120px; }
|
||||
.dropdown-create a { font-weight: normal; }
|
||||
.dropdown-create h2 a { text-transform: lowercase; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.nav.nav-profile li a { padding: 7px 12px; color: #333; }
|
||||
|
|
@ -151,34 +151,6 @@ ls.blocks = (function ($) {
|
|||
if ($('.js-block-'+block+'-nav').find('li').length >= count) {
|
||||
$('.js-block-'+block+'-nav').hide();
|
||||
$('.js-block-'+block+'-dropdown').show();
|
||||
// Dropdown
|
||||
var trigger = $('.js-block-'+block+'-dropdown-trigger');
|
||||
var menu = $('.js-block-'+block+'-dropdown-items');
|
||||
|
||||
menu.appendTo('body').css({'display': 'none'});
|
||||
trigger.click(function(){
|
||||
var pos = $(this).offset();
|
||||
menu.css({ 'left': pos.left, 'top': pos.top + 30, 'z-index': 2100 });
|
||||
menu.slideToggle();
|
||||
$(this).toggleClass('opened');
|
||||
return false;
|
||||
});
|
||||
menu.find('a').click(function(){
|
||||
trigger.removeClass('opened').find('a').text( $(this).text() );
|
||||
menu.slideToggle();
|
||||
});
|
||||
// Hide menu
|
||||
$(document).click(function(){
|
||||
trigger.removeClass('opened');
|
||||
menu.slideUp();
|
||||
});
|
||||
$('body').on('click', '.js-block-'+block+'-dropdown-trigger, .js-block-'+block+'-dropdown-items', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$(window).resize(function(){
|
||||
menu.css({ 'left': $('.js-block-'+block+'-dropdown-trigger').offset().left });
|
||||
});
|
||||
} else {
|
||||
// Transform nav to dropdown
|
||||
$('.js-block-'+block+'-nav').show();
|
||||
|
|
|
|||
93
templates/framework/js/dropdown.js
Normal file
93
templates/framework/js/dropdown.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
/*
|
||||
* Dropdowns
|
||||
*
|
||||
* Author: Denis Shakhov
|
||||
* Version: 1.0
|
||||
*
|
||||
* TODO: Add fixed menu option
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.fn.dropdown = function (options) {
|
||||
var defaults = {
|
||||
menuTopOffset: 2,
|
||||
defaultActiveText: '...'
|
||||
};
|
||||
var objects = this;
|
||||
var options = $.extend(defaults, options);
|
||||
|
||||
// Hide menu when click anywhere but menu
|
||||
$('body').click(function () {
|
||||
hideDropdowns();
|
||||
});
|
||||
|
||||
$('body').on("click", this, function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
this.each(function () {
|
||||
var
|
||||
$this = $(this),
|
||||
$menu = $('#' + $this.data('dropdown-menu')),
|
||||
isFloatRight = $this.data('dropdown-align') != undefined,
|
||||
isAjax = $this.data('dropdown-ajax') != undefined;
|
||||
isChangeText = $this.data('dropdown-change-text') == undefined;
|
||||
|
||||
$menu.appendTo('body');
|
||||
|
||||
// Set text
|
||||
if (isChangeText) {
|
||||
var activeText = $menu.find('li.active').text();
|
||||
$this.text(activeText.length > 0 ? activeText : options.defaultActiveText);
|
||||
}
|
||||
|
||||
// Resize
|
||||
$(window).resize(function () {
|
||||
positionMenu($this, $menu, isFloatRight);
|
||||
});
|
||||
|
||||
// Click
|
||||
$this.click(function () {
|
||||
positionMenu($this, $menu, isFloatRight);
|
||||
menuToggle($this, $menu);
|
||||
hideDropdowns($this, $menu);
|
||||
return false;
|
||||
});
|
||||
|
||||
if (isAjax) {
|
||||
$menu.find('li > a').click(function () {
|
||||
if (isChangeText) $this.text($(this).text());
|
||||
$menu.find('li').removeClass('active');
|
||||
$(this).parent('li').addClass('active');
|
||||
menuToggle($this, $menu);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Hide dropdowns
|
||||
function hideDropdowns (currentDropdown, currentMenu) {
|
||||
objects.not(currentDropdown).removeClass('active');
|
||||
$('.dropdown-menu:visible').not(currentMenu).hide(); // TODO: Fix selector
|
||||
}
|
||||
|
||||
// Position menu
|
||||
function positionMenu (toggle, menu, isFloatRight) {
|
||||
var
|
||||
pos = toggle.offset(),
|
||||
height = toggle.outerHeight(),
|
||||
width = toggle.outerWidth();
|
||||
|
||||
menu.css({
|
||||
'top': pos.top + height + options.menuTopOffset,
|
||||
'left': isFloatRight ? 'auto' : pos.left,
|
||||
'right': isFloatRight ? $(window).width() - pos.left - width : 'auto'
|
||||
});
|
||||
}
|
||||
|
||||
// Menu toggle
|
||||
function menuToggle(toggle, menu) {
|
||||
toggle.toggleClass('active');
|
||||
menu.toggle();
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -13,14 +13,18 @@
|
|||
{$sItemsHook}
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills js-block-stream-dropdown" {if !$sItemsHook}style="display: none;"{/if}>
|
||||
<li class="dropdown active js-block-stream-dropdown-trigger"><a href="#">{$aLang.block_stream_comments}</a> <i class="arrow"></i>
|
||||
<ul class="dropdown-menu js-block-stream-dropdown-items">
|
||||
<li class="active js-block-stream-item" data-type="comment"><a href="#">{$aLang.block_stream_comments}</a></li>
|
||||
<li class="js-block-stream-item" data-type="topic"><a href="#">{$aLang.block_stream_topics}</a></li>
|
||||
{$sItemsHook}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<div
|
||||
class="dropdown dropdown-toggle js-block-stream-dropdown"
|
||||
data-toggle="dropdown"
|
||||
data-dropdown-menu="js-dropdown-stream"
|
||||
data-dropdown-ajax="true"
|
||||
{if !$sItemsHook}style="display: none;"{/if}>{$aLang.block_stream_comments}</a></div>
|
||||
|
||||
<ul class="dropdown-menu js-block-stream-dropdown-items" id="js-dropdown-stream">
|
||||
<li class="active js-block-stream-item" data-type="comment"><a href="#">{$aLang.block_stream_comments}</a></li>
|
||||
<li class="js-block-stream-item" data-type="topic"><a href="#">{$aLang.block_stream_topics}</a></li>
|
||||
{$sItemsHook}
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,23 +21,20 @@ a:hover { color: #06e; }
|
|||
.topic .topic-header .topic-title a:visited,
|
||||
.item-list li a:visited { color: #1D2273; }
|
||||
|
||||
a.link-dashed { border-bottom: 1px dashed #5055b2; }
|
||||
a.link-dashed:hover { border-color: #06e; }
|
||||
|
||||
a.link-dotted { text-decoration: none; border-bottom: 1px dotted #5055b2; }
|
||||
a.link-dotted:hover { border-color: #06e; }
|
||||
|
||||
|
||||
|
||||
/* Заголовки
|
||||
---------------------------------------------------- */
|
||||
h2.page-header { color: #333; font-size: 27px; line-height: 1em; font-weight: bold; margin-bottom: 20px; }
|
||||
h2.page-header span { color: #aaa; }
|
||||
|
||||
h2.header-table { margin-bottom: 0; border-bottom: 1px solid #eee; padding-bottom: 5px; font-size: 14px; font-weight: bold; }
|
||||
|
||||
.page-header { color: #333; font-size: 27px; line-height: 1em; font-weight: bold; margin-bottom: 20px; }
|
||||
.page-header span { color: #aaa; }
|
||||
|
||||
/* Dropdown support */
|
||||
.page-header.page-header-publish .dropdown-toggle { text-transform: lowercase; }
|
||||
.page-header.page-header-publish .dropdown-toggle:after { border-top-color: #5055B2; }
|
||||
.page-header.page-header-publish .dropdown-toggle.active { background: transparent; color: #9496ea; }
|
||||
.page-header.page-header-publish .dropdown-toggle.active:after { border-top-color: #9496ea; }
|
||||
|
||||
.header-table { margin-bottom: 0; border-bottom: 1px solid #eee; padding-bottom: 5px; font-size: 14px; font-weight: bold; }
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ jQuery(document).ready(function($){
|
|||
$('body').addClass('ie' + parseInt($.browser.version));
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
$('[data-toggle=dropdown]').dropdown();
|
||||
|
||||
// Всплывающие окна
|
||||
$('#window_login_form').jqm();
|
||||
|
|
|
|||
|
|
@ -1,73 +1,73 @@
|
|||
<div class="nav-filter-wrapper">
|
||||
<ul class="nav nav-filter">
|
||||
<li {if $sMenuItemSelect=='index'}class="active"{/if}>
|
||||
<a href="{cfg name='path.root.web'}/">{$aLang.blog_menu_all}</a> {if $iCountTopicsNew>0}<a href="{router page='index'}new/" class="new">+{$iCountTopicsNew}</a>{/if}
|
||||
</li>
|
||||
<ul class="nav nav-pills">
|
||||
<li {if $sMenuItemSelect=='index'}class="active"{/if}>
|
||||
<a href="{cfg name='path.root.web'}/">{$aLang.blog_menu_all}</a> {if $iCountTopicsNew>0}<a href="{router page='index'}new/" class="new">+{$iCountTopicsNew}</a>{/if}
|
||||
</li>
|
||||
|
||||
<li {if $sMenuItemSelect=='blog'}class="active"{/if}>
|
||||
<a href="{router page='blog'}">{$aLang.blog_menu_collective}</a> {if $iCountTopicsCollectiveNew>0}<a href="{router page='blog'}new/" class="new">+{$iCountTopicsCollectiveNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuItemSelect=='blog'}class="active"{/if}>
|
||||
<a href="{router page='blog'}">{$aLang.blog_menu_collective}</a> {if $iCountTopicsCollectiveNew>0}<a href="{router page='blog'}new/" class="new">+{$iCountTopicsCollectiveNew}</a>{/if}
|
||||
</li>
|
||||
|
||||
<li {if $sMenuItemSelect=='log'}class="active"{/if}>
|
||||
<a href="{router page='personal_blog'}">{$aLang.blog_menu_personal}</a> {if $iCountTopicsPersonalNew>0}<a href="{router page='personal_blog'}new/" class="new">+{$iCountTopicsPersonalNew}</a>{/if}
|
||||
<li {if $sMenuItemSelect=='log'}class="active"{/if}>
|
||||
<a href="{router page='personal_blog'}">{$aLang.blog_menu_personal}</a> {if $iCountTopicsPersonalNew>0}<a href="{router page='personal_blog'}new/" class="new">+{$iCountTopicsPersonalNew}</a>{/if}
|
||||
</li>
|
||||
|
||||
{if $oUserCurrent}
|
||||
<li {if $sMenuItemSelect=='feed'}class="active"{/if}>
|
||||
<a href="{router page='feed'}">{$aLang.userfeed_title}</a>
|
||||
</li>
|
||||
|
||||
{if $oUserCurrent}
|
||||
<li {if $sMenuItemSelect=='feed'}class="active"{/if}>
|
||||
<a href="{router page='feed'}">{$aLang.userfeed_title}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{hook run='menu_blog'}
|
||||
{hook run='menu_blog'}
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
{if $sMenuItemSelect=='index'}
|
||||
<ul class="nav nav-pills">
|
||||
<li {if $sMenuSubItemSelect=='good'}class="active"{/if}><a href="{cfg name='path.root.web'}/">{$aLang.blog_menu_all_good}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='new'}class="active"{/if}>
|
||||
<a href="{router page='index'}newall/" title="{$aLang.blog_menu_top_period_all}">{$aLang.blog_menu_all_new}</a>
|
||||
{if $iCountTopicsNew>0} <a href="{router page='index'}new/" title="{$aLang.blog_menu_top_period_24h}">+{$iCountTopicsNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuSubItemSelect=='discussed'}class="active"{/if}><a href="{router page='index'}discussed/">{$aLang.blog_menu_all_discussed}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='top'}class="active"{/if}><a href="{router page='index'}top/">{$aLang.blog_menu_all_top}</a></li>
|
||||
{hook run='menu_blog_index_item'}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{if $sMenuItemSelect=='blog'}
|
||||
<ul class="nav nav-pills">
|
||||
<li {if $sMenuSubItemSelect=='good'}class="active"{/if}><a href="{$sMenuSubBlogUrl}">{$aLang.blog_menu_collective_good}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='new'}class="active"{/if}>
|
||||
<a href="{$sMenuSubBlogUrl}newall/" title="{$aLang.blog_menu_top_period_all}">{$aLang.blog_menu_collective_new}</a>
|
||||
{if $iCountTopicsBlogNew>0} <a href="{$sMenuSubBlogUrl}new/" title="{$aLang.blog_menu_top_period_24h}">+{$iCountTopicsBlogNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuSubItemSelect=='discussed'}class="active"{/if}><a href="{$sMenuSubBlogUrl}discussed/">{$aLang.blog_menu_collective_discussed}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='top'}class="active"{/if}><a href="{$sMenuSubBlogUrl}top/">{$aLang.blog_menu_collective_top}</a></li>
|
||||
{hook run='menu_blog_blog_item'}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{if $sMenuItemSelect=='log'}
|
||||
<ul class="nav nav-pills">
|
||||
<li {if $sMenuSubItemSelect=='good'}class="active"{/if}><a href="{router page='personal_blog'}">{$aLang.blog_menu_personal_good}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='new'}class="active"{/if}>
|
||||
<a href="{router page='personal_blog'}newall/" title="{$aLang.blog_menu_top_period_all}">{$aLang.blog_menu_personal_new}</a>
|
||||
{if $iCountTopicsPersonalNew>0} <a href="{router page='personal_blog'}new/" title="{$aLang.blog_menu_top_period_24h}">+{$iCountTopicsPersonalNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuSubItemSelect=='discussed'}class="active"{/if}><a href="{router page='personal_blog'}discussed/">{$aLang.blog_menu_personal_discussed}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='top'}class="active"{/if}><a href="{router page='personal_blog'}top/">{$aLang.blog_menu_personal_top}</a></li>
|
||||
{hook run='menu_blog_log_item'}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{if $sMenuItemSelect=='index'}
|
||||
<ul class="nav nav-filter nav-filter-sub">
|
||||
<li {if $sMenuSubItemSelect=='good'}class="active"{/if}><a href="{cfg name='path.root.web'}/">{$aLang.blog_menu_all_good}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='new'}class="active"{/if}>
|
||||
<a href="{router page='index'}newall/" title="{$aLang.blog_menu_top_period_all}">{$aLang.blog_menu_all_new}</a>
|
||||
{if $iCountTopicsNew>0} <a href="{router page='index'}new/" title="{$aLang.blog_menu_top_period_24h}">+{$iCountTopicsNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuSubItemSelect=='discussed'}class="active"{/if}><a href="{router page='index'}discussed/">{$aLang.blog_menu_all_discussed}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='top'}class="active"{/if}><a href="{router page='index'}top/">{$aLang.blog_menu_all_top}</a></li>
|
||||
{hook run='menu_blog_index_item'}
|
||||
</ul>
|
||||
{/if}
|
||||
{if $sPeriodSelectCurrent}
|
||||
<div class="dropdown dropdown-toggle" data-toggle="dropdown" data-dropdown-menu="js-dropdown-date"></div>
|
||||
|
||||
{if $sMenuItemSelect=='blog'}
|
||||
<ul class="nav nav-filter nav-filter-sub">
|
||||
<li {if $sMenuSubItemSelect=='good'}class="active"{/if}><a href="{$sMenuSubBlogUrl}">{$aLang.blog_menu_collective_good}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='new'}class="active"{/if}>
|
||||
<a href="{$sMenuSubBlogUrl}newall/" title="{$aLang.blog_menu_top_period_all}">{$aLang.blog_menu_collective_new}</a>
|
||||
{if $iCountTopicsBlogNew>0} <a href="{$sMenuSubBlogUrl}new/" title="{$aLang.blog_menu_top_period_24h}">+{$iCountTopicsBlogNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuSubItemSelect=='discussed'}class="active"{/if}><a href="{$sMenuSubBlogUrl}discussed/">{$aLang.blog_menu_collective_discussed}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='top'}class="active"{/if}><a href="{$sMenuSubBlogUrl}top/">{$aLang.blog_menu_collective_top}</a></li>
|
||||
{hook run='menu_blog_blog_item'}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{if $sMenuItemSelect=='log'}
|
||||
<ul class="nav nav-filter nav-filter-sub">
|
||||
<li {if $sMenuSubItemSelect=='good'}class="active"{/if}><a href="{router page='personal_blog'}">{$aLang.blog_menu_personal_good}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='new'}class="active"{/if}>
|
||||
<a href="{router page='personal_blog'}newall/" title="{$aLang.blog_menu_top_period_all}">{$aLang.blog_menu_personal_new}</a>
|
||||
{if $iCountTopicsPersonalNew>0} <a href="{router page='personal_blog'}new/" title="{$aLang.blog_menu_top_period_24h}">+{$iCountTopicsPersonalNew}</a>{/if}
|
||||
</li>
|
||||
<li {if $sMenuSubItemSelect=='discussed'}class="active"{/if}><a href="{router page='personal_blog'}discussed/">{$aLang.blog_menu_personal_discussed}</a></li>
|
||||
<li {if $sMenuSubItemSelect=='top'}class="active"{/if}><a href="{router page='personal_blog'}top/">{$aLang.blog_menu_personal_top}</a></li>
|
||||
{hook run='menu_blog_log_item'}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{if $sPeriodSelectCurrent}
|
||||
<ul class="nav nav-filter nav-filter-sub">
|
||||
<li {if $sPeriodSelectCurrent=='1'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=1">{$aLang.blog_menu_top_period_24h}</a></li>
|
||||
<li {if $sPeriodSelectCurrent=='7'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=7">{$aLang.blog_menu_top_period_7d}</a></li>
|
||||
<li {if $sPeriodSelectCurrent=='30'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=30">{$aLang.blog_menu_top_period_30d}</a></li>
|
||||
<li {if $sPeriodSelectCurrent=='all'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=all">{$aLang.blog_menu_top_period_all}</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<ul class="dropdown-menu" id="js-dropdown-date">
|
||||
<li {if $sPeriodSelectCurrent=='1'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=1">{$aLang.blog_menu_top_period_24h}</a></li>
|
||||
<li {if $sPeriodSelectCurrent=='7'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=7">{$aLang.blog_menu_top_period_7d}</a></li>
|
||||
<li {if $sPeriodSelectCurrent=='30'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=30">{$aLang.blog_menu_top_period_30d}</a></li>
|
||||
<li {if $sPeriodSelectCurrent=='all'}class="active"{/if}><a href="{$sPeriodSelectRoot}?period=all">{$aLang.blog_menu_top_period_all}</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
|
|
@ -1,50 +1,22 @@
|
|||
<script type="text/javascript">
|
||||
jQuery(function($){
|
||||
var trigger = $('#dropdown-create-trigger');
|
||||
var menu = $('#dropdown-create-menu');
|
||||
var pos = trigger.position();
|
||||
<h2 class="page-header page-header-publish">
|
||||
{$aLang.block_create}
|
||||
|
||||
|
||||
// Dropdown
|
||||
menu.css({ 'left': pos.left - 5 });
|
||||
|
||||
trigger.click(function(){
|
||||
menu.slideToggle();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// Hide menu
|
||||
$(document).click(function(){
|
||||
menu.slideUp();
|
||||
});
|
||||
|
||||
$('body').on("click", "#dropdown-create-trigger, #dropdown-create-menu", function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-dropdown-menu="js-dropdown-publish">
|
||||
{if $sMenuItemSelect=='topic'}
|
||||
{$aLang.topic_menu_add}
|
||||
{elseif $sMenuItemSelect=='blog'}
|
||||
{$aLang.blog_menu_create}
|
||||
{else}
|
||||
{hook run='menu_create_item_select' sMenuItemSelect=$sMenuItemSelect}
|
||||
{/if}
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="dropdown-create">
|
||||
{strip}
|
||||
<h2 class="page-header">{$aLang.block_create} <a href="#" class="dropdown-create-trigger link-dashed" id="dropdown-create-trigger">
|
||||
{if $sMenuItemSelect=='topic'}
|
||||
{$aLang.topic_menu_add}
|
||||
{elseif $sMenuItemSelect=='blog'}
|
||||
{$aLang.blog_menu_create}
|
||||
{else}
|
||||
{hook run='menu_create_item_select' sMenuItemSelect=$sMenuItemSelect}
|
||||
{/if}
|
||||
</a></h2>
|
||||
{/strip}
|
||||
|
||||
<ul class="dropdown-menu" id="dropdown-create-menu" style="display: none">
|
||||
<li {if $sMenuItemSelect=='topic'}class="active"{/if}><a href="{router page='topic'}add/">{$aLang.topic_menu_add}</a></li>
|
||||
<li {if $sMenuItemSelect=='blog'}class="active"{/if}><a href="{router page='blog'}add/">{$aLang.blog_menu_create}</a></li>
|
||||
{hook run='menu_create_item' sMenuItemSelect=$sMenuItemSelect}
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="dropdown-menu" id="js-dropdown-publish">
|
||||
<li {if $sMenuItemSelect=='topic'}class="active"{/if}><a href="{router page='topic'}add/">{$aLang.topic_menu_add}</a></li>
|
||||
<li {if $sMenuItemSelect=='blog'}class="active"{/if}><a href="{router page='blog'}add/">{$aLang.blog_menu_create}</a></li>
|
||||
{hook run='menu_create_item' sMenuItemSelect=$sMenuItemSelect}
|
||||
</ul>
|
||||
|
||||
|
||||
{if $sMenuItemSelect=='topic'}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<li {if $sMenuHeadItemSelect=='blogs'}class="active"{/if}><a href="{router page='blogs'}">{$aLang.blogs}</a></li>
|
||||
<li {if $sMenuHeadItemSelect=='people'}class="active"{/if}><a href="{router page='people'}">{$aLang.people}</a></li>
|
||||
<li {if $sMenuHeadItemSelect=='stream'}class="active"{/if}><a href="{router page='stream'}">{$aLang.stream_menu}</a></li>
|
||||
|
||||
{hook run='main_menu_item'}
|
||||
</ul>
|
||||
{hook run='main_menu'}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
{if $menu}
|
||||
{if in_array($menu,$aMenuContainers)}{$aMenuFetch.$menu}{else}{include file="menu.$menu.tpl"}{/if}
|
||||
{/if}
|
||||
|
||||
{if $menu_content}
|
||||
{include file="menu.$menu_content.content.tpl"}
|
||||
{if $menu or $menu_content}
|
||||
<div class="nav-group">
|
||||
{if $menu}
|
||||
{if in_array($menu,$aMenuContainers)}{$aMenuFetch.$menu}{else}{include file="menu.$menu.tpl"}{/if}
|
||||
{/if}
|
||||
|
||||
{if $menu_content}
|
||||
{include file="menu.$menu_content.content.tpl"}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -22,6 +22,7 @@ $config['view']['grid']['fixed_width'] = 1000;
|
|||
|
||||
|
||||
$config['head']['default']['js'] = Config::Get('head.default.js');
|
||||
$config['head']['default']['js'][] = '___path.root.server___/templates/framework/js/dropdown.js';
|
||||
$config['head']['default']['js'][] = '___path.static.skin___/js/template.js';
|
||||
|
||||
$config['head']['default']['css'] = array(
|
||||
|
|
@ -31,6 +32,8 @@ $config['head']['default']['css'] = array(
|
|||
"___path.root.server___/templates/framework/css/text.css",
|
||||
"___path.root.server___/templates/framework/css/buttons.css",
|
||||
"___path.root.server___/templates/framework/css/forms.css",
|
||||
"___path.root.server___/templates/framework/css/navs.css",
|
||||
"___path.root.server___/templates/framework/css/dropdowns.css",
|
||||
|
||||
// Template styles
|
||||
"___path.static.skin___/css/base.css",
|
||||
|
|
@ -40,7 +43,6 @@ $config['head']['default']['css'] = array(
|
|||
"___path.root.engine_lib___/external/prettify/prettify.css",
|
||||
"___path.static.skin___/css/grid.css",
|
||||
"___path.static.skin___/css/common.css",
|
||||
"___path.static.skin___/css/navs.css",
|
||||
"___path.static.skin___/css/icons.css",
|
||||
"___path.static.skin___/css/tables.css",
|
||||
"___path.static.skin___/css/topic.css",
|
||||
|
|
|
|||
|
|
@ -19,12 +19,6 @@ a:hover { color: #f00; }
|
|||
|
||||
.text a:visited { color: #1D2273; }
|
||||
|
||||
a.link-dashed { border-bottom: 1px dashed #5055b2; text-decoration: none; }
|
||||
a.link-dashed:hover { border-color: #f00; }
|
||||
|
||||
a.link-dotted { text-decoration: none; border-bottom: 1px dotted #5055b2; }
|
||||
a.link-dotted:hover { border-color: #f00; }
|
||||
|
||||
|
||||
|
||||
/* Заголовки
|
||||
|
|
|
|||
|
|
@ -192,6 +192,49 @@ jQuery(document).ready(function($){
|
|||
// комментарии
|
||||
ls.comments.init();
|
||||
|
||||
// It will be deleted soon
|
||||
// TODO: Delete
|
||||
ls.blocks.initNavigation = function(block,count) {
|
||||
count=count || 3;
|
||||
if ($('.js-block-'+block+'-nav').find('li').length >= count) {
|
||||
$('.js-block-'+block+'-nav').hide();
|
||||
$('.js-block-'+block+'-dropdown').show();
|
||||
// Dropdown
|
||||
var trigger = $('.js-block-'+block+'-dropdown-trigger');
|
||||
var menu = $('.js-block-'+block+'-dropdown-items');
|
||||
|
||||
menu.appendTo('body').css({'display': 'none'});
|
||||
trigger.click(function(){
|
||||
var pos = $(this).offset();
|
||||
menu.css({ 'left': pos.left, 'top': pos.top + 30, 'z-index': 2100 });
|
||||
menu.slideToggle();
|
||||
$(this).toggleClass('opened');
|
||||
return false;
|
||||
});
|
||||
menu.find('a').click(function(){
|
||||
trigger.removeClass('opened').find('a').text( $(this).text() );
|
||||
menu.slideToggle();
|
||||
});
|
||||
// Hide menu
|
||||
$(document).click(function(){
|
||||
trigger.removeClass('opened');
|
||||
menu.slideUp();
|
||||
});
|
||||
$('body').on('click', '.js-block-'+block+'-dropdown-trigger, .js-block-'+block+'-dropdown-items', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$(window).resize(function(){
|
||||
menu.css({ 'left': $('.js-block-'+block+'-dropdown-trigger').offset().left });
|
||||
});
|
||||
} else {
|
||||
// Transform nav to dropdown
|
||||
$('.js-block-'+block+'-nav').show();
|
||||
$('.js-block-'+block+'-dropdown').hide();
|
||||
}
|
||||
ls.hook.run('ls_blocks_init_navigation_after',[block,count],this);
|
||||
};
|
||||
|
||||
// избранное
|
||||
ls.hook.add('ls_favourite_toggle_after',function(idTarget,objFavourite,type,params,result){
|
||||
var favCount = $('#fav_count_'+type+'_'+idTarget);
|
||||
|
|
|
|||
Loading…
Reference in a new issue