now "create post" is mobilefirst

pablo-sch · pablo-sch · commit c2e887e01ab5 · 2025-05-01T18:46:44.000+02:00
diff --git a/index.html b/index.html
@@ -21,6 +21,8 @@
 
     <link rel="stylesheet" href="src/styles/components/post-card-container.css">
     <link rel="stylesheet" href="src/styles/components/post.css">
+
+    <link rel="stylesheet" href="src/styles/components/buttons.css">
 </head>
 
 <body>
diff --git a/src/js/modules/create-post/createPost.js b/src/js/modules/create-post/createPost.js
@@ -12,7 +12,7 @@ export function initCreatePost() {
         window.location = '/views/login.html'
     }
 
-    const createPostForm = document.querySelector('#createPostForm')
+    const createPostForm = document.querySelector('#create-post-form')
     const notifications = document.querySelector(".notifications");
     const loader = document.querySelector(".loader")
 
diff --git a/src/js/modules/create-post/createPostView.js b/src/js/modules/create-post/createPostView.js
@@ -28,7 +28,7 @@ export const buildCreatePostForm = () => {
         <input required id="post-price" name="post-price" type="number" min="1" max="9999999" step="0.01"
             placeholder="Introduce the price of your product." />
 
-        <div>
+        <div class="radio-button">
             <label for="purchase">
                 <input required type="radio" id="purchase" name="transactionType" value="purchase">
                 Purchase
diff --git a/src/styles/common.css b/src/styles/common.css
@@ -20,21 +20,22 @@ body {
 main {
     max-width: 1440px;
 
-    margin: clamp(5px, 2vw, 1rem) clamp(10px, 5vw, 2rem);
     margin-top: 0;
     margin-bottom: 0;
 
+    margin-left: auto;
+    margin-right: auto;
+
     padding: 1rem;
 
     background-color: var(--bg-color-4);
-    margin-left: auto;
-    margin-right: auto;
+
 }
 
-video,
+/* video,
 iframe {
     max-width: 100%;
-}
+} */
 
 a {
     text-decoration: none;
@@ -65,10 +66,29 @@ textarea,
 label,
 p,
 textarea,
-button {
-    padding: 5px;
+button,
+select {
+    padding: 7px;
 }
 
+.radio-button{
+    display: flex;
+    flex-direction: row;        /* formato horizontal */
+    align-items: center;        /* centra verticalmente el contenido */
+    justify-content: start;    /* opcional: centra horizontalmente */
+    gap: 1rem; 
+}
+
+.radio-button label{
+    display: flex;
+    align-items: center;  
+}
+
+.radio-button label input{
+    margin: 0;
+}
+
+
 
 p {
     white-space: pre-line;
diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css
diff --git a/src/styles/form.css b/src/styles/form.css
@@ -4,18 +4,51 @@
     align-items: stretch;
     flex-direction: column;
 
-    padding: clamp(1rem, 5vw, 2rem);
+    padding-left: clamp(1rem, 5vw, 4rem);
+    padding-right: clamp(1rem, 5vw, 4rem);
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    margin-right: 5%;
+    margin-left: 5%;
 
     background-color: var(--bg-color-3);
 }
 
+form button{
+    font-weight: bold;
+    align-self: self-start;
+    width: 1auto;
+    padding-right: 1rem;
+    padding-left: 1rem;
+}
+
+textarea {
+    max-width: 100%;
+    min-width: 100%;
+
+    min-height: 10rem;
+    max-height: 10rem;
+}
+
 .form input,
 textarea,
-label,
-p {
+select {
     margin-bottom: 1rem;
 }
 
 .form label {
     font-weight: bold;
+}
+
+.form .radio-button{
+    margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+    .form {
+        margin-right: 20%;
+        margin-left: 20%;
+    }
 }
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
@@ -13,7 +13,9 @@
     margin-left: auto;
     margin-right: auto;
 
-    padding: clamp(1px, 5vw, 16px);
+    padding-top: clamp(1px, 5vw, 16px);
+    padding-bottom: clamp(1px, 5vw, 16px);
+
 
     max-width: 1440px;
 
diff --git a/views/create-post.html b/views/create-post.html
@@ -22,52 +22,25 @@
     <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/buttons.css">
 </head>
 
 <body>
-
     <div class="navbar"></div>
 
-    <h1>Create Post</h1>
-
-    <div class="loader-container">
-        <div class="loader hidden"></div>
-    </div>
-
-    <div class="notifications"></div>
+    <main>
+        <h1>Create Post</h1>
 
-    <form id="createPostForm" class="form"></form>
-<!--     <form id="createPostForm" class="form">
-        <label for="post-image">Photo: </label>
-        <input type="file" id="post-image" name="photo" accept="image/*">
-
-        <label for="post-name">Product Name: </label>
-        <input required id="post-name" name="post-name" type="text" maxlength="120"
-            placeholder="Introduce the name of your post." />
-
-        <label for="post-description">Description: </label>
-        <textarea required name="post-description" id="post-description" maxlength="300"
-            placeholder="Max. Length 300"></textarea>
+        <div class="loader-container">
+            <div class="loader hidden"></div>
+        </div>
 
-        <label for="post-price">Price: </label>
-        <input required id="post-price" name="post-price" type="number" min="1" max="9999999" step="0.01"
-            placeholder="Introduce the price of your product." />
+        <div class="notifications"></div>
 
-        <div>
-            <label for="purchase">
-                <input required type="radio" id="purchase" name="transactionType" value="purchase">
-                Purchase
-            </label>
+        <form id="create-post-form" class="form"></form>
+    </main>
 
-            <label for="sale">
-                <input required type="radio" id="sale" name="transactionType" value="sale">
-                Sale
-            </label>
-        </div>
 
-        <button>Create Post</button>
-    </form> -->
 
     <div class="footer"></div>
     <script type="module" src="../src/js/main.js"></script>

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export function initCreatePost() {`
`12`	`12`	`window.location = '/views/login.html'`
`13`	`13`	`}`
`14`	`14`
`15`		`- const createPostForm = document.querySelector('#createPostForm')`
	`15`	`+ const createPostForm = document.querySelector('#create-post-form')`
`16`	`16`	`const notifications = document.querySelector(".notifications");`
`17`	`17`	`const loader = document.querySelector(".loader")`
`18`	`18`