Skip to content

Commit

Permalink
Merge pull request #20 from karenBerrioRufino/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@kalyzca
kalyzca authored Feb 5, 2022
2 parents 71776a2 + ed912d3 commit 5a24dbd
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 71 deletions.
4 changes: 1 addition & 3 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,13 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sinchi Warmi</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://kit.fontawesome.com/e5050bab95.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c47856f5c7.js" crossorigin="anonymous"></script>
</head>
<body>

<main id="mainContainer">



</main>
<script type="module" src="./lib/firebase/config.js" ></script>
<script type="module" src="main.js" ></script>
Expand Down
109 changes: 86 additions & 23 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,22 @@ body{
font-family: 'Sulphur Point', sans-serif;
font-weight: 300;
background-color: #fff;

}

form{
.form{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.women{
width: 100vw;
height: 15rem;
object-fit: inherit;
}

/* Estilos de botones submit */
form>input[type="submit"] {

form>input[type="submit"] {
margin: 0.75rem 0;
background-color: #8BDFE2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
Expand All @@ -43,10 +40,34 @@ form>input[type="submit"] {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.493);
font-size: 1rem;
font-weight: bold;

}

/* Sign in */
.formLogin{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.containerSignIn{
width: 350px;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.save{
margin: 0.75rem 2rem;
background-color: #8BDFE2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border:solid 1px transparent;
border-radius: 1rem;
padding: 0.5rem 2rem;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.493);
font-size: 1rem;
font-weight: bold;
}
.tituloLogin{
padding: 4rem 0 1rem;
font-size: 2.75rem;
Expand All @@ -57,10 +78,8 @@ form>input[type="submit"] {
.emailLogin,
.passLogin
{
justify-self: center;
border: 1px solid #fff;
border-radius: 10px;
margin-bottom: 0.8rem;
padding: 1rem;
width: 15rem;
height: 1rem;
Expand All @@ -71,32 +90,29 @@ form>input[type="submit"] {
background-image: url(./img/email.png);
background-position: 13.25rem;
background-size: 1.5rem;

margin-bottom: 0.8rem;
}
.eye{
display: flex;
align-items:center;
position: relative;

justify-content: center;
color: black;
}
.iconEye{
color: #EAC9E2;
position: absolute;
right: 0;
right: 30px;
margin: 5px;
cursor: pointer;
top: 10%;
}
.forget{
display: flex;
justify-content:flex-end;
width: 15rem;
height: 1rem;
}
.forgetpass{
text-decoration: none;
font-size: 12px;

font-size: 14px;
}
.acountP{
font-size: 15p;
}
.registerUser{
display: flex;
Expand Down Expand Up @@ -270,10 +286,8 @@ nav{
.menu__items>li>a>img{
width: 2rem;
height: 2rem;

}


/* View Profile */
.viewProfile{
display: flex;
Expand Down Expand Up @@ -462,4 +476,53 @@ nav{
}
.contLikes{
margin: 0 0.5rem;
}

@media only screen and (min-width: 800px) and (max-width: 1500px){
html, body{
height:100%;
width: 100%;

}
.formLogin{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1;
}
.containerSignIn{
height: 100%;
order: -1;
position: absolute;
align-self: flex-end;
background-color: #ffff;
width: 50%;
justify-content: center;
align-items: center;
display: flex;
}
.emailLogin,
.passLogin
{
border: 1px solid black;
}
.women{
width: 50%;
height: 600px;
align-self: flex-start;
object-fit: inherit;
}
.tituloLogin {
padding: 4rem 0 1rem;
font-size: 3.5rem;
text-align: center;
color: #FFFFFF;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
align-self: flex-start;
width: 50%;
}
.iconEye{
right: 2px;
}
}
52 changes: 26 additions & 26 deletions src/view/news.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,18 +173,17 @@ window.addEventListener('DOMContentLoaded', async () => {
// const iconLike = postContainer.querySelectorAll('.fa-thumbs-up');
btnLikes.forEach((btnlike) => {
btnlike.addEventListener('click', async (e) => {
await getDocPost(e.target.dataset.id)
.then((result) => {
console.log('doc del post', result.id);
console.log('uid - usuario loguedo', uidUser);
// setLikes(result.id, uidUser).FieldValue;
if (arraylike.indexOf(uidUser) !== -1) {
removeLikes(result.id, uidUser).FieldValue;
console.log(arraylike, 'hola');
} else {
setLikes(result.id, uidUser).FieldValue;
}
});
await getDocPost(e.target.dataset.id).then((result) => {
console.log('doc del post', result.id);
console.log('uid - usuario loguedo', uidUser);
// setLikes(result.id, uidUser).FieldValue;
if (arraylike.indexOf(uidUser) !== -1) {
removeLikes(result.id, uidUser).FieldValue;
console.log(arraylike, 'hola');
} else {
setLikes(result.id, uidUser).FieldValue;
}
});
});
});

Expand All @@ -196,22 +195,24 @@ window.addEventListener('DOMContentLoaded', async () => {
formularioPost.addEventListener('submit', async (e) => {
e.preventDefault();
const description = formularioPost.postDescription;

// const name = formularioPost.userName;
if (!editStatus) {
await savePost(description.value, fullname, uidUser);
if (description.value === '') {
alert('Por favor cuéntanos algo');
} else {
console.log(idp);
await updateDocPost(idp, {
description: description.value,
});
if (!editStatus) {
await savePost(description.value, fullname, uidUser);
} else {
console.log(idp);
await updateDocPost(idp, {
description: description.value,
});

editStatus = false;
idp = '';
formularioPost.btnPostSave.innerText = 'Guardar';
editStatus = false;
idp = '';
formularioPost.btnPostSave.innerText = 'Guardar';
}
formularioPost.reset();
description.focus();
}
formularioPost.reset();
description.focus();
});

// Funcion para salir
Expand All @@ -229,4 +230,3 @@ logOut.addEventListener('click', () => {
});

export { news };

36 changes: 17 additions & 19 deletions src/view/sign-in.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,25 @@ let currentUser;

const login = () => {
const viewLogin = `
<form id='formLogin' class = 'formLogin'>
<h2 class='tituloLogin'>Sinchi Warmi</h2>
<input type='text' placeholder='Ingrese su correo electrónico' id='emailLogin' class='emailLogin'>
<div class="eye">
<span class='iconEye'><i class="fas fa-eye-slash"></i></span>
<input type='password' placeholder='Ingrese su contraseña' id='pass' class='passLogin'>
</div>
<div class= 'forget'>
<form id='formLogin' class='formLogin'>
<h2 class='tituloLogin'>Sinchi Warmi</h2>
<div class="containerSignIn">
<input type='text' placeholder='Ingrese su correo electrónico' id='emailLogin' class='emailLogin'>
<div class="eye">
<span class='iconEye'><i class="fas fa-eye-slash"></i></span>
<input type='password' placeholder='Ingrese su contraseña' id='pass' class='passLogin'>
</div>
<a class='forgetpass' id='forgetpass' href='#/'>¿Has olvidado tu contraseña?</a>
<input type='submit' value='LogIn' id='save' class='save'>
<p id="textVerified"></p>
<div class='iconos_sesion'>
<img src="../img/google.png" id="btn-google" class="btn-google">
<img src='../img/facebook.png' id='btn-facebook' class= 'btn-facebook'>
<img src='../img/github.jpeg' id='gitHub' class='btn-github'>
</div>
<p class="acountP">¿No tienes cuenta? <a href="#/sign-up"> Regístrate aquí</a></p>
</div>
<input type='submit' value='LogIn' id='save'>
<p id="textVerified"></p>
<div class='iconos_sesion'>
<img src="../img/google.png" id="btn-google" class="btn-google">
<img src='../img/facebook.png' id='btn-facebook' class= 'btn-facebook'>
<img src='../img/github.jpeg' id='gitHub' class='btn-github'>
</div>
<div class='registerUser'>
<p>¿No tienes cuenta?,</p><a href="#/sign-up"><p>Regístrate</p></a>
</div>
<img class = 'women' src='../img/mujeresunidas_celu.png'>
<img class='women' src='../img/mujeresunidas_celu.png'>
</form>
`;
document.body.style.background = '#EAC9E2';
Expand Down

0 comments on commit 5a24dbd

Please sign in to comment.