From 6c3e4d2f7072ae2d1737c5f066a48e58552881d1 Mon Sep 17 00:00:00 2001
From: GiovannaNaves <110492330+GiovannaNaves@users.noreply.github.com>
Date: Mon, 18 Nov 2024 21:32:42 -0300
Subject: [PATCH] Fix
---
docs/pages/app_createtopic.html | 558 ++++++++++++++++----------------
docs/pages/css/styles.css | 294 +++++++++++++++++
docs/pages/styles.css | 218 -------------
3 files changed, 574 insertions(+), 496 deletions(-)
create mode 100644 docs/pages/css/styles.css
delete mode 100644 docs/pages/styles.css
diff --git a/docs/pages/app_createtopic.html b/docs/pages/app_createtopic.html
index 04bb01a..02bc5d2 100644
--- a/docs/pages/app_createtopic.html
+++ b/docs/pages/app_createtopic.html
@@ -1,298 +1,300 @@
+
-
-
-Criar Tópico
-
+
+
+ Criar Tópico
+
+
-
+
-
+
-
-
Criar Tópico
-
-
-
-
-
-
+
+
-
+
+
\ No newline at end of file
diff --git a/docs/pages/css/styles.css b/docs/pages/css/styles.css
new file mode 100644
index 0000000..0cd8c10
--- /dev/null
+++ b/docs/pages/css/styles.css
@@ -0,0 +1,294 @@
+body {
+ margin: 0;
+ font-family: 'Arial', sans-serif;
+ display: flex;
+ flex-direction: row;
+ min-height: 100vh;
+ overflow-x: hidden;
+ background-color: #f4f4f4; /* Fundo mais claro */
+}
+
+.navbar {
+ width: 200px;
+ background-color: #003366; /* Azul mais suave */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 20px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ color: white;
+}
+
+.navbar .logo {
+ margin-bottom: 20px;
+ width: 75%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.navbar .logo img {
+ max-width: 100%;
+ height: auto;
+}
+
+.navbar ul {
+ list-style-type: none;
+ padding: 0;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+.navbar ul li {
+ width: 100%;
+ text-align: center;
+ margin: 10px 0;
+}
+
+.navbar ul li a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ padding: 10px 0;
+ font-weight: bold;
+ transition: background-color 0.3s ease; /* Transição suave */
+}
+
+.navbar ul li a:hover {
+ background-color: #0056b3;
+}
+
+.content-container {
+ margin-left: 220px;
+ padding: 20px;
+ box-sizing: border-box;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background-color: white; /* Fundo branco para o conteúdo */
+ border-radius: 10px; /* Bordas arredondadas */
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
+ margin-top: 80px;
+}
+
+.content-container h1 {
+ margin-top: 0;
+ font-weight: bold;
+ color: #333; /* Cor do texto */
+ font-size: 24px; /* Aumentar tamanho do título */
+}
+
+.content-container #content-body {
+ margin-top: 10px;
+ font-size: 16px;
+ line-height: 1.6; /* Melhorar espaçamento entre linhas */
+ padding: 10px; /* Espaçamento ao redor do conteúdo */
+ border-radius: 5px; /* Bordas arredondadas para o corpo do conteúdo */
+ background-color: #f9f9f9; /* Fundo leve para destacar o conteúdo */
+}
+
+.menu-bar {
+ width: 20%;
+ position: absolute;
+ top: 20px;
+ right: 60px;
+ display: flex;
+ justify-content: center;
+ z-index: 1;
+}
+
+.menu {
+ flex: 1;
+ padding: 10px;
+ background-color: #f7f7f7;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ cursor: pointer;
+ text-align: center;
+ transition: background-color 0.3s ease;
+}
+
+.menu:hover {
+ background-color: #e6e6e6; /* Efeito hover mais visível */
+}
+
+.menu-options {
+ display: none;
+ flex-direction: column;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ position: absolute;
+ top: 45px;
+ width: 100%;
+ max-height: 200px;
+ overflow-y: auto;
+ z-index: 1;
+}
+
+.menu-option {
+ padding: 10px;
+ cursor: pointer;
+ text-align: left;
+}
+
+.menu-option:hover {
+ background-color: #f0f0f0;
+}
+
+.search-bar {
+ width: 30%;
+ top: 20px;
+ left: 260px;
+ display: flex;
+ justify-content: center;
+ position: absolute;
+}
+
+.search-input {
+ flex: 1;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px 0 0 5px;
+ font-size: 16px;
+}
+
+.search-button {
+ padding: 10px;
+ background-color: #007bff;
+ border: 1px solid #ccc;
+ border-radius: 0 5px 5px 0;
+ cursor: pointer;
+ color: white;
+ transition: background-color 0.3s ease;
+}
+
+.search-button:hover {
+ background-color: #0056b3;
+}
+
+.content-grid {
+ width: calc(100% - 240px);
+ margin-left: 240px;
+ margin-top: 60px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Melhora a responsividade */
+ grid-gap: 20px;
+ padding: 20px;
+ box-sizing: border-box;
+ max-width: 100%;
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: inherit;
+ border: 1px solid #ddd;
+ border-radius: 10px; /* Arredondar bordas */
+ overflow: hidden;
+ background-color: white;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ margin: 10px; /* Adiciona espaçamento entre os cards */
+ height: 300px; /* Altura fixa para todos os cards */
+ position: relative; /* Necessário para o alinhamento absoluto dos botões */
+}
+
+.card:hover {
+ transform: scale(1.05); /* Efeito de zoom suave */
+ box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Aumentar sombra no hover */
+}
+
+.card-img-top {
+ width: 100%;
+ height: 200px; /* Altura fixa para a imagem */
+ object-fit: cover; /* Garante que a imagem cubra todo o espaço disponível */
+}
+
+.card-body {
+ padding: 10px; /* Reduzir espaçamento interno do card */
+ font-size: 16px;
+ line-height: 1.4;
+ flex: 1; /* Permite que o conteúdo do card utilize o espaço restante */
+ display: flex;
+ flex-direction: column; /* Flexbox para alinhar título e conteúdo */
+ justify-content: flex-start; /* Alinha os itens no topo */
+}
+
+.card-title {
+ font-weight: bold; /* Destaque para o título do card */
+ margin: 5px 0; /* Espaçamento reduzido entre o título e o conteúdo */
+ text-align: left; /* Alinha o título à esquerda */
+ font-size: 18px; /* Aumenta o tamanho da fonte do título */
+}
+
+.card-content {
+ margin: 5px 0; /* Espaçamento reduzido abaixo do conteúdo do card */
+}
+
+.card-footer {
+ display: flex; /* Flexbox para alinhar os botões */
+ justify-content: flex-start; /* Alinha os botões à esquerda */
+ margin-top: auto; /* Empurra os botões para o final do card */
+}
+
+.favorite-button,
+.desfavoritar-button,
+.delete-button {
+ padding: 8px 12px; /* Ajustar padding para reduzir o tamanho */
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
+ margin-top: 10px;
+ max-width: 120px; /* Define uma largura máxima */
+ width: auto; /* Permite que a largura se ajuste ao conteúdo */
+ font-size: 14px; /* Ajusta o tamanho da fonte */
+ text-align: center; /* Centraliza o texto */
+}
+
+
+.favorite-button {
+ background-color: #007bff;
+ color: white;
+}
+
+.favorite-button:hover {
+ background-color: #0056b3;
+}
+
+.desfavoritar-button {
+ background-color: #ff3333;
+ color: white;
+}
+
+.desfavoritar-button:hover,
+.delete-button:hover {
+ background-color: #d11a2a;
+}
+
+.delete-button {
+ background-color: #ff3333;
+ color: white;
+}
+
+@media screen and (min-width: 768px) {
+ .content-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .content-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
\ No newline at end of file
diff --git a/docs/pages/styles.css b/docs/pages/styles.css
deleted file mode 100644
index 73415b0..0000000
--- a/docs/pages/styles.css
+++ /dev/null
@@ -1,218 +0,0 @@
-body {
- margin: 0;
- font-family: Arial, sans-serif;
- display: flex;
- flex-direction: row;
- min-height: 100vh;
- overflow-x: hidden;
-}
-
-.navbar {
- width: 200px;
- background-color: blue;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- padding: 20px;
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- color: white;
-}
-
-.navbar .logo {
- margin-bottom: 20px;
- width: 75%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.navbar .logo img {
- max-width: 100%;
- height: auto;
-}
-
-.navbar ul {
- list-style-type: none;
- padding: 0;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: auto;
- margin-bottom: auto;
-}
-
-.navbar ul li {
- width: 100%;
- text-align: center;
- margin: 10px 0;
-}
-
-.navbar ul li a {
- color: white;
- text-decoration: none;
- display: block;
- padding: 10px 0;
-}
-
-.navbar ul li a:hover {
- background-color: #0056b3;
-}
-
-.content-container {
- margin-left: 220px; /* Adicione margem à esquerda para não sobrepor a navbar */
- padding: 20px;
- box-sizing: border-box;
- flex: 1;
- display: flex;
- flex-direction: column;
- margin-top: 80px; /* Ajuste o topo para evitar sobreposição com a navbar */
-}
-
-.content-container h1 {
- margin-top: 0; /* Remova o espaçamento superior padrão do h1 */
- font-weight: bold;
-}
-
-.content-container #content-body {
- margin-top: 10px; /* Espaçamento superior para separar o título do conteúdo */
-}
-
-.menu-bar {
- width: 20%;
- position: absolute;
- top: 20px;
- right: 60px;
- display: flex;
- justify-content: center;
- z-index: 1;
-}
-
-.menu {
- flex: 1;
- padding: 5px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 5px;
- cursor: pointer;
- text-align: center;
-}
-
-.menu-options {
- display: none;
- flex-direction: column;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 5px;
- position: absolute;
- top: 45px;
- width: 100%;
- max-height: 200px;
- overflow-y: auto;
- z-index: 1;
-}
-
-.menu-option {
- padding: 5px;
- cursor: pointer;
- text-align: left;
-}
-
-.menu-option:hover {
- background-color: #f0f0f0;
-}
-
-.search-bar {
- width: 30%;
- top: 20px;
- left: 260px;
- display: flex;
- justify-content: center;
- position: absolute;
-}
-
-.search-input {
- flex: 1;
- padding: 8px;
- border: 1px solid #ccc;
- border-radius: 5px 0 0 5px;
-}
-
-.search-button {
- padding: 5px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 0 5px 5px 0;
- cursor: pointer;
-}
-
-.content-grid {
- width: calc(100% - 240px);
- margin-left: 240px;
- margin-top: 60px;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- grid-gap: 10px;
- padding: 20px;
- box-sizing: border-box;
- max-width: 100%;
- overflow-x: hidden;
-}
-
-.content {
- width: 100px;
- padding-top: 100%;
- position: relative;
- background-color: #ccc;
-}
-
-.card {
- display: flex;
- flex-direction: column;
- text-decoration: none;
- color: inherit;
- border: 1px solid #ddd;
- border-radius: 5px;
- overflow: hidden;
- background-color: white;
-}
-
-.card-img-top {
- width: 100%;
- height: 200px;
- object-fit: cover;
-}
-
-.card-body {
- padding: 10px;
-}
-
-.favorite-button {
- background-color: #007bff;
- color: white;
- border: none;
- padding: 5px;
- cursor: pointer;
- border-radius: 5px;
- margin-top: 5px;
-}
-
-.favorite-button:hover {
- background-color: #0056b3;
-}
-
-@media screen and (min-width: 768px) {
- .content-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media screen and (min-width: 992px) {
- .content-grid {
- grid-template-columns: repeat(3, 1fr);
- }
-}