From c09087262c29c093762e91b280fa452c7b935ce9 Mon Sep 17 00:00:00 2001 From: marijus Date: Wed, 19 Feb 2014 18:42:37 +0100 Subject: bootstrapify the nav --- view/css/bootstrap-red.css | 48 +++++ view/css/default.css | 14 +- view/css/widgets.css | 3 + view/js/main.js | 89 +++------ view/theme/redbasic/css/style.css | 88 ++++---- view/theme/redbasic/tpl/theme_settings.tpl | 4 +- view/tpl/head.tpl | 1 + view/tpl/nav.tpl | 311 ++++++++++++++++------------- 8 files changed, 308 insertions(+), 250 deletions(-) diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css index 73c06fd4b..89117ac1c 100644 --- a/view/css/bootstrap-red.css +++ b/view/css/bootstrap-red.css @@ -65,3 +65,51 @@ margin-left: 0px; float:none; margin-left:0px; } + +/* nav overrides */ + +nav .badge { + position: relative; + top: -48px; + float: left; + font-size: 10px; + padding: 2px 6px; + cursor: pointer; +} + +nav .dropdown-menu { + top: 51px; + max-height: 450px; + max-width: 300px; + overflow-y: auto; + margin-top: 0px; +} + +nav .dropdown-menu .contactname { + padding-top: 2px; + font-weight: bold; + display: block; +} + +nav .dropdown-menu img { + float: left; + margin-right: 5px; + width: 32px; + height: 32px; +} + +nav .dropdown-menu li a { + overflow: hidden; + text-overflow: ellipsis; + line-height: 1em; + padding: 5px 10px; +} + +nav .navbar-collapse { + max-height: 450px; +} + +nav .navbar-right li:last-child { + padding-right: 20px; +} +/* nav overrides end */ diff --git a/view/css/default.css b/view/css/default.css index 27df38dee..4afcbf1d5 100644 --- a/view/css/default.css +++ b/view/css/default.css @@ -1,18 +1,8 @@ - -nav { - height: 24px; - display: block; - position: fixed; - width: 100%; - z-index: 100; - background-color: #ff0000; -} - aside#region_1 { display: block; width: 210px; position: absolute; - top: 48px; + top: 65px; left: 0; margin-left: 10px; } @@ -24,7 +14,7 @@ aside input[type='text'] { section { position: absolute; - top: 48px; + top: 65px; left: 250px; display: block; right: 15px; diff --git a/view/css/widgets.css b/view/css/widgets.css index 7ad6d79e5..dcda66b81 100644 --- a/view/css/widgets.css +++ b/view/css/widgets.css @@ -109,6 +109,9 @@ opacity: 0; } +li:hover .group-edit-icon { + opacity: 1; +} /* affinity - slider */ #main-slider { diff --git a/view/js/main.js b/view/js/main.js index 44cb79949..fa96596f4 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -197,58 +197,34 @@ /* setup field_richtext */ setupFieldRichtext(); - /* popup menus */ - function close_last_popup_menu() { - if(last_popup_menu) { - last_popup_menu.hide(); -/* last_popup_button.removeClass("selected"); */ - last_popup_menu = null; - last_popup_button = null; - } - } /* Turn elements with one of our special rel tags into popup menus */ + /* CHANGES: let bootstrap handle popups and only do the loading here */ $('a[rel^=#]').click(function(e){ manage_popup_menu(this,e); - return false; + return; }); $('span[rel^=#]').click(function(e){ manage_popup_menu(this,e); - return false; + return; }); function manage_popup_menu(w,e) { - close_last_popup_menu(); menu = $( $(w).attr('rel') ); - e.preventDefault(); - e.stopPropagation(); - if (menu.attr('popup')=="false") return false; -/* $(w).parent().toggleClass("selected"); */ + /* notification menus are loaded dynamically * - here we find a rel tag to figure out what type of notification to load */ + var loader_source = $(menu).attr('rel'); if(typeof(loader_source) != 'undefined' && loader_source.length) { notify_popup_loader(loader_source); } - menu.toggle(); - if (menu.css("display") == "none") { - last_popup_menu = null; - last_popup_button = null; - } else { - last_popup_menu = menu; - last_popup_button = $(w).parent(); - } - return false; } - - $('html').click(function() { - close_last_popup_menu(); - }); - + // fancyboxes $("a.popupbox").fancybox({ 'transitionIn' : 'elastic', @@ -324,46 +300,46 @@ if(data.network == 0) { data.network = ''; - $('#net-update').removeClass('show') + $('.net-update').removeClass('show') } else { - $('#net-update').addClass('show') + $('.net-update').addClass('show') } - $('#net-update').html(data.network); + $('.net-update').html(data.network); - if(data.home == 0) { data.home = ''; $('#home-update').removeClass('show') } else { $('#home-update').addClass('show') } - $('#home-update').html(data.home); + if(data.home == 0) { data.home = ''; $('.home-update').removeClass('show') } else { $('.home-update').addClass('show') } + $('.home-update').html(data.home); - if(data.intros == 0) { data.intros = ''; $('#intro-update').removeClass('show') } else { $('#intro-update').addClass('show') } - $('#intro-update').html(data.intros); + if(data.intros == 0) { data.intros = ''; $('.intro-update').removeClass('show') } else { $('.intro-update').addClass('show') } + $('.intro-update').html(data.intros); - if(data.mail == 0) { data.mail = ''; $('#mail-update').removeClass('show') } else { $('#mail-update').addClass('show') } - $('#mail-update').html(data.mail); + if(data.mail == 0) { data.mail = ''; $('.mail-update').removeClass('show') } else { $('.mail-update').addClass('show') } + $('.mail-update').html(data.mail); - if(data.notify == 0) { data.notify = ''; $('#notify-update').removeClass('show') } else { $('#notify-update').addClass('show') } - $('#notify-update').html(data.notify); + if(data.notify == 0) { data.notify = ''; $('.notify-update').removeClass('show') } else { $('.notify-update').addClass('show') } + $('.notify-update').html(data.notify); - if(data.register == 0) { data.register = ''; $('#register-update').removeClass('show') } else { $('#register-update').addClass('show') } - $('#register-update').html(data.register); + if(data.register == 0) { data.register = ''; $('.register-update').removeClass('show') } else { $('.register-update').addClass('show') } + $('.register-update').html(data.register); - if(data.events == 0) { data.events = ''; $('#events-update').removeClass('show') } else { $('#events-update').addClass('show') } - $('#events-update').html(data.events); + if(data.events == 0) { data.events = ''; $('.events-update').removeClass('show') } else { $('.events-update').addClass('show') } + $('.events-update').html(data.events); - if(data.events_today == 0) { data.events_today = ''; $('#events-today-update').removeClass('show') } else { $('#events-today-update').addClass('show') } - $('#events-today-update').html(data.events_today); + if(data.events_today == 0) { data.events_today = ''; $('.events-today-update').removeClass('show') } else { $('.events-today-update').addClass('show') } + $('.events-today-update').html(data.events_today); - if(data.birthdays == 0) { data.birthdays = ''; $('#birthdays-update').removeClass('show') } else { $('#birthdays-update').addClass('show') } - $('#birthdays-update').html(data.birthdays); + if(data.birthdays == 0) { data.birthdays = ''; $('.birthdays-update').removeClass('show') } else { $('.birthdays-update').addClass('show') } + $('.birthdays-update').html(data.birthdays); - if(data.birthdays_today == 0) { data.birthdays_today = ''; $('#birthdays-today-update').removeClass('show') } else { $('#birthdays-today-update').addClass('show') } - $('#birthdays-today-update').html(data.birthdays_today); + if(data.birthdays_today == 0) { data.birthdays_today = ''; $('.birthdays-today-update').removeClass('show') } else { $('.birthdays-today-update').addClass('show') } + $('.birthdays-today-update').html(data.birthdays_today); - if(data.all_events == 0) { data.all_events = ''; $('#all_events-update').removeClass('show') } else { $('#all_events-update').addClass('show') } - $('#all_events-update').html(data.all_events); - if(data.all_events_today == 0) { data.all_events_today = ''; $('#all_events-today-update').removeClass('show') } else { $('#all_events-today-update').addClass('show') } - $('#all_events-today-update').html(data.all_events_today); + if(data.all_events == 0) { data.all_events = ''; $('.all_events-update').removeClass('show') } else { $('.all_events-update').addClass('show') } + $('.all_events-update').html(data.all_events); + if(data.all_events_today == 0) { data.all_events_today = ''; $('.all_events-today-update').removeClass('show') } else { $('.all_events-today-update').addClass('show') } + $('.all_events-today-update').html(data.all_events_today); $(data.notice).each(function() { @@ -671,8 +647,7 @@ function updateConvItems(mode,data) { $(data.notify).each(function() { - text = ""+this.name+"" + ' ' + this.message + '
'; - html = notifications_tpl.format(this.notify_link,this.photo,text,this.when,this.class); + html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.class); $("#nav-" + notifyType + "-menu").append(html); }); diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 78fdac0cd..127f09683 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -140,6 +140,8 @@ blockquote { filter:alpha(opacity=100); } +/* this is not yet supported + nav { background-image: linear-gradient(bottom, $nav_bg_1 26%, $nav_bg_2 82%); background-image: -o-linear-gradient(bottom, $nav_bg_1 26%, $nav_bg_2 82%); @@ -151,8 +153,6 @@ nav { } - - nav:hover { background-image: linear-gradient(bottom, $nav_bg_3 26%, $nav_bg_4 82%); background-image: -o-linear-gradient(bottom, $nav_bg_3 26%, $nav_bg_4 82%); @@ -163,7 +163,7 @@ nav:hover { filter:alpha(opacity=100); } - +*/ nav #site-location { color: #888a85; @@ -204,15 +204,15 @@ header #site-location { } header #banner { - overflow: hidden; text-align: center; - font-size: 1.4em; + font-size: 14px; font-family: tahoma, "Lucida Sans", sans; color: $banner_colour; font-weight: bold; - margin-top: 1px; + margin: 14px; } + header #banner a, header #banner a:active, header #banner a:visited, @@ -879,8 +879,8 @@ footer { } #nav-search-spinner { - float: right; - margin: 12px 12px 0px 0px; + float: left; + margin: 25px 0px 0px 25px; color: #fff; } @@ -892,6 +892,7 @@ footer { #nav-search-text { height: 20px; + margin: 15px; padding: 0px 5px 0px 5px; border-radius: 10px; border: none; @@ -919,11 +920,6 @@ footer { font-family: FontAwesome; } -#nav-user-linkmenu img { - border-radius: $radiuspx; - margin-top: -4px; -} - .nav-dropdown-indicator { opacity: 0.8; filter:alpha(opacity=80); @@ -1548,8 +1544,8 @@ div.jGrowl div.info { #nav-search-text-ac .autocomplete { position: fixed; - top: 24px; - border: 1px solid $nav_bg_1; + top: 51px; + border: 1px solid #222; border-top: none; } @@ -1628,26 +1624,6 @@ nav .fakelink:hover { text-decoration: none; } color: #000000; } -nav ul { - margin: 0px; - padding: 0px 20px; -} -nav ul li { - list-style: none; - margin: 0px; - padding: 0px; - float: left; -} -nav ul li .menu-popup { - left: 0px; - right: auto; - top: 33px; -} - -#nav-user-linkmenu { - margin-left: 5px; -} - nav .nav-menu-icon { position: relative; height: 22px; @@ -1785,13 +1761,10 @@ header { position: fixed; left: 43%; right: 43%; - top: 0px; margin: 0px; padding: 0px; - /*width: 100%; height: 12px; */ - - z-index: 110; - color: #ffffff; + z-index: 1400; + color: #fff; } @@ -2469,3 +2442,38 @@ img.mail-list-sender-photo { border-radius: $radiuspx; background-color: #eee; } + +/* nav bootstrap */ +nav i { + font-size: 14px; +} + +nav img { + height: 47px; + width: 47px; + margin: 2px 0px 1px 10px; + border-radius: $radiuspx; +} + +nav ul li { + max-height: 50px +} + +nav a, +nav a:active, +nav a:visited, +nav a:link { + color: #333; +} + +nav .badge { + border-radius: $radiuspx; +} + +nav .dropdown-menu { + font-size: $body_font_size; + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-right-radius: $radiuspx; + border-bottom-left-radius: $radiuspx; +} diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl index ca05986a2..cc573d99e 100644 --- a/view/theme/redbasic/tpl/theme_settings.tpl +++ b/view/theme/redbasic/tpl/theme_settings.tpl @@ -4,7 +4,7 @@ {{if $expert}} -{{include file="field_select.tpl" field=$nav_colour}} +{{* include file="field_select.tpl" field=$nav_colour *}} {{include file="field_input.tpl" field=$banner_colour}} {{include file="field_input.tpl" field=$link_colour}} {{include file="field_input.tpl" field=$bgcolour}} @@ -19,7 +19,7 @@ {{include file="field_input.tpl" field=$radius}} {{include file="field_input.tpl" field=$shadow}} {{include file="field_input.tpl" field=$converse_width}} -{{include file="field_input.tpl" field=$nav_min_opacity}} +{{* include file="field_input.tpl" field=$nav_min_opacity *}} {{include file="field_input.tpl" field=$top_photo}} {{include file="field_input.tpl" field=$reply_photo}} {{include file="field_checkbox.tpl" field=$sloppy_photos}} diff --git a/view/tpl/head.tpl b/view/tpl/head.tpl index eb4c6c2ad..b96c46dd7 100755 --- a/view/tpl/head.tpl +++ b/view/tpl/head.tpl @@ -1,5 +1,6 @@ + + -