Modal publicaciones

src/css/login.css

@@ -23,6 +23,11 @@
     margin-bottom: 20px;
 }
 
+.input-container input{
+  margin: 5px;
+}
+
+
 #login .logo{
     max-width: 50%;
     display:inline-block;

src/css/modal.css

@@ -0,0 +1,133 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin: auto;
+  max-width: 300px;
+  max-  height: 400px;
+  color: #000000;
+  text-align: center;
+  background-color: #FFFFFF;
+  border: 1px solid #888;
+  border-radius: 20px;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+.close {
+  color: #06B8C7;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover, .close:focus {
+  color: #176E06;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.modal-content > #ModalHeader{
+  display: grid;
+  padding: 0;
+  width: 100%;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 3fr 1fr;
+}
+
+#userPhoto{
+  display: grid;
+  margin-left: auto;
+  grid-column: 1;
+  grid-row: 2;
+  width: 50px;
+  border-radius: 100%;
+  border: 1px solid #969696;
+}
+
+.modal-content > #ModalHeader p{
+  color: #5D5D5D;
+  margin: auto 5px;
+  text-align: left;
+  grid-column: 2 / -1;
+  grid-row: 2;
+}
+
+.modal-content > #ModalHeader span{
+  margin: 0;
+  grid-column: 3 / 3;
+  grid-row: 1/2;
+}
+
+.modal-content > form{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 70%;
+  width: 100%;
+  margin: 30px auto;
+}
+.modal-content > form label{
+  display: inline-block;
+  margin: auto;
+  width:37px;
+  height: 39px;
+  background-image: url(../img/img.png);
+
+}
+
+.modal-content > form textarea{
+  font-family: 'Source Sans Pro';
+  font-size: 16px;
+  width: 90%;
+  border: none;
+  border-bottom: 1px solid;
+}
+.modal-content > form div{
+  display: flex;
+  margin: 30px 0;
+}
+
+.modal-content > form select{
+  -webkit-appearance:none;
+  text-align: center;
+  border: none;
+  color: #008E9A;
+  width: 100px;
+  height: 40px;
+  background-color: #FFFFFF;
+  font-family: 'Comfortaa';
+  margin-left: 50px;
+}
+
+#loadImg{
+  visibility: hidden;
+}
+
+@media screen and (min-width: 768px){
+  .modal-content{
+    min-width: 600px;
+    max-height: 320px;
+  }
+
+  .modal-content > form {
+    display: block;
+    flex-direction: row;
+}
+
+  .modal-content > form div {
+    display: inline-block;
+    margin: 20px 50px;
+}
+}

src/css/timeline.css

@@ -0,0 +1,5 @@
+#timelineBody{
+  width: 100%;
+  height: 100%;
+  background-color: #FFFFF0;
+}

src/lib/firebaseAuth.js

@@ -70,3 +70,8 @@ export async function signOut() {
     console.log(e);
   }
 }
+
+export  function currentUser() {
+    const user =  auth.currentUser;
+    return user;
+}

src/style.css

@@ -1,9 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Comfortaa:wght@300&family=Source+Sans+Pro&display=swap');
+
 @import "css/home.css";
 @import "css/login.css";
 @import "css/createAccount.css";
 @import "css/thanksAccount.css";
 @import "css/recover.css";
+@import "css/timeline.css";
+@import "css/modal.css";
 
 body{
   margin: 0px;
@@ -33,7 +36,7 @@ h2{
   font-size: 1.2em;
 }
 
-label{
+label, p{
   font-family: 'Source Sans Pro';
 }
 
@@ -135,24 +138,6 @@ nav {
     display: none;
   }
 
-.btn{
-  align-self: center;
-  text-align: center;
-  height: 40px;
-  width: 200px;
-  background: #06B8C7;
-  border: 2px solid #06B8C7;
-  border-radius: 5px;
-  font-family: 'Comfortaa';
-  color: #FFFFFF;
-
-}
-.btn:hover {
-   background: cadetblue ;
-   border-color: cadetblue;
-
-}
-
 footer{
   align-items: center;
   flex-direction: column;

src/views/modal.js

@@ -0,0 +1,40 @@
+export const publish = (userPhoto) =>{
+  const modal = document.createElement('section');
+  modal.setAttribute('class', 'modal');
+  modal.innerHTML = `<div class="modal-content">
+        <header id="ModalHeader">
+          <span class="close">&times;</span>
+          <img id="userPhoto" src=" " >
+          <p>Comenta sobre tus peliculas o series favoritas</p>
+        </header>
+        <form id='formComment' enctype="multipart/form-data">
+          <textarea rows="2"></textarea>
+          <div>
+            <label>
+              <input type="file" id="loadImg">
+            </label>
+            <select>
+              <div>
+              <option value="0"> Categoría &#9660;</option>
+              <option value="Movie">Peliculas</option>
+              <option value="Documentary">Documentales</option>
+              <option value="Serie">Series</option>
+              </div>
+            </select>
+          </div>
+          <button type="submit" class="btn newpublish">PUBLICAR</button>
+        </form>
+      </div>`
+
+  let photo =  modal.querySelector('#userPhoto');
+  photo.src = `${userPhoto}`;
+  const publish = modal.querySelector('#formComment');
+  publish.addEventListener('submit', (e)=>{
+    e.preventDefault();
+    modal.style.display = 'none';
+
+  })
+  modal.querySelector('.close').addEventListener('click', ()=> modal.style.display = 'none')
+
+  return  modal;
+};

src/views/timeline.js

@@ -1,6 +1,16 @@
+import { currentUser } from '../lib/firebaseAuth.js';
+import {publish} from './modal.js';
+
 export default () => {
   const timeline = document.createElement('section');
-  timeline.innerHTML = 'buenas';
+  timeline.setAttribute('id', 'timelineBody');
+  timeline.innerHTML = `<button type="button" class="btn newpublish">NUEVA PUBLICACIÓN</button>`;
+  let user = currentUser();
+  console.log(user.photoURL);
+  timeline.querySelector('.newpublish').addEventListener('click', () => {
+    const modal = timeline.appendChild(publish(user.photoURL));
+    modal.style.display = "flex";
+  });
 
   return timeline;
 };