[frontend] Move hood page links into new css container

This commit is contained in:
Cathy Hu 2020-09-06 19:51:31 +02:00 committed by Maike
parent b941ffcd9d
commit 7633ab9a50
2 changed files with 42 additions and 22 deletions

View file

@ -6,27 +6,40 @@
supports each other. Kibicara hoods will support you by providing the supports each other. Kibicara hoods will support you by providing the
technology for your community to florish! technology for your community to florish!
</p> </p>
<mat-selection-list [multiple]="false"> <div class="hoods-container">
<div mat-subheader>Configure your hoods</div> <mat-selection-list [multiple]="false">
<mat-divider></mat-divider> <div mat-subheader>Configure your hoods</div>
<a <mat-divider></mat-divider>
*ngFor="let hood of hoods$ | async" <a
[routerLink]="['/dashboard/hoods', hood.id]" *ngFor="let hood of hoods$ | async"
> [routerLink]="['/dashboard/hoods', hood.id]"
<mat-list-option> target="_blank"
<div class="list-entry-container"> matTooltip="Edit settings of {{ hood.name }}"
<mat-icon>settings</mat-icon> >
<div class="list-entry"> <mat-list-option>
Your Hood - <strong>{{ hood.name }}</strong> <div class="list-entry-container">
<a [routerLink]="['/hoods', hood.id]"> <mat-icon>settings</mat-icon>
<mat-icon class="list-entry-page">open_in_browser</mat-icon> <div class="list-entry">
</a> Your Hood - <strong>{{ hood.name }}</strong>
</div>
</div> </div>
</div> <mat-divider></mat-divider>
<mat-divider></mat-divider> </mat-list-option>
</mat-list-option> </a>
</a> </mat-selection-list>
</mat-selection-list> <mat-list>
<div mat-subheader></div>
<mat-list-item *ngFor="let hood of hoods$ | async">
<a
[routerLink]="['/hoods', hood.id]"
matTooltip="View public page of hood {{ hood.name }}"
>
<mat-icon class="open-icon">open_in_new</mat-icon>
</a>
</mat-list-item>
</mat-list>
</div>
<button <button
mat-raised-button mat-raised-button
color="primary" color="primary"

View file

@ -63,7 +63,14 @@ p {
grid-template-columns: 30px 1fr; grid-template-columns: 30px 1fr;
} }
.list-entry-page { .hoods-container {
float: right; display: grid;
grid-template-columns: 1fr 65px;
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
.open-icon {
color: black; color: black;
} }