navbar elements are now responsive to screen changes

pablo-sch · pablo-sch · commit c19a642651ba · 2025-04-28T22:09:55.000+02:00
diff --git a/docs/README.es.md b/docs/README.es.md
@@ -129,9 +129,9 @@ Esto levantará el servidor y pondrá en funcionamiento el API REST para que pue
 - Asegúrate de tener correctamente instalados todos los programas necesarios antes de proceder con la ejecución del proyecto.
 
 - En el archivo db.json se posee tres cuentas y 14 posts. Estas son las credenciales de cada cuenta para por iniciar sesión en el proyecto y editar los posts ya creados:
-    - pablsch.it@gmail.com / pwd: 123456
-    - Pedro.it@gmail.com / pwd: 123456
-    - jose.JJ@gmail.com / pwd: 123456
+- [pablsch.it@gmail.com](mailto:pablsch.it@gmail.com) / pwd: 123456
+- [Pedro.it@gmail.com](mailto:Pedro.it@gmail.com) / pwd: 123456
+- [jose.JJ@gmail.com](mailto:jose.JJ@gmail.com) / pwd: 123456
 
 ## Sin Contribuciones ni Licencias
 
diff --git a/etc/TODO List.md b/etc/TODO List.md
@@ -1,4 +1,6 @@
-1. Improve the CSS
+# TODO List
+
+1. Improve the CSS.
 2. Load the image to the input of this one when you edit a post because currently this one doesn't receive anything, so you don't have to load the same original image again from the client.
 3. In the search panel, keep the search parameters when you search by word or tag.
 4. Improve the notifications in terms of appearance on the screen and its aesthetics.
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
     <link rel="stylesheet" href="src/styles/components/loader.css">
     <link rel="stylesheet" href="src/styles/components/loader-container.css">
 
-    <link rel="stylesheet" href="src/styles/components/posts-display.css">
+    <link rel="stylesheet" href="src/styles/components/post-card-container.css">
     <link rel="stylesheet" href="src/styles/components/post.css">
 </head>
 
@@ -38,7 +38,7 @@ <h1>Posts</h1>
 
         <div class="notifications"></div>
 
-        <div class="showPosts-container"></div>
+        <div class="post-card-container"></div>
 
         <div class="pages" id="pages"></div>
     </main>
diff --git a/src/js/components/navbar/navbarController.js b/src/js/components/navbar/navbarController.js
@@ -13,35 +13,35 @@ export function navbarController(container) {
 function handleVisibility() {
   const path = window.location.pathname;
 
-  const searchBtn = document.querySelector('.nav-center');
+  const searchContainer = document.querySelector('.nav-center');
   const logoutBtn = document.getElementById('logout-btn');
   const loginBtn = document.getElementById('login-btn');
   const signupBtn = document.getElementById('signup-btn');
   const createPostBtn = document.getElementById('create-post-btn');
 
   // Button visibility logic based on path
-  if (searchBtn) searchBtn.style.display = 'none';
+  if (searchContainer) searchContainer.style.display = 'none';
 
   if (path.endsWith('index.html')) {
-    if (searchBtn) searchBtn.style.display = 'block'; // Make sure it's visible
+    if (searchContainer) searchContainer.style.display = 'flex'; // Make sure it's visible
   }
 
   // Button visibility logic based on authentication state
   if (isAuthenticated()) {
 
     // Show "Logout" and "Create Post", hide "Login" and "Sign Up"
-    if (logoutBtn) logoutBtn.style.display = 'block'; // Make sure it's visible
+    if (logoutBtn) logoutBtn.style.display = 'flex'; // Make sure it's visible
     if (loginBtn) loginBtn.style.display = 'none'; // Hide if there's a token
     if (signupBtn) signupBtn.style.display = 'none'; // Hide if there's a token
-    if (createPostBtn) createPostBtn.style.display = 'block'; // Make sure it's visible
+    if (createPostBtn) createPostBtn.style.display = 'flex'; // Make sure it's visible
 
   } else {
 
     // Show "Login" and "Sign Up", hide "Logout" and "Create Post"
     if (logoutBtn) logoutBtn.style.display = 'none'; // Hide if there's no token
     if (createPostBtn) createPostBtn.style.display = 'none'; // Hide if there's no token
-    if (loginBtn) loginBtn.style.display = 'block'; // Make sure it's visible
-    if (signupBtn) signupBtn.style.display = 'block'; // Make sure it's visible
+    if (loginBtn) loginBtn.style.display = 'flex'; // Make sure it's visible
+    if (signupBtn) signupBtn.style.display = 'flex'; // Make sure it's visible
   }
 
 }
diff --git a/src/js/components/navbar/navbarView.js b/src/js/components/navbar/navbarView.js
@@ -10,27 +10,31 @@ export function navbarView() {
 `;
 
   return `
-    <a id="index-btn" class="nav-left">Home</a>
-    
-    <div class="nav-center">
-      <form id="search-form">
+    <div class='navbar-container'>
+    <div class="nav-left">
+          <a id="index-btn">Home</a>
+    </div>
+      
+      <div class="nav-center">
+        <form id="search-form">
 
-        <input id="search" name="search" type="text" placeholder="Search" />
+          <input id="search" name="search" type="text" placeholder="Search" />
 
-        <select id="post-tag" name="tag">
-          ${tagSelector}
-        </select>
+          <select id="post-tag" name="tag">
+            ${tagSelector}
+          </select>
 
-          <button type="submit">Search</button>
+            <button type="submit">Search</button>
 
-        </form>
-    </div>
+          </form>
+      </div>
 
-    <div class="nav-right">
-      <a id="create-post-btn">Create Post</a>
-      <a id="login-btn">Login</a>
-      <a id="signup-btn">Sign Up</a>
-      <a id="logout-btn">Log Out</a>
+      <div class="nav-right">
+        <a id="create-post-btn">Create Post</a>
+        <a id="login-btn">Login</a>
+        <a id="signup-btn">Sign Up</a>
+        <a id="logout-btn">Log Out</a>
+      </div>
     </div>
   `;
 }
diff --git a/src/js/modules/show-posts/showPosts.js b/src/js/modules/show-posts/showPosts.js
@@ -9,7 +9,7 @@ import { loginController } from "../../modules/login/loginController.js";
 export function initShowPosts() {
 
     // Here I go to the DOM and select the nodes I need to manage in my code and I manage them in my controllers.
-    const container = document.querySelector(".showPosts-container")
+    const container = document.querySelector(".post-card-container")
     const loader = document.querySelector(".loader")
     const notifications = document.querySelector(".notifications")
     const session = document.querySelector(".session")
diff --git a/src/styles/common.css b/src/styles/common.css
@@ -18,8 +18,17 @@ body {
 }
 
 main {
+    max-width: 1440px;
+
     margin: clamp(5px, 2vw, 1rem) clamp(10px, 5vw, 2rem);
+    margin-top: 0;
+    margin-bottom: 0;
+
+    padding: 1rem;
+
     background-color: var(--bg-color-4);
+    margin-left: auto;
+    margin-right: auto;
 }
 
 video,
@@ -48,7 +57,7 @@ h3,
 h4,
 p {
     margin: 0;
-    text-align: justify;
+    text-align: left;
 }
 
 input,
diff --git a/src/styles/components/post-card-container.css b/src/styles/components/post-card-container.css
@@ -1,8 +1,7 @@
-.showPosts-container {
+.post-card-container {
     display: grid;
     gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
-    padding: 1rem;
 
     a {
         color: inherit;
@@ -14,7 +13,7 @@
 }
 
 @media (min-width: 768px) {
-    .showPosts-container {
+    .post-card-container {
         grid-template-columns: repeat(4, 1fr);
     }
 }
diff --git a/src/styles/components/post.css b/src/styles/components/post.css
@@ -11,13 +11,17 @@ a {
 
     height: 100%;
 
-    padding: 1rem;
+    padding: 5px;
 
     border-radius: 8px;
     transition: transform 0.2s ease;
     background-color: var(--bg-post);
 }
 
+.post .post-image{
+    justify-content: center;
+}
+
 .post .title {
     font-weight: bold;
 }
@@ -59,21 +63,21 @@ a {
 
 .post-image {
     /* DO NOT TOUCH THE CODE! */
-    display: block;
-
     width: 100%;
+    max-width: 300px;
     /* IMPORTANT TO BE WITH: 100% and HEIGHT: AUTO! */
     height: auto;
 
-    max-height: 200px;
-
+    /* max-height: 200px; */
     object-fit: cover;
     margin: 0.5rem 0;
 
     border: 1px solid #ddd;
 }
 
 .sale-label {
+    font-size: small;
+
     position: absolute;
     top: 10px;
     right: 10px;
@@ -93,7 +97,11 @@ a {
 }
 
 @media (min-width: 460px) {
-    .post p {
-        padding: 5px;
+    .sale-label {
+        font-size: 1rem;
+    }
+
+    .post {
+        padding: 1rem;
     }
 }
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
@@ -1,12 +1,23 @@
 .navbar {
-    display: flex;
+    background-color: var(--bg-color);
+}
+
+.navbar-container {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+
+    grid-column-gap: 1rem;
+    grid-row-gap: 1rem;
+
+    margin-left: auto;
+    margin-right: auto;
 
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
     padding: clamp(1px, 5vw, 16px);
 
-    background-color: var(--bg-color);
+    max-width: 1440px;
+
+    font-weight: bold;
 }
 
 .navbar a {
@@ -16,7 +27,64 @@
     background-color: var(--bg-color-4);
 }
 
+.nav-right a {
+    display: flex;
+
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-left {
+    grid-area: 1 / 1 / 2 / 4;
+}
+
+.nav-left a {
+    display: flex;
+
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-center {
+    grid-area: 2 / 1 / 3 / 7;
+}
+
+#search-form {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+    gap: 1rem;
+}
+
+#search-form input,
+#search-form select,
+#search-form button {
+
+    width: 100%;
+}
+
 .nav-right {
     display: flex;
-    gap: clamp(1px, 5vw, 16px);
+    justify-content: flex-end;
+    gap: 1rem;
+    grid-area: 1 / 4 / 2 / 7;
+}
+
+@media (min-width: 768px) {
+    .nav-left {
+        grid-area: 1 / 1 / 3 / 2;
+    }
+    .nav-center {
+        grid-area: 1 / 2 / 3 / 5; 
+    }
+
+    #search-form {
+        gap: 0.5rem;
+    }
+    .nav-right {
+        grid-area: 1 / 5 / 3 / 7;
+        gap: 0.5rem;
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,7 @@`
`1`		`-.showPosts-container {`
	`1`	`+.post-card-container {`
`2`	`2`	`display: grid;`
`3`	`3`	`gap: 1rem;`
`4`	`4`	`grid-template-columns: repeat(2, 1fr);`
`5`		`- padding: 1rem;`
`6`	`5`
`7`	`6`	`a {`
`8`	`7`	`color: inherit;`
`@@ -14,7 +13,7 @@`
`14`	`13`	`}`
`15`	`14`
`16`	`15`	`@media (min-width: 768px) {`
`17`		`- .showPosts-container {`
	`16`	`+ .post-card-container {`
`18`	`17`	`grid-template-columns: repeat(4, 1fr);`
`19`	`18`	`}`
`20`	`19`	`}`