Merge branch 'develop' into 'master'

navbar-move

See merge request harukin/hubzillatheme!22
This commit is contained in:
harukin 2019-01-31 17:03:06 +09:00
commit fd3bf94e5c
3 changed files with 429 additions and 135 deletions

View File

@ -1526,8 +1526,8 @@ blockquote {
}
#nav-app-link-wrapper.has_location {
/*カスタマイズ*/
min-width: 0;
flex-basis: 25%;
}
#nav-app-link-wrapper {
@ -2104,17 +2104,26 @@ a[title*="pawoo.net"]::after {
display: none;
}
#notifications a::before{
#notifications a::before {
position: absolute;
left: 38px;
top: 30px;
}
.generic-content-wrapper .section-content-wrapper .contact-entry-wrapper .contact-entry-photo-wrapper a::before{
.generic-content-wrapper
.section-content-wrapper
.contact-entry-wrapper
.contact-entry-photo-wrapper
a::before {
position: absolute;
}
#notifications a::after, .generic-content-wrapper .section-content-wrapper .contact-entry-wrapper .contact-entry-photo-wrapper a::after{
#notifications a::after,
.generic-content-wrapper
.section-content-wrapper
.contact-entry-wrapper
.contact-entry-photo-wrapper
a::after {
display: none;
}
@ -2155,6 +2164,30 @@ a[title*="pawoo.net"]::after {
width: 100%;
max-width: $converse_widthpx;
}
nav .navbar-text > div {
font-size: 0px;
}
nav .navbar-nav > .text-truncate {
font-size: 0px;
position: absolute;
left: 68px;
top: 33px;
}
@media screen and (min-width: 450px) {
nav .navbar-nav > .text-truncate {
font-size: unset;
margin-left: 5px;
position: unset;
left: unset;
top: unset;
}
#nav-app-link-wrapper.has_location {
/*カスタマイズ*/
min-width: 0;
}
}
@media screen and (min-width: 993px) {
.region_3-on {
left: 0px;
@ -2176,6 +2209,10 @@ a[title*="pawoo.net"]::after {
margin-left: calc(calc(50% - $converse_widts) / 2);
margin-right: calc(calc(50% - $converse_widts) / 2);
}
nav .navbar-text > div {
font-size: unset;
}
}
@media screen and (min-width: $converse_widtd) {
.toplevel_item {
@ -2194,3 +2231,8 @@ a[title*="pawoo.net"]::after {
.comment-edit-preview .toplevel_item {
width: calc(100% - 16px);
}
.dropdown-menu.show {
position: absolute;
left: -215px;
}

View File

@ -2,156 +2,171 @@
* plusfuture theme specific JavaScript
*/
$(document).ready(function () {
$(document).ready(function() {
// CSS3 calc() fallback (for unsupported browsers)
$("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() < 992) {
$("main").css("width", $(window).width() + $("aside").outerWidth());
} else {
$("main").css("width", "100%");
}
});
}
$("#css3-calc").remove(); // Remove the test element
// CSS3 calc() fallback (for unsupported browsers)
$('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() < 992) {
$('main').css('width', $(window).width() + $('aside').outerWidth());
} else {
$('main').css('width', '100%');
}
});
}
$('#css3-calc').remove(); // Remove the test element
if ($(window).width() >= 992) {
$("#left_aside_wrapper, #right_aside_wrapper").stick_in_parent({
offset_top: parseInt($("aside").css("padding-top")),
parent: "main",
spacer: ".aside_spacer"
});
}
$("#expand-aside").on("click", toggleAside);
if ($(window).width() >= 992) {
$('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({
offset_top: parseInt($('aside').css('padding-top')),
parent: 'main',
spacer: '.aside_spacer'
});
}
$('#expand-aside').on('click', toggleAside);
$("section").on("click", function() {
if ($("main").hasClass("region_1-on")) {
toggleAside();
}
});
$('section').on('click', function () {
if ($('main').hasClass('region_1-on')) {
toggleAside();
}
});
$("section").on("click", function() {
if ($("main").hasClass("region_3-on")) {
if ($(window).width() < 982) {
toggleBside();
}
}
});
$('section').on('click', function () {
if ($('main').hasClass('region_3-on')) {
if ($(window).width() < 982) {
toggleBside();
}
}
});
var left_aside_height = $("#left_aside_wrapper").height();
var left_aside_height = $('#left_aside_wrapper').height();
$("#left_aside_wrapper").on("click", function() {
if (left_aside_height != $("#left_aside_wrapper").height()) {
$(document.body).trigger("sticky_kit:recalc");
left_aside_height = $("#left_aside_wrapper").height();
}
});
$('#left_aside_wrapper').on('click', function () {
if (left_aside_height != $('#left_aside_wrapper').height()) {
$(document.body).trigger("sticky_kit:recalc");
left_aside_height = $('#left_aside_wrapper').height();
}
});
var right_aside_height = $("#right_aside_wrapper").height();
$("#right_aside_wrapper").on("click", function() {
if (right_aside_height != $("#right_aside_wrapper").height()) {
$(document.body).trigger("sticky_kit:recalc");
right_aside_height = $("#right_aside_wrapper").height();
}
});
var right_aside_height = $('#right_aside_wrapper').height();
$(".usermenu").click(function() {
if ($("#navbar-collapse-1, #navbar-collapse-2").hasClass("show")) {
$("#navbar-collapse-1, #navbar-collapse-2").removeClass("show");
}
});
$('#right_aside_wrapper').on('click', function () {
if (right_aside_height != $('#right_aside_wrapper').height()) {
$(document.body).trigger("sticky_kit:recalc");
right_aside_height = $('#right_aside_wrapper').height();
}
});
$("#menu-btn").click(function() {
if ($("#navbar-collapse-1").hasClass("show")) {
$("#navbar-collapse-1").removeClass("show");
}
});
$('.usermenu').click(function () {
if ($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')) {
$('#navbar-collapse-1, #navbar-collapse-2').removeClass('show');
}
});
$(".notifications-btn").click(function(e) {
e.preventDefault();
e.stopPropagation();
if ($("#navbar-collapse-2").hasClass("show")) {
$("#navbar-collapse-2").removeClass("show");
}
});
$('#menu-btn').click(function () {
if ($('#navbar-collapse-1').hasClass('show')) {
$('#navbar-collapse-1').removeClass('show');
}
});
$("input[data-role=cat-tagsinput]").tagsinput({
tagClass: "badge badge-pill badge-warning text-dark"
});
$('.notifications-btn').click(function (e) {
e.preventDefault();
e.stopPropagation();
if ($('#navbar-collapse-2').hasClass('show')) {
$('#navbar-collapse-2').removeClass('show');
}
});
$("a.disabled").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
$("input[data-role=cat-tagsinput]").tagsinput({
tagClass: 'badge badge-pill badge-warning text-dark'
});
$('a.disabled').click(function (e) {
e.preventDefault();
e.stopPropagation();
});
var doctitle = document.title;
function checkNotify() {
var notifyUpdateElem = document.getElementById('notify-update');
if (notifyUpdateElem !== null) {
if (notifyUpdateElem.innerHTML !== "")
document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle;
else
document.title = doctitle;
}
}
setInterval(function () { checkNotify(); }, 10 * 1000);
var doctitle = document.title;
function checkNotify() {
var notifyUpdateElem = document.getElementById("notify-update");
if (notifyUpdateElem !== null) {
if (notifyUpdateElem.innerHTML !== "")
document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle;
else document.title = doctitle;
}
}
setInterval(function() {
checkNotify();
}, 10 * 1000);
//トップに戻る
$("nav").click(function(e) {
if ($(e.target).is("a")||$(e.target).is("button")||$(e.target).is("img")||$(e.target).is("i")) {
return true;
}
$("body,html").animate(
{
scrollTop: 0
},
150
);
});
});
function makeFullScreen(full) {
if (typeof full == 'undefined' || full == true) {
$('main').addClass('fullscreen');
$('header, nav, aside, #fullscreen-btn').attr('style', 'display:none !important');
$('#inline-btn').show();
}
else {
$('main').removeClass('fullscreen');
$('header, nav, aside, #fullscreen-btn').show();
$('#inline-btn').hide();
$(document.body).trigger("sticky_kit:recalc");
}
if (typeof full == "undefined" || full == true) {
$("main").addClass("fullscreen");
$("header, nav, aside, #fullscreen-btn").attr(
"style",
"display:none !important"
);
$("#inline-btn").show();
} else {
$("main").removeClass("fullscreen");
$("header, nav, aside, #fullscreen-btn").show();
$("#inline-btn").hide();
$(document.body).trigger("sticky_kit:recalc");
}
}
function toggleAside() {
$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
if ($('main').hasClass('region_1-on')) {
$('html, body').css('overflow-x', '');
$('main').removeClass('region_1-on')
$('#overlay').remove();
$('#left_aside_wrapper').trigger("sticky_kit:detach");
}
else {
$('html, body').css('overflow-x', 'hidden');
$('main').addClass('region_1-on')
$('<div id="overlay"></div>').appendTo('section');
$('#left_aside_wrapper').stick_in_parent({
offset_top: $('nav').outerHeight(true) + 10,
parent: '#region_1',
spacer: '#left_aside_spacer'
});
}
$("#expand-aside-icon")
.toggleClass("fa-arrow-circle-right")
.toggleClass("fa-arrow-circle-left");
if ($("main").hasClass("region_1-on")) {
$("html, body").css("overflow-x", "");
$("main").removeClass("region_1-on");
$("#overlay").remove();
$("#left_aside_wrapper").trigger("sticky_kit:detach");
} else {
$("html, body").css("overflow-x", "hidden");
$("main").addClass("region_1-on");
$('<div id="overlay"></div>').appendTo("section");
$("#left_aside_wrapper").stick_in_parent({
offset_top: $("nav").outerHeight(true) + 10,
parent: "#region_1",
spacer: "#left_aside_spacer"
});
}
}
function toggleBside() {
if ($('main').hasClass('region_3-on')) {
$('html, body').css('overflow-x', '');
$('main').removeClass('region_3-on')
$('#region_3').addClass('d-none')
$('#overlay').remove();
$('#right_aside_wrapper').trigger("sticky_kit:detach");
}
else {
$('html, body').css('overflow-x', 'hidden');
$('main').addClass('region_3-on')
$('#region_3').removeClass('d-none')
$('<div id="overlay"></div>').appendTo('section');
$('#right_aside_wrapper').stick_in_parent({
offset_top: $('nav').outerHeight(true) + 10,
parent: '#region_3',
spacer: '#right_aside_spacer'
});
}
}
if ($("main").hasClass("region_3-on")) {
$("html, body").css("overflow-x", "");
$("main").removeClass("region_3-on");
$("#region_3").addClass("d-none");
$("#overlay").remove();
$("#right_aside_wrapper").trigger("sticky_kit:detach");
} else {
$("html, body").css("overflow-x", "hidden");
$("main").addClass("region_3-on");
$("#region_3").removeClass("d-none");
$('<div id="overlay"></div>').appendTo("section");
$("#right_aside_wrapper").stick_in_parent({
offset_top: $("nav").outerHeight(true) + 10,
parent: "#region_3",
spacer: "#right_aside_spacer"
});
}
}

View File

@ -0,0 +1,237 @@
<div style="display: flex;">
<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-bars" id="expand-aside-icon"></i>
</button>
<div id="banner" class="navbar-text">{{$banner}}</div>
{{if $sel.name}}
<div id="nav-app-link-wrapper" class="navbar-nav{{if $sitelocation || ! $settings_url}} has_location mr-auto{{/if}}">
<a id="nav-app-link" href="{{$url}}" class="nav-link text-truncate" style="margin-top: auto; margin-bottom: auto;">
{{$sel.name}}
{{if $sitelocation}}
<br><small>{{$sitelocation}}</small>
{{/if}}
</a>
</div>
{{if $settings_url}}
<div id="nav-app-settings-link-wrapper" class="navbar-nav mr-auto">
<a id="nav-app-settings-link" href="{{$settings_url}}/?f=&rpath={{$url}}" class="nav-link">
<i class="fa fa-fw fa-cog"></i>
</a>
</div>
{{/if}}
{{/if}}
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul id="nav-right" class="navbar-nav ml-auto">
<li class="nav-item collapse clearfix" id="nav-search">
<form class="form-inline" method="get" action="{{$nav.search.4}}" role="search">
<input class="form-control form-control-sm mt-1 mr-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
</form>
<div id="nav-search-spinner" class="spinner-wrapper">
<div class="spinner s"></div>
</div>
</li>
<li class="nav-item" id="nav-search-btn">
<a class="nav-link" href="#nav-search" title="{{$nav.search.3}}" onclick="openMenu('nav-search'); closeMenu('nav-search-btn'); $('#nav-search-text').focus(); return false;"><i class="fa fa-fw fa-search"></i></a>
</li>
{{if $nav.help.6}}
<li class="nav-item dropdown {{$sel.help}}">
<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}}
<li class="nav-item dropdown" id="app-menu">
<a class="nav-link" href="#" data-toggle="dropdown"><i class="fa fa-fw fa-th"></i></a>
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
{{if $channel_apps.0 && ! $channel_menu}}
{{foreach $channel_apps as $channel_app}}
{{$channel_app}}
{{/foreach}}
<div class="dropdown-divider"></div>
<div class="dropdown-header text-black-50 sys-apps-toggle" onclick="$('#dropdown-menu').click(function(e) { e.stopPropagation(); }); openClose('sys_apps');">
{{$sysapps_toggle}}
</div>
<div id="sys_apps" style="display:none;">
{{/if}}
{{foreach $nav_apps as $nav_app}}
{{$nav_app}}
{{/foreach}}
{{if $channel_apps.0 && ! $channel_menu}}
</div>
{{/if}}
{{if $is_owner}}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
<a class="dropdown-item" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
{{/if}}
</div>
</li>
{{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>
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-right">
{{foreach $channel_apps as $channel_app}}
{{$channel_app}}
{{/foreach}}
</div>
</li>
{{/if}}
{{if $navbar_apps}}
{{foreach $navbar_apps as $navbar_app}}
<li>
{{$navbar_app}}
</li>
{{/foreach}}
{{/if}}
</ul>
<ul class="navbar-nav mr-auto" style="margin-right: unset !important;">
{{if $nav.login && !$userinfo}}
<li class="nav-item d-lg-flex">
{{if $nav.loginmenu.1.4}}
<a class="nav-link" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-toggle="modal" data-target="#nav-login">
{{$nav.loginmenu.1.1}}
</a>
{{else}}
<a class="nav-link" href="login" title="{{$nav.loginmenu.1.3}}">
{{$nav.loginmenu.1.1}}
</a>
{{/if}}
</li>
{{/if}}
{{if $nav.register}}
<li class="nav-item {{$nav.register.2}} d-lg-flex">
<a class="nav-link" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a>
</li>
{{/if}}
{{if $nav.alogout}}
<li class="nav-item {{$nav.alogout.2}} d-lg-flex">
<a class="nav-link" href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a>
</li>
{{/if}}
</ul>
</div>
<div style="display: flex;">
<div class="navbar-toggler-right" style="margin-top: auto;margin-bottom: auto;">
{{if $nav.help.6}}
<button id="context-help-btn" class="navbar-toggler border-0" type="button" onclick="contextualHelp(); return false;">
<i class="fa fa-question-circle"></i>
</button>
{{/if}}
<button id="menu-btn" class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbar-collapse-2">
<i class="fa fa-th"></i>
</button>
{{if $localuser || $nav.pubs}}
<button id="notifications-btn-1" type="button" class="navbar-toggler border-0 notifications-btn">
<i id="notifications-btn-icon-1" class="fa fa-exclamation-circle notifications-btn-icon"></i>
</button>
{{/if}}
</div>
{{if $nav.login && !$userinfo}}
<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}}
</a>
{{else}}
<a class="btn btn-primary btn-sm text-white" href="login" title="{{$nav.loginmenu.1.3}}">
{{$nav.loginmenu.1.1}}
</a>
{{/if}}
{{if $nav.register}}
<a class="btn btn-warning btn-sm text-dark" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}" >
{{$nav.register.1}}
</a>
{{/if}}
</div>
{{/if}}
{{if $userinfo}}
<div class="dropdown">
<div class="fakelink usermenu" data-toggle="dropdown">
<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
<i class="fa fa-caret-down"></i>
</div>
{{if $is_owner}}
<div class="dropdown-menu">
{{foreach $nav.usermenu as $usermenu}}
<a class="dropdown-item{{if $usermenu.2}} active{{/if}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a>
{{/foreach}}
{{if $nav.group}}
<a class="dropdown-item" href="{{$nav.group.0}}" title="{{$nav.group.3}}" role="menuitem" id="{{$nav.group.4}}">{{$nav.group.1}}</a>
{{/if}}
{{if $nav.manage}}
<a class="dropdown-item{{if $sel.name == Manage}} active{{/if}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a>
{{/if}}
{{if $nav.channels}}
{{foreach $nav.channels as $chan}}
<a class="dropdown-item" href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem"><i class="fa fa-circle{{if $localuser == $chan.channel_id}} text-success{{else}} invisible{{/if}}"></i> {{$chan.channel_name}}</a>
{{/foreach}}
{{/if}}
{{if $nav.profiles}}
<a class="dropdown-item" href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a>
{{/if}}
{{if $nav.settings}}
<div class="dropdown-divider"></div>
<a class="dropdown-item{{if $sel.name == Settings}} active{{/if}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a>
{{/if}}
{{if $nav.admin}}
<div class="dropdown-divider"></div>
<a class="dropdown-item{{if $sel.name == Admin}} active{{/if}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a>
{{/if}}
{{if $nav.logout}}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a>
{{/if}}
</div>
{{/if}}
{{if ! $is_owner}}
<div class="dropdown-menu" role="menu" aria-labelledby="avatar">
<a class="dropdown-item" href="{{$nav.rusermenu.0}}" role="menuitem">{{$nav.rusermenu.1}}</a>
<a class="dropdown-item" href="{{$nav.rusermenu.2}}" role="menuitem">{{$nav.rusermenu.3}}</a>
</div>
{{/if}}
</div>
{{/if}}
</div>
<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}}
{{$channel_app|replace:'dropdown-item':'nav-link'}}
{{/foreach}}
<div class="dropdown-header text-white-50 sys-apps-toggle" onclick="openClose('sys-apps-collapsed');">
{{$sysapps_toggle}}
</div>
<div id="sys-apps-collapsed" style="display:none;">
{{/if}}
{{foreach $navbar_apps as $navbar_app}}
{{$navbar_app}}
{{/foreach}}
{{foreach $nav_apps as $nav_app}}
{{$nav_app|replace:'dropdown-item':'nav-link'}}
{{/foreach}}
{{if $channel_apps.0}}
</div>
{{/if}}
{{if $is_owner}}
<div class="dropdown-divider"></div>
<a class="nav-link" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
<a class="nav-link" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
{{/if}}
</div>
</div>
{{if $nav.help.6}}
<div id="contextual-help-content" class="contextual-help-content">
{{$nav.help.5}}
<div class="float-right">
<a class="btn btn-primary btn-sm" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-question"></i>&nbsp;{{$fulldocs}}</a>
<a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-times"></i></a>
</div>
</div>
{{/if}}