Skip to content

Commit

Permalink
Reworked base page layout.
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurentmuller
laurentmuller committed Mar 6, 2025
1 parent 814c5ec commit 4749863
Show file tree
Hide file tree
Showing 14 changed files with 111 additions and 125 deletions.
14 changes: 7 additions & 7 deletions composer.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion public/css/diagram.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ body:not(.status-bar) .diagram {
height: calc(100vh - 90px);
}

.page-content:not(.sidebar-show) .diagram {
body:not(.sidebar-show) .diagram {
height: calc(100vh - 180px);
}

Expand Down
20 changes: 2 additions & 18 deletions public/css/sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
align-items: flex-start;
}

.navbar-vertical:not(.sidebar-show) {
body:not(.sidebar-show) .navbar-vertical {
margin-left: calc(var(--sidebar-width) * -1);
}

Expand All @@ -43,15 +43,6 @@
border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color-translucent) !important;
}

html[data-bs-theme=light] .navbar-vertical.navbar-dark .dropdown-divider,
html[data-bs-theme=light] .navbar-vertical.navbar-dark .border-top {
border-top-color: var(--bs-gray-700) !important;
}

html[data-bs-theme=light] .navbar-vertical.navbar-dark .border-bottom {
border-bottom-color: var(--bs-gray-700) !important;
}

.navbar-vertical ul ul {
padding-left: 0.75rem;
}
Expand Down Expand Up @@ -147,15 +138,8 @@ html[data-bs-theme=dark] .navbar-vertical::-webkit-scrollbar-thumb {
width: 100%;
}

.navbar-vertical ul:not(.dropdown-menu-default) .dropdown-item.active,
.navbar-vertical ul:not(.dropdown-menu-default) .dropdown-item:active {
color: var(--bs-emphasis-color);
}

.navbar-vertical .dropdown-menu:not(.dropdown-menu-default) .dropdown-item:hover,
.navbar-vertical .dropdown-menu:not(.dropdown-menu-default) .dropdown-item:focus {
color: var(--bs-navbar-hover-color);
background: none;
color: var(--bs-dropdown-link-active-color) !important;
}

/**
Expand Down
20 changes: 14 additions & 6 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ html {

/* page-content */
.page-content {
transition: margin-top var(--sidebar-delay) ease-in-out, margin-left var(--sidebar-delay) ease-in-out;
transition: margin-left var(--sidebar-delay) ease-in-out;
}

.page-content.sidebar-show {
body.sidebar-show .page-content {
width: calc(100% - var(--sidebar-width));
margin-left: var(--sidebar-width);
margin-top: 1rem;
}

.page-content:not(.sidebar-show) {
body:not(.sidebar-show) .page-content {
width: 100%;
margin: 0;
margin-top: 1rem;
}

@media print {
Expand All @@ -33,8 +33,16 @@ html {
}

/* navbar-horizontal */
.navbar.navbar-horizontal {
margin-bottom: 0.75rem;
.navbar-horizontal {
transition: margin-top var(--sidebar-delay) ease-in-out;
}

body.sidebar-show .navbar-horizontal {
margin-top: -56.5px;
}

body:not(.sidebar-show) .navbar-horizontal {
margin-top: 0;
}

/* navbar-vertical */
Expand Down
26 changes: 13 additions & 13 deletions public/css/toast.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,27 +90,27 @@ html[data-bs-theme=dark] .toast-plugin .toast.border-dark {
}

/* margins */
.page-content:not(.sidebar-show) .toast-plugin.top-left,
.page-content:not(.sidebar-show) .toast-plugin.top-center,
.page-content:not(.sidebar-show) .toast-plugin.top-right {
body:not(.sidebar-show) .toast-plugin.top-left,
body:not(.sidebar-show) .toast-plugin.top-center,
body:not(.sidebar-show) .toast-plugin.top-right {
margin-top: 4rem !important;
}

body.sidebar-show .toast-plugin.top-left,
body.sidebar-show .toast-plugin.center-left,
body.sidebar-show .toast-plugin.bottom-left {
margin-left: var(--sidebar-width) !important;
}

.page-content:has(footer) .toast-plugin.bottom-left,
.page-content:has(footer) .toast-plugin.bottom-center,
.page-content:has(footer) .toast-plugin.bottom-right {
margin-bottom: 2rem !important;
}

.page-content.sidebar-show .toast-plugin.top-left,
.page-content.sidebar-show .toast-plugin.center-left,
.page-content.sidebar-show .toast-plugin.bottom-left {
margin-left: var(--sidebar-width) !important;
}

.page-content.sidebar-show .modal,
.page-content.sidebar-show .toast-plugin.top-center,
.page-content.sidebar-show .toast-plugin.center-center,
.page-content.sidebar-show .toast-plugin.bottom-center {
body.sidebar-show .modal,
body.sidebar-show .toast-plugin.top-center,
body.sidebar-show .toast-plugin.center-center,
body.sidebar-show .toast-plugin.bottom-center {
margin-left: 9rem !important;
}
2 changes: 0 additions & 2 deletions public/js/application/core_common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,6 @@ $(function () {
const $body = $('body');
$body.sidebar({
pathname: 'caller',
verticalTarget: 'body',
horizontalTarget: '.page-content'
});
$body.on('toggle-navigation', () => {
initHorizontalSearch();
Expand Down
83 changes: 46 additions & 37 deletions public/js/plugins/plugin-sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,12 @@ $(function () {
this.hideSidebarProxy = () => this._showHorizontalNavigation();
this.resizeProxy = () => this._resize();

if (this.$verticalNavigation) {
this._initVerticalNavigation();
}

this._initShowButton();
this._initHideButton();
this._highlightPath();
if (this.$verticalNavigation) {
this._initVerticalNavigation()
}

if (!this.$verticalTarget && this.$showButton) {
this._destroyShowButton(true);
Expand All @@ -93,6 +93,10 @@ $(function () {
.trigger('resize');
}

/**
* Initialize the button used to show vertical navigation.
* @private
*/
_initShowButton() {
const options = this.options;
this.$showButton = this._ensureInstance(null, options.showButtonSelector);
Expand All @@ -105,6 +109,10 @@ $(function () {
}
}

/**
* Initialize the button used to hide vertical navigation.
* @private
*/
_initHideButton() {
const options = this.options;
this.$hideButton = this._ensureInstance(null, options.hideButtonSelector);
Expand All @@ -117,11 +125,14 @@ $(function () {
}
}

/**
* Initialize the vertical navigation.
* @private
*/
_initVerticalNavigation() {
this.$verticalNavigation.on('shown.bs.collapse hidden.bs.collapse', 'div.collapse', this.toggleCollapseProxy);
this._updateToggleButtons();
this._updateSiblingMenus();
this._highlightPath();
}

/**
Expand Down Expand Up @@ -211,6 +222,10 @@ $(function () {
}
}

/**
* Load the vertical navigation content.
* @private
*/
_loadVerticalNavigation() {
const that = this;
const options = that.options;
Expand All @@ -237,14 +252,17 @@ $(function () {
});
}

/**
* Load the horizontal navigation content.
* @private
*/
_loadHorizontalNavigation() {
const that = this;
const options = that.options;
if (!options.horizontalUrl || !that.$horizontalTarget) {
that._destroyHideButton(true);
return;
}

that.loading = true;
$.getJSON(options.horizontalUrl, function (response) {
that.loading = false;
Expand All @@ -270,17 +288,11 @@ $(function () {
_toggleNavigation() {
$.hideTooltips();
$.hideDropDownMenus();
const that = this;
const duration = that.options.duration;
const className = that.options.sidebarClassName;
if (that.$verticalNavigation && that.$horizontalTarget) {
that.$verticalNavigation.add(that.$horizontalTarget).toggleClass(className).promise().done(() => {
that.$horizontalNavigation.toggle(duration, () => {
that.$element.trigger('toggle-navigation');
that._saveState();
});
});
}
const className = this.options.sidebarClassName;
this.$element.toggleClass(className)
.trigger('toggle-navigation');
this._highlightPath();
this._saveState();
}

/**
Expand Down Expand Up @@ -325,18 +337,17 @@ $(function () {
/**
* Ensure that the given element has a unique identifier.
*
* @param {jQuery} $element te element to validate.
* @return {string} the unique identifier.
* @param {jQuery} $element the element to validate or update.
* @return {string} the unique identifier selector.
* @private
*/
_ensureId($element) {
const id = $element.attr('id');
if (id) {
return `#${id}`;
let id = $element.attr('id');
if (!id) {
id = 'id-' + Math.floor(Math.random() * Date.now()).toString(16);
$element.attr('id', id);
}
const randomClass = Math.floor(Math.random() * Date.now()).toString(16);
$element.addClass(randomClass);
return `.${randomClass}`;
return '#' + id;
}

/**
Expand All @@ -350,15 +361,16 @@ $(function () {
let paths = search.split('/');
while (paths.length > 1) {
const path = paths.join('/');
const $element = $(`.nav-item a[href="${path}"]`);
const selector = `a[href="${path}"]`;
const $element = $(selector);
if ($element.length) {
$element.addClass('active bg-body-secondary');
if (!$element.hasClass('navbar-brand')) {
$element.addClass(this.options.selectionClassName);
}
break;
}
paths.pop();
}
// active target element
// this.$verticalNavigation.find(`a[href="${search}"]:not(.navbar-brand)`).addClass('active bg-body-secondary');
}

/**
Expand All @@ -369,7 +381,7 @@ $(function () {
// */
_isVerticalNavigationVisible() {
const className = this.options.sidebarClassName;
return this.$verticalNavigation && this.$verticalNavigation.hasClass(className);
return this.$element.hasClass(className);
}

/**
Expand Down Expand Up @@ -489,30 +501,25 @@ $(function () {
menuPrefix: 'MENU_SIDEBAR_',
// the timeout to display/hide sidebar automatically (0 = disabled)
timeout: 1500,
// the duration to show / hide menus
duration: 350,
// the minimum client width to hide sidebar
minWidth: 1200,
// texts
showSidebar: 'Show sidebar',
hideSidebar: 'Hide sidebar',
showMenu: 'Expand menu',
hideMenu: 'Collapse menu',
// the path name to search in query parameters to highlight URL
pathname: null,
// collapse sibling's menus
collapseSiblingMenus: true,

// the URL to load the vertical navigation
verticalUrl: null,
// the selector where to prepend the loaded vertical navigation
verticalTarget: null,
verticalTarget: 'body',
// vertical navigation selector
verticalSelector: '.navbar-vertical',
// the URL to load the horizontal navigation
horizontalUrl: null,
// the selector where to prepend the loaded horizontal navigation
horizontalTarget: null,
horizontalTarget: 'body',
// horizontal navigation selector
horizontalSelector: '.navbar-horizontal',
// show vertical navigation button selector
Expand All @@ -521,6 +528,8 @@ $(function () {
hideButtonSelector: '.hide-sidebar',
// the sidebar show class name
sidebarClassName: 'sidebar-show',
// the selected path class name
selectionClassName: 'bg-body-secondary',
};

/**
Expand Down
Loading

0 comments on commit 4749863

Please sign in to comment.