ricardogj08/nabu
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Merge branch 'paginas' into dev

Browse source
This commit is contained in:
Ricardo García Jiménez 2022-02-21 11:22:56 -06:00
parent cd9f5e85c7 e410f7acea
commit b43f5eb798
4 changed files with 72 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/styles/components/pagination/pagination-desktop.css Normal file
View file

@ -0,0 +1,15 @@
.pages {
gap: 22px;
}
.pages__move {
width: 44px;
height: 44px;
font-size: 2.4rem;
}
.pages__actual {
width: 44px;
height: 44px;
font-size: 2.4rem;
}

50
assets/styles/components/pagination/pagination.css Normal file
View file

@ -0,0 +1,50 @@
/*
* Orden de los estilos
* 1. Posicionamiento
* 2. Modelo de caja
* 3. Tipografía
* 4. Visuales
* 5. Otros
* Metodología => BEM
*/
/* Estilos para el componente de pginación */
.pages {
display: flex;
gap: 16px;
margin: 15px 0;
align-items: center;
justify-content: center;
width: 100%;
}
.pages__move {
width: 30px;
height: 30px;
padding: 5px;
display: flex;
border-radius: 50%;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 2rem;
font-weight: 200;
color: var(--color-background);
background-color: var(--color-secondary-purple);
}
.pages__actual {
width: 30px;
height: 30px;
padding: 5px;
display: flex;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 300;
color: var(--color-black);
border: 2px solid var(--color-secondary-purple);
background-color: var(--color-background);
}

8
views/components/pagination.php
View file

@ -17,6 +17,8 @@
<?php defined('NABU') || exit() ?>
<a href="<?= $view . '&page=' . $page - 1 ?>">Anterior</a>
<span><?= $page ?></span>
<a href="<?= $view . '&page=' . $page + 1 ?>">Siguiente</a>
<div class="pages">
<a href="<?= $view . '&page=' . $page - 1 ?>" class = "pages__move">🡠</a>
<span class = "pages__actual"><?= $page ?></span>
<a href="<?= $view . '&page=' . $page + 1 ?>" class = "pages__move">🡢</a>
</div>

2
views/pages/all-articles.php
View file

@ -26,6 +26,7 @@
'pages/all-articles/all-articles.css',
'components/articles/articles.css',
'components/footer/footer.css',
'components/pagination/pagination.css',
) ?>
<!-- Estilos para el responsive design -->
@ -35,6 +36,7 @@
array('file' => 'components/search/search-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'pages/all-articles/all-articles-tablet.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'pages/all-articles/all-articles-desktop.css', 'attributes' => 'media="screen and (min-width: 1024px)"'),
array('file' => 'components/pagination/pagination-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
) ?>
<!-- Archivos de javascript -->