Skip to content

Commit 20746d7

Browse files
hruegerhrueger
committed
(filemanager) fixed layout
1 parent bb1e321 commit 20746d7

File tree

2 files changed

+59
-53
lines changed

2 files changed

+59
-53
lines changed

‎projects/schoolsquirrel/filemanager/src/lib/filemanager.component.html‎

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,58 @@
1-
<nav class="nav actions">
2-
<a class="nav-link" href="#">New</a>
3-
<a class="nav-link" href="#">Upload</a>
4-
<a class="nav-link" href="#">Download</a>
5-
<a class="nav-link mr-auto" href="#">Share</a>
6-
<a class="nav-link" href="#">View</a>
7-
</nav>
8-
9-
<nav class="breadcrumbs">
10-
<ol class="breadcrumb bg-white">
11-
<li class="breadcrumb-item">
12-
<a [attr.href]="currentPath.length === 0 ? null : ''" [class]="currentPath.length === 0 ? 'font-weight-bold no-link' : ''" (click)="goToPathIndex($event, -1)">{{rootFolderName}}</a>
13-
</li>
14-
<li class="breadcrumb-item" *ngFor="let part of currentPath; index as index">
15-
<a [attr.href]="index === currentPath.length - 1 ? null : ''" [class]="index === currentPath.length - 1 ? 'font-weight-bold no-link' : ''" (click)="goToPathIndex($event, index)">{{part}}</a>
16-
</li>
17-
</ol>
18-
</nav>
19-
20-
<table class="table table-hover" *ngIf="currentFiles && currentFiles.length">
21-
<thead>
22-
<tr>
23-
<th class="sm"></th>
24-
<th class="sm"></th>
25-
<th>Name</th>
26-
<th colspan="2">Modified</th>
27-
</tr>
28-
</thead>
29-
<tbody>
30-
<tr *ngFor="let file of currentFiles" class="pointer" (click)="selectFile($event, file)" (dblclick)="open(file)" [class.table-active]="file._selected">
31-
<td>
32-
<div class="custom-control custom-checkbox autohide" [class.d-block]="file._selected">
33-
<input type="checkbox" class="custom-control-input" [id]="file.path" [(ngModel)]="file._selected">
34-
<label class="custom-control-label pointer" [for]="file.path"></label>
35-
</div>
36-
</td>
37-
<td>
38-
<div [class]="'d-inline-block fi fi-size-xs fi-round-md fi-' + (file._name | fileExtension)" *ngIf="!file.isFolder">
39-
<div class="fi-content">{{file._name | fileExtension}}</div>
40-
</div>
41-
<i class="folder-icon fas fa-folder fa-2x" *ngIf="file.isFolder"></i>
42-
</td>
43-
<td>
44-
<span>{{file._name}}</span>
45-
</td>
46-
<td>{{file.modified | date}}</td>
47-
<td>{{file.modifiedBy?.name}}</td>
48-
</tr>
49-
</tbody>
50-
</table>
51-
52-
<span *ngIf="!currentFiles || currentFiles.length == 0">No files or folders found!</span>
1+
<div class="h-100 d-flex flex-column">
2+
<div>
3+
<nav class="nav actions">
4+
<a class="nav-link" href="#">New</a>
5+
<a class="nav-link" href="#">Upload</a>
6+
<a class="nav-link" href="#">Download</a>
7+
<a class="nav-link mr-auto" href="#">Share</a>
8+
<a class="nav-link" href="#">View</a>
9+
</nav>
10+
</div>
11+
<div>
12+
<nav class="breadcrumbs">
13+
<ol class="breadcrumb bg-white">
14+
<li class="breadcrumb-item">
15+
<a [attr.href]="currentPath.length === 0 ? null : ''" [class]="currentPath.length === 0 ? 'font-weight-bold no-link' : ''" (click)="goToPathIndex($event, -1)">{{rootFolderName}}</a>
16+
</li>
17+
<li class="breadcrumb-item" *ngFor="let part of currentPath; index as index">
18+
<a [attr.href]="index === currentPath.length - 1 ? null : ''" [class]="index === currentPath.length - 1 ? 'font-weight-bold no-link' : ''" (click)="goToPathIndex($event, index)">{{part}}</a>
19+
</li>
20+
</ol>
21+
</nav>
22+
</div>
23+
<div class="flex-shrink-1 overflow-auto">
24+
<table class="table table-hover" *ngIf="currentFiles && currentFiles.length">
25+
<thead>
26+
<tr>
27+
<th class="sm"></th>
28+
<th class="sm"></th>
29+
<th>Name</th>
30+
<th colspan="2">Modified</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr *ngFor="let file of currentFiles" class="pointer" (click)="selectFile($event, file)" (dblclick)="open(file)" [class.table-active]="file._selected">
35+
<td>
36+
<div class="custom-control custom-checkbox autohide" [class.d-block]="file._selected">
37+
<input type="checkbox" class="custom-control-input" [id]="file.path" [(ngModel)]="file._selected">
38+
<label class="custom-control-label pointer" [for]="file.path"></label>
39+
</div>
40+
</td>
41+
<td>
42+
<div [class]="'d-inline-block fi fi-size-xs fi-round-md fi-' + (file._name | fileExtension)" *ngIf="!file.isFolder">
43+
<div class="fi-content">{{file._name | fileExtension}}</div>
44+
</div>
45+
<i class="folder-icon fas fa-folder fa-2x" *ngIf="file.isFolder"></i>
46+
</td>
47+
<td>
48+
<span>{{file._name}}</span>
49+
</td>
50+
<td>{{file.modified | date}}</td>
51+
<td>{{file.modifiedBy?.name}}</td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
56+
<span *ngIf="!currentFiles || currentFiles.length == 0">No files or folders found!</span>
57+
</div>
58+
</div>

‎projects/schoolsquirrel/filemanager/src/lib/filemanager.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { File } from "./File";
77
selector: "filemanager",
88
templateUrl: "./filemanager.component.html",
99
host: {
10-
class: "d-block",
10+
class: "d-block h-100",
1111
},
1212
styleUrls: ["./filemanager.component.scss"],
1313
})

0 commit comments

Comments
 (0)