1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-06-26 11:40:48 +03:00

Frontend framework

* Добавлены табы
* Доработаны дропдауны
* Доработаны стили навигации
This commit is contained in:
Denis Shakhov 2013-01-19 16:50:09 +07:00
parent 59c0fddd0c
commit 984aa7e21a
10 changed files with 163 additions and 100 deletions

View file

@ -21,7 +21,8 @@
/* Dropdown toggle */
.dropdown-toggle {
padding-right: 25px !important;
position: relative;
position: relative;
*zoom: 1;
cursor: pointer;
}
.dropdown-toggle:after {
@ -34,8 +35,8 @@
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-toggle.open { background: #0088cc; color: #fff; }
.dropdown-toggle.open:after { border-top-color: #fff; }
/* Dropdown menu */
@ -51,12 +52,8 @@
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 > 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; }
.dropdown-menu > li.divider { height: 0; border-top: 1px solid #e1e1e1; margin: 5px 0; }

View file

@ -3,73 +3,87 @@
*/
/* Base class */
.nav { overflow: hidden; zoom: 1; }
.nav li { float: left; }
/* Base class
-------------------------------------------------- */
.nav { }
.nav > li { float: left; position: relative; }
.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 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; }
/* Clearfix */
.nav:before,
.nav:after { content: ""; display: table; }
.nav:after { clear: both; }
.nav { zoom: 1; }
/* Nav group */
/* TODO: Add clearfix */
/* Group
-------------------------------------------------- */
.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-group > *:last-child { margin-bottom: 0; }
/* Nav Pills */
.nav.nav-pills { margin-bottom: 15px; }
.nav.nav-pills li { margin-right: 3px; }
.nav.nav-pills li a { border-radius: 2px; padding: 5px 12px; background: #f5f5f5; color: #888; }
.nav.nav-pills li a:hover { background: #eaeaea; }
.nav.nav-pills li.active a {
background: #2891d3;
background: -moz-linear-gradient(top, #2891d3 0%, #2375c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2891d3), color-stop(100%,#2375c6));
background: -webkit-linear-gradient(top, #2891d3 0%,#2375c6 100%);
background: -o-linear-gradient(top, #2891d3 0%,#2375c6 100%);
background: -ms-linear-gradient(top, #2891d3 0%,#2375c6 100%);
background: linear-gradient(top, #2891d3 0%,#2375c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2891d3', endColorstr='#2375c6',GradientType=0 );
/* Pills
-------------------------------------------------- */
.nav.nav-pills { margin-bottom: 15px; }
.nav.nav-pills > li { margin-right: 3px; }
.nav.nav-pills > li > a { border-radius: 2px; padding: 5px 12px; background: #f5f5f5; color: #888; }
.nav.nav-pills > li > a:hover { background: #eaeaea; }
.nav.nav-pills > li.active > a { background: #2891d3; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); color: #fff; }
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
color: #fff;
}
.nav.nav-pills.nav-pills-profile { margin-bottom: 30px; }
/* Stacked */
.nav.nav-pills.nav-stacked { margin-bottom: 15px; }
.nav.nav-pills.nav-stacked > li { float: none; margin-bottom: 3px; }
.nav.nav-pills.nav-stacked > li > a { padding: 7px 12px; }
/* 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.nav-pills .dropdown-toggle:after { border-top-color: #333; }
.nav.nav-pills .dropdown-toggle.open { background: #2891D3; color: #fff; }
.nav.nav-pills .active .dropdown-toggle:after,
.nav.nav-pills .dropdown-toggle.open:after { border-top-color: #fff; }
/* Nav Menu */
.nav.nav-menu { margin-bottom: 15px; }
.nav.nav-menu li { margin-right: 3px; }
.nav.nav-menu li a { border-radius: 2px; padding: 5px 12px; background: #f5f5f5; color: #888; }
.nav.nav-menu li a:hover { background: #eaeaea; }
.nav.nav-menu li.active a {
background: #2891d3;
background: -moz-linear-gradient(top, #2891d3 0%, #2375c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2891d3), color-stop(100%,#2375c6));
background: -webkit-linear-gradient(top, #2891d3 0%,#2375c6 100%);
background: -o-linear-gradient(top, #2891d3 0%,#2375c6 100%);
background: -ms-linear-gradient(top, #2891d3 0%,#2375c6 100%);
background: linear-gradient(top, #2891d3 0%,#2375c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2891d3', endColorstr='#2375c6',GradientType=0 );
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
color: #fff;
/* Tabs
-------------------------------------------------- */
.nav.nav-tabs { border-bottom: 1px solid #ddd; margin-bottom: 15px; }
.nav.nav-tabs > li { position: relative; margin-bottom: -1px; }
.nav.nav-tabs > li > a {
border: 1px solid transparent;
margin-right: 3px;
padding: 10px 15px;
*padding: 10px 13px;
border-radius: 3px 3px 0 0;
cursor: pointer;
font-size: 14px;
background: transparent;
color: #08c;
}
.nav.nav-tabs > li > a:hover { background: #f1f1f1; border-bottom-color: #ddd; color: #058; }
.nav.nav-tabs > li.active > a { background: #fff; border-color: #ddd; border-bottom-color: #fff; color: #333; cursor: default; }
/* Dropdown support */
.nav.nav-tabs .dropdown-toggle:after { border-top-color: #08c; }
.nav.nav-tabs .dropdown-toggle.open { background: #08c; color: #fff; border-color: transparent !important; }
.nav.nav-tabs .active .dropdown-toggle:after,
.nav.nav-tabs .active .dropdown-toggle:hover:after { border-top-color: #333; }
.nav.nav-tabs .active .dropdown-toggle.open:after,
.nav.nav-tabs .dropdown-toggle.open:after,
.nav.nav-tabs .dropdown-toggle.open:hover:after,
.nav.nav-tabs .active .dropdown-toggle.open:hover:after { border-top-color: #fff; }
.nav.nav-tabs .dropdown-toggle:hover:after { border-top-color: #058; }
/* Tabs content */
.tabs-content { }
.tabs-content .tab-pane { display: none; }
/* Userbar */
/* Userbar
* TODO: Fix
-------------------------------------------------- */
#userbar {
border: 1px solid #ddd;
border-top: none;
@ -97,12 +111,14 @@
.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.nav-userbar .dropdown-toggle:after { border-top-color: #000; }
.nav.nav-userbar .dropdown-toggle.open { background: #08c; color: #fff; }
.nav.nav-userbar .dropdown-toggle.open:after { border-top-color: #fff; }
/* Nav Main */
/* Main
* TODO: Fix
-------------------------------------------------- */
.nav.nav-main { border-radius: 4px; background: #222; background: -moz-linear-gradient(top, #333 0%, #222 100%); }
.nav.nav-main li a { color: #ddd; }
.nav.nav-main li a:hover { background: #333; }
@ -111,10 +127,4 @@
.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; }
.nav.nav-main .dropdown-toggle.open:hover { background: #0088cc; }

View file

@ -26,16 +26,20 @@
});
this.each(function () {
// TODO: Fix options
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;
$this = $(this),
$menu = $('#' + $this.data('dropdown-menu')),
isPullRight = $this.data('dropdown-align') != undefined,
isAjax = $this.data('dropdown-ajax') != undefined,
isChangeText = $this.data('dropdown-change-text') == undefined,
isAppendToBody = $this.data('dropdown-append-to-body') == undefined;
$menu.appendTo('body');
if (isAppendToBody) $menu.appendTo('body');
// Set text
options.defaultActiveText = $this.data('dropdown-default-text') || options.defaultActiveText;
if (isChangeText) {
var activeText = $menu.find('li.active').text();
$this.text(activeText.length > 0 ? activeText : options.defaultActiveText);
@ -43,12 +47,12 @@
// Resize
$(window).resize(function () {
positionMenu($this, $menu, isFloatRight);
positionMenu($this, $menu, isPullRight , isAppendToBody);
});
// Click
$this.click(function () {
positionMenu($this, $menu, isFloatRight);
positionMenu($this, $menu, isPullRight , isAppendToBody);
menuToggle($this, $menu);
hideDropdowns($this, $menu);
return false;
@ -57,8 +61,8 @@
if (isAjax) {
$menu.find('li > a').click(function () {
if (isChangeText) $this.text($(this).text());
$menu.find('li').removeClass('active');
$(this).parent('li').addClass('active');
$menu.find('li').removeClass('open');
$(this).parent('li').addClass('open');
menuToggle($this, $menu);
});
}
@ -66,27 +70,27 @@
// Hide dropdowns
function hideDropdowns (currentDropdown, currentMenu) {
objects.not(currentDropdown).removeClass('active');
objects.not(currentDropdown).removeClass('open');
$('.dropdown-menu:visible').not(currentMenu).hide(); // TODO: Fix selector
}
// Position menu
function positionMenu (toggle, menu, isFloatRight) {
function positionMenu (toggle, menu, isPullRight , isAppendToBody) {
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'
'top': isAppendToBody ? pos.top + height + options.menuTopOffset : height + options.menuTopOffset,
'left': isAppendToBody ? ( isPullRight ? 'auto' : pos.left ) : 0,
'right': isAppendToBody ? ( isPullRight ? $(window).width() - pos.left - width : 'auto' ) : 'auto'
});
}
// Menu toggle
function menuToggle(toggle, menu) {
toggle.toggleClass('active');
toggle.toggleClass('open');
menu.toggle();
}
};

View file

@ -0,0 +1,43 @@
/*
* Tabs
*
* Author: Denis Shakhov
* Version: 1.0
*
*/
(function($) {
$.fn.tab = function (options) {
var tabsSelector = '[data-toggle=tabs]';
this.each(function () {
var
$this = $(this),
$tabFirst = $this.closest(tabsSelector).find('li').eq(0);
if (!$tabFirst.hasClass('active')) activateTab($tabFirst);
// Click
$this.click(function () {
activateTab($this);
return false;
});
});
// Activate tab
function activateTab (tab) {
var
$pane = $('#' + tab.data('tab-target')),
dropdown = tab.closest('ul').parent('li');
tab.addClass('active').closest(tabsSelector).find('li').not(tab).removeClass('active');
if (dropdown.length > 0) dropdown.addClass('active');
$pane.show().parent('.tabs-content').find('.tab-pane').not($pane).hide();
}
};
})(jQuery);
// Init
jQuery(document).ready(function($){
$('[data-toggle=tab]').tab();
});

View file

@ -94,7 +94,7 @@
{hook run='profile_sidebar_menu_before' oUserProfile=$oUserProfile}
<section class="block block-type-profile-nav">
<ul class="nav nav-pills nav-profile">
<ul class="nav nav-pills nav-stacked">
{hook run='profile_sidebar_menu_item_first' oUserProfile=$oUserProfile}
<li {if $sAction=='profile' && ($aParams[0]=='whois' or $aParams[0]=='')}class="active"{/if}><a href="{$oUserProfile->getUserWebPath()}">{$aLang.user_menu_profile_whois}</a></li>
<li {if $sAction=='profile' && $aParams[0]=='wall'}class="active"{/if}><a href="{$oUserProfile->getUserWebPath()}wall/">{$aLang.user_menu_profile_wall}{if ($iCountWallUser)>0} ({$iCountWallUser}){/if}</a></li>

View file

@ -14,8 +14,8 @@ body {
/* Ссылки
---------------------------------------------------- */
a { color: #5055b2; text-decoration: none; }
a:hover { color: #06e; }
a { color: #08c; text-decoration: none; }
a:hover { color: #058; }
.text a:visited,
.topic .topic-header .topic-title a:visited,
@ -29,10 +29,10 @@ a:hover { color: #06e; }
.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; }
.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.open { background: transparent; color: #9496ea; }
.page-header.page-header-publish .dropdown-toggle.open:after { border-top-color: #9496ea; }
.header-table { margin-bottom: 0; border-bottom: 1px solid #eee; padding-bottom: 5px; font-size: 14px; font-weight: bold; }

View file

@ -0,0 +1,7 @@
/* Synio's nav-menu support
-------------------------------------------------- */
.nav.nav-menu { margin-bottom: 15px; }
.nav.nav-menu > li { margin-right: 3px; }
.nav.nav-menu > li > a { border-radius: 2px; padding: 5px 12px; background: #f5f5f5; color: #888; }
.nav.nav-menu > li > a:hover { background: #eaeaea; }
.nav.nav-menu > li.active > a { background: #2891d3; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); color: #fff; }

View file

@ -1,6 +1,6 @@
<h3 class="profile-page-header">{$aLang.user_menu_publication}</h3>
<ul class="nav nav-pills nav-pills-profile">
<ul class="nav nav-pills mb-30">
<li {if $sMenuSubItemSelect=='topics'}class="active"{/if}>
<a href="{$oUserProfile->getUserWebPath()}created/topics/">{$aLang.topic_title} {if $iCountTopicUser} ({$iCountTopicUser}) {/if}</a>
</li>

View file

@ -1,6 +1,6 @@
<h3 class="profile-page-header">{$aLang.user_menu_profile_favourites}</h3>
<ul class="nav nav-pills nav-pills-profile">
<ul class="nav nav-pills mb-30">
<li {if $sMenuSubItemSelect=='topics'}class="active"{/if}>
<a href="{$oUserProfile->getUserWebPath()}favourites/topics/">{$aLang.user_menu_profile_favourites_topics} {if $iCountTopicFavourite} ({$iCountTopicFavourite}) {/if}</a>
</li>
@ -11,4 +11,4 @@
{hook run='menu_profile_favourite_item' oUserProfile=$oUserProfile}
</ul>
{hook run='menu_profile_favourite' oUserProfile=$oUserProfile}
{hook run='menu_profile_favourite' oUserProfile=$oUserProfile}

View file

@ -23,6 +23,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.root.server___/templates/framework/js/tab.js';
$config['head']['default']['js'][] = '___path.static.skin___/js/template.js';
$config['head']['default']['css'] = array(
@ -30,10 +31,10 @@ $config['head']['default']['css'] = array(
"___path.root.server___/templates/framework/css/reset.css",
"___path.root.server___/templates/framework/css/helpers.css",
"___path.root.server___/templates/framework/css/text.css",
"___path.root.server___/templates/framework/css/dropdowns.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",
@ -44,6 +45,7 @@ $config['head']['default']['css'] = array(
"___path.static.skin___/css/grid.css",
"___path.static.skin___/css/common.css",
"___path.static.skin___/css/icons.css",
"___path.static.skin___/css/navs.css",
"___path.static.skin___/css/tables.css",
"___path.static.skin___/css/topic.css",
"___path.static.skin___/css/comments.css",