Go through fucking hell to fix this stupid motherfucking search bar n…

…opt centerifn bdcgbjkljdgkfvhjldrrfg hjklsdx
LittleBigRefresh · May 29, 2024 · b71cf45 · b71cf45
1 parent eafc11b
commit b71cf45
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/src/app/components/ui/dialog.component.ts b/src/app/components/ui/dialog.component.ts
@@ -5,7 +5,7 @@ import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core
   standalone: true,
   imports: [],
   template: `
-    <dialog #dialog class="backdrop-brightness-50 text-foreground bg-opacity-0">
+    <dialog #dialog class="backdrop:backdrop-brightness-75 text-foreground bg-api-remove bg-opacity-0" tabindex="-1">
       <ng-content></ng-content>
     </dialog>
   `,

diff --git a/src/app/components/ui/form/search-bar.component.ts b/src/app/components/ui/form/search-bar.component.ts
@@ -2,18 +2,22 @@ import {Component, Input} from '@angular/core';
 import {faSearch} from "@fortawesome/free-solid-svg-icons";
 import {TextboxComponent} from "./textbox.component";
 import {FormGroup} from "@angular/forms";
+import {NgClass} from "@angular/common";
 
 @Component({
   selector: 'app-search-bar',
   standalone: true,
   imports: [
-    TextboxComponent
+    TextboxComponent,
+    NgClass
   ],
   template: `
-    <app-textbox [form]="form" ctrlName="query" [icon]="faSearch" placeholder="Search..."></app-textbox>
+    <app-textbox [form]="form" ctrlName="query" [icon]="faSearch" placeholder="Search..." [ngClass]="appClass"></app-textbox>
   `
 })
 export class SearchBarComponent {
   @Input({required: true}) form: FormGroup = null!;
+  @Input() appClass: string = "";
+
   protected readonly faSearch = faSearch;
 }
diff --git a/src/app/components/ui/form/textbox.component.ts b/src/app/components/ui/form/textbox.component.ts
@@ -14,9 +14,9 @@ import {NgIf} from "@angular/common";
   ],
   template: `
     <label [for]=ctrlName class="text-sm" *ngIf="label.length > 0">{{label}}</label>
-    <div [formGroup]="form" class="group rounded-full px-4 py-1.5 bg-teritary focus-within:outline-2 focus-within:outline focus-within:outline-secondary-bright max-w-fit text-nowrap transition-[outline]">
+    <div [formGroup]="form" class="min-w-full flex group rounded-full px-4 py-1.5 bg-teritary focus-within:outline-2 focus-within:outline focus-within:outline-secondary-bright max-w-fit text-nowrap transition-[outline]">
       <fa-icon [icon]="icon" class="text-gentle mr-2 group-focus-within:text-secondary-bright transition-colors"></fa-icon>
-      <input type="text" [id]=ctrlName [formControlName]="ctrlName" [placeholder]="placeholder" class="outline-none bg-teritary placeholder:text-gentle placeholder:italic" [required]="required">
+      <input type="text" [id]=ctrlName [formControlName]="ctrlName" [placeholder]="placeholder" class="grow outline-none bg-teritary placeholder:text-gentle placeholder:italic" [required]="required">
     </div>
   `
 })

diff --git a/src/app/overlays/search.component.ts b/src/app/overlays/search.component.ts
@@ -28,9 +28,13 @@ import {LayoutService} from "../services/layout.service";
     </a>
     
     <app-dialog *ngIf="show">
-      <app-form [form]="searchForm" [compact]="true" (submit)="search()" *ngIf="!(layout.isMobile | async)" class="w-[640px]">
-        <app-search-bar [form]="searchForm"></app-search-bar>
-      </app-form>
+      <div class="w-[640px] p-5">
+        <app-form [form]="searchForm" [compact]="true" (submit)="search()" *ngIf="!(layout.isMobile | async)" class="">
+          <div class="flex flex-col">
+            <app-search-bar [form]="searchForm" appClass="min-w-full"></app-search-bar>
+          </div>
+        </app-form>
+      </div>
     </app-dialog>
   `,
   styles: ``

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,6 +11,7 @@ const defaultColors = {
   "gentle": "#C3C3C3",
   "link": "#d4c6d5",
   "link-hover": "#fde9ff",
+  "invisible": "#00000000",
 
   "primary": "#A13DE3",
   "secondary": "#87748A",