[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[reclaim-ui] 293/459: make tables responsive
From: |
gnunet |
Subject: |
[reclaim-ui] 293/459: make tables responsive |
Date: |
Fri, 11 Jun 2021 23:26:25 +0200 |
This is an automated email from the git hooks/post-receive script.
martin-schanzenbach pushed a commit to branch master
in repository reclaim-ui.
commit ff03601dd110353a0e807af96dafdf64fb00dd1b
Author: Martin Schanzenbach <mschanzenbach@posteo.de>
AuthorDate: Sat Aug 8 10:03:39 2020 +0200
make tables responsive
---
src/app/edit-identity/edit-identity.component.html | 215 ++++++++++-----------
src/app/identity-list/identity-list.component.html | 58 +++---
src/styles.scss | 10 +-
3 files changed, 133 insertions(+), 150 deletions(-)
diff --git a/src/app/edit-identity/edit-identity.component.html
b/src/app/edit-identity/edit-identity.component.html
index 56e9dd1..bfa2ca3 100644
--- a/src/app/edit-identity/edit-identity.component.html
+++ b/src/app/edit-identity/edit-identity.component.html
@@ -18,170 +18,163 @@
specification: ``profile'', ``email'', ``phone'' and ``address''.
</div>
- <table class="table pb-1">
- <tbody>
+ <div class="table pb-1">
<!-- Standard "profile" claims first -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of existingProfileClaims">
- <td><div style="min-width: 15em">
+ <div class="col-sm"><div style="min-width: 15em">
<i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b>
</div>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button class="btn btn-primary" (click)="deleteAttribute(claim)"
*ngIf="!isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
<button class="btn btn-primary"
(click)="deleteAttribute(claim)" *ngIf="isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
- </td>
- </tr>
+ </div>
+ </div>
<!-- Standard "profile" claims missing on the identity -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of missingProfileClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<!-- FIXME Allow adding of attestation OR plain value -->
<input placeholder="Value" [(ngModel)]="claim.value">
<!--<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>-->
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button [disabled]="!canAddAttribute(claim)" class="btn
btn-primary" (click)="addAttribute()">
<span class="fa fa-save"></span>
</button>
- </td>
- </tr>
- </tbody>
- </table>
- <table class="table pb-1">
- <tbody>
+ </div>
+ </div>
+ </div>
+ <div class="table pb-1">
<!-- Standard "email" claims first -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of existingEmailClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button class="btn btn-primary" (click)="deleteAttribute(claim)"
*ngIf="!isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
<button class="btn btn-primary"
(click)="deleteAttribute(claim)" *ngIf="isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
- </td>
- </tr>
+ </div>
+ </div>
<!-- Standard "email" claims missing on the identity -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of missingEmailClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<!-- FIXME Allow adding of attestation OR plain value -->
<input placeholder="Value" [(ngModel)]="claim.value">
<!--<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>-->
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button [disabled]="!canAddAttribute(claim)" class="btn
btn-primary" (click)="addAttribute()">
<span class="fa fa-save"></span>
</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </div>
+ </div>
+ </div>
- <table class="table pb-1">
- <tbody>
+ <div class="table pb-1">
<!-- Standard "address" claims first -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of existingAddressClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button class="btn btn-primary" (click)="deleteAttribute(claim)"
*ngIf="!isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
<button class="btn btn-primary"
(click)="deleteAttribute(claim)" *ngIf="isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
- </td>
- </tr>
+ </div>
+ </div>
<!-- Standard "profile" claims missing on the identity -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of missingAddressClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<!-- FIXME Allow adding of attestation OR plain value -->
<input placeholder="Value" [(ngModel)]="claim.value">
<!--<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>-->
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button [disabled]="!canAddAttribute(claim)" class="btn
btn-primary" (click)="addAttribute()">
<span class="fa fa-save"></span>
</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </div>
+ </div>
+ </div>
- <table class="table pb-1">
- <tbody>
+ <div class="table pb-1">
<!-- Standard "phone" claims first -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of existingPhoneClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<input *ngIf="!isClaimAttested(claim)" placeholder="Value"
[(ngModel)]="claim.value">
<span *ngIf="isClaimAttested(claim)" >{{ getAttestedValue(claim)
}} issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value
}}''</span>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button class="btn btn-primary" (click)="deleteAttribute(claim)"
*ngIf="!isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
<button class="btn btn-primary"
(click)="deleteAttribute(claim)" *ngIf="isClaimAttested(claim)">
<span class="fa fa-trash"></span>
</button>
- </td>
- </tr>
+ </div>
+ </div>
<!-- Standard "phone" claims missing on the identity -->
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(claim)"
[class.alert-danger]="newAttribute.name === claim.name"
*ngFor="let claim of missingPhoneClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(claim)" class="fa
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
+ <div class="col-sm">
<select *ngIf="isExperimental()" class="custom-select"
(change)="claim.flag=$event.target.value; ">
<option value="0">Plain</option>
<option value="1">Attested</option>
@@ -204,15 +197,14 @@
</option>
</select>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button [disabled]="!canAddAttribute(claim)" class="btn
btn-primary" (click)="addAttribute()">
<span class="fa fa-save"></span>
</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </div>
+ </div>
+ </div>
<h3 class="card-subtitle mb-2">Additional information <span
(click)="showExtraInfo = !showExtraInfo" class="fa
fa-question-circle"></span></h3>
@@ -221,15 +213,14 @@
</div>
<!-- Missing "non-standard" claims that are requested -->
- <table class="table pb-1"
*ngIf="isAnyRequestedNonStandardClaimMissing()">
- <tbody>
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="table pb-1" *ngIf="isAnyRequestedNonStandardClaimMissing()">
+ <div class="row" [class.openid]="inOpenIdFlow()"
[class.alert-danger]="newAttribute.name === missing.name"
class="text-primary"
*ngFor="let missing of missingNonStandardClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(missing)" class="fa
fa-openid"></i><b> {{missing.name}}</b></div></td>
- <td>
+ <div class="col-sm"><div style="min-width: 15em">
+ <i *ngIf="isClaimRequested(missing)" class="fa
fa-openid"></i><b> {{missing.name}}</b></div></div>
+ <div class="col-sm">
<input *ngIf="!isClaimAttestationRequested(missing)"
placeholder="Value" [(ngModel)]="missing.value">
<select *ngIf="isClaimAttestationRequested(missing)"
class="custom-select" (change)="missing.attestation=$event.target.value; ">
<option value="">Select attestation source</option>
@@ -244,41 +235,41 @@
{{claim.value}} <i>({{claim.name}})</i>
</option>
</select>
- </td>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
+ </div>
+ <div class="col-sm">
+ </div>
+ </div>
+ </div>
<!-- "non-standard" claims which do exist -->
- <table class="table pb-1" style="">
- <tbody>
- <tr [class.openid]="inOpenIdFlow()"
+ <div class="table pb-1">
+ <div class="row"
+ [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(attribute)"
[class.alert-danger]="newAttribute.name === attribute.name"
[class.text-secondary]="isClaimAttested(attribute)"
*ngFor="let attribute of existingNonStandardClaims">
- <td><div style="min-width: 15em">
- <i *ngIf="isClaimRequested(attribute)" class="fa
fa-openid"></i><b> {{ attribute.name }}</b></div></td>
- <td>
+ <div class="col-sm">
+ <i *ngIf="isClaimRequested(attribute)" class="fa
fa-openid"></i><b> {{ attribute.name }}</b>
+ </div>
+ <div class="col-sm">
<input *ngIf="!isClaimAttested(attribute)" placeholder="Value"
[(ngModel)]="attribute.value">
<span *ngIf="isClaimAttested(attribute)" >{{
getAttestedValue(attribute) }} issued by <i>{{ getIssuer(attribute) }}</i> as
attribute for ``{{ attribute.value }}''</span>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button class="btn btn-primary"
(click)="deleteAttribute(attribute)" *ngIf="!isClaimAttested(attribute)">
<span class="fa fa-trash"></span>
</button>
<button class="btn btn-primary"
(click)="deleteAttribute(attribute)" *ngIf="isClaimAttested(attribute)">
<span class="fa fa-trash"></span>
</button>
- </td>
- </tr>
+ </div>
+ </div>
<!-- New Attribute -->
- <tr [class.alert-danger]="isInConflict(newAttribute)">
- <td>
+ <div class="row" [class.alert-danger]="isInConflict(newAttribute)">
+ <div class="col-sm">
<input [class.text-danger]="!attributeNameValid(newAttribute)"
placeholder="Attribute" [(ngModel)]="newAttribute.name">
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<select *ngIf="isExperimental()" class="custom-select"
(change)="newAttribute.flag=$event.target.value; ">
<option value="0">Plain</option>
@@ -300,15 +291,14 @@
{{claim.value}} <i>({{claim.name}})</i>
</option>
</select>
- </td>
- <td>
+ </div>
+ <div class="col-sm">
<button [disabled]="!canAddAttribute(newAttribute)" class="btn
btn-primary" (click)="addAttribute()">
<span class="fa fa-plus"></span>
</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </div>
+ </div>
+ </div>
</div>
<!-- Attribute creation warning -->
<div *ngIf="!attributeNameValid(newAttribute) ||
!attributeValueValid(newAttribute)" class="alert alert-primary
alert-dismissible fade show" role="alert">
@@ -335,7 +325,6 @@
<span class="fa fa-openid"></span>
Manage attestations
</button>
-
</div>
</div>
</div>
diff --git a/src/app/identity-list/identity-list.component.html
b/src/app/identity-list/identity-list.component.html
index 18da55a..f3403ed 100644
--- a/src/app/identity-list/identity-list.component.html
+++ b/src/app/identity-list/identity-list.component.html
@@ -100,36 +100,34 @@
</div>
<div class="card-body">
- <!-- Attribute table -->
- <div>
- <table class="table pb-1">
- <tbody>
- <tr [class.openid]="inOpenIdFlow()"
[class.text-primary]="isClaimRequested(identity, attribute)"
- [class.text-secondary]="!isClaimRequested(identity, attribute)"
- *ngFor="let attribute of getIdentityAttributes(identity)">
- <td>
- <div style="min-width: 15em">
- <span *ngIf="isClaimRequested(identity, attribute)"
class="fa fa-openid mr-1"></span><b>{{getAttributeDescription(attribute)}}</b>
- </div>
- </td>
- <td>
- <div *ngIf="getAttributeValue(identity, attribute).length <=
20" style="min-width: 15em">{{getAttributeValue(identity, attribute)}}</div>
- <div *ngIf="getAttributeValue(identity, attribute).length >
20" style="min-width: 15em">{{getAttributeValue(identity,
attribute).substring(0, 20)}}<span style="color:#eee">[...]</span></div>
- </td>
- </tr>
- <tr *ngIf="(openIdentity != identity) &&
hasLotsOfAttributes(identity)">
- <td>
- <i>... and {{ attributes[identity.pubkey].length - 5 }} more
attributes</i><br/>
- <button class="btn btn-primary mt-3" (click)="openIdentity =
identity">
- <i class="fa fa-expand"></i>
- Show all attributes
- </button>
- </td>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
+ <!-- Attribute table -->
+ <div class="table pb-1">
+ <div class="container">
+ <div [class.text-primary]="isClaimRequested(identity, attribute)"
class="row mb-1"
+ [class.text-secondary]="!isClaimRequested(identity, attribute)"
+ *ngFor="let attribute of getIdentityAttributes(identity)">
+ <div class="col-sm">
+ <div style="min-width: 15em">
+ <span *ngIf="isClaimRequested(identity, attribute)" class="fa
fa-openid mr-1"></span><b>{{getAttributeDescription(attribute)}}</b>
+ </div>
+ </div>
+ <div class="col-sm">
+ <div *ngIf="getAttributeValue(identity, attribute).length <= 20"
style="min-width: 15em">{{getAttributeValue(identity, attribute)}}</div>
+ <div *ngIf="getAttributeValue(identity, attribute).length > 20"
style="min-width: 15em">{{getAttributeValue(identity, attribute).substring(0,
20)}}<span style="color:#eee">[...]</span></div>
+ </div>
+ </div>
+ <div *ngIf="(openIdentity != identity) &&
hasLotsOfAttributes(identity)">
+ <div>
+ <i>... and {{ attributes[identity.pubkey].length - 5 }} more
attributes</i><br/>
+ <button class="btn btn-primary mt-3" (click)="openIdentity =
identity">
+ <i class="fa fa-expand"></i>
+ Show all attributes
+ </button>
+ </div>
+ <div>
+ </div>
+ </div>
+ </div>
</div>
</div>
<div *ngIf="inOpenIdFlow()">
diff --git a/src/styles.scss b/src/styles.scss
index 9b0a221..bb6f551 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -27,7 +27,7 @@ div.card {
width: auto;
}
-table tr button.btn {
+.table .row button.btn {
margin: 0;
}
@@ -99,7 +99,7 @@ div.card-avatar-id {
//border-color: #343a40;
}
-.card tr.openid.text-dimmed {
+.card .table .row.openid.text-dimmed {
color: #eee;
}
@@ -147,11 +147,7 @@ div.card-avatar-id {
width: 125px;
}
-.card table {
- table-layout: fixed;
-}
-
-.card table input {
+.card .table input {
width: 100%;
}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [reclaim-ui] 295/459: better responsiveness, (continued)
- [reclaim-ui] 295/459: better responsiveness, gnunet, 2021/06/11
- [reclaim-ui] 330/459: replace service, gnunet, 2021/06/11
- [reclaim-ui] 318/459: remove all i18n, gnunet, 2021/06/11
- [reclaim-ui] 308/459: style for buttons, gnunet, 2021/06/11
- [reclaim-ui] 339/459: Translated using Weblate (German), gnunet, 2021/06/11
- [reclaim-ui] 302/459: better info, gnunet, 2021/06/11
- [reclaim-ui] 331/459: more i18n, gnunet, 2021/06/11
- [reclaim-ui] 311/459: fix experimental credential selection, gnunet, 2021/06/11
- [reclaim-ui] 341/459: remove template, gnunet, 2021/06/11
- [reclaim-ui] 301/459: more fixes, gnunet, 2021/06/11
- [reclaim-ui] 293/459: make tables responsive,
gnunet <=
- [reclaim-ui] 332/459: copy locale, gnunet, 2021/06/11
- [reclaim-ui] 327/459: new localesService, gnunet, 2021/06/11
- [reclaim-ui] 303/459: fix booleans and function calls, gnunet, 2021/06/11
- [reclaim-ui] 304/459: fix, gnunet, 2021/06/11
- [reclaim-ui] 309/459: fix button hover text, gnunet, 2021/06/11
- [reclaim-ui] 310/459: fix margins, checkboxes, gnunet, 2021/06/11
- [reclaim-ui] 336/459: Translated using Weblate (English), gnunet, 2021/06/11
- [reclaim-ui] 334/459: update, gnunet, 2021/06/11
- [reclaim-ui] 340/459: Translated using Weblate (English), gnunet, 2021/06/11
- [reclaim-ui] 337/459: update en, gnunet, 2021/06/11