cambios editar

Claraescobar123 · Sep 7, 2020 · efa89c0 · efa89c0
1 parent 0a8daf5
commit efa89c0
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 100 deletions.
diff --git a/src/views/modal.js → src/components/modal.js b/src/views/modal.js → src/components/modal.js
diff --git a/src/lib/printPost.js → src/components/printPost.js b/src/lib/printPost.js → src/components/printPost.js
@@ -1,11 +1,9 @@
-import { deletePost } from './firebaseFirestore.js';
-
-export const printPost = (post, user, postid) => {
-  let newpost = document.createElement('div');
+import { deletePost } from '../lib/firebaseFirestore.js';
+//Imprime el post en el timeline y en profile
+export default (post, user, postid) => {
+  const newpost = document.createElement('div');
   newpost.setAttribute('id', postid);
   newpost.setAttribute('class', 'post');
-  newpost.innerHTML = post.comment;
-  newpost.innerHTML = user;
   newpost.innerHTML = `<div class="card">
   <div class="content">
   <div class="header">
@@ -16,11 +14,12 @@ export const printPost = (post, user, postid) => {
     </div>
     <img class="categories">
   </div>
-  <div class="desc">
+  <div id="post" class="desc" contenteditable="false">
   ${post.comment}
-  </div></div></div>`;
+  </div>
+  </div></div>`;
 
-  let categoryIcon = newpost.querySelector('.categories');
+  const categoryIcon = newpost.querySelector('.categories');
   switch (post.category) {
     case 'Movie':
       categoryIcon.src = 'img/movie.png';
@@ -34,11 +33,13 @@ export const printPost = (post, user, postid) => {
   }
 
 
-  const icons = document.createElement('section')
+  const icons = document.createElement('section');
   icons.setAttribute('class', 'input-comment');
   icons.innerHTML = `<div id="icons">
     <img src="img/delete.png" id="delete" class="icons"/>
+    <button type="button" class="btnEdits" id="edits">
     <img src="img/edit.png" id="edit" class="icons"/>
+    </button>
     <img src="img/like.png" id="likes" class="icons"/>
     <span>00000</span>
     <img src="img/comment.png" class="commentaries icons"/>
@@ -54,7 +55,7 @@ export const printPost = (post, user, postid) => {
   </div>`;
 
   newpost.appendChild(icons);
-  const comments = document.createElement('section')
+  const comments = document.createElement('section');
   comments.setAttribute('class', 'newsfeed');
   comments.innerHTML = `
   <div class="comments">
@@ -65,36 +66,40 @@ export const printPost = (post, user, postid) => {
       <div class="desc">
       "" </div></div>`;
 
-  if(window.location.hash == '#timeline'){
+  if (window.location.hash === '#timeline') {
     icons.querySelector('#delete').style.display = 'none';
     icons.querySelector('#edit').style.display = 'none';
   }
-  //newpost.appendChild(comments);
-  window.addEventListener('click', (e)=>{
-      if(e.target == icons.querySelector('.commentaries')){
-        icons.querySelector('.inputCommentandButton').style.display = 'block';
-        newpost.querySelector('.card').style.display = 'none';
-      }else if (e.target == icons.querySelector('#delete')) {
-        icons.querySelector('#confirm').style.display = 'block';
-      } else if (e.target == icons.querySelector('#deleteBtn')) {
-        let postid = newpost.getAttribute('id');
-        console.log(postid);
-        deletePost(postid);
-      }
-      else{
-        icons.querySelector('.inputCommentandButton').style.display = 'none';
-        newpost.querySelector('.card').style.display = 'block';
-        icons.querySelector('#confirm').style.display = 'none';
-      }
-    });
+  // newpost.appendChild(comments);
+  window.addEventListener('click', (e) => {
+    if (e.target === icons.querySelector('.commentaries')) {
+      icons.querySelector('.inputCommentandButton').style.display = 'block';
+      newpost.querySelector('.card').style.display = 'none';
+    } else if (e.target === icons.querySelector('#delete')) {
+      icons.querySelector('#confirm').style.display = 'block';
+    } else if (e.target === icons.querySelector('#deleteBtn')) {
+      const postId = newpost.getAttribute('id');
+      deletePost(postId);
+    } else {
+      icons.querySelector('.inputCommentandButton').style.display = 'none';
+      newpost.querySelector('.card').style.display = 'block';
+      icons.querySelector('#confirm').style.display = 'none';
+    }
+  });
 
+  const btnEdit = icons.querySelector('#edits');
+  btnEdit.addEventListener ('click', () => {
+    let editPost = document.getElementById('#post');
+    editPost.contentEditable = true;
+    console.log('editing')
+  });
 
-  /*window.addEventListener('click', (e)=>{
+  /* window.addEventListener('click', (e)=>{
     if(e.target == icons.querySelector('.commentaries')){
       icons.querySelector('.inputCommentandButton').style.display = 'block';
     }else{
       icons.querySelector('.inputCommentandButton').style.display = 'none';
-    });*/
+    }); */
 
-    return newpost;
-};
+  return newpost;
+};
diff --git a/src/css/404.css b/src/css/404.css
@@ -0,0 +1,27 @@
+#v404 {
+    height: 90vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url("background/404.png");
+    background-size:cover;
+  }
+
+  #message404{
+      background: rgb(0,0,0, 0.6);
+      max-width: 300px;
+      height: 400px;
+      color:white;
+      font-size: 15px;
+      font-family:'Comfortaa', cursive;
+      display: flex;
+      margin: auto;
+      text-align: center;
+      justify-content: space-around;
+      flex-direction: column;
+  }
+
+  #icono{
+      align-self: center;
+      width: 70%;
+  }
diff --git a/src/css/profile.css b/src/css/profile.css
@@ -1,3 +1,14 @@
+#profileContainer{
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #FFFFF0;
+  background-size:cover;
+  flex-direction: column;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
 #profile{
   height: 100%;
   display: flex;
@@ -8,10 +19,11 @@
   flex-direction: column;
   font-family: 'Source Sans Pro';
   }
-  h2{
+  #profile > h2{
     color: #05ADBA;
     margin-top:2em;
     margin-bottom:1em ;
+
   }
   #editPhoto > input{
     display: none;
@@ -74,6 +86,15 @@
 
 }
 
+#biographyid{
+  width:200px;
+  height:50px;
+  font-family: 'Source Sans Pro';
+  background: #DED5D5;
+  color:black;
+  padding:5px;
+}
+
 /*#profileBody{
   display: flex;
   flex-direction: column;

diff --git a/src/css/timeline.css b/src/css/timeline.css
@@ -19,26 +19,29 @@ padding: 20px;
 
 #profile-pic {
  width:50px;
+ height: 50px;
  border-radius: 50px;
 }
 
+.post{
+ margin: 50px 0;
+}
+
 .card {
 width: 100%;
-height: 120px;
 background: #DADADA;
 box-shadow: 0 0 12px 2px rgba(0, 0, 0, .5);
-margin-bottom: 20px;
+margin-bottom: 10px;
 border-radius: 10px;
 font-size: 14px;
-font-family: 'Anton';
+font-family: 'Anton', sans-serif;
 color: black;
 }
 
 .card .content {
 display: flex;
 flex-direction: column;
 padding: 15px 10px;
-margin-top:50px;
 }
 
 .card .header {
@@ -62,14 +65,14 @@ margin-left: 10px;
 .card .posted {
 font-size: 10px;
 padding-top: 3px;
-font-family: 'Comfortaa';
+font-family: 'Comfortaa', sans-serif;
 color: black;
 }
 
 .card .desc {
 padding-top: 10px;
 line-height: 1.5;
-font-family: 'Source Sans Pro';
+font-family: 'Source Sans Pro', sans-serif;
 color: black;
 }
 
@@ -79,7 +82,8 @@ background-position: 50%;
 background-size: cover;
 height: 30px;
 width: 30px;
-margin-left: 130px;
+float: left;
+margin: 0 0 0 auto;
 
 }
 
@@ -94,7 +98,7 @@ box-shadow: 0 0 12px 2px rgba(0, 0, 0, .5);
 margin-bottom: 20px;
 border-radius: 10px;
 font-size: 14px;
-font-family: 'Source Sans Pro';
+font-family: 'Source Sans Pro', sans-serif;
 color: white;
 padding: 15px;
 margin-left: 70px;
@@ -108,12 +112,19 @@ margin-top:50px;
 
 }
 
-.icons {
-margin-left: 200px;
+#icons {
+display: flex;
+justify-content: flex-end;
+}
+
+#icons > span{
+   color: #000;
+   margin: auto 0px;
 }
 
-.icons .commentaries {
-margin-left: 30px;
+.icons{
+ height: 25px;
+ margin: auto;
 }
 
 .btnCommentaries {
@@ -125,15 +136,15 @@ width: 100px;
 background: #06B8C7;
 border: 2px solid #06B8C7;
 border-radius: 5px;
-font-family: 'Anton';
+font-family: 'Anton', sans-serif;
 color: #FFFFFF;
 margin-left: 225px;
 
 
 }
 
 .inputComment {
-font-family: 'Source Sans Pro';
+font-family: 'Source Sans Pro', sans-serif;
 width: 100%;
 
 }
@@ -144,4 +155,19 @@ padding: 0 20px;
 
 .inputCommentandButton {
 display: none;
+}
+
+@media (min-width: 768px) {
+
+ #icons {
+   display: flex;
+   justify-content: flex-end;
+   width: 70%;
+   margin: 0 0 0 auto;
+
+ }
+
+ #icons > span{
+   display: block;
+ }
 }
diff --git a/src/lib/firebaseAuth.js b/src/lib/firebaseAuth.js
@@ -10,7 +10,7 @@ export async function signUp(email, password, name) {
     let currentUser = await auth.currentUser;
     currentUser.updateProfile({displayName: name});
     let userDb = await data.collection('users').doc(currentUser.uid)
-    .set({birthday, biography:',', name, photo: currentUser.photoURL});
+    .set({birthday, biography:'', name, photo: currentUser.photoURL});
 
     window.location.hash = "#thankAccount";