harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mario Vavti 2017-11-19 21:41:45 +01:00
parent 744960d36d
commit 3efe144fa0
8 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
view/css/bootstrap-red.css vendored
View File

@ -11,7 +11,7 @@ nav .dropdown-menu {
min-width: 16rem; min-width: 16rem;
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 992px) {
nav .badge { nav .badge {
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -19,7 +19,7 @@ nav .dropdown-menu {
} }
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 992px) {
.navbar { .navbar {
padding: .5rem 7px; padding: .5rem 7px;
} }

12
view/js/main.js
View File

@ -451,20 +451,20 @@ function NavUpdate() {
updateCountsOnly = false; updateCountsOnly = false;
if(data.network || data.home || data.intros || data.register || data.mail || data.all_events || data.notify || data.files || data.pubs) { 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 { else {
$('#notifications-btn').css('opacity', 0.5); $('.notifications-btn').css('opacity', 0.5);
$('#navbar-collapse-1').removeClass('show'); $('#navbar-collapse-1').removeClass('show');
} }
if(data.home || data.intros || data.register || data.mail || data.notify || data.files) { if(data.home || data.intros || data.register || data.mail || data.notify || data.files) {
$('#notifications-btn-icon').removeClass('fa-exclamation-circle'); $('.notifications-btn-icon').removeClass('fa-exclamation-circle');
$('#notifications-btn-icon').addClass('fa-exclamation-triangle'); $('.notifications-btn-icon').addClass('fa-exclamation-triangle');
} }
if(!data.home && !data.intros && !data.register && !data.mail && !data.notify && !data.files) { if(!data.home && !data.intros && !data.register && !data.mail && !data.notify && !data.files) {
$('#notifications-btn-icon').removeClass('fa-exclamation-triangle'); $('.notifications-btn-icon').removeClass('fa-exclamation-triangle');
$('#notifications-btn-icon').addClass('fa-exclamation-circle'); $('.notifications-btn-icon').addClass('fa-exclamation-circle');
} }
$.each(data, function(index, item) { $.each(data, function(index, item) {

2
view/php/default.php
View File

@ -8,7 +8,7 @@
<body <?php if($page['direction']) echo 'dir="rtl"' ?> > <body <?php if($page['direction']) echo 'dir="rtl"' ?> >
<?php if(x($page,'banner')) echo $page['banner']; ?> <?php if(x($page,'banner')) echo $page['banner']; ?>
<header><?php if(x($page,'header')) echo $page['header']; ?></header> <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> <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> <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']; ?> <section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?>

2
view/theme/redbasic/css/style.css
View File

@ -1484,7 +1484,7 @@ blockquote {
color: $nav_active_icon_colour; color: $nav_active_icon_colour;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 992px) {
aside#region_1 { aside#region_1 {
border-right: 1px solid $nav_bd; border-right: 1px solid $nav_bd;

10
view/theme/redbasic/js/redbasic.js
View File

@ -8,7 +8,7 @@ $(document).ready(function() {
$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>'); $('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
if( $('#css3-calc').width() == 10) { if( $('#css3-calc').width() == 10) {
$(window).resize(function() { $(window).resize(function() {
if($(window).width() < 767) { if($(window).width() < 992) {
$('main').css('width', $(window).width() + $('aside').outerWidth() ); $('main').css('width', $(window).width() + $('aside').outerWidth() );
} else { } else {
$('main').css('width', '100%' ); $('main').css('width', '100%' );
@ -17,7 +17,7 @@ $(document).ready(function() {
} }
$('#css3-calc').remove(); // Remove the test element $('#css3-calc').remove(); // Remove the test element
if($(window).width() >= 767) { if($(window).width() >= 992) {
$('#left_aside_wrapper').stick_in_parent({ $('#left_aside_wrapper').stick_in_parent({
offset_top: parseInt($('aside').css('padding-top')), offset_top: parseInt($('aside').css('padding-top')),
parent: 'main', parent: 'main',
@ -25,7 +25,7 @@ $(document).ready(function() {
}); });
} }
if($(window).width() >= 1200) { if($(window).width() >= 992) {
$('#right_aside_wrapper').stick_in_parent({ $('#right_aside_wrapper').stick_in_parent({
offset_top: parseInt($('aside').css('padding-top')), offset_top: parseInt($('aside').css('padding-top')),
parent: 'main', 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')){ if($('#navbar-collapse-2').hasClass('show')){
$('#navbar-collapse-2').removeClass('show'); $('#navbar-collapse-2').removeClass('show');
} }

15
view/tpl/navbar_default.tpl
View File

@ -1,5 +1,5 @@
{{if $nav.login && !$userinfo}} {{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}} {{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"> <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}} {{$nav.loginmenu.1.1}}
@ -76,12 +76,12 @@
<i class="fa fa-question-circle"></i> <i class="fa fa-question-circle"></i>
</button> </button>
{{/if}} {{/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> <i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
</button> </button>
{{if $localuser || $nav.pubs}} {{if $localuser || $nav.pubs}}
<button id="notifications-btn" type="button" class="navbar-toggler border-0 text-white"> <button id="notifications-btn-1" type="button" class="navbar-toggler border-0 text-white notifications-btn">
<i id="notifications-btn-icon" class="fa fa-exclamation-circle"></i> <i id="notifications-btn-icon-1" class="fa fa-exclamation-circle notifications-btn-icon"></i>
</button> </button>
{{/if}} {{/if}}
<button id="menu-btn" class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbar-collapse-2"> <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> <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> </li>
{{/if}} {{/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}} {{if $channel_menu && $channel_apps.0}}
<li class="nav-item dropdown" id="channel-menu"> <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> <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> </li>
</ul> </ul>
</div> </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"> <div class="navbar-nav mr-auto">
{{if $channel_apps.0}} {{if $channel_apps.0}}
{{foreach $channel_apps as $channel_app}} {{foreach $channel_apps as $channel_app}}

13
view/tpl/navbar_tucson.tpl
View File

@ -1,5 +1,5 @@
{{if $nav.login && !$userinfo}} {{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}} {{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"> <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}} {{$nav.loginmenu.1.1}}
@ -87,8 +87,8 @@
</button> </button>
{{if $localuser || $nav.pubs}} {{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"> <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" class="fa fa-exclamation"></i> <i id="notifications-btn-icon-1" class="fa fa-exclamation notifications-btn-icon"></i>
</button> </button>
{{/if}} {{/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> <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> </li>
{{/if}} {{/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}} {{if $channel_apps.0}}
<li class="nav-item dropdown" id="channel-menu"> <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> <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>
<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"> <div class="navbar-nav mr-auto">
{{if $channel_apps.0}} {{if $channel_apps.0}}
{{foreach $channel_apps as $channel_app}} {{foreach $channel_apps as $channel_app}}

2
view/tpl/notifications_widget.tpl
View File

@ -2,7 +2,7 @@
var notifications_parent; var notifications_parent;
$(document).ready(function() { $(document).ready(function() {
notifications_parent = $('#notifications_wrapper')[0].parentElement.id; notifications_parent = $('#notifications_wrapper')[0].parentElement.id;
$('#notifications-btn').click(function() { $('.notifications-btn').click(function() {
if($('#notifications_wrapper').hasClass('fs')) if($('#notifications_wrapper').hasClass('fs'))
$('#notifications_wrapper').prependTo('#' + notifications_parent); $('#notifications_wrapper').prependTo('#' + notifications_parent);
else else