initial table style

sancsoft · Apr 26, 2024 · 2f5146d · 2f5146d
1 parent af535ca
commit 2f5146d
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 128 deletions.
diff --git a/src/angular/hq/src/app/app.component.html b/src/angular/hq/src/app/app.component.html
@@ -1,45 +1,108 @@
 <!-- header -->
 <header class="justify-between items-end grid grid-cols-3 py-4 px-6">
-    <!-- col one -->
-    <div>&nbsp;</div>
-    <!-- col two -->
-    <nav class="nav flex flex-1 justify-center h-[30px]">
-        <div class="px-5 border-r border-r-gray-100"><a routerLink="/clients" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">Clients</a></div>
-        <div class="px-5 border-r border-r-gray-100"><a routerLink="/psr" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">PSR</a></div>
-        <div class="px-5"><a routerLink="/my-stuff" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">My Stuff</a></div>
-    </nav>
-    <!-- col three -->
-    <div class="flex column justify-end items-center">
-        <!-- my account dropdown menu -->
-        <div class="inline-block pe-10">
-            <div class="relative inline-block h-full">
-                <button class="block font-semibold text-[10px] h-full" (click)="dropdownOpen = !dropdownOpen">
-                    Last Name, First Name
-                    <span>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill inline-block w-[10px]" viewBox="0 0 16 16">
-                            <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
-                        </svg>
-                    </span>
-                </button>
-                <div [ngClass]="{ 'opacity-100': dropdownOpen, 'opacity-0': !dropdownOpen }" class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-sm bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" tabindex="-1">
-                    <a routerLink="/"class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">My Account</a>
-                    <a routerLink="/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</a>
-                </div>
-            </div>
+  <!-- col one -->
+  <div>&nbsp;</div>
+  <!-- col two -->
+  <nav class="nav flex flex-1 justify-center h-[30px]">
+    <div class="px-5 border-r border-r-gray-100">
+      <a
+        routerLink="/clients"
+        routerLinkActive="text-gray-100 border-b border-b-orange-500/100"
+        class="inline-block text-center font-bold text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]"
+        >Clients</a
+      >
+    </div>
+    <div class="px-5 border-r border-r-gray-100">
+      <a
+        routerLink="/psr"
+        routerLinkActive="text-gray-100 border-b border-b-orange-500/100"
+        class="inline-block text-center font-bold text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]"
+        >PSR</a
+      >
+    </div>
+    <div class="px-5">
+      <a
+        routerLink="/my-stuff"
+        routerLinkActive="text-gray-100 border-b border-b-orange-500/100"
+        class="inline-block text-center font-bold text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]"
+        >My Stuff</a
+      >
+    </div>
+  </nav>
+  <!-- col three -->
+  <div class="flex column justify-end items-center">
+    <!-- my account dropdown menu -->
+    <div class="inline-block pe-10">
+      <div class="relative inline-block h-full">
+        <button
+          class="block font-semibold text-[10px] h-full"
+          (click)="dropdownOpen = !dropdownOpen"
+        >
+          Last Name, First Name
+          <span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-caret-down-fill inline-block w-[10px]"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
+              />
+            </svg>
+          </span>
+        </button>
+        <div
+          [ngClass]="{
+            'opacity-100': dropdownOpen,
+            'opacity-0': !dropdownOpen
+          }"
+          class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-sm bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          tabindex="-1"
+        >
+          <a
+            routerLink="/"
+            class="block px-4 py-2 text-gray-700"
+            role="menuitem"
+            tabindex="-1"
+            id="user-menu-item-0"
+            >My Account</a
+          >
+          <a
+            routerLink="/"
+            class="block px-4 py-2 text-gray-700"
+            role="menuitem"
+            tabindex="-1"
+            id="user-menu-item-1"
+            >Sign out</a
+          >
         </div>
-        <div class="inline-block"><a routerLink="/"><img src="/assets/logo.svg" alt="Sanctuary Software Studio, Inc." style="height:30px;"></a></div>
+      </div>
+    </div>
+    <div class="inline-block">
+      <a routerLink="/"
+        ><img
+          src="/assets/logo.svg"
+          alt="Sanctuary Software Studio, Inc."
+          style="height: 30px"
+      /></a>
     </div>
+  </div>
 </header>
 
 <!-- router-outlet -->
 <div class="flex-1">
-    <router-outlet></router-outlet>
+  <router-outlet></router-outlet>
 </div>
 
 <!-- footer -->
 <footer class="px-6 py-4">
-    <div class="flex justify-between">
-        <div class="text-[10px] text-gray-50">&copy;Sanctuary Software Studio Inc.</div>
-        <div class="text-[10px] text-gray-50">1-20 / 200 items</div>
+  <div class="flex justify-between">
+    <div class="text-[10px] text-gray-50">
+      &copy;Sanctuary Software Studio Inc.
     </div>
-</footer>
+    <div class="text-[10px] text-gray-50">1-20 / 200 items</div>
+  </div>
+</footer>
diff --git a/src/angular/hq/src/app/clients/client-details/client-details.component.html b/src/angular/hq/src/app/clients/client-details/client-details.component.html
@@ -1,25 +1,47 @@
 <div class="px-6">
-    <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
+  <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
 
-    <div class="grid gap-2 grid-flow-row lg:grid-flow-col lg:gap-7 auto-cols-max pt-3 text-sm">
-        <div class="text-gray-50">$105.00</div>
-        <div class="text-gray-50">billingEmail&#64;clientDomain.com</div>
-        <div class="text-gray-50">Official Name - Probably longer than the name</div>
+  <div
+    class="grid gap-2 grid-flow-row lg:grid-flow-col lg:gap-7 auto-cols-max pt-3"
+  >
+    <div class="text-gray-50">$105.00</div>
+    <div class="text-gray-50">billingEmail&#64;clientDomain.com</div>
+    <div class="text-gray-50">
+      Official Name - Probably longer than the name
     </div>
+  </div>
 </div>
 
 <div class="px-6 pt-3">
-    <div class="flex flex-col lg:flex-row justify-between items-center">
-        <div class="order-2 lg:order-1">
-            Search, Dropdown, Toggle Here
-        </div>
-        <div class="flex divide-x order-1 lg:order-2">
-            <a routerLink="projects" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Projects</a>
-            <a routerLink="quotes" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Quotes</a>
-            <a routerLink="services" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Services</a>
-            <a routerLink="invoices" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Invoices</a>
-        </div>
+  <div class="flex flex-col lg:flex-row justify-between items-center">
+    <div class="order-2 lg:order-1">Search, Dropdown, Toggle Here</div>
+    <div class="flex divide-x order-1 lg:order-2">
+      <a
+        routerLink="projects"
+        routerLinkActive="bg-blue-900"
+        class="text-gray-100 bg-black-alt px-8 py-3 font-bold hover:bg-blue-900"
+        >Projects</a
+      >
+      <a
+        routerLink="quotes"
+        routerLinkActive="bg-blue-900"
+        class="text-gray-100 bg-black-alt px-8 py-3 font-bold hover:bg-blue-900"
+        >Quotes</a
+      >
+      <a
+        routerLink="services"
+        routerLinkActive="bg-blue-900"
+        class="text-gray-100 bg-black-alt px-8 py-3 font-bold hover:bg-blue-900"
+        >Services</a
+      >
+      <a
+        routerLink="invoices"
+        routerLinkActive="bg-blue-900"
+        class="text-gray-100 bg-black-alt px-8 py-3 font-bold hover:bg-blue-900"
+        >Invoices</a
+      >
     </div>
+  </div>
 </div>
 
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
diff --git a/src/angular/hq/src/app/clients/client-list/client-list.component.html b/src/angular/hq/src/app/clients/client-list/client-list.component.html
@@ -1,13 +1,11 @@
 <div class="px-6">
-    <h1 class="font-rajdhani font-semibold text-3xl">Clients</h1>
+  <h1 class="font-rajdhani font-semibold text-3xl">Clients</h1>
 
-    <div class="grid gap-7 grid-flow-col auto-cols-max pt-3 text-sm">
-        &nbsp;
-    </div>
+  <div class="grid gap-7 grid-flow-col auto-cols-max pt-3">&nbsp;</div>
 </div>
 
 <div class="px-6 pt-3">
-    <a routerLink="someId1">Some ID 1</a><br />
-    <a routerLink="someId2">Some ID 2</a><br />
-    <a routerLink="someId3">Some ID 3</a>
-</div>
+  <a routerLink="someId1">Some ID 1</a><br />
+  <a routerLink="someId2">Some ID 2</a><br />
+  <a routerLink="someId3">Some ID 3</a>
+</div>