pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update layout ui

Browse source
This commit is contained in:
Kenta420-Poom 2023-09-21 12:37:21 +07:00
parent 17ad8486a6
commit 51ba80406a
9 changed files with 143 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/app/app-routing.module.ts
View file

@ -65,12 +65,16 @@ const routes: Routes = [
),
canActivate: [authGuard],
},
],
},
{
path: 'log',
loadComponent: () => import('./features/changelog/changelog.component').then((m) => m.ChangelogComponent),
loadComponent: () =>
import('./features/changelog/changelog.component').then(
(m) => m.ChangelogComponent
),
},
],
},
{
path: '**',
pathMatch: 'full',

4
client/src/app/core/layout/header.component.html
View file

@ -12,12 +12,12 @@
<div class="flex flex-row items-center" *ngIf="user; else login_button">
<div class="flex flex-col items-center px-5">
<span
class="flex items-center text-primary text-xl font-normal font-[kanit]"
class="flex items-center text-primary text-xl font-normal font-kanit"
>
{{ date | date : "dd MMM yyyy" }}
</span>
<span
class="flex items-center text-primary text-xl font-normal font-[kanit]"
class="flex items-center text-primary text-xl font-normal font-kanit"
>
{{ user.username }}
</span>

69
client/src/app/core/layout/layout.component.html
View file

@ -24,48 +24,70 @@
></path>
</svg>
</button>
<a routerLink="/dashboard" class="flex ml-2 md:mr-24">
<a routerLink="/dashboard" class="flex ml-2 md:mr-24 max-sm:hidden">
<img
src="assets/logo.svg"
class="h-10 md:h-20 mr-3"
class="h-10 md:h-20 px-4"
alt="Tao Bin Logo"
/>
</a>
</div>
<div class="flex items-center">
<div class="flex items-center ml-3">
<div>
<div class="flex flex-row">
<div class="flex justify-center sm:flex-row md:flex-col sm:px-5">
<span
class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
>
{{ date | date : "dd MMM yyyy" }}
</span>
<p
class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
>
|
</p>
<span
class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
>
{{ user?.username }}
</span>
</div>
<button
type="button"
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 max-sm:hidden"
aria-expanded="false"
data-dropdown-toggle="dropdown-user"
>
<span class="sr-only">Open user menu</span>
<img
class="w-8 h-8 rounded-full"
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
alt="user photo"
class="sm:h-10 md:h-14 rounded-full cursor-pointer"
src="{{ user?.image }}"
loading="lazy"
alt="profile picture"
/>
</button>
</div>
<div
class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
id="dropdown-user"
>
<div class="px-4 py-3" role="none">
<p class="text-sm text-gray-900" role="none">Neil Sims</p>
<p class="text-sm text-gray-900" role="none">
{{ user?.username }}
</p>
<p class="text-sm font-medium text-gray-900 truncate" role="none">
neil.sims@flowbite.com
{{ user?.email }}
</p>
</div>
<ul class="py-1" role="none">
<li>
<a
href="#"
routerLink="/dashboard"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Dashboard</a
>
Dashboard</a
>
</li>
<li>
@ -78,17 +100,10 @@
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Earnings</a
>
</li>
<li>
<a
href="#"
routerLink="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
(click)="logout()"
>Sign out</a
>
</li>
@ -107,13 +122,19 @@
>
<div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
<ul class="space-y-2 font-medium">
<li *ngFor="let item of menuItems">
<li *ngFor="let menu of menuItems">
<a
[routerLink]="item.url"
routerLink="{{ menu.link }}"
routerLinkActive="bg-gray-100 text-gray-900"
class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
>
<img src="{{ item.icon_url }}" class="w-6 h-6" alt="icon" />
<span class="ml-3 capitalize">{{ item.name }}</span>
<img
*ngIf="menu.icon_url"
class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
src="{{ menu.icon_url }}"
alt="dashboard icon"
/>
<span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
</a>
</li>
</ul>

46
client/src/app/core/layout/layout.component.ts
View file

@ -3,12 +3,17 @@ import { HeaderComponent } from './header.component';
import { FooterComponent } from './footer.component';
import { RouterModule } from '@angular/router';
import { SidebarComponent } from './sidebar.component';
import { NgFor } from '@angular/common';
import { DatePipe, NgFor, NgIf } from '@angular/common';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
import { UserService } from '../services/user.service';
import { User } from '../models/user.model';
import { initFlowbite } from 'flowbite';
import { Subject, takeUntil } from 'rxjs';
interface MenuItem {
name: string;
icon_url: string;
url: string;
icon_url?: string;
link: string;
}
@Component({
@ -21,19 +26,42 @@ interface MenuItem {
SidebarComponent,
RouterModule,
NgFor,
NgIf,
GoogleButtonComponent,
DatePipe,
],
})
export class LayoutComponent {
export class LayoutComponent implements OnInit {
menuItems: MenuItem[] = [
{
name: 'Dashboard',
icon_url: 'assets/images/icons/dashboard.svg',
url: '/dashboard',
icon_url: 'assets/icons/dashboard.svg',
link: '/dashboard',
},
{
name: 'log',
icon_url: 'assets/images/icons/log.svg',
url: '/log',
name: 'Log',
icon_url: 'assets/icons/logs.svg',
link: '/log',
},
];
date = new Date();
isMenuOpen: boolean = false;
user: User | null = null;
exit$ = new Subject<void>();
constructor(private _userService: UserService) {}
ngOnInit(): void {
initFlowbite();
this._userService.currentUser
.pipe(takeUntil(this.exit$))
.subscribe((user) => (this.user = user));
}
logout() {
this.exit$.next();
this.exit$.complete();
this._userService.logout();
}
}

46
client/src/app/features/dashboard/dashboard.component.html
View file

@ -1,3 +1,45 @@
<main class="flex justify-center">
<p>Dashboard</p>
<main class="relative overflow-hidden shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500">
<caption
class="p-5 text-lg font-semibold text-left text-gray-900 bg-primary"
>
Our products
<p class="mt-1 text-sm font-normal text-gray-200">
Browse a list of Flowbite products designed to help you work and play,
stay organized, get answers, keep in touch, grow your business, and
more.
</p>
</caption>
<thead class="text-xs text-gray-700 uppercase bg-secondary">
<tr>
<th scope="col" class="px-6 py-3">Product name</th>
<th scope="col" class="px-6 py-3">Color</th>
<th scope="col" class="px-6 py-3">Category</th>
<th scope="col" class="px-6 py-3 sm:hidden md:block">Price</th>
<th scope="col" class="px-6 py-3">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Apple MacBook Pro 17"
</th>
<td class="px-6 py-4">Silver</td>
<td class="px-6 py-4">Laptop</td>
<td class="px-6 py-4 sm:hidden md:block">$2999</td>
<td class="px-6 py-4 text-right">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>Edit</a
>
</td>
</tr>
</tbody>
</table>
</main>

1
client/src/assets/icons/dashboard.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M520-600v-240h320v240H520ZM120-440v-400h320v400H120Zm400 320v-400h320v400H520Zm-400 0v-240h320v240H120Zm80-400h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 340 B

1
client/src/assets/icons/logout.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 258 B

1
client/src/assets/icons/logs.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm80-80h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm200-190q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 477 B

4
client/tailwind.config.js
View file

@ -8,9 +8,13 @@ module.exports = {
extend: {
"backgroundColor": {
"primary": "#EAE6E1",
"secondary": "#F5F5F5",
},
"textColor": {
"primary": "#513C2F",
},
"fontFamily": {
"kanit": ["Kanit"],
}
},
},