Merge branch 'editProfile' into dev
This commit is contained in:
francisco-solis99
commit
ad4050e795
|
|
@ -14,3 +14,37 @@
|
|||
* 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;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.profile-own {
|
||||
bottom: -83px;
|
||||
}
|
||||
|
||||
.profile-own__title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.profile-own__image-wrapper {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.profile-own__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Estilos para los bototnes de editar fotos de perfil y fondo */
|
||||
.btn-backPhoto::before {
|
||||
top: -44%;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.btn-photo::before {
|
||||
top: -95px;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
|
@ -24,3 +24,187 @@
|
|||
* 5. Otros
|
||||
* Metodología => BEM
|
||||
*/
|
||||
/* Estils sobrescritos */
|
||||
|
||||
/* Estilos al header */
|
||||
header {
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
position: relative;
|
||||
/* se hace de forma dinamica desde HTML en la etiqueta header => background-image: url("/assets/images/background.png"); */
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.profile-own {
|
||||
width: 65%;
|
||||
max-width: 250px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: -70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profile-own__image-wrapper {
|
||||
display: flex;
|
||||
width: 45%;
|
||||
min-width: 40px;
|
||||
max-width: 200px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.profile-own__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: opacity(0.7);
|
||||
}
|
||||
|
||||
.profile-own__title {
|
||||
margin-top: 5px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
/* Estilos al form de edicion */
|
||||
|
||||
.profile__edit {
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.edit__form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Estilos paralos input en absoluto */
|
||||
|
||||
.edit__btn-photo{
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.edit__btn-photo::-webkit-file-upload-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.edit__btn-photo::before {
|
||||
content: '✎';
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 5px 8px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 100%;
|
||||
outline: none;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
transition: all ease-in 300ms;
|
||||
}
|
||||
|
||||
.btn-photo::before {
|
||||
top: -70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 1.8rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-backPhoto::before {
|
||||
right: 0;
|
||||
top: -25%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.edit__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile__edit .edit__field:not(.profile__edit:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.edit__entry {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.edit__input {
|
||||
padding: 12px;
|
||||
border: 2px solid var(--color-black);
|
||||
border-radius: 10px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.1rem;
|
||||
}
|
||||
|
||||
.edit__buttons {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.edit__btn {
|
||||
padding: 20px 10px;
|
||||
width: 40%;
|
||||
max-width: 200px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: var(--color-background);
|
||||
cursor: pointer;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.edit__buttons .edit__btn:first-child {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
background-color: var(--color-primary-red);
|
||||
}
|
||||
|
||||
.edit__buttons .edit__btn:last-child {
|
||||
background-color: var(--color-secondary-green);
|
||||
}
|
||||
|
||||
|
||||
/* Estilos para footer, sobreescribir para cambiar color */
|
||||
.footer {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.footer .rights {
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.footer .media svg path {
|
||||
fill: var(--color-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,79 +21,75 @@
|
|||
|
||||
<!-- Estilos a cargar -->
|
||||
<?php $styles = array(
|
||||
'components/footer/footer.css',
|
||||
'pages/edit-profile/edit-profile.css',
|
||||
) ?>
|
||||
|
||||
<!-- Estilos a cargar para el responsive design -->
|
||||
<?php $desktop_styles = array(
|
||||
array('file' => 'pages/edit-profile/edit-profile-desktop.css', 'attributes' => ''),
|
||||
array('file' => 'pages/edit-profile/edit-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>Edita tu perfil</h1>
|
||||
|
||||
<!-- Componente del modal para alertas -->
|
||||
<?php require_once 'views/components/messages.php' ?>
|
||||
|
||||
<form method="POST" action="<?= NABU_ROUTES['edit-profile'] ?>" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<legend>Perfil</legend>
|
||||
<input type="hidden" name="csrf" value="<?= $token ?>">
|
||||
<div>
|
||||
<div>
|
||||
<label for="avatar"><b>Editar foto de perfil</b></label>
|
||||
</div>
|
||||
<div>
|
||||
<img src="<?= $profile['avatar'] ?>" alt="Foto de perfil" width="8%">
|
||||
</div>
|
||||
<div>
|
||||
<input type="file" id="avatar" name="avatar" accept="<?= NABU_DEFAULT['image-formats'] ?>">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label for="background"><b>Editar fondo de perfil</b></label>
|
||||
</div>
|
||||
<div>
|
||||
<img src="<?= $profile['background'] ?>" alt="Fondo de perfil" width="32%">
|
||||
</div>
|
||||
<div>
|
||||
<input type="file" id="background" name="background" accept="<?= NABU_DEFAULT['image-formats'] ?>">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label for="description"><b>Descripción</b></label>
|
||||
</div>
|
||||
<div>
|
||||
<textarea id="description" name="description" maxlength="255" rows="5" cols="51"><?= $profile['description'] ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Datos personales</legend>
|
||||
<div>
|
||||
<label for="name"><b>Nombre completo</b></label>
|
||||
<input type="text" id="name" name="name" minlength="5" maxlength="255" value="<?= $profile['name'] ?>">
|
||||
</div>
|
||||
<div>
|
||||
<label for="username"><b>Apodo</b></label>
|
||||
<input type="text" id="username" name="username" minlength="1" maxlength="255" value="<?= $profile['username'] ?>">
|
||||
</div>
|
||||
<div>
|
||||
<label for="password"><b>Nueva constraseña</b></label>
|
||||
<input type="password" id="password" name="password" minlength="6" maxlength="255">
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm-password"><b>Confirmar contraseña</b></label>
|
||||
<input type="password" id="confirm-password" name="confirm-password" minlength="6" maxlength="255">
|
||||
</div>
|
||||
</fieldset>
|
||||
<div>
|
||||
<a href="<?= NABU_ROUTES['delete-profile'] ?>">Eliminar cuenta</a>
|
||||
<input type="submit" name="edit-profile-form" value="Guardar">
|
||||
<!-- HTML body -->
|
||||
<header style='background-image: url("<?= $profile['background']?>");'>
|
||||
<div class="profile-own">
|
||||
<picture class="profile-own__image-wrapper">
|
||||
<img src="<?= $profile['avatar'] ?>" class="profile-own__image" alt='Foto de Perfil'>
|
||||
</picture>
|
||||
<h2 class='profile-own__title'><?= $profile['username'] ?></h2>
|
||||
</div>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<section class='profile__edit'>
|
||||
<form method="POST" action="<?= NABU_ROUTES['edit-profile'] ?>" enctype="multipart/form-data" class='edit__form'>
|
||||
<input type="hidden" name="csrf" value="<?= $token ?>">
|
||||
|
||||
|
||||
<input type="file" id="avatar" name="avatar" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo btn-photo'>
|
||||
|
||||
<input type="file" id="background" name="background" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo btn-backPhoto'>
|
||||
|
||||
<label for="username" class="edit__field">
|
||||
<span class="edit__entry">Nombre de Usuario</span>
|
||||
<input type="text" id="username" name="username" minlength="1" maxlength="255" value="<?= $profile['username'] ?>" class="edit__input">
|
||||
</label>
|
||||
|
||||
<label for="name" class="edit__field">
|
||||
<span class="edit__entry">Nombre Completo</span>
|
||||
<input type="text" id="name" name="name" minlength="5" maxlength="255" value="<?= $profile['name'] ?>" class="edit__input">
|
||||
</label>
|
||||
|
||||
<label for="description" class="edit__field">
|
||||
<span class="edit__entry">Descripción</span>
|
||||
<textarea id="description" name="description" maxlength="255" rows="5" cols="51" class="edit__input"><?= $profile['description'] ?></textarea>
|
||||
</label>
|
||||
|
||||
<label for="password" class="edit__field">
|
||||
<span class="edit__entry">Nueva Contraseña</span>
|
||||
<input type="password" id="password" name="password" minlength="6" maxlength="255" class="edit__input">
|
||||
</label>
|
||||
|
||||
<label for="confirm-password" class="edit__field">
|
||||
<span class="edit__entry">Confirmar contraseña</span>
|
||||
<input type="password" id="confirm-password" name="confirm-password" minlength="6" maxlength="255" class="edit__input">
|
||||
</label>
|
||||
|
||||
<div class="edit__buttons">
|
||||
<a href="<?= NABU_ROUTES['delete-profile'] ?>"" class="edit__btn">
|
||||
Eliminar pefil
|
||||
</a>
|
||||
<input type="submit" name="edit-profile-form" value="Guardar" class="edit__btn">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<?php require_once 'views/components/footer.php' ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue