Skip to content

Commit

Permalink
Reorder instance detail elements (#175)
Browse files Browse the repository at this point in the history
  • Loading branch information
RikudouSage authored Jan 8, 2024
1 parent ba0ab43 commit e86d792
Showing 1 changed file with 98 additions and 97 deletions.
195 changes: 98 additions & 97 deletions src/app/instances/pages/instance-detail/instance-detail.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,103 @@ <h3 class="card-title" id="instance-details">Instance details</h3>
</div>
</div>

<!-- endorsements-->
<div class="card" *ngIf="endorsementsReceived">
<div class="card-header">
<h3 class="card-title" id="endorsements-received">Endorsements received ({{endorsementsReceived.length}})</h3>
</div>
<div class="card-body">
<ng-container *ngIf="endorsementsReceived.length">
<p>Endorsements were received from the following instances:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Instance</th>
<th>Reasons</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of endorsementsReceived">
<td><a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a></td>
<td>
<ul *ngIf="instance.endorsementReasons.length">
<li *ngFor="let reason of instance.endorsementReasons">{{reason}}</li>
</ul>
<code *ngIf="!instance.endorsementReasons.length">N/A</code>
</td>
</tr>
</tbody>
</table>
</ng-container>
<p *ngIf="!endorsementsReceived.length">
This instance hasn't been endorsed by any other instance.
</p>
</div>
</div>
<div class="card" *ngIf="endorsementsGiven">
<div class="card-header">
<h3 class="card-title" id="endorsements-given">Endorsements given ({{endorsementsGiven.length}})</h3>
</div>
<div class="card-body">
<ng-container *ngIf="endorsementsGiven.length">
<p>Endorsements were given to the following instances:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Instance</th>
<th>Reasons</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of endorsementsGiven">
<td><a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a></td>
<td>
<ul *ngIf="instance.endorsementReasons.length">
<li *ngFor="let reason of instance.endorsementReasons">{{reason}}</li>
</ul>
<code *ngIf="!instance.endorsementReasons.length">N/A</code>
</td>
</tr>
</tbody>
</table>
</ng-container>
<p *ngIf="!endorsementsGiven.length">
This instance hasn't endorsed any other instance.
</p>
</div>
</div>

<!-- guarantees -->
<div class="card" *ngIf="guaranteesGiven">
<div class="card-header">
<h3 class="card-title" id="guarantees">Guarantees ({{guaranteesGiven.length}})</h3>
</div>
<div class="card-body">
<ng-container *ngIf="guaranteesGiven.length">
<p>This instance guarantees for the following instances:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Instance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of guaranteesGiven">
<td>
<a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a>
<app-flags [instance]="instance" />
</td>
</tr>
</tbody>
</table>
</ng-container>
<p *ngIf="!guaranteesGiven.length">
This instance doesn't guarantee for any instance.
</p>
</div>
</div>

<!-- censures -->
<div class="card" *ngIf="censuresReceived">
<div class="card-header">
<h3 class="card-title" id="censures-received">Censures received ({{censuresReceived.length}})</h3>
Expand Down Expand Up @@ -227,7 +324,6 @@ <h3 class="card-title" id="censures-received">Censures received ({{censuresRecei
</p>
</div>
</div>

<div class="card" *ngIf="censuresGiven">
<div class="card-header">
<h3 class="card-title" id="censures-given">Censures given ({{censuresGiven.length}})</h3>
Expand Down Expand Up @@ -266,72 +362,7 @@ <h3 class="card-title" id="censures-given">Censures given ({{censuresGiven.lengt
</div>
</div>

<div class="card" *ngIf="endorsementsReceived">
<div class="card-header">
<h3 class="card-title" id="endorsements-received">Endorsements received ({{endorsementsReceived.length}})</h3>
</div>
<div class="card-body">
<ng-container *ngIf="endorsementsReceived.length">
<p>Endorsements were received from the following instances:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Instance</th>
<th>Reasons</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of endorsementsReceived">
<td><a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a></td>
<td>
<ul *ngIf="instance.endorsementReasons.length">
<li *ngFor="let reason of instance.endorsementReasons">{{reason}}</li>
</ul>
<code *ngIf="!instance.endorsementReasons.length">N/A</code>
</td>
</tr>
</tbody>
</table>
</ng-container>
<p *ngIf="!endorsementsReceived.length">
This instance hasn't been endorsed by any other instance.
</p>
</div>
</div>

<div class="card" *ngIf="endorsementsGiven">
<div class="card-header">
<h3 class="card-title" id="endorsements-given">Endorsements given ({{endorsementsGiven.length}})</h3>
</div>
<div class="card-body">
<ng-container *ngIf="endorsementsGiven.length">
<p>Endorsements were given to the following instances:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Instance</th>
<th>Reasons</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of endorsementsGiven">
<td><a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a></td>
<td>
<ul *ngIf="instance.endorsementReasons.length">
<li *ngFor="let reason of instance.endorsementReasons">{{reason}}</li>
</ul>
<code *ngIf="!instance.endorsementReasons.length">N/A</code>
</td>
</tr>
</tbody>
</table>
</ng-container>
<p *ngIf="!endorsementsGiven.length">
This instance hasn't endorsed any other instance.
</p>
</div>
</div>

<!-- hesitations -->
<div class="card" *ngIf="hesitationsReceived">
<div class="card-header">
<h3 class="card-title" id="hesitations-received">Hesitations received ({{hesitationsReceived.length}})</h3>
Expand Down Expand Up @@ -393,7 +424,6 @@ <h3 class="card-title" id="hesitations-received">Hesitations received ({{hesitat
</p>
</div>
</div>

<div class="card" *ngIf="hesitationsGiven">
<div class="card-header">
<h3 class="card-title" id="hesitations-given">Hesitations given ({{hesitationsGiven.length}})</h3>
Expand Down Expand Up @@ -431,34 +461,5 @@ <h3 class="card-title" id="hesitations-given">Hesitations given ({{hesitationsGi
</p>
</div>
</div>

<div class="card" *ngIf="guaranteesGiven">
<div class="card-header">
<h3 class="card-title" id="guarantees">Guarantees ({{guaranteesGiven.length}})</h3>
</div>
<div class="card-body">
<ng-container *ngIf="guaranteesGiven.length">
<p>This instance guarantees for the following instances:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Instance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of guaranteesGiven">
<td>
<a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a>
<app-flags [instance]="instance" />
</td>
</tr>
</tbody>
</table>
</ng-container>
<p *ngIf="!guaranteesGiven.length">
This instance doesn't guarantee for any instance.
</p>
</div>
</div>
</div>
</ng-template>

0 comments on commit e86d792

Please sign in to comment.