aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2017-11-19 21:41:45 +0100
committerMario Vavti <mario@mariovavti.com>2017-11-19 21:41:45 +0100
commit3efe144fa0c455529a3f6244557d1253885134cf (patch)
treed3f8b9bf3da6da75fcacc3cd7881ecefdf605a3e
parent744960d36d636f8840f8bcea13283ea7f97cc4e6 (diff)
downloadvolse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.tar.gz
volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.tar.bz2
volse-hubzilla-3efe144fa0c455529a3f6244557d1253885134cf.zip
revisit media breakpoints - do not switch to mobile view to early.
Diffstat
-rw-r--r--view/css/bootstrap-red.css4
-rw-r--r--view/js/main.js12
-rw-r--r--view/php/default.php2
-rw-r--r--view/theme/redbasic/css/style.css2
-rw-r--r--view/theme/redbasic/js/redbasic.js10
-rwxr-xr-xview/tpl/navbar_default.tpl15
-rwxr-xr-xview/tpl/navbar_tucson.tpl13
-rw-r--r--view/tpl/notifications_widget.tpl2
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-02 16:44:19 +0000