Merge pull request Laboratoria#10 from lucerogoga/gaby

Agrega info a firebase data

src/app/assets/style.css

@@ -275,9 +275,9 @@ input[type="password"]:focus {
 
 /*Estilos del Modal*/
 
-.modal-contenedor {
+.modal__contenedor {
   position: fixed;
-  z-index: 1000;
+  z-index: 0;
   width: 100%;
   height: 100vh;
   top: 0;
@@ -383,13 +383,12 @@ input[type="password"]:focus {
   position: relative;
 }
 
-.card__header::before {
+.card__header::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 1px;
   background-color: #efeff1;
-  /* bottom: -10px; */
   bottom: -0.7em;
 }
 .card__avatar-container {
@@ -446,7 +445,6 @@ input[type="password"]:focus {
   color: #848484;
 }
 
-/* claro EFEFF1 */
 .card__options-container,
 .modal__close-container {
   display: flex;
@@ -733,6 +731,7 @@ input[type="password"]:focus {
   align-items: center;
   font-size: 30px;
   background: linear-gradient(45deg, #fa610c, #ffbd00);
+  z-index: 1;
 }
 .menu__link {
   color: white;
@@ -745,3 +744,43 @@ input[type="password"]:focus {
 .tag__text {
   font-size: 14px;
 }
+
+/* Modal Lista */
+.modal__contenedor.align-end{
+  align-items: flex-end;
+  opacity: 1;
+  transition: opacity .5s;
+}
+.modal__lista{
+display: flex;
+flex-direction: column;
+margin-bottom: 60px;
+width: 100%;
+border-top-left-radius: 18px;
+border-top-right-radius: 18px;
+overflow: hidden;
+background-color: white;
+padding: 0 10px;
+transition: transform .5s ease-in-out;
+transform: translateY(0%);
+
+}
+.modal__button{
+  padding: 15px 10px;
+  border: none;
+  background-color: white;
+  font-size: 16px;
+  text-align: left;
+}
+.modal__button + .modal__button{
+  border-top: 1px solid #cbbdbd;
+}
+.modal__contenedor.cerrar{
+  opacity: 0;
+  z-index: -1;
+  padding: 0;
+}
+
+.modal__contenedor.cerrar .modal__lista {
+  transform: translateY(100%);
+}

src/app/components/Header_retro.js

@@ -6,6 +6,9 @@ export function HeaderRetro (){
     // background.classList.add("background-header")
 
     const iconBack = document.createElement("div")
+    iconBack.addEventListener("click", ()=>{
+        console.log("entra a back")
+        window.history.back()})
     iconBack.classList.add("header_icon")
     iconBack.classList.add("icon-arrow-back")
 

src/app/components/Menu.js

@@ -1,11 +1,11 @@
-export function Menu(){
+export function Menu(toggleModalPlus, toggleModalPerfil){
 
     const d = document
     //Menu
     const $menu = d.createElement('nav')
     $menu.classList.add('menu')
 
-    //iconos del menu 
+    //iconos del menu
     //icono 1
     const itemHome = d.createElement('a')
     itemHome.classList.add('menu__link')
@@ -32,6 +32,7 @@ export function Menu(){
     $iconPlus.classList.add("icon-send");
 
     itemPlus.append($iconPlus)
+    itemPlus.addEventListener("click", ()=>toggleModalPlus())
     //icono 4
     const itemReseña = d.createElement('a')
     itemReseña.classList.add('menu__link')
@@ -57,4 +58,45 @@ export function Menu(){
 
 return $menu
 
+}
+
+export function MenuList (){
+    const $modalContenedor = document.createElement('div')
+    $modalContenedor.classList.add('modal__contenedor','align-end','cerrar')
+
+    const $modalLista = document.createElement('div')
+    $modalLista.classList.add('modal__lista')
+
+    const $itemsPublicacion = document.createElement('button')
+    $itemsPublicacion.classList.add('modal__button')
+    $itemsPublicacion.textContent = 'Publicación'
+
+    $itemsPublicacion.addEventListener("click", () => {
+        window.location.hash = "#/formPost";
+    })
+
+    const $itemsReseña = document.createElement('button')
+    $itemsReseña.classList.add('modal__button')
+    $itemsReseña.textContent = 'Reseña'
+
+    const $itemsHistoria = document.createElement('button')
+    $itemsHistoria.classList.add('modal__button')
+    $itemsHistoria.textContent = 'Historia'
+
+    $modalLista.append($itemsPublicacion)
+    // $modalLista.append($itemsReseña)
+    // $modalLista.append($itemsHistoria)
+
+    $modalContenedor.append($modalLista)
+
+    const toggleModalPlus = () => {
+        $modalContenedor.classList.toggle('cerrar')
+
+    }
+
+    return {
+        menuModalPlus: $modalContenedor,
+        toggleModalPlus: toggleModalPlus
+    }
+
 }

src/app/components/Modal.js

@@ -1,7 +1,7 @@
 export function ModalTerminos () {
 
     const $modalContenedor = document.createElement('div')
-    $modalContenedor.classList.add('modal-contenedor')
+    $modalContenedor.classList.add('modal__contenedor')
 
     const $modalCerrar = document.createElement('div')
     $modalCerrar.classList.add('modal', 'modal-cerrar')

src/app/components/Timeline.js

@@ -1,7 +1,7 @@
 import { logOutGoogle } from "../firebase/firebase-auth.js";
 import { Post } from "./Post.js";
 import { HeaderRetro } from "./Header_retro.js";
-import { Menu } from "./Menu.js";
+import { Menu, MenuList } from "./Menu.js";
 
 export const Timeline = () => {
   const $timeline = document.createElement("div");
@@ -35,13 +35,14 @@ export const Timeline = () => {
   $botonPrueba.textContent = "Sign Out";
 
   $botonPrueba.addEventListener("click", logOutGoogle);
-
-  const $menu = Menu();
+  const {menuModalPlus, toggleModalPlus} = MenuList()
+  const $menu = Menu(toggleModalPlus);
 
   $timeline.append($header);
   $timeline.append($postsContainer);
   $timeline.append($botonPrueba);
   $timeline.append(btn);
+  $timeline.append(menuModalPlus);
   $timeline.append($menu);
 
   return $timeline;

src/app/firebase/firebase-data.js

@@ -1 +1,19 @@
-// import { app } from "./firebase-initializer.js";
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js";
+import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore.js"
+
+// const firebaseApp = initializeApp({
+//     apiKey: "AIzaSyB1tnQskPHc5NpzhYk6pPtJDjt0z5SbEJM",
+//     authDomain: "yami-cbaa4.firebaseapp.com",
+//     projectId: "yami-cbaa4"
+// })
+
+const db = getFirestore();
+
+const usuario = {
+    nombre: 'gaby',
+    activo: true,
+    fecha: 0
+}
+
+db.collection('usuarios')
+    .add(usuario)

src/app/firebase/firebase-initializer.js

@@ -1,4 +1,5 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js";
+import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore.js"
 
 const firebaseConfig = {
   apiKey: "AIzaSyB1tnQskPHc5NpzhYk6pPtJDjt0z5SbEJM",
@@ -12,3 +13,5 @@ const firebaseConfig = {
 
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig);
+
+export default { getFirestore, collection, addDoc }

src/index.html

@@ -16,7 +16,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <!-- <script type="module" src="./app/main.js"></script> -->
-    <!-- <script type="module" src="./app/firebase/firebase-initializer.js"></script> -->
+    <script type="module" src="./app/main.js"></script>
+    <script type="module" src="./app/firebase/firebase-initializer.js"></script>
   </body>
 </html>