mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-03 15:11:37 +00:00
202 lines
10 KiB
HTML
202 lines
10 KiB
HTML
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
|
|
|
<mat-drawer-container class="flex-auto h-full">
|
|
|
|
<!-- Drawer -->
|
|
<mat-drawer
|
|
class="w-90 dark:bg-gray-900"
|
|
[autoFocus]="false"
|
|
[mode]="drawerMode"
|
|
[opened]="drawerOpened"
|
|
#matDrawer>
|
|
<div class="flex flex-col items-start p-8 border-b">
|
|
<!-- Back to courses -->
|
|
<a
|
|
class="inline-flex items-center leading-6 text-primary hover:underline"
|
|
[routerLink]="['..']">
|
|
<span class="inline-flex items-center">
|
|
<mat-icon
|
|
class="icon-size-5 text-current"
|
|
[svgIcon]="'heroicons_solid:arrow-sm-left'"></mat-icon>
|
|
<span class="ml-1.5 font-medium leading-5">Back to courses</span>
|
|
</span>
|
|
</a>
|
|
<!-- Course category -->
|
|
<ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
|
|
<div
|
|
class="mt-7 py-0.5 px-3 rounded-full text-sm font-semibold"
|
|
[ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
|
|
'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
|
|
'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
|
|
'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
|
|
{{category.title}}
|
|
</div>
|
|
</ng-container>
|
|
<!-- Course title & description -->
|
|
<div class="mt-3 text-2xl font-semibold">{{course.title}}</div>
|
|
<div class="text-secondary">{{course.description}}</div>
|
|
<!-- Course time -->
|
|
<div class="mt-6 flex items-center leading-5 text-md text-secondary">
|
|
<mat-icon
|
|
class="icon-size-5 text-hint"
|
|
[svgIcon]="'heroicons_solid:clock'"></mat-icon>
|
|
<div class="ml-1.5">{{course.duration}} minutes</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Steps -->
|
|
<div class="py-2 px-8">
|
|
<ol>
|
|
<ng-container *ngFor="let step of course.steps; let last = last; trackBy: trackByFn">
|
|
<li
|
|
class="relative group py-6"
|
|
[class.current-step]="step.order === currentStep">
|
|
<ng-container *ngIf="!last">
|
|
<div
|
|
class="absolute top-6 left-4 w-0.5 h-full -ml-px"
|
|
[ngClass]="{'bg-primary': step.order < currentStep,
|
|
'bg-gray-300 dark:bg-gray-600': step.order >= currentStep}"></div>
|
|
</ng-container>
|
|
<div
|
|
class="relative flex items-start cursor-pointer"
|
|
(click)="goToStep(step.order)">
|
|
<div
|
|
class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset ring-transparent bg-card dark:bg-default"
|
|
[ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800': step.order < currentStep,
|
|
'ring-primary': step.order === currentStep,
|
|
'ring-gray-300 dark:ring-gray-600 group-hover:ring-gray-400': step.order > currentStep}">
|
|
<!-- Check icon, show if the step is completed -->
|
|
<ng-container *ngIf="step.order < currentStep">
|
|
<mat-icon
|
|
class="icon-size-5 text-current"
|
|
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
|
</ng-container>
|
|
<!-- Step order, show if the step is the current step -->
|
|
<ng-container *ngIf="step.order === currentStep">
|
|
<div class="text-md font-semibold text-primary dark:text-primary-500">{{step.order + 1}}</div>
|
|
</ng-container>
|
|
<!-- Step order, show if the step is not completed -->
|
|
<ng-container *ngIf="step.order > currentStep">
|
|
<div class="text-md font-semibold text-hint group-hover:text-secondary">{{step.order + 1}}</div>
|
|
</ng-container>
|
|
</div>
|
|
<div class="ml-4">
|
|
<div class="font-medium leading-4">{{step.title}}</div>
|
|
<div class="mt-1.5 text-md leading-4 text-secondary">{{step.subtitle}}</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ng-container>
|
|
</ol>
|
|
</div>
|
|
|
|
</mat-drawer>
|
|
|
|
<!-- Drawer content -->
|
|
<mat-drawer-content class="flex flex-col overflow-hidden">
|
|
|
|
<!-- Header -->
|
|
<div class="lg:hidden flex flex-0 items-center py-2 pl-4 pr-6 sm:py-4 md:pl-6 md:pr-8 border-b lg:border-b-0 bg-card dark:bg-transparent">
|
|
<!-- Title & Actions -->
|
|
<button
|
|
mat-icon-button
|
|
[routerLink]="['..']">
|
|
<mat-icon [svgIcon]="'heroicons_outline:arrow-sm-left'"></mat-icon>
|
|
</button>
|
|
<h2 class="ml-2.5 text-md sm:text-xl font-medium tracking-tight truncate">
|
|
{{course.title}}
|
|
</h2>
|
|
</div>
|
|
<mat-progress-bar
|
|
class="hidden lg:block flex-0 h-0.5 w-full"
|
|
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
|
|
|
<!-- Main -->
|
|
<div
|
|
class="flex-auto overflow-y-auto"
|
|
cdkScrollable>
|
|
|
|
<!-- Steps -->
|
|
<mat-tab-group
|
|
class="fuse-mat-no-header"
|
|
[animationDuration]="'200'"
|
|
#courseSteps>
|
|
<ng-container *ngFor="let step of course.steps; trackBy: trackByFn">
|
|
<mat-tab>
|
|
<ng-template matTabContent>
|
|
<div
|
|
class="prose prose-sm max-w-3xl mx-auto sm:my-2 lg:mt-4 p-6 sm:p-10 sm:py-12 rounded-2xl shadow overflow-hidden bg-card"
|
|
[innerHTML]="step.content"></div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
</ng-container>
|
|
</mat-tab-group>
|
|
|
|
<!-- Navigation - Desktop -->
|
|
<div class="z-10 sticky hidden lg:flex bottom-4 p-4">
|
|
<div class="flex items-center justify-center mx-auto p-2 rounded-full shadow-lg bg-primary">
|
|
<button
|
|
class="flex-0"
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="goToPreviousStep()">
|
|
<mat-icon
|
|
class="mr-2"
|
|
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
|
<span class="mr-1">Prev</span>
|
|
</button>
|
|
<div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
|
|
<span>{{currentStep + 1}}</span>
|
|
<span class="mx-0.5 text-hint">/</span>
|
|
<span>{{course.totalSteps}}</span>
|
|
</div>
|
|
<button
|
|
class="flex-0"
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="goToNextStep()">
|
|
<span class="ml-1">Next</span>
|
|
<mat-icon
|
|
class="ml-2"
|
|
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Progress & Navigation - Mobile -->
|
|
<div class="lg:hidden flex items-center p-4 border-t bg-card">
|
|
<button
|
|
mat-icon-button
|
|
(click)="matDrawer.toggle()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:view-list'"></mat-icon>
|
|
</button>
|
|
<div class="flex items-center justify-center ml-1 lg:ml-2 font-medium leading-5">
|
|
<span>{{currentStep + 1}}</span>
|
|
<span class="mx-0.5 text-hint">/</span>
|
|
<span>{{course.totalSteps}}</span>
|
|
</div>
|
|
<mat-progress-bar
|
|
class="flex-auto ml-6 rounded-full"
|
|
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
|
<button
|
|
class="ml-4"
|
|
mat-icon-button
|
|
(click)="goToPreviousStep()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
|
</button>
|
|
<button
|
|
class="ml-0.5"
|
|
mat-icon-button
|
|
(click)="goToNextStep()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</mat-drawer-content>
|
|
|
|
</mat-drawer-container>
|
|
|
|
</div>
|