diff --git a/Bootstrap.Admin/Views/Shared/Navigator.cshtml b/Bootstrap.Admin/Views/Shared/Navigator.cshtml
index 36aea27e..525e39e3 100644
--- a/Bootstrap.Admin/Views/Shared/Navigator.cshtml
+++ b/Bootstrap.Admin/Views/Shared/Navigator.cshtml
@@ -1,13 +1,11 @@
@model NavigatorBarModel
\ No newline at end of file
diff --git a/Bootstrap.Admin/Views/Shared/SubMenu.cshtml b/Bootstrap.Admin/Views/Shared/SubMenu.cshtml
deleted file mode 100644
index b760db50..00000000
--- a/Bootstrap.Admin/Views/Shared/SubMenu.cshtml
+++ /dev/null
@@ -1,8 +0,0 @@
-@model Bootstrap.Security.BootstrapMenu
-
\ No newline at end of file
diff --git a/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml b/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml
new file mode 100644
index 00000000..8d6e6d20
--- /dev/null
+++ b/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml
@@ -0,0 +1,8 @@
+@model Bootstrap.Security.BootstrapMenu
+
+ @Model.Name
+ @if (Model.Menus.Count() > 0)
+ {
+ @await Html.PartialAsync("SubNavigation", Model.Menus)
+ }
+
\ No newline at end of file
diff --git a/Bootstrap.Admin/Views/Shared/SubNavigation.cshtml b/Bootstrap.Admin/Views/Shared/SubNavigation.cshtml
index 3999bf3e..5c4032a7 100644
--- a/Bootstrap.Admin/Views/Shared/SubNavigation.cshtml
+++ b/Bootstrap.Admin/Views/Shared/SubNavigation.cshtml
@@ -1,7 +1,7 @@
@model IEnumerable
-
+
@foreach (var menu in Model)
{
- @await Html.PartialAsync("SubMenu", menu)
+ @await Html.PartialAsync("SubNavItem", menu)
}
diff --git a/Bootstrap.Admin/Views/Shared/_Admin.cshtml b/Bootstrap.Admin/Views/Shared/_Admin.cshtml
index ec6b546a..e74016f2 100644
--- a/Bootstrap.Admin/Views/Shared/_Admin.cshtml
+++ b/Bootstrap.Admin/Views/Shared/_Admin.cshtml
@@ -17,12 +17,10 @@
@section javascript {
-
-
diff --git a/Bootstrap.Admin/wwwroot/css/admin-responsive.css b/Bootstrap.Admin/wwwroot/css/admin-responsive.css
index 9e3f5198..ef2fc6f4 100644
--- a/Bootstrap.Admin/wwwroot/css/admin-responsive.css
+++ b/Bootstrap.Admin/wwwroot/css/admin-responsive.css
@@ -16,24 +16,17 @@
}
@media (min-width: 769px) {
+ body {
+ overflow: hidden;
+ }
+
+ .sidebar-open .main-content {
+ margin-left: 0;
+ display: block;
+ }
+
.main-content {
margin-left: 210px;
transition: none;
}
-
- .main-content.open {
- display: block;
- }
-}
-
-@media (min-height: 672px) {
- .main-content {
- position: fixed;
- overflow: auto;
- transition: none;
- }
-
- .main-content.open {
- display: block;
- }
}
diff --git a/Bootstrap.Admin/wwwroot/css/admin.css b/Bootstrap.Admin/wwwroot/css/admin.css
index 618e45a5..14280891 100644
--- a/Bootstrap.Admin/wwwroot/css/admin.css
+++ b/Bootstrap.Admin/wwwroot/css/admin.css
@@ -13,25 +13,19 @@
font-weight: 600;
}
+.sidebar-open .main-content {
+ display: none;
+}
+
.main-content {
- transition: all .4s ease-in-out;
padding: 15px 15px 0 15px;
margin-left: 0;
- height: auto;
left: 0;
bottom: 40px;
right: 0;
top: 98px;
}
- .main-content.open {
- display: none;
- }
-
- .main-content.closed {
- margin-left: 0;
- }
-
.main-content > .panel:last-child .panel-body {
padding-bottom: 0;
}
diff --git a/Bootstrap.Admin/wwwroot/css/site-responsive.css b/Bootstrap.Admin/wwwroot/css/site-responsive.css
index fd9b4897..ea7cfeb7 100644
--- a/Bootstrap.Admin/wwwroot/css/site-responsive.css
+++ b/Bootstrap.Admin/wwwroot/css/site-responsive.css
@@ -22,73 +22,37 @@
}
@media (min-width: 768px) {
- html, body {
- height: 100%;
- overflow: hidden;
- }
-
.sidebar-toggle-box {
flex: 0 1 auto;
}
- .sidebar {
- top: 98px;
- bottom: 40px;
- position: absolute;
- overflow: auto;
- height: auto;
+ .sidebar-open aside {
+ transform: translate(0);
}
- .header {
- border-bottom: none;
+ .header .nav {
+ flex: 1 1 auto;
}
- .header .nav {
- flex: 1 1 auto;
- }
-
.header, .site-footer {
position: fixed;
}
}
@media (min-width: 769px) {
- .sidebar {
- display: block;
- width: 210px;
+ .sidebar-open aside {
+ transform: translate(-100%);
+ }
+
+ .sidebar-open .site-footer {
+ display: flex;
}
aside {
transition: none;
- transform: none;
- top: 0;
- right: auto;
- }
-}
-
-@media (min-height: 672px) {
- html, body {
- height: 100%;
- overflow: hidden;
- }
-
- .header, .site-footer {
- position: fixed;
- }
-
- .sidebar {
- top: 98px;
- bottom: 40px;
- position: absolute;
- overflow: auto;
- height: auto;
- }
-
- aside {
- top: 0;
- }
-
- .aside.open {
transform: translate(0);
+ width: 210px;
+ overflow: auto;
+ bottom: 40px;
}
}
diff --git a/Bootstrap.Admin/wwwroot/css/site.css b/Bootstrap.Admin/wwwroot/css/site.css
index 0d6b3e08..8d30fa73 100644
--- a/Bootstrap.Admin/wwwroot/css/site.css
+++ b/Bootstrap.Admin/wwwroot/css/site.css
@@ -10,6 +10,14 @@ body {
-webkit-overflow-scrolling: touch;
}
+.sidebar-open aside {
+ transform: translate(0);
+}
+
+.sidebar-open .site-footer {
+ display: none;
+}
+
aside {
transition: transform .4s ease-in-out;
transform: translate(-100%);
@@ -18,94 +26,69 @@ aside {
bottom: 0;
left: 0;
right: 0;
- height: auto;
- z-index: 5;
-}
-
- aside.open {
- transform: translate(0);
- }
-
-.sidebar {
- display: none;
- overflow: auto;
- width: 100%;
- z-index: 5;
- height: 100%;
+ z-index: 4;
background: #2a3542;
}
-.sidebar-menu {
+.sidebar {
padding: 20px 0;
- margin-bottom: 0;
+ background: inherit;
}
- .sidebar-menu .dcjq-icon {
- height: 17px;
- width: 17px;
- display: inline-block;
- background: url(../images/nav-expand.png) no-repeat;
- float: right;
- margin-top: 3px;
- }
-
- .sidebar-menu .active .dcjq-icon {
- background-position: bottom;
- }
-
- .sidebar-menu li {
+ .sidebar .nav-item {
margin: 5px 10px;
}
- .sidebar-menu li a {
- color: #aeb2b7;
- display: block;
- padding: 15px 10px;
- transition: all 0.3s ease;
- border-radius: 4px;
+ .sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
+ background: #35404d;
+ color: #fff;
}
- .sidebar-menu li a:hover, .sidebar-menu li a:focus {
- background: #35404d;
- color: #fff;
- }
-
- .sidebar-menu li a.active {
- color: #FF6C60;
- }
-
- .sidebar-menu li a i {
- width: 22px;
- }
-
- .sidebar-menu li .sub {
- padding-left: 0;
+ .sidebar .nav-item.active > .nav-link {
+ color: #FF6C60;
}
- .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
- color: #FF6C60;
- transition: all 0.3s ease;
- display: block;
+ .sidebar .nav-link {
+ color: #aeb2b7;
+ padding: 15px 10px;
+ transition: all .3s linear;
+ display: flex;
+ align-items: center;
+ }
+
+ .sidebar .nav-link .dcjq-icon {
+ height: 17px;
+ width: 17px;
+ background: url(../images/nav-expand.png) no-repeat;
+ margin-left: auto;
+ }
+
+ .sidebar .nav-link i {
+ width: 22px;
+ }
+
+ .sidebar .nav-link.active, .sidebar .nav-link.active + .sub,
+ .sidebar .sub .sub .nav-item .nav-link:hover, .sidebar .sub .sub .nav-item .nav-link:focus {
+ background: #35404D;
+ }
+
+ .sidebar .nav-link.active .dcjq-icon {
+ background-position: bottom;
}
- .sidebar-menu li .sub li {
- background: #35404D;
- margin: 0;
- padding: 0 10px 0 32px;
- }
+ .sidebar .sub .nav-item.dcjq-parent-li {
+ margin-left: 0;
+ margin-right: 0;
+ }
- .sidebar-menu li .sub li:last-child {
- border-radius: 0 0 4px 4px;
- padding-bottom: 10px;
- }
+ .sidebar .sub .nav-item.dcjq-parent-li .nav-link {
+ padding-left: 20px;
+ }
- .sidebar-menu li .sub li a {
- padding: 12px 0;
- }
-
-ul li {
- list-style: none;
-}
+ .sidebar .sub .dcjq-parent-li .nav-link.active, .sidebar .sub .dcjq-parent-li .nav-link.active + .sub,
+ .sidebar .sub .nav-item .nav-link:hover, .sidebar .sub .nav-item .nav-link:focus {
+ background: #3a4756;
+ }
.modal-body .dd {
margin-bottom: 15px;
@@ -316,7 +299,7 @@ a, a:hover, a:focus {
left: 0;
bottom: 0;
right: 0;
- z-index: 1;
+ z-index: 100;
display: flex;
}
diff --git a/Bootstrap.Admin/wwwroot/js/common-scripts.js b/Bootstrap.Admin/wwwroot/js/common-scripts.js
index 24e1d5d6..c1505822 100644
--- a/Bootstrap.Admin/wwwroot/js/common-scripts.js
+++ b/Bootstrap.Admin/wwwroot/js/common-scripts.js
@@ -133,18 +133,12 @@ $(function () {
"hideMethod": "fadeOut"
};
- var $sidebar = $("#sidebar");
- var $sideMenu = $sidebar.find('.sidebar-menu');
- var $main = $('#main-content');
- var $breadNav = $('#breadNav');
+ var $sideMenu = $(".sidebar");
$sideMenu.dcAccordion({
autoExpand: true
});
- // custom scrollbar
- if (!$.browser.versions.ios) $("#sidebar").niceScroll({ cursorcolor: "#e8403f", cursorwidth: '3px', background: '#2a3542', spacebarenabled: false, cursorborder: '' });
-
$("#gotoTop").on('click', function (e) {
e.preventDefault();
$('#main-content, .content-body, body').animate({
@@ -153,38 +147,52 @@ $(function () {
});
// breadcrumb
+ var $breadNav = $('#breadNav');
var arch = $sideMenu.find('a.active').last();
if (arch.text() !== "") $breadNav.removeClass('d-none').text(arch.text());
- // sidebar scroll animate
- var top = (arch.offset() || { top: 0 }).top;
- if (top > 0) {
- var middle = $('header').outerHeight() + $sidebar.outerHeight() / 2;
- if (top > middle) $sidebar.animate({ scrollTop: top + arch.outerHeight() / 2 - middle }, 500);
- }
+ $.fn.extend({
+ autoScrollSidebar: function (options) {
+ var $this = this;
+ var option = $.extend({ target: null, offsetTop: 0 }, options);
+ var navItem = option.target;
+ var top = navItem.offset().top + $this.scrollTop() - $('header').outerHeight() + option.offsetTop;
- $sidebar.on('click', 'a.dcjq-parent', function () {
- var o = $(this).offset();
- diff = 110 - o.top;
- if (diff > 0)
- $sidebar.scrollTo("-=" + Math.abs(diff), 500);
- else
- $sidebar.scrollTo("+=" + Math.abs(diff), 500);
+ // sidebar scroll animate
+ var middle = $this.outerHeight() / 2;
+ if (top > middle) $this.animate({ scrollTop: top - middle }, 500, function () {
+ $this.resizeNiceScroll();
+ });
+ return this;
+ },
+ resizeNiceScroll: function () {
+ if (!$.browser.versions.ios) this.getNiceScroll().resize();
+ return this;
+ },
+ addNiceScroll: function () {
+ if (!$.browser.versions.ios) {
+ var nice = this.data('__nicescroll') || false;
+ if (!nice) this.niceScroll({ cursorcolor: "#e8403f", cursorwidth: '3px', background: '#2a3542', spacebarenabled: false, cursorborder: '' });
+ }
+ return this;
+ }
+ });
- // resize nicscroll
- $sidebar.getNiceScroll().resize();
+ // custom scrollbar
+ var $sidebar = $('aside').addNiceScroll();
+ $sidebar.autoScrollSidebar({ target: arch.parent(), offsetTop: arch.parent().innerHeight() / 2 });
+
+ $sideMenu.on('click', 'a.dcjq-parent', function () {
+ var $this = $(this);
+ if (!$this.hasClass('active')) {
+ setTimeout(function () { $sidebar.resizeNiceScroll(); }, 500);
+ return;
+ }
+ $sidebar.autoScrollSidebar({ target: $(this).parent(), offsetTop: 25.5 });
});
$('.sidebar-toggle-box').on('click', function () {
- if ($sidebar.is(":visible")) {
- $main.addClass('closed').removeClass('open');
- $sidebar.parent().toggleClass('open');
- $(window).width() <= 768 ? setTimeout(function () { $sidebar.hide(); }, 400) : $sidebar.hide();
- } else {
- $sidebar.show();
- $sidebar.parent().toggleClass('open');
- $(window).width() <= 768 ? setTimeout(function () { $main.addClass('open').removeClass('closed'); }, 400) : $main.addClass('open').removeClass('closed');
- }
+ $('body').toggleClass('sidebar-open');
});
$('[data-toggle="dropdown"].dropdown-select').dropdown('select');
@@ -214,4 +222,13 @@ $(function () {
if (result.length > 0) this.reloadWidget();
}
});
+
+ $(window).on('resize', function () {
+ if ($(window).width() > 768) {
+ $sidebar.addNiceScroll();
+ }
+ else {
+ $sidebar.removeAttr('style').getNiceScroll().remove();
+ }
+ });
});
\ No newline at end of file
diff --git a/Bootstrap.Admin/wwwroot/js/jquery.scrollTo.js b/Bootstrap.Admin/wwwroot/js/jquery.scrollTo.js
deleted file mode 100644
index 6ff824c3..00000000
--- a/Bootstrap.Admin/wwwroot/js/jquery.scrollTo.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/*!
- * jQuery.scrollTo
- * Copyright (c) 2007-2015 Ariel Flesler - aflesler ○ gmail • com | http://flesler.blogspot.com
- * Licensed under MIT
- * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
- * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
- * @author Ariel Flesler
- * @version 2.1.2
- */
-; (function (factory) {
- 'use strict';
- if (typeof define === 'function' && define.amd) {
- // AMD
- define(['jquery'], factory);
- } else if (typeof module !== 'undefined' && module.exports) {
- // CommonJS
- module.exports = factory(require('jquery'));
- } else {
- // Global
- factory(jQuery);
- }
-})(function ($) {
- 'use strict';
-
- var $scrollTo = $.scrollTo = function (target, duration, settings) {
- return $(window).scrollTo(target, duration, settings);
- };
-
- $scrollTo.defaults = {
- axis: 'xy',
- duration: 0,
- limit: true
- };
-
- function isWin(elem) {
- return !elem.nodeName ||
- $.inArray(elem.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) !== -1;
- }
-
- $.fn.scrollTo = function (target, duration, settings) {
- if (typeof duration === 'object') {
- settings = duration;
- duration = 0;
- }
- if (typeof settings === 'function') {
- settings = { onAfter: settings };
- }
- if (target === 'max') {
- target = 9e9;
- }
-
- settings = $.extend({}, $scrollTo.defaults, settings);
- // Speed is still recognized for backwards compatibility
- duration = duration || settings.duration;
- // Make sure the settings are given right
- var queue = settings.queue && settings.axis.length > 1;
- if (queue) {
- // Let's keep the overall duration
- duration /= 2;
- }
- settings.offset = both(settings.offset);
- settings.over = both(settings.over);
-
- return this.each(function () {
- // Null target yields nothing, just like jQuery does
- if (target === null) return;
-
- var win = isWin(this),
- elem = win ? this.contentWindow || window : this,
- $elem = $(elem),
- targ = target,
- attr = {},
- toff;
-
- switch (typeof targ) {
- // A number will pass the regex
- case 'number':
- case 'string':
- if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
- targ = both(targ);
- // We are done
- break;
- }
- // Relative/Absolute selector
- targ = win ? $(targ) : $(targ, elem);
- /* falls through */
- case 'object':
- if (targ.length === 0) return;
- // DOMElement / jQuery
- if (targ.is || targ.style) {
- // Get the real position of the target
- toff = (targ = $(targ)).offset();
- }
- }
-
- var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
-
- $.each(settings.axis.split(''), function (i, axis) {
- var Pos = axis === 'x' ? 'Left' : 'Top',
- pos = Pos.toLowerCase(),
- key = 'scroll' + Pos,
- prev = $elem[key](),
- max = $scrollTo.max(elem, axis);
-
- if (toff) {// jQuery / DOMElement
- attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
-
- // If it's a dom element, reduce the margin
- if (settings.margin) {
- attr[key] -= parseInt(targ.css('margin' + Pos), 10) || 0;
- attr[key] -= parseInt(targ.css('border' + Pos + 'Width'), 10) || 0;
- }
-
- attr[key] += offset[pos] || 0;
-
- if (settings.over[pos]) {
- // Scroll to a fraction of its width/height
- attr[key] += targ[axis === 'x' ? 'width' : 'height']() * settings.over[pos];
- }
- } else {
- var val = targ[pos];
- // Handle percentage values
- attr[key] = val.slice && val.slice(-1) === '%' ?
- parseFloat(val) / 100 * max
- : val;
- }
-
- // Number or 'number'
- if (settings.limit && /^\d+$/.test(attr[key])) {
- // Check the limits
- attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
- }
-
- // Don't waste time animating, if there's no need.
- if (!i && settings.axis.length > 1) {
- if (prev === attr[key]) {
- // No animation needed
- attr = {};
- } else if (queue) {
- // Intermediate animation
- animate(settings.onAfterFirst);
- // Don't animate this axis again in the next iteration.
- attr = {};
- }
- }
- });
-
- animate(settings.onAfter);
-
- function animate(callback) {
- var opts = $.extend({}, settings, {
- // The queue setting conflicts with animate()
- // Force it to always be true
- queue: true,
- duration: duration,
- complete: callback && function () {
- callback.call(elem, targ, settings);
- }
- });
- $elem.animate(attr, opts);
- }
- });
- };
-
- // Max scrolling position, works on quirks mode
- // It only fails (not too badly) on IE, quirks mode.
- $scrollTo.max = function (elem, axis) {
- var Dim = axis === 'x' ? 'Width' : 'Height',
- scroll = 'scroll' + Dim;
-
- if (!isWin(elem))
- return elem[scroll] - $(elem)[Dim.toLowerCase()]();
-
- var size = 'client' + Dim,
- doc = elem.ownerDocument || elem.document,
- html = doc.documentElement,
- body = doc.body;
-
- return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
- };
-
- function both(val) {
- return $.isFunction(val) || $.isPlainObject(val) ? val : { top: val, left: val };
- }
-
- // Add special hooks so that window scroll properties can be animated
- $.Tween.propHooks.scrollLeft =
- $.Tween.propHooks.scrollTop = {
- get: function (t) {
- return $(t.elem)[t.prop]();
- },
- set: function (t) {
- var curr = this.get(t);
- // If interrupt is true and user scrolled, stop animating
- if (t.options.interrupt && t._last && t._last !== curr) {
- return $(t.elem).stop();
- }
- var next = Math.round(t.now);
- // Don't waste CPU
- // Browsers don't render floating point scroll
- if (curr !== next) {
- $(t.elem)[t.prop](next);
- t._last = this.get(t);
- }
- }
- };
-
- // AMD requirement
- return $scrollTo;
-});
\ No newline at end of file
diff --git a/Bootstrap.Admin/wwwroot/js/jquery.scrollTo.min.js b/Bootstrap.Admin/wwwroot/js/jquery.scrollTo.min.js
deleted file mode 100644
index 9d1aa7b2..00000000
--- a/Bootstrap.Admin/wwwroot/js/jquery.scrollTo.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2007-2013 Ariel Flesler - afleslergmailcom | http://flesler.blogspot.com
- * Dual licensed under MIT and GPL.
- * @author Ariel Flesler
- * @version 1.4.6
- */
-;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,targ,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
diff --git a/Bootstrap.Client/Views/Shared/Navigator.cshtml b/Bootstrap.Client/Views/Shared/Navigator.cshtml
index 71971d13..370826ea 100644
--- a/Bootstrap.Client/Views/Shared/Navigator.cshtml
+++ b/Bootstrap.Client/Views/Shared/Navigator.cshtml
@@ -1,13 +1,11 @@
@model NavigatorBarModel
\ No newline at end of file
diff --git a/Bootstrap.Client/Views/Shared/SubMenu.cshtml b/Bootstrap.Client/Views/Shared/SubMenu.cshtml
index e6d5f2ef..66efedb8 100644
--- a/Bootstrap.Client/Views/Shared/SubMenu.cshtml
+++ b/Bootstrap.Client/Views/Shared/SubMenu.cshtml
@@ -1,5 +1,5 @@
@model Bootstrap.Security.BootstrapMenu
--
@Model.Name
@if (Model.Menus.Count() > 0)
{
diff --git a/Bootstrap.Client/wwwroot/css/site-responsive.css b/Bootstrap.Client/wwwroot/css/site-responsive.css
index dca64ace..271677b5 100644
--- a/Bootstrap.Client/wwwroot/css/site-responsive.css
+++ b/Bootstrap.Client/wwwroot/css/site-responsive.css
@@ -35,22 +35,11 @@
flex: 1 1 auto;
}
- .site-footer {
- position: fixed;
+ .sidebar-open aside {
+ transform: translate(-100%);
}
- aside {
- display: none;
- }
-}
-
-@media (min-height: 672px) {
- html, body {
- height: 100%;
- overflow: hidden;
- }
-
- .site-footer {
- position: fixed;
+ .sidebar-open .site-footer {
+ display: flex;
}
}
diff --git a/Bootstrap.Client/wwwroot/css/site.css b/Bootstrap.Client/wwwroot/css/site.css
index b3dc26d3..534804ff 100644
--- a/Bootstrap.Client/wwwroot/css/site.css
+++ b/Bootstrap.Client/wwwroot/css/site.css
@@ -10,6 +10,14 @@ body {
-webkit-overflow-scrolling: touch;
}
+.sidebar-open aside {
+ transform: translate(0);
+}
+
+.sidebar-open .site-footer {
+ display: none;
+}
+
aside {
transition: transform .4s ease-in-out;
transform: translate(-100%);
@@ -18,31 +26,25 @@ aside {
bottom: 0;
left: 0;
right: 0;
- height: auto;
- z-index: 5;
+ z-index: 4;
+ background: #2a3542;
}
- aside.open {
- transform: translate(0);
- }
-
.sidebar {
- overflow: auto;
- width: 100%;
- z-index: 5;
- height: 100%;
- background: #2a3542;
- background-image: url('../images/bird.png');
- background-repeat: no-repeat;
- background-position: 96% 98%;
-}
-
-.sidebar-menu {
padding: 20px 0;
margin-bottom: 0;
+ background: inherit;
}
- .sidebar-menu .dcjq-icon {
+ .sidebar .dcjq-parent-li, .sidebar li a.active, .sidebar li a.active + .sub {
+ background: #35404D;
+ }
+
+ .sidebar .sub .dcjq-parent-li, .sidebar .sub li a.active, .sidebar .sub li a.active + .sub {
+ background: #3a4756;
+ }
+
+ .sidebar .dcjq-icon {
height: 17px;
width: 17px;
display: inline-block;
@@ -51,15 +53,15 @@ aside {
margin-top: 3px;
}
- .sidebar-menu .active .dcjq-icon {
+ .sidebar .active .dcjq-icon {
background-position: bottom;
}
- .sidebar-menu li {
+ .sidebar li {
margin: 5px 10px;
}
- .sidebar-menu li a {
+ .sidebar li a {
color: #aeb2b7;
display: block;
padding: 15px 10px;
@@ -67,43 +69,46 @@ aside {
border-radius: 4px;
}
- .sidebar-menu li a:hover, .sidebar-menu li a:focus {
+ .sidebar li a:hover, .sidebar li a:focus {
background: #35404d;
color: #fff;
}
- .sidebar-menu li a.active {
+ .sidebar li a.active {
color: #FF6C60;
}
- .sidebar-menu li a i {
+ .sidebar li a i {
width: 22px;
}
- .sidebar-menu li .sub {
+ .sidebar li .sub {
padding-left: 0;
}
- .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
- color: #FF6C60;
- transition: all 0.3s ease;
- display: block;
- }
+ .sidebar > li > .sub a:hover, .sidebar > li > .sub .active > a {
+ color: #FF6C60;
+ transition: all 0.3s ease;
+ display: block;
+ }
- .sidebar-menu li .sub li {
- background: #35404D;
- margin: 0;
- padding: 0 10px 0 32px;
- }
+ .sidebar > li > .sub a:hover, .sidebar > li > .sub a:focus {
+ background: none;
+ }
- .sidebar-menu li .sub li:last-child {
- border-radius: 0 0 4px 4px;
- padding-bottom: 10px;
- }
+ .sidebar li .sub li {
+ margin: 0;
+ padding: 0 10px 0 32px;
+ }
- .sidebar-menu li .sub li a {
- padding: 12px 0;
- }
+ .sidebar li .sub li:last-child {
+ border-radius: 0 0 4px 4px;
+ padding-bottom: 10px;
+ }
+
+ .sidebar li .sub li a {
+ padding: 12px 0;
+ }
ul li {
list-style: none;
diff --git a/Bootstrap.Client/wwwroot/js/common-scripts.js b/Bootstrap.Client/wwwroot/js/common-scripts.js
index a22c87bd..c0944cc3 100644
--- a/Bootstrap.Client/wwwroot/js/common-scripts.js
+++ b/Bootstrap.Client/wwwroot/js/common-scripts.js
@@ -15,8 +15,8 @@
"hideMethod": "fadeOut"
};
- var $sidebar = $("#sidebar");
- var $sideMenu = $sidebar.find('.sidebar-menu');
+ var $sidebar = $('aside');
+ var $sideMenu = $(".sidebar");
var $breadNav = $('#breadNav');
$sideMenu.dcAccordion({
@@ -44,7 +44,7 @@
if (top > middle) $sidebar.animate({ scrollTop: top + arch.outerHeight() / 2 - middle }, 500);
}
- $sidebar.on('click', 'a.dcjq-parent', function () {
+ $sideMenu.on('click', 'a.dcjq-parent', function () {
var o = $(this).offset();
diff = 110 - o.top;
if (diff > 0)
@@ -56,9 +56,8 @@
$sidebar.getNiceScroll().resize();
});
- $('.sidebar-toggle-box').on('click', function (e) {
- e.preventDefault();
- if ($(window).width() < 768) $sidebar.parent().toggleClass('open');
+ $('.sidebar-toggle-box').on('click', function () {
+ $('body').toggleClass('sidebar-open');
});
$('[data-toggle="dropdown"].dropdown-select').dropdown('select');