Desarrollado breadcrumb flotante

This commit is contained in:
imnavajas
2024-01-13 23:13:44 +01:00
parent d7a1c7f756
commit 2ef4db18f2
5 changed files with 83 additions and 34 deletions

View File

@ -23,7 +23,7 @@ CI_ENVIRONMENT = development
#-------------------------------------------------------------------- #--------------------------------------------------------------------
#app.baseURL = 'https://sk-dev.imnavajas.es' #app.baseURL = 'https://sk-dev.imnavajas.es'
app.baseURL = 'https://sk-jjo.imnavajas.es' app.baseURL = 'https://sk-imn.imnavajas.es'
# app.baseURL = 'https://sk-imn.imnavajas.es' # app.baseURL = 'https://sk-imn.imnavajas.es'
# app.baseURL = "http://safekat.test/" # app.baseURL = "http://safekat.test/"
# app.forceGlobalSecureRequests = false # app.forceGlobalSecureRequests = false

View File

@ -1,24 +1,69 @@
<?php if (isset($breadcrumb)) { ?> <?php if (isset($breadcrumb)) { ?>
<nav aria-label="breadcrumb"> <div id="bc-card" class="card sticky-breadcrumb border border-secondary mb-3">
<ol class="breadcrumb"> <div class="card-header header-elements">
<?php <nav aria-label="breadcrumb">
foreach ($breadcrumb as $item) { <ol class="breadcrumb">
?> <?php
<li class="breadcrumb-item <?= $item['active'] ? 'active' : '' ?>"> foreach ($breadcrumb as $item) {
<a href="<?= $item['route'] ?>"><?= $item['title'] ?></a> ?>
</li> <li class="breadcrumb-item <?= $item['active'] ? 'active' : '' ?>">
<?php <a href="<?= $item['route'] ?>"><?= $item['title'] ?></a>
} </li>
?> <?php
</ol> }
</nav> ?>
</ol>
</nav>
<div id="bc-save-div" class="card-header-elements ms-auto" style="display: none">
<button id="bc-save"
type="button"
class="btn btn-sm btn-primary waves-effect waves-light"
>
<?= lang('Basic.global.Save') ?>
</button>
</div>
</div>
</div>
<?php <?php
} else { ?> } else { ?>
<nav aria-label="breadcrumb"> <div class="card bg-secondary sticky-breadcrumb border border-secondary mb-3">
<ol class="breadcrumb"> <div class="card-header header-elements">
<li class="breadcrumb-item active"> <nav aria-label="breadcrumb">
<a href="<?= site_url(); ?>">Home</a> <ol class="breadcrumb">
</li> <li class="breadcrumb-item active">
</ol> <a href="<?= site_url(); ?>">Home</a>
</nav> </li>
<?php } ?> </ol>
</nav>
</div>
</div>
<?php } ?>
<?= $this->section('additionalInlineJs') ?>
function showBreadCrumbSaveButton(showIt = false){
if(showIt === true){
$('#bc-save-div').show();
$('#bc-card').addClass('bg-warning');
} else if(showIt === false){
$('#bc-save-div').hide();
$('#bc-card').removeClass('bg-warning');
}
}
// SOLO PARA TEST
$(document).on("keypress", function(event) {
if (event.keyCode === 112) {
event.preventDefault();
showBreadCrumbSaveButton(true);
}
});
$('#bc-save').on( "click", function() {
showBreadCrumbSaveButton(false);
alert('click action on save button');
} );
///
<?= $this->endSection() ?>

View File

@ -92,7 +92,6 @@ if (!empty($token) && $tfa == false) {
<script src="<?= site_url('themes/vuexy/vendor/js/helpers.js') ?>"></script> <script src="<?= site_url('themes/vuexy/vendor/js/helpers.js') ?>"></script>
<script src="<?= site_url('themes/vuexy/js/config.js') ?>"></script> <script src="<?= site_url('themes/vuexy/js/config.js') ?>"></script>
</head> </head>
<body> <body>
@ -118,11 +117,6 @@ if (!empty($token) && $tfa == false) {
</div> </div>
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse"> <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
<div class="navbar-nav align-items-center">
<a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
<i class="ti ti-sm"></i>
</a>
</div>
<ul class="navbar-nav flex-row align-items-center ms-auto"> <ul class="navbar-nav flex-row align-items-center ms-auto">
@ -270,6 +264,7 @@ if (!empty($token) && $tfa == false) {
<!--/ User --> <!--/ User -->
</ul> </ul>
</div> </div>
</nav> </nav>
<!-- / Navbar --> <!-- / Navbar -->
@ -278,12 +273,15 @@ if (!empty($token) && $tfa == false) {
<!-- Content --> <!-- Content -->
<div class="container-fluid flex-grow-1 container-p-y"> <div class="container-fluid flex-grow-1 container-p-y">
<h5 class="py-3 mb-4"> <?php
<?php include "breadcrumbs.php" ?> // Include breadcrumbs block
</h5> include "breadcrumbs.php"
?>
<?= $this->renderSection('content') ?>
<?=
// Render the content section
$this->renderSection('content')
?>
</div> </div>
<!-- / Content --> <!-- / Content -->

View File

@ -114,3 +114,9 @@
text-align: center; text-align: center;
margin-top: 1rem; margin-top: 1rem;
} }
.sticky-breadcrumb {
position: sticky;
top: 90px;
z-index: 1020;
}

View File

@ -3985,7 +3985,7 @@ textarea.form-control-lg {
.breadcrumb { .breadcrumb {
--bs-breadcrumb-padding-x: 0; --bs-breadcrumb-padding-x: 0;
--bs-breadcrumb-padding-y: 0; --bs-breadcrumb-padding-y: 0;
--bs-breadcrumb-margin-bottom: 1rem; /* --bs-breadcrumb-margin-bottom: 1rem; IMN */
--bs-breadcrumb-bg: transparent; --bs-breadcrumb-bg: transparent;
--bs-breadcrumb-border-radius: ; --bs-breadcrumb-border-radius: ;
--bs-breadcrumb-divider-color: #4b465c; --bs-breadcrumb-divider-color: #4b465c;