Merge pull request #56 from Fernanda-Kipper/feature/bug-fixes

Correções de Responsividade
Fernanda-Kipper · Jul 14, 2024 · 686b6a1 · 686b6a1
2 parents 15d4a39 + 5e659e2
commit 686b6a1
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/src/app/components/event/event.component.html b/src/app/components/event/event.component.html
@@ -1,5 +1,7 @@
 <li>
-  <div class="overflow-hidden rounded-lg bg-white shadow w-96 h-96 relative">
+  <div
+    class="overflow-hidden rounded-lg bg-white shadow w-80 md:w-96 h-96 relative"
+  >
     <div>
       <img
         data-testid="bannerImg"

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -14,30 +14,32 @@
         </h3>
       </a>
     </div>
-    <div
-      class="search-bar w-full max-w-full flex flex-1 md:basis-0 basis-full order-3 md:order-2 md:max-w-96 justify-center align-middle p-2 border rounded-lg h-12 transition duration-500 ease-in-out focus-within:border-kipperdev-purple-primary/60"
-    >
-      <div class="w-5 h-5 self-center">
-        <svg
-          class="w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
-          />
-        </svg>
+    @if (showSearchBar) {
+      <div
+        class="search-bar w-full max-w-full flex flex-1 md:basis-0 basis-full order-3 md:order-2 md:max-w-96 justify-center align-middle p-2 border rounded-lg h-12 transition duration-500 ease-in-out focus-within:border-kipperdev-purple-primary/60"
+      >
+        <div class="w-5 h-5 self-center">
+          <svg
+            class="w-5 h-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
+            />
+          </svg>
+        </div>
+        <input
+          data-testid="inputSearch"
+          type="text"
+          placeholder="Pesquisar eventos"
+          class="px-2 outline-none text-base w-full"
+          (keyup)="onSearchTerm($event)"
+        />
       </div>
-      <input
-        data-testid="inputSearch"
-        type="text"
-        placeholder="Pesquisar eventos"
-        class="px-2 outline-none text-base w-full"
-        (keyup)="onSearchTerm($event)"
-      />
-    </div>
+    }
     <div class="flex order-2 md:order-3 items-center justify-end gap-x-6">
       <button
         data-testid="addEventButton"

diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
@@ -11,6 +11,8 @@ export class HeaderComponent {
   searchTerm: string = '';
   debounceTimeout: ReturnType<typeof setTimeout> | undefined;
 
+  @Input() showSearchBar = true;
+
   @Output() searchTermChange: EventEmitter<string> = new EventEmitter<string>();
 
   onSearchTerm(event: KeyboardEvent) {

diff --git a/src/app/pages/event-details/event-details.component.html b/src/app/pages/event-details/event-details.component.html
@@ -1,4 +1,4 @@
-<app-header />
+<app-header [showSearchBar]="false" />
 @if (event$ | async; as event) {
   <div class="relative top-0 h-500">
     <div class="absolute inset-0 overflow-hidden">
@@ -15,7 +15,7 @@
     />
   </div>
   <div
-    class="mt-28 py-8 px-4 shadow-custom-shadow w-1100 max-w-full mx-auto bg-kipperdev-darkWhite rounded-md flex flex-col gap-3"
+    class="mt-28 mx-4 py-8 px-4 shadow-custom-shadow md:w-1100 max-w-full md:mx-auto bg-kipperdev-darkWhite rounded-md flex flex-col gap-3"
   >
     <span
       class="text-3xl font-bold text-kipperdev-purple-dark flex items-center gap-2"