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;
}
@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;
}

12
view/js/main.js
View File

@ -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) {

2
view/php/default.php
View File

@ -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']; ?>

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

@ -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;

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>');
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');
}

15
view/tpl/navbar_default.tpl
View File

@ -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}}

13
view/tpl/navbar_tucson.tpl
View File

@ -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}}

2
view/tpl/notifications_widget.tpl
View File

@ -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