revisit media breakpoints - do not switch to mobile view to early.

author: Mario Vavti <mario@mariovavti.com> 2017-11-19 21:41:45 +0100
committer: Mario Vavti <mario@mariovavti.com> 2017-11-19 21:41:45 +0100
commit: 3efe144fa0c455529a3f6244557d1253885134cf (patch)
tree: d3f8b9bf3da6da75fcacc3cd7881ecefdf605a3e /view
parent: 744960d36d636f8840f8bcea13283ea7f97cc4e6 (diff)
download: volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.tar.gz
volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.tar.bz2
volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.zip
8 files changed, 36 insertions, 24 deletions
diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index 18efd69e4..a0b7c5bba 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -11,7 +11,7 @@ nav .dropdown-menu {
 	min-width: 16rem;
 }
 
-@media screen and (min-width: 767px) {
+@media screen and (min-width: 992px) {
 	nav .badge {
 		top: 0px;
 		left: 0px;
@@ -19,7 +19,7 @@ nav .dropdown-menu {
 	}
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 992px) {
 	.navbar {
 		padding: .5rem 7px;
 	}
diff --git a/view/js/main.js b/view/js/main.js
index 026036300..ddd876689 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -451,20 +451,20 @@ function NavUpdate() {
 			updateCountsOnly = false;
 
 			if(data.network || data.home || data.intros || data.register || data.mail || data.all_events || data.notify || data.files || data.pubs) {
-				$('#notifications-btn').css('opacity', 1);
+				$('.notifications-btn').css('opacity', 1);
 			}
 			else {
-				$('#notifications-btn').css('opacity', 0.5);
+				$('.notifications-btn').css('opacity', 0.5);
 				$('#navbar-collapse-1').removeClass('show');
 			}
 
 			if(data.home || data.intros || data.register || data.mail || data.notify || data.files) {
-				$('#notifications-btn-icon').removeClass('fa-exclamation-circle');
-				$('#notifications-btn-icon').addClass('fa-exclamation-triangle');
+				$('.notifications-btn-icon').removeClass('fa-exclamation-circle');
+				$('.notifications-btn-icon').addClass('fa-exclamation-triangle');
 			}
 			if(!data.home && !data.intros && !data.register && !data.mail && !data.notify && !data.files) {
-				$('#notifications-btn-icon').removeClass('fa-exclamation-triangle');
-				$('#notifications-btn-icon').addClass('fa-exclamation-circle');
+				$('.notifications-btn-icon').removeClass('fa-exclamation-triangle');
+				$('.notifications-btn-icon').addClass('fa-exclamation-circle');
 			}
 
 			$.each(data, function(index, item) {
diff --git a/view/php/default.php b/view/php/default.php
index b180a6eb8..06cecc56f 100644
--- a/view/php/default.php
+++ b/view/php/default.php
@@ -8,7 +8,7 @@
 <body <?php if($page['direction']) echo 'dir="rtl"' ?> >
 	<?php if(x($page,'banner')) echo $page['banner']; ?>
 	<header><?php if(x($page,'header')) echo $page['header']; ?></header>
-	<nav class="navbar fixed-top navbar-expand-xl navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav>
+	<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav>
 	<main>
 		<aside id="region_1"><div id="left_aside_spacer"><div id="left_aside_wrapper"><?php if(x($page,'aside')) echo $page['aside']; ?></div></div></aside>
 		<section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?>
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 6df5a060b..0bdb4bc27 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1484,7 +1484,7 @@ blockquote {
 	color: $nav_active_icon_colour;
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 992px) {
 
 	aside#region_1 {
 		border-right: 1px solid $nav_bd;
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index ed9ef02aa..41f5eb7ce 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -8,7 +8,7 @@ $(document).ready(function() {
 	$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
 	if( $('#css3-calc').width() == 10) {
 		$(window).resize(function() {
-			if($(window).width() < 767) {
+			if($(window).width() < 992) {
 				$('main').css('width', $(window).width() + $('aside').outerWidth() );
 			} else {
 				$('main').css('width', '100%' );
@@ -17,7 +17,7 @@ $(document).ready(function() {
 	}
 	$('#css3-calc').remove(); // Remove the test element
 
-	if($(window).width() >= 767) {
+	if($(window).width() >= 992) {
 		$('#left_aside_wrapper').stick_in_parent({
 			offset_top: parseInt($('aside').css('padding-top')),
 			parent: 'main',
@@ -25,7 +25,7 @@ $(document).ready(function() {
 		});
 	}
 
-	if($(window).width() >= 1200) {
+	if($(window).width() >= 992) {
 		$('#right_aside_wrapper').stick_in_parent({
 			offset_top: parseInt($('aside').css('padding-top')),
 			parent: 'main',
@@ -77,7 +77,9 @@ $(document).ready(function() {
 		}
 	});
 
-	$('#notifications-btn').click(function() {
+	$('.notifications-btn').click(function(e) {
+		e.preventDefault();
+		e.stopPropagation();
 		if($('#navbar-collapse-2').hasClass('show')){
 			$('#navbar-collapse-2').removeClass('show');
 		}
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 426d32047..62524ad5b 100755
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -1,5 +1,5 @@
 {{if $nav.login && !$userinfo}}
-<div class="d-xl-none pt-1 pb-1">
+<div class="d-lg-none pt-1 pb-1">
 	{{if $nav.loginmenu.1.4}}
 	<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-toggle="modal" data-target="#nav-login">
 		{{$nav.loginmenu.1.1}}
@@ -76,12 +76,12 @@
 		<i class="fa fa-question-circle"></i>
 	</button>
 	{{/if}}
-	<button id="expand-aside" type="button" class="d-md-none navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
+	<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
 		<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
 	</button>
 	{{if $localuser || $nav.pubs}}
-	<button id="notifications-btn" type="button" class="navbar-toggler border-0 text-white">
-		<i id="notifications-btn-icon" class="fa fa-exclamation-circle"></i>
+	<button id="notifications-btn-1" type="button" class="navbar-toggler border-0 text-white notifications-btn">
+		<i id="notifications-btn-icon-1" class="fa fa-exclamation-circle notifications-btn-icon"></i>
 	</button>
 	{{/if}}
 	<button id="menu-btn" class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbar-collapse-2">
@@ -134,6 +134,11 @@
 			<a class="nav-link {{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}" onclick="contextualHelp(); return false;"><i class="fa fa-fw fa-question-circle"></i></a>
 		</li>
 		{{/if}}
+		{{if $localuser || $nav.pubs}}
+		<li id="notifications-btn" class="nav-item d-xl-none">
+			<a class="nav-link text-white notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle  notifications-btn-icon"></i></a>
+		</li>
+		{{/if}}
 		{{if $channel_menu && $channel_apps.0}}
 		<li class="nav-item dropdown" id="channel-menu">
 			<a class="nav-link" href="#" data-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
@@ -179,7 +184,7 @@
 		</li>
 	</ul>
 </div>
-<div class="collapse d-xl-none" id="navbar-collapse-2">
+<div class="collapse d-lg-none" id="navbar-collapse-2">
 	<div class="navbar-nav mr-auto">
 		{{if $channel_apps.0}}
 		{{foreach $channel_apps as $channel_app}}
diff --git a/view/tpl/navbar_tucson.tpl b/view/tpl/navbar_tucson.tpl
index faf8b5b4a..4e045571f 100755
--- a/view/tpl/navbar_tucson.tpl
+++ b/view/tpl/navbar_tucson.tpl
@@ -1,5 +1,5 @@
 {{if $nav.login && !$userinfo}}
-<div class="d-xl-none pt-1 pb-1">
+<div class="d-lg-none pt-1 pb-1">
 	{{if $nav.loginmenu.1.4}}
 	<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-toggle="modal" data-target="#nav-login">
 		{{$nav.loginmenu.1.1}}
@@ -87,8 +87,8 @@
 	</button>
 
 	{{if $localuser || $nav.pubs}}
-	<button id="notifications-btn" type="button" class="navbar-toggler border-0 text-white" data-toggle="collapse" data-target="#navbar-collapse-1">
-		<i id="notifications-btn-icon" class="fa fa-exclamation"></i>
+	<button id="notifications-btn-1" type="button" class="navbar-toggler border-0 text-white notifications-btn" data-toggle="collapse" data-target="#navbar-collapse-1">
+		<i id="notifications-btn-icon-1" class="fa fa-exclamation notifications-btn-icon"></i>
 	</button>
 	{{/if}}
 
@@ -231,6 +231,11 @@
 			<a class="nav-link {{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}" onclick="contextualHelp(); return false;"><i class="fa fa-fw fa-question-circle"></i></a>
 		</li>
 		{{/if}}
+		{{if $localuser || $nav.pubs}}
+		<li id="notifications-btn" class="nav-item d-xl-none">
+			<a class="nav-link text-white notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle  notifications-btn-icon"></i></a>
+		</li>
+		{{/if}}
 		{{if $channel_apps.0}}
 		<li class="nav-item dropdown" id="channel-menu">
 			<a class="nav-link" href="#" data-toggle="dropdown"><img src="{{$channel_thumb}}" style="height:14px; width:14px;position:relative; top:-2px;" /></a>
@@ -258,7 +263,7 @@
 </div>
 
 
-<div class="collapse d-xl-none" id="navbar-collapse-2">
+<div class="collapse d-lg-none" id="navbar-collapse-2">
 	<div class="navbar-nav mr-auto">
 		{{if $channel_apps.0}}
 		{{foreach $channel_apps as $channel_app}}
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index fda2d3511..8168866ad 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -2,7 +2,7 @@
 	var notifications_parent;
 	$(document).ready(function() {
 		notifications_parent = $('#notifications_wrapper')[0].parentElement.id;
-		$('#notifications-btn').click(function() {
+		$('.notifications-btn').click(function() {
 			if($('#notifications_wrapper').hasClass('fs'))
 				$('#notifications_wrapper').prependTo('#' + notifications_parent);
 			else
author	Mario Vavti <mario@mariovavti.com>	2017-11-19 21:41:45 +0100
committer	Mario Vavti <mario@mariovavti.com>	2017-11-19 21:41:45 +0100
commit	3efe144fa0c455529a3f6244557d1253885134cf (patch)
tree	d3f8b9bf3da6da75fcacc3cd7881ecefdf605a3e /view
parent	744960d36d636f8840f8bcea13283ea7f97cc4e6 (diff)
download	volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.tar.gz volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.tar.bz2 volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.zip