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

[Arreglar] la imagen de perfi dimensiones y posicionamiento

Browse source
This commit is contained in:
francisco-solis99 2022-05-18 19:17:43 -05:00
parent da791f553b
commit ae33ad1e31
6 changed files with 25 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/styles/pages/edit-profile/edit-profile-desktop.css
View file

@ -29,18 +29,12 @@ header {
} }
.profile-own__image-wrapper { .profile-own__image-wrapper {
width: 50%; max-width: 180px;
}
.profile-own__image {
width: 100%;
height: 100%;
object-fit: contain;
} }
/* Estilos para los bototnes de editar fotos de perfil y fondo */ /* Estilos para los bototnes de editar fotos de perfil y fondo */
.edit__field-avatar::before { .edit__field-avatar::before {
top: -100px; top: -120px;
font-size: 2.8rem; font-size: 2.8rem;
} }

13
assets/styles/pages/edit-profile/edit-profile.css
View file

@ -66,11 +66,9 @@ header::before {
} }
.profile-own__image-wrapper { .profile-own__image-wrapper {
display: flex; display: inline-flex;
width: 45%; max-width: 120px;
min-width: 40px; border-radius: 100%;
max-width: 200px;
border-radius: 50%;
overflow: hidden; overflow: hidden;
background-color: var(--color-black); background-color: var(--color-black);
} }
@ -78,8 +76,9 @@ header::before {
.profile-own__image { .profile-own__image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: cover;
filter: opacity(0.7); filter: opacity(0.7);
aspect-ratio: 1 / 1;
} }
.profile-own__title { .profile-own__title {
@ -142,7 +141,7 @@ input[type="file"] {
} }
.edit__field-avatar::before { .edit__field-avatar::before {
top: -70px; top: -80px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 1.8rem; font-size: 1.8rem;

14
assets/styles/pages/profile/profile-desktop.css
View file

@ -47,7 +47,7 @@ header {
} */ } */
.profile-own { .profile-own {
bottom: -125px; bottom: -135px;
} }
.profile-own__title { .profile-own__title {
@ -60,22 +60,16 @@ header {
} }
.profile-own__image-wrapper { .profile-own__image-wrapper {
width: 50%; max-width: 150px;
}
.profile-own__image {
width: 100%;
height: 100%;
object-fit: contain;
} }
.profile__link-edit { .profile__link-edit {
right: 35px; right: 15px;
font-size: 2.8rem; font-size: 2.8rem;
} }
.public-posts { .public-posts {
margin-top: 140px; margin-top: 160px;
} }
.public-posts__title { .public-posts__title {

17
assets/styles/pages/profile/profile.css
View file

@ -81,26 +81,25 @@ header::before {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
bottom: -105px; bottom: -120px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: 1;
/* background-color: tomato; */
} }
.profile-own__image-wrapper { .profile-own__image-wrapper {
display: flex; display: inline-flex;
width: 45%; max-width: 120px;
min-width: 40px; border-radius: 100%;
max-width: 200px;
border-radius: 50%;
overflow: hidden; overflow: hidden;
background-color: var(--color-black);
} }
.profile-own__image { .profile-own__image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: cover;
aspect-ratio: 1 / 1;
} }
.profile-own__title { .profile-own__title {
@ -121,7 +120,7 @@ header::before {
} }
.public-posts { .public-posts {
margin-top: 110px; margin-top: 150px;
width: 100%; width: 100%;
min-width: 320px; min-width: 320px;
padding: 23px 0; padding: 23px 0;

9
assets/styles/pages/signup/signup.css
View file

@ -25,13 +25,12 @@
* Metodología => BEM * Metodología => BEM
*/ */
html { /* html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} } */
body { body {
margin-bottom: 90px;
background-color: rgba(0, 183, 255, 0.4); background-color: rgba(0, 183, 255, 0.4);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -188,10 +187,8 @@ body {
/* Cambia los estilos del footer */ /* Cambia los estilos del footer */
.footer { .footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: var(--color-black); background-color: var(--color-black);
bottom: auto;
} }
.footer .rights { .footer .rights {

4
views/pages/edit-profile.php
View file

@ -55,11 +55,11 @@
<input type="hidden" name="csrf" value="<?= $token ?>"> <input type="hidden" name="csrf" value="<?= $token ?>">
<label for="avatar" class="edit__field-out edit__field-avatar"> <label for="avatar" class="edit__field-out edit__field-avatar">
<input type="file" id="avatar" name="avatar" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo btn-photo'> <input type="file" id="avatar" name="avatar" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo'>
</label> </label>
<label for="background" class="edit__field-out edit__field-background"> <label for="background" class="edit__field-out edit__field-background">
<input type="file" id="background" name="background" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo btn-backPhoto'> <input type="file" id="background" name="background" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo'>
</label> </label>