feat(breadcurmb): adapt to mobile view

ElonH · Jun 8, 2020 · 8546f49 · 8546f49
1 parent 0a7b48c
commit 8546f49
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/src/app/pages/manager/breadcrumb/breadcrumb.component.ts b/src/app/pages/manager/breadcrumb/breadcrumb.component.ts
@@ -4,39 +4,37 @@ import { NavigationFlow, NavigationFlowOutNode } from '../../../@dataflow/extra'
 @Component({
 	selector: 'app-manager-breadcrumb',
 	template: `
-		<!-- <nav> -->
-		<ol class="breadcrumb rng-noselect">
+		<ol class="breadcrumb rng-noselect" style="flex-wrap: nowrap; overflow-x: auto;">
 			<li class="breadcrumb-item">
 				<a (click)="jump.emit({})"> <nb-icon icon="home-outline"></nb-icon> </a>
 			</li>
 			<li *ngIf="remote" class="breadcrumb-item">
 				<a (click)="jump.emit(genAddr(-1))">
-					<nb-icon icon="google-outline"></nb-icon>
-					<span class="breadcrumb-cloud">{{ remote }}</span>
+					<div style="display: flex;">
+						<nb-icon icon="google-outline"></nb-icon>
+						{{ remote }}
+					</div>
 				</a>
 			</li>
 			<li *ngFor="let dir of pathPrefix; index as i" class="breadcrumb-item">
-				<a (click)="jump.emit(genAddr(i))">
-					<span>{{ dir }}</span>
-				</a>
+				<a (click)="jump.emit(genAddr(i))"> {{ dir }} </a>
 			</li>
 			<li *ngIf="pathSurfix" class="breadcrumb-item active">{{ pathSurfix }}</li>
-			<ng-content> </ng-content>
 		</ol>
-		<!-- </nav> -->
 	`,
 	styles: [
 		`
 			.breadcrumb {
 				margin-bottom: 0;
+				width: -webkit-fill-available;
 			}
 			li > a {
 				background: white;
 				border-radius: 1rem;
 				padding: 0 0.5rem;
 			}
-			.breadcrumb-cloud {
-				padding-left: 0.5rem;
+			.active {
+				padding-right: 0.5rem;
 			}
 		`,
 	],

diff --git a/src/app/pages/manager/manager.component.ts b/src/app/pages/manager/manager.component.ts
@@ -23,11 +23,10 @@ import { TaskService } from './tasks/tasks.service';
 	selector: 'app-manager',
 	template: `
 		<nb-layout-header subheader>
-			<app-manager-breadcrumb [nav$]="nav$" (jump)="addrJump($event)">
-				<a class="push-to-right option" (click)="refresh()"><nb-icon icon="refresh"></nb-icon></a>
-				<a class="option"><nb-icon icon="list"></nb-icon></a>
-				<a class="option"><nb-icon icon="info"></nb-icon></a>
-			</app-manager-breadcrumb>
+			<app-manager-breadcrumb [nav$]="nav$" (jump)="addrJump($event)"> </app-manager-breadcrumb>
+			<a class="push-to-right option" (click)="refresh()"><nb-icon icon="refresh"></nb-icon></a>
+			<a class="option"><nb-icon icon="list"></nb-icon></a>
+			<a class="option"><nb-icon icon="info"></nb-icon></a>
 		</nb-layout-header>
 		<div class="subcolumn">
 			<nb-card>
@@ -77,7 +76,7 @@ import { TaskService } from './tasks/tasks.service';
 				z-index: 700;
 			}
 			app-manager-breadcrumb {
-				width: 100%;
+				display: contents;
 			}
 			.option {
 				padding: 0 0.3rem;