Responsive Modal Fixed

AmbrizAlberto · Apr 28, 2024 · de85efb · de85efb
1 parent 8a96466
commit de85efb
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 30 deletions.
diff --git a/app/components/español/projects.jsx b/app/components/español/projects.jsx
@@ -26,7 +26,6 @@ const Proyectos = () => {
   const openModalForProject = (projectId) => {
     setSelectedProject(projectId);
     setModalOpen(true);
-    scrollToSection('proyecto');
   };
 
   const closeModal = () => {
@@ -58,7 +57,7 @@ const Proyectos = () => {
               <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" width={200} height={200} alt="" />
             </div>
             <div className="github">
-              <i className="bi bi-github"></i>Ver proyecto
+              <i class="bi bi-eye-fill"></i>Ver proyecto
             </div>
         </button>
 
@@ -75,7 +74,7 @@ const Proyectos = () => {
             <Image src="https://cdn.iconscout.com/icon/free/png-256/free-python-3521655-2945099.png?f=webp" width={200} height={200} alt="" />
           </div>
           <div className="github">
-            <i className="bi bi-github"></i>Ver proyecto
+            <i class="bi bi-eye-fill"></i>Ver proyecto
           </div>
         </button>
 
@@ -94,7 +93,7 @@ const Proyectos = () => {
             <Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
           </div>
           <div className="github">
-            <i className="bi bi-github"></i>Ver proyecto
+            <i class="bi bi-eye-fill"></i>Ver proyecto
           </div>
         </button>
 

diff --git a/app/components/ingles/projectsen.jsx b/app/components/ingles/projectsen.jsx
@@ -26,7 +26,6 @@ const ProyectosEN = () => {
   const openModalForProject = (projectId) => {
     setSelectedProject(projectId);
     setModalOpen(true);
-    scrollToSection('proyecto');
   };
 
   const closeModal = () => {
@@ -58,7 +57,7 @@ const ProyectosEN = () => {
               <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" width={200} height={200} alt="" />
             </div>
             <div className="github">
-              <i className=""></i>See project
+            <i class="bi bi-eye-fill"></i>See project
             </div>
         </button>
 
@@ -75,7 +74,7 @@ const ProyectosEN = () => {
             <Image src="https://cdn.iconscout.com/icon/free/png-256/free-python-3521655-2945099.png?f=webp" width={200} height={200} alt="" />
           </div>
           <div className="github">
-            <i className="bi bi-github"></i>See project
+            <i class="bi bi-eye-fill"></i>See project
           </div>
         </button>
 
@@ -94,7 +93,7 @@ const ProyectosEN = () => {
             <Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
           </div>
           <div className="github">
-            <i className="bi bi-github"></i>See project
+            <i class="bi bi-eye-fill"></i>See project
           </div>
         </button>
 

diff --git a/app/css/mainrespons.css b/app/css/mainrespons.css
@@ -119,17 +119,21 @@
         font-size: 170%;
     }
     .modalprj1{
-       font-size: 40%;
+        height: 50%;
+        font-size: 40%;
     }
     .modalcontent{
-        margin-top: 50%;
+        font-size: 40%;
     }
 }
 
 @media screen and (max-width: 540px) {
     .datos2{
         font-size: 70%;
     }
+    .modalprj1{
+        height: 50%;
+    }
 }
 
 /* iPmini */
@@ -140,6 +144,9 @@
     .personaldata{
         font-size: 80%;
     }
+    .modalprj1{
+        height: 50%;
+    }
 }
 
 
@@ -234,4 +241,7 @@
         margin-top: 50%;
         margin-bottom: 5%;
     }
+    .modalprj1{
+        height: 50%;
+    }
   }
diff --git a/app/css/modal.css b/app/css/modal.css
@@ -1,38 +1,36 @@
-/* modal.css */
-
-/* modal.css */
-
-
-
 /* modal.css */
 .modalprj1 {
-    top: 0%;
-    position: absolute;
-    margin: auto;
-    width: 101%;
-    height: 250vh; /* Modificado para cubrir el 80% de la ventana */
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    position: fixed;
+    width: 100%;
+    height: 100%;
     justify-content: center;
     align-items: center;
     z-index: 1100;
     overflow: hidden; /* Eliminado overflow-y y overflow-x */
-    backdrop-filter: blur(30px);
-    transition: 1000ms;
+    backdrop-filter: blur(30px); 
+    transition: 1s;
+    border: 1px solid black;
 }
 
 .modalcontent1 {
+    margin: auto;
+    position: relative;
     max-width: 70%;
-    box-shadow: 0 0 20px black;
-    overflow-y: auto;
+    max-height: 60%;
     padding: 4%;
+    box-shadow: 0 0 100px rgb(0, 0, 0);
+    overflow-y: auto;
     background-color: #3e3e3e;
-    height: 50vh; /* Añadido para que el contenido del modal no exceda el 100% de la altura del modal */
     border-radius: 20px;
     border: 2px solid #888;
-    position: relative;
     overflow-y: auto; /* Añadido para permitir el desplazamiento vertical del contenido */
     scrollbar-width: none;
-    margin: auto;
-    margin-top: 10%;
+    transition: 1s;
 }
 .close-modal {
     color: #aaa;
@@ -46,8 +44,10 @@
     background: none;
     border: none;
     padding: 0;
+    transition: 1s;
 }
 
 .close-modal:hover {
     color: #fff;
+    transition: 1s;
 }
diff --git a/app/page.jsx b/app/page.jsx
@@ -43,7 +43,7 @@ export default function Portafolio() {
       ScrollReveal().reveal(selector, {
         duration: 1000,
         origin: origin,
-        distance: '10px',
+        distance: '0px',
         delay: 100,
         easing: 'ease-in-out',
       });