codigo_artabro/praiadeseselle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Menu offcanvas bootstrap.

Browse source
This commit is contained in:
Laegnur 2023-02-22 18:57:39 +01:00
parent 2efb72b3b6
commit c76feddf1d
3 changed files with 95 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
site/templates/css/style.css
View file

@ -302,13 +302,33 @@ time span
transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem); transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem);
} }
.nav-link.active, .nav-item
.nav-link:hover
{ {
border-left: 0.625rem solid rgb(var(--cor_60));
}
.nav-item.active,
.nav-item:hover
{
border-left: 0.625rem solid rgb(var(--cor_30));
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-style: dotted; text-decoration-style: dotted;
} }
.navbar-toggler-icon
{
color: rgba(var(--cor_10));
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-close:focus
{
outline: 2px dotted rgb(var(--cor_10)) !important;
box-shadow: none;
}
.swiper .swiper
{ {
width: 100%; width: 100%;
@ -388,6 +408,26 @@ a.collapse-head.active:before
background-color: rgba(var(--cor_30), var(--bs-bg-opacity)) !important; background-color: rgba(var(--cor_30), var(--bs-bg-opacity)) !important;
} }
.border-primary
{
border-color: rgba(var(--cor_30), var(--bs-border-opacity)) !important;
}
@media (min-width: 992px)
{
.nav-item,
.nav-item.active,
.nav-item:hover
{
border-left: 0;
}
.navbar-toggler
{
display: none;
}
}
@media (min-width: 1024px) @media (min-width: 1024px)
{ {
dl dl

4
site/templates/layout/func.php
View file

@ -149,13 +149,13 @@ function renderMenu($paxinas, $clase = 'navbar-nav')
} }
$saida .= '<ul class="' . $clase . '">' . "\n"; $saida .= '<ul class="' . $clase . '">' . "\n";
$saida .= '<li class="nav-item">'; $saida .= '<li class="nav-item px-3 px-md-0 ' . (($inicio->id == $actual->id) ? ' active' : '') . '">';
$saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($inicio->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $inicio->url . '">' . mb_strtoupper($inicio->title) . '</a>'; $saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($inicio->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $inicio->url . '">' . mb_strtoupper($inicio->title) . '</a>';
$saida .= '</li>' . "\n"; $saida .= '</li>' . "\n";
foreach($paxinas as $paxina) foreach($paxinas as $paxina)
{ {
$saida .= '<li class="nav-item">'; $saida .= '<li class="nav-item px-3 px-md-0 ' . (($paxina->id == $actual->id) ? ' active' : '') . '">';
$saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($paxina->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $paxina->url . '">' . mb_strtoupper($paxina->title) . '</a>'; $saida .= '<a class="nav-link text-uppercase link-dark px-2' . (($paxina->id == $actual->id) ? ' active" aria-current="page' : '') . '" href="' . $paxina->url . '">' . mb_strtoupper($paxina->title) . '</a>';
$saida .= '</li>' . "\n"; $saida .= '</li>' . "\n";
} }

99
site/templates/layout/partial/main_head.php
View file

@ -71,67 +71,70 @@ if($input->get->logout == true)
</head> </head>
<body class="d-flex flex-column h-100"> <body class="d-flex flex-column h-100">
<a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a> <a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
<nav id="menu-usuario" class="py-2 bg-light border-bottom" aria-label="User">
<div class="container d-flex flex-row-reverse flex-wrap">
<ul class="nav me-lg-3">
<?php if($user->isLoggedin()): ?>
<li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Log out', 'Log out'); ?>" href="/?logout=true"><i class='icon-user'></i></a></li>
<li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Management', 'Management'); ?>" href='/es/gestion'><i class='icon-settings'></i></a></li>
<?php else: ?>
<li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Log in', 'Log in'); ?>" href='/es/gestion/acceder'><i class='icon-user'></i></a></li>
<?php endif; ?>
</ul>
</div>
</nav>
<header id="cabeceira"> <header id="cabeceira">
<div class="container"> <nav id="menu-usuario" class="py-2 bg-light border-bottom" aria-label="User">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="container d-flex flex-row flex-lg-row-reverse flex-wrap justify-content-between">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu-desplegable" aria-controls="menu-desplegable" aria-label="Toggle navigation">
<picture class="me-2"> <span class="navbar-toggler-icon"></span>
<source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-150x116.jpg" media="(max-width: 767px)"> </button>
<source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-230x179.jpg" media="(min-width: 768px)"> <ul class="nav me-lg-3">
<img src="<?php echo $config->urls->templates?>images/logo-praia-seselle.svg" alt="<?php echo _x('Logo of Praia de Seselle Tourist Apartments', 'Site logo'); ?>"> <?php if($user->isLoggedin()): ?>
</picture> <li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Log out', 'Log out'); ?>" href="/?logout=true"><i class='icon-user'></i></a></li>
<h1 class="visually-hidden"><?php echo $configuracion['sitio_nome']; ?> <?php echo $configuracion['sitio_descripcion']; ?></h1> <li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Management', 'Management'); ?>" href='/es/gestion'><i class='icon-settings'></i></a></li>
</a> <?php else: ?>
<form class="col-12 col-lg-auto py-2 mb-3 mb-lg-0" action="<?php echo pages()->get('template=atopar')->url; ?>" method="get" role="search"> <li class="nav-item"><a class="btn btn-outline-dark rounded-0 px-2" title="<?php echo _x('Log in', 'Log in'); ?>" href='/es/gestion/acceder'><i class='icon-user'></i></a></li>
<div class="input-group"> <?php endif; ?>
<div class="form-floating"> </ul>
<input type="search" id="atopar-consulta" name="q" class="form-control rounded-0 shadow-none py-1" placeholder="<?php echo _x("Atopar", "Search"); ?>&hellip;" /> </div>
<label class="py-1" for="atopar-consulta"><?php echo _x("Atopar", "Search"); ?>&hellip;</label> </nav>
</div> <div class="container d-flex flex-wrap align-items-center justify-content-center justify-content-md-start">
<button type="submit" class="btn btn-primary rounded-0"> <a href="/" class="mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<i class="icon-search"></i> <picture class="me-2">
</button> <source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-150x116.jpg" media="(max-width: 767px)">
<source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-230x179.jpg" media="(min-width: 768px)">
<img src="<?php echo $config->urls->templates?>images/logo-praia-seselle.svg" alt="<?php echo _x('Logo of Praia de Seselle Tourist Apartments', 'Site logo'); ?>">
</picture>
<h1 class="visually-hidden"><?php echo $configuracion['sitio_nome']; ?> <?php echo $configuracion['sitio_descripcion']; ?></h1>
</a>
<form class="col-12 col-md-auto py-2 mb-3 mb-md-0" action="<?php echo pages()->get('template=atopar')->url; ?>" method="get" role="search">
<div class="input-group">
<div class="form-floating">
<input type="search" id="atopar-consulta" name="q" class="form-control rounded-0 shadow-none py-1" placeholder="<?php echo _x("Atopar", "Search"); ?>&hellip;" />
<label class="py-1" for="atopar-consulta"><?php echo _x("Atopar", "Search"); ?>&hellip;</label>
</div> </div>
</form> <button type="submit" class="btn btn-primary rounded-0">
<nav id="menus-idiomas" class="py-2" aria-label="Languages"> <i class="icon-search"></i>
<div class="container d-flex flex-wrap"> </button>
<ul class="nav"> </div>
</form>
<nav id="menus-idiomas" class="py-2" aria-label="Languages">
<div class="container d-flex flex-wrap">
<ul class="nav">
<?php foreach($languages as $idioma) : ?> <?php foreach($languages as $idioma) : ?>
<?php if(!$page->viewable($idioma)) continue; ?> <?php if(!$page->viewable($idioma)) continue; ?>
<li class="nav-item"> <li class="nav-item">
<?php <?php
$url = $page->localUrl($idioma); $url = $page->localUrl($idioma);
$hreflang = $inicio->getLanguageValue($idioma, 'name'); $hreflang = $inicio->getLanguageValue($idioma, 'name');
?> ?>
<a class="px-2 btn btn-outline-dark rounded-0<?php echo $idioma->id == $user->language->id ? ' active' : ''; ?>" title="<?php echo $idioma->title; ?>" hreflang="<?php echo $hreflang;?>" href="<?php echo $url; ?>"><?php echo $hreflang; ?></a> <a class="px-2 btn btn-outline-dark rounded-0<?php echo $idioma->id == $user->language->id ? ' active' : ''; ?>" title="<?php echo $idioma->title; ?>" hreflang="<?php echo $hreflang;?>" href="<?php echo $url; ?>"><?php echo $hreflang; ?></a>
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</div> </div>
</nav> </nav>
</div>
</div> </div>
<div class="border-bottom mb-3"> <div class="border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<nav id="menus-principal" class="navbar navbar-expand-lg p-0" aria-label="Main navigation" data-bs-theme="dark"> <nav id="menus-principal" class="navbar navbar-expand-lg p-0" aria-label="Main navigation">
<div class="container"> <div class="container-fluid">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#menu-desplegable" aria-controls="menu-desplegable" aria-expanded="false" aria-label="Toggle navigation"> <div id="menu-desplegable" class="offcanvas offcanvas-start justify-content-center justify-content-lg-start w-50 border-0 border-end border-3 border-primary" style="">
<span class="navbar-toggler-icon"></span> <div class="offcanvas-header">
</button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<div id="menu-desplegable" class="navbar-collapse justify-content-center justify-content-lg-start collapse" style=""> </div>
<div class="offcanvas-body p-0">
<?php echo $menu; ?> <?php echo $menu; ?>
</div>
</div> </div>
</div> </div>
</nav> </nav>