Skip to content

Commit

Permalink
templates round 2
Browse files Browse the repository at this point in the history
  • Loading branch information
ncrosssancsoft committed Apr 29, 2024
1 parent c931246 commit 1120c5f
Show file tree
Hide file tree
Showing 9 changed files with 353 additions and 138 deletions.
18 changes: 8 additions & 10 deletions src/angular/hq/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!-- header -->
<header class="justify-between items-end grid grid-cols-3 py-4 px-5">
<header class="flex justify-between items-end xl:grid auto-cols-min xl:grid-cols-3 py-4 px-5">
<!-- col one -->
<div>&nbsp;</div>
<div class="hidden xl:block">&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-nav-disabled border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">My Stuff</a></div>
<nav class="nav flex flex-1 xl:justify-center h-[30px]">
<div class="px-[0.969rem] 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-[0.969rem] 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-[0.969rem]"><a routerLink="/my-stuff" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-nav-disabled border-b border-b-orange-500/0 px-3 py-1 max-w-[100px]">My Stuff</a></div>
</nav>
<!-- col three -->
<div class="flex column justify-end items-center">
Expand All @@ -16,12 +16,10 @@
<button class="block font-semibold text-xs 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>
<i class="bi bi-caret-down-fill text-[8px]"></i>
</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">
<div [ngClass]="{ 'opacity-100 z-20': dropdownOpen, 'opacity-0 -z-10': !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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,42 +1,38 @@
<div class="px-5">
<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-[30px] auto-cols-max pt-3">
<div class="grid grid-flow-col gap-[30px] 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-5 pt-4">
<div class="flex flex-col lg:flex-row justify-between items-start">
<div class="flex items-center order-2 lg:order-1 gap-[30px]">
<div class="flex flex-col xl:flex-row justify-between items-start gap-4">
<div class="flex w-full flex-1 items-center gap-[20px] mb-[8px] xl:mb-0">
<!-- search bar -->
<div class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded-sm h-[36px] w-[395px]">
<div class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-full max-w-[395px]">
<span class="relative flex items-center justify-center text-center whitespace-nowrap w-[36px] hover:cursor-pointer after:block after:w-[1px] after:absolute after:right-[1px] after:top-[6px] after:bottom-[6px] after:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="width:16px; height:16px;">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
<i class="bi bi-search text-[14px]"></i>
</span>
<input type="text" class="w-[100%] block bg-white text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded-sm" name="">
<input type="text" class="w-[100%] block text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded" name="">
</div>

<!-- select dropdown -->
<div class="grid relative w-[220px]">
<select class="w-[100%] pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded-sm h-[36px]" style="line-height:normal;">
<div class="grid relative w-full max-w-[220px]">
<select class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px]">
<option>In Production</option>
<option>Ongoing</option>
</select>
<span class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100">
<svg class="forced-colors:hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="width:23px; height:23px;">
<path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4"/>
</svg>
<i class="bi bi-arrow-down-short text-[24px]"></i>
</span>
</div>

<!-- toggle switch -->
<div class="inline-flex items-center">
<div class="text-[12px] mr-[10px]">Show current only</div>
<div class="text-[12px] mr-[10px] leading-none text-nowrap">Show current only</div>
<label class="relative inline-flex cursor-pointer items-center">
<input id="switch" type="checkbox" class="peer sr-only" checked />
<label for="switch" class="hidden"></label>
Expand All @@ -45,7 +41,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
<div class="text-xs ml-[6px]">On</div>
</div>
</div>
<div class="flex divide-x order-1 lg:order-2">
<div class="flex divide-x ml-auto">
<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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1,45 @@
project list
<table class="min-w-full border-spacing-0 border-separate">
<thead>
<tr class="sticky top-0 text-left">
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">Client Name</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Official Name</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Billing Email</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 text-right pr-5" colspan="2">
<button class="px-2 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-[2px] min-w-[120px] font-normal">Client</button>
</th>
</tr>
</thead>
<tbody>
@for(i of [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; track i)
{
<tr class="even:bg-gray-850 odd:bg-black-alt">
<td class="border-b border-black py-2 pl-5">Client {{ i }}</td>
<td class="border-b border-black py-2">$105.00</td>
<td class="border-b border-black py-2">billiningEmail&#64;client{{ i }}.com</td>
<td class="border-b border-black py-2">Official Name - Probably longer than the Name</td>
<td class="border-b border-black py-2 text-right pr-5"><a class="text-teal-200 hover:text-teal-300">VIEW</a></td>
</tr>
}
</tbody>
</table>
<div class="justify-between items-center grid grid-cols-3 py-3 px-5 bg-blue-900 border-y border-steel-blue-600">
<div>
<select class="bg-black-alt border border-gray-300 rounded py-1 px-2 mr-2">
<option value="20">20</option>
<!-- Add more options as needed -->
</select>
<span>items per page</span>
</div>
<div class="flex items-center justify-center">
<a href="#" class="mx-2 hover:text-gray-200">&lt;</a>
<span class="mx-2">1</span>
<a href="#" class="mx-2 hover:text-gray-200">2</a>
<a href="#" class="mx-2 hover:text-gray-200">3</a>
<a href="#" class="mx-2 hover:text-gray-200">4</a>
<a href="#" class="mx-2 hover:text-gray-200">5</a>
<a href="#" class="mx-2 hover:text-gray-200">&gt;</a>
</div>
<div class="flex justify-end text-xs">
1-20 / 200 items
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,55 +1,45 @@
<table class="min-w-full border-collapse border">
<thead class="border">
<tr>
<th class="">Client Name</th>
<th class="">Rate</th>
<th class="">Billing Email</th>
<th class="">Official Name</th>
<th class=""><button>Client</button></th>
<table class="min-w-full border-spacing-0 border-separate">
<thead>
<tr class="sticky top-0 text-left">
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">Client Name</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Official Name</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Billing Email</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 text-right pr-5" colspan="2">
<button class="px-2 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-[2px] min-w-[120px] font-normal">Client</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="">48HrBooks</td>
<td class="">$105.00</td>
<td class="">billiningEmail&#64;48HrBooks.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">ABB</td>
<td class="">$115.00</td>
<td class="">billiningEmail&#64;abb.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">JDM</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;jdm.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">Milliken</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;milliken.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">XB</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;xb.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">Zomedica</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;zomedica.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
</tbody>
</table>
</thead>
<tbody>
@for(i of [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; track i)
{
<tr class="even:bg-gray-850 odd:bg-black-alt">
<td class="border-b border-black py-2 pl-5">Client {{ i }}</td>
<td class="border-b border-black py-2">$105.00</td>
<td class="border-b border-black py-2">billiningEmail&#64;client{{ i }}.com</td>
<td class="border-b border-black py-2">Official Name - Probably longer than the Name</td>
<td class="border-b border-black py-2 text-right pr-5"><a class="text-teal-200 hover:text-teal-300">VIEW</a></td>
</tr>
}
</tbody>
</table>
<div class="justify-between items-center grid grid-cols-3 py-3 px-5 bg-blue-900 border-y border-steel-blue-600">
<div>
<select class="bg-black-alt border border-gray-300 rounded py-1 px-2 mr-2">
<option value="20">20</option>
<!-- Add more options as needed -->
</select>
<span>items per page</span>
</div>
<div class="flex items-center justify-center">
<a href="#" class="mx-2 hover:text-gray-200">&lt;</a>
<span class="mx-2">1</span>
<a href="#" class="mx-2 hover:text-gray-200">2</a>
<a href="#" class="mx-2 hover:text-gray-200">3</a>
<a href="#" class="mx-2 hover:text-gray-200">4</a>
<a href="#" class="mx-2 hover:text-gray-200">5</a>
<a href="#" class="mx-2 hover:text-gray-200">&gt;</a>
</div>
<div class="flex justify-end text-xs">
1-20 / 200 items
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,55 +1,45 @@
<table class="min-w-full border-collapse border">
<thead class="border">
<tr>
<th class="">Client Name</th>
<th class="">Rate</th>
<th class="">Billing Email</th>
<th class="">Official Name</th>
<th class=""><button>Client</button></th>
</tr>
<table class="min-w-full border-spacing-0 border-separate">
<thead>
<tr class="sticky top-0 text-left">
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">Client Name</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Official Name</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Billing Email</th>
<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 text-right pr-5" colspan="2">
<button class="px-2 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-[2px] min-w-[120px] font-normal">Client</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="">48HrBooks</td>
<td class="">$105.00</td>
<td class="">billiningEmail&#64;48HrBooks.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">ABB</td>
<td class="">$115.00</td>
<td class="">billiningEmail&#64;abb.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">JDM</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;jdm.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">Milliken</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;milliken.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">XB</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;xb.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
<tr>
<td class="">Zomedica</td>
<td class="">$100.00</td>
<td class="">billiningEmail&#64;zomedica.com</td>
<td class="">Official Name - Probably longer than the Name</td>
<td><a>VIEW</a></td>
</tr>
@for(i of [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; track i)
{
<tr class="even:bg-gray-850 odd:bg-black-alt">
<td class="border-b border-black py-2 pl-5">Client {{ i }}</td>
<td class="border-b border-black py-2">$105.00</td>
<td class="border-b border-black py-2">billiningEmail&#64;client{{ i }}.com</td>
<td class="border-b border-black py-2">Official Name - Probably longer than the Name</td>
<td class="border-b border-black py-2 text-right pr-5"><a class="text-teal-200 hover:text-teal-300">VIEW</a></td>
</tr>
}
</tbody>
</table>
</table>
<div class="justify-between items-center grid grid-cols-3 py-3 px-5 bg-blue-900 border-y border-steel-blue-600">
<div>
<select class="bg-black-alt border border-gray-300 rounded py-1 px-2 mr-2">
<option value="20">20</option>
<!-- Add more options as needed -->
</select>
<span>items per page</span>
</div>
<div class="flex items-center justify-center">
<a href="#" class="mx-2 hover:text-gray-200">&lt;</a>
<span class="mx-2">1</span>
<a href="#" class="mx-2 hover:text-gray-200">2</a>
<a href="#" class="mx-2 hover:text-gray-200">3</a>
<a href="#" class="mx-2 hover:text-gray-200">4</a>
<a href="#" class="mx-2 hover:text-gray-200">5</a>
<a href="#" class="mx-2 hover:text-gray-200">&gt;</a>
</div>
<div class="flex justify-end text-xs">
1-20 / 200 items
</div>
</div>
Loading

0 comments on commit 1120c5f

Please sign in to comment.