Merge branch 'profile' into dev
This commit is contained in:
francisco-solis99
commit
0bef69e633
|
|
@ -23,14 +23,15 @@
|
|||
|
||||
.nav__menu {
|
||||
position: initial;
|
||||
width: auto;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
/* width: auto; */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
|
||||
justify-items: center;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.nav__logo-wrapper {
|
||||
width: 20%;
|
||||
width: 10%;
|
||||
max-width: 110px;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
.nav__item a {
|
||||
padding: 10px 15px;
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav__item:nth-child(2) a {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ header:hover {
|
|||
/* Estilos para el navbar */
|
||||
.nav__logo-wrapper {
|
||||
width: 100px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.nav__logo-wrapper > a {
|
||||
|
|
@ -53,9 +55,6 @@ header:hover {
|
|||
color: #FFF;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
/* Estilos de la sección de otros posts */
|
||||
=======
|
||||
/* Estilos al heart like */
|
||||
.heart {
|
||||
top: -120px;
|
||||
|
|
@ -102,7 +101,6 @@ header:hover {
|
|||
|
||||
|
||||
|
||||
>>>>>>> open-article
|
||||
|
||||
.popular-posts {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -14,3 +14,54 @@
|
|||
* Debería haber recibido una copia de la Licencia Pública General de GNU Affero
|
||||
* junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
header {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav__menu {
|
||||
width: initial;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.nav__logo-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav__item a{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav__item:nth-child(2) a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.profile-own {
|
||||
bottom: -125px;
|
||||
}
|
||||
|
||||
.profile-own__image-wrapper {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.profile-own__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
.profile__link-edit {
|
||||
right: 19px;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.public-posts {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
|
@ -24,3 +24,117 @@
|
|||
* 5. Otros
|
||||
* Metodología => BEM
|
||||
*/
|
||||
|
||||
/* Agregando un z-index mayor al overlay */
|
||||
.overlay {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Estilos al header */
|
||||
header {
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
position: relative;
|
||||
background-image: url("/assets/images/background.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: initial;
|
||||
padding-bottom: 50px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nav__logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* profile image */
|
||||
|
||||
.profile-own {
|
||||
max-width: 200px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: -90px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
/* background-color: tomato; */
|
||||
}
|
||||
|
||||
.profile-own__image-wrapper {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
min-width: 40px;
|
||||
max-width: 200px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-own__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.profile-own__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile__link-edit {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
font-size: 2.4rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.public-posts {
|
||||
margin-top: 100px;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
padding: 23px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.public-posts__title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.public-cards__container {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Reescribiendo estilos de footer para esta page */
|
||||
.footer {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.footer .rights {
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.footer .media svg path {
|
||||
fill: var(--color-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<span></span><a href="<?= NABU_ROUTES['all-articles'] ?>">Artículos</a>
|
||||
<span></span><a href="<?= NABU_ROUTES['all-articles'] ?>">Muro</a>
|
||||
</li>
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<?php $user = $_SESSION['user'] ?>
|
||||
|
|
@ -43,13 +43,13 @@
|
|||
</li>
|
||||
<?php endif ?>
|
||||
<li class="nav__item">
|
||||
<a href="<?= NABU_ROUTES['sent-articles'] ?>">Artículos enviados</a>
|
||||
<a href="<?= NABU_ROUTES['post-article'] ?>">Publicar un post</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="<?= NABU_ROUTES['favorites'] ?>">Favoritos</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="<?= NABU_ROUTES['post-article'] ?>">Publicar un post</a>
|
||||
<a href="<?= NABU_ROUTES['sent-articles'] ?>">Artículos enviados</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="<?= NABU_ROUTES['profile'] . '&user=' . urlencode($user['username']) ?>"><?= utils::escape($user['username']) ?></a>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<!-- Estilos a cargar para el responsive design -->
|
||||
<?php $desktop_styles = array(
|
||||
array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
|
||||
array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"'),
|
||||
array('file' => 'pages/article/article-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"')
|
||||
) ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,40 +21,59 @@
|
|||
|
||||
<!-- Estilos cargados -->
|
||||
<?php $styles = array(
|
||||
'pages/profile/profile.css',
|
||||
'components/navbar/navbar.css',
|
||||
'components/articles/articles.css',
|
||||
'components/footer/footer.css',
|
||||
'pages/profile/profile.css',
|
||||
) ?>
|
||||
|
||||
<!-- Estilos para el responsive design -->
|
||||
<?php $desktop_styles = array(
|
||||
array('file' => 'pages/profile/profile-desktop.css', 'attributes' => ''),
|
||||
array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"'),
|
||||
array('file' => 'pages/profile/profile-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"')
|
||||
) ?>
|
||||
|
||||
<!-- Archivos de javascript a cargar -->
|
||||
<?php $scripts = array(
|
||||
'home.js'
|
||||
) ?>
|
||||
|
||||
<!-- HTML head -->
|
||||
<?php require_once 'views/components/head.php' ?>
|
||||
<?php require_once 'views/components/navbar.php' ?>
|
||||
|
||||
<h1>Perfil</h1>
|
||||
<!-- HTML body -->
|
||||
<header>
|
||||
<!-- Nav bar -->
|
||||
<?php require_once 'views/components/navbar.php' ?>
|
||||
<!-- <div>
|
||||
<img src="<?= $profile['background'] ?>" alt="Fondo de perfil" width="20%">
|
||||
</div> -->
|
||||
<div class="profile-own">
|
||||
<picture class="profile-own__image-wrapper">
|
||||
<img src="https://scontent.fcyw4-1.fna.fbcdn.net/v/t39.30808-6/272064856_452115463212117_8803840504382002522_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=89WY9ZJx95kAX8l2zDx&_nc_ht=scontent.fcyw4-1.fna&oh=00_AT-JtlgB-xr8qubXrinO_E3XUCpz3yWg-YvtvIYu33-C6w&oe=61FE3DE7" class="profile-own__image" alt='Foto de Perfil'>
|
||||
</picture>
|
||||
<h2 class='profile-own__title'><?= $profile['username'] ?></h2>
|
||||
<p class='profile-own__description'><?= $profile['description'] ?></p>
|
||||
<?php if ($isMyProfile): ?>
|
||||
<a href="<?= NABU_ROUTES['edit-profile'] ?>" title='Editar Perfil' class='profile__link-edit'>⚙</a>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<?php if ($isMyProfile): ?>
|
||||
<a href="<?= NABU_ROUTES['edit-profile'] ?>">Editar perfil</a>
|
||||
<?php endif ?>
|
||||
|
||||
<div>
|
||||
<img src="<?= $profile['background'] ?>" alt="Fondo de perfil" width="20%">
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Nombre completo: <?= $profile['name'] ?></li>
|
||||
<li>Apodo: <?= $profile['username'] ?></li>
|
||||
<li>Descripción: <?= $profile['description'] ?></li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<!-- <div>
|
||||
<img src="<?= $profile['avatar'] ?>" alt="Foto de perfil" width="8%">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<h2>Artículos publicados</h2>
|
||||
|
||||
<section class="public-posts">
|
||||
<h2 class='public-posts__title'>Post publicados</h2>
|
||||
<div class="public-cards__container">
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php require_once 'views/components/articles.php' ?>
|
||||
<?php require_once 'views/components/pagination.php' ?>
|
||||
<?php require_once 'views/components/footer.php' ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue