Refatorando códigos

src/assets/css/style.css

@@ -221,9 +221,73 @@ button.add-item {
 }
 
 button.add-item:hover {
- 	cursor: pointer;
+	 cursor: pointer;
 }
 
+/* ARTICLE LISTS */
+.itens-list {
+	width: 100%;
+	display: inline-block;
+}
+
+.itens-list article {
+	background-color: var(--light-grey);
+	margin: 2em auto;
+	padding: 1.5em 2.5em;
+	width: 90%;
+	border-radius: 1.5vmax;
+}
+
+.itens-list article.autor {
+	border: 2px solid var(--principal-blue);
+}
+
+.itens-list article h3 {
+	color: var(--principal-blue);
+  display: inline;
+  margin: 0 1em 0 0;
+  vertical-align: middle;
+}
+
+.itens-list article .handle-item {
+	float: right;
+	vertical-align: middle;
+	font-size: 1.2em;
+}
+
+.itens-list article .handle-item button {
+	padding: 0;
+	border: none;
+	background: none;
+	font-size: 1em;
+}
+
+.itens-list article .handle-item button:hover {
+	cursor: pointer;
+}
+
+.itens-list article .handle-item button i {
+	margin-left: .5em;
+}
+
+.itens-list article .handle-item button.edit {
+	color: var(--blue);
+}
+
+.itens-list article .handle-item button.delete {
+	color: var(--red);
+}
+
+.itens-list article p.categoria {
+	display: inline-block;
+	padding: .3em .6em;
+	background-color: var(--grey);
+	color: var(--white);
+	font-weight: bold;
+	border-radius: .5vmax;
+}
+
+
 /* FOOTER */
 footer {
 	display: grid;
@@ -284,7 +348,8 @@ form .input-field label {
 }
 
 form .input-field input,
-form .input-field textarea {
+form .input-field textarea,
+form .input-field select {
 	max-width: 100%;
 	min-width: 100%;
 	margin-top: 0.5em;

src/forum/assets/css/forum.css

@@ -1,69 +1,6 @@
-main article {
-	background-color: var(--light-grey);
-	margin: 2em auto;
-	padding: 1.5em 2.5em;
-	width: 90%;
-	border-radius: 1.5vmax;
-}
-
-main article.autor {
-	border: 2px solid var(--principal-blue);
-}
-
-#posts {
-	display: inline-block;
-}
-
-#posts a {
-	color: inherit;
-}
-
-#posts article h3 {
-	color: var(--principal-blue);
-  display: inline;
-  margin: 0 1em 0 0;
-  vertical-align: middle;
-}
-
-#posts article p.categoria {
-  display: inline-block;
-  padding: .3em .6em;
-  background-color: var(--grey);
-	color: var(--white);
-	font-weight: bold;
-  border-radius: .5vmax;
-}
-
-#posts article .engajamento {
-	display: inline;
+#posts article .reactions {
+  float: right;
 	vertical-align: middle;
 	font-size: 1.2em;
-	float: right;
-}
-
-#posts article .engajamento span {
-	margin-right: 1em;
-}
-
-#posts article .engajamento button {
-  padding: 0;
-  border: none;
-  background: none;
-  font-size: 1em;
-}
-
-#posts article .engajamento button:hover {
-  cursor: pointer;
-}
-
-#posts article .engajamento .edit {
-  color: var(--blue);
-}
-
-#posts article .engajamento .delete {
-  color: var(--red);
-}
-
-#posts article .engajamento button i {
   margin-left: .5em;
 }

src/forum/assets/js/index.js

@@ -21,17 +21,22 @@ function generateHTML(post) {
       <a href="post.html?id=${id}">
         <h3 class="titulo">${titulo}</h3>
       </a>
-      <p class="categoria">${categoria}</p>
-      <div class="engajamento">
+      ${isAuthor ? `
+      <div class="handle-item">
+        <span>
+          <button value="${id}" class="edit"><i class="fas fa-edit"></i></button>
+          <button value="${id}" class="delete"><i class="fas fa-trash-alt"></i></button>
+        </span>
+      </div>` :
+      '' }
+
+      <div class="reactions">
         <span><i class="far fa-comment-alt"></i> ${comentarios.length}</span>
         <span><i class="far fa-thumbs-up"></i> ${curtidas}</span>
-        ${isAuthor ?
-          `<span>
-            <button value="${id}" class="edit"><i class="fas fa-edit"></i></button>
-            <button value="${id}" class="delete"><i class="fas fa-trash-alt"></i></button>
-          </span>` :
-          ''}
       </div>
+
+      <p class="categoria">${categoria}</p>
+
       <p id="conteudo">${conteudo}</p>
     </article>`;
 }

src/forum/index.html

@@ -47,7 +47,7 @@ <h2>Fórum</h2>
 
       <button class="add-item" id="add-post">Novo Post</button>
 
-      <section id="posts"></section>
+      <section class="itens-list" id="posts"></section>
     </section>
 
     <section id="modal" class="modal-overlay">