[reclaim-ui] 282/459: style change

[gnunet]

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 1da08614f3dc6a258ec45370cbd8d438a0cf07c6
Author: Martin Schanzenbach <mschanzenbach@posteo.de>
AuthorDate: Fri Aug 7 15:25:46 2020 +0200

    style change
---
 src/app/identity-list/identity-list.component.html | 60 +++++++++++++---------
 src/app/identity-list/identity-list.component.ts   |  1 +
 src/app/new-identity/new-identity.component.html   | 56 ++++++++++----------
 src/styles.scss                                    |  2 +-
 4 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/src/app/identity-list/identity-list.component.html 
b/src/app/identity-list/identity-list.component.html
index d11039a..23edc50 100644
--- a/src/app/identity-list/identity-list.component.html
+++ b/src/app/identity-list/identity-list.component.html
@@ -10,11 +10,14 @@
 <!-- Buttons -->
 <div *ngIf="canSearch()"  style="margin-top: 1em; text-align: center;">
   <!-- Identity search -->
-  <form class="form-inline" style="display: table; margin: auto;">
+  <div class="form-inline" style="display: table; margin: auto;">
     <div class="search-wrapper">
     <input class="form-control mr-sm-2" type="search" [(ngModel)]="searchTerm" 
name="searchTerm" placeholder="Search identities" style="border-radius: 2em;">
     </div>
-  </form>
+    <button class="btn btn-primary" [routerLink]="['/new-identity']">
+      <span class="fa fa-user-plus"></span> New identity
+    </button>
+  </div>
   <br/>
 </div>
 
@@ -49,22 +52,22 @@
   <div *ngIf="(identities | search: searchTerm).length == 0" 
style="text-align: center;" class="alert alert-secondary alert-dismissible fade 
show" role="alert">No matching identities.</div>
 </div>
 <!-- Cards -->
-<div class="card-columns p-2">
-  <div class="card" *ngFor="let identity of identities | search: searchTerm">
+<div class="card-columns p-2 mr-5 ml-5" [ngStyle]="{'column-count': '1'}" 
style="display: flex; flex-direction:column; align-items:center">
+  <div class="card mb-5" *ngFor="let identity of identities | search: 
searchTerm" style="max-width: 50em; min-height: 20em;">
     <div class="card-avatar card-img-top">
       <div class="card-avatar-character text-dark">
-        <i class="fa fa-user-circle"></i>
-        <span class="m-1" style="display: inline-block"><i> 
{{identity.name}}</i></span>
+      <img src="assets/reclaim_icon.png" style="width: 4em;opacity: 0.3;">
+
         <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" 
(click)="confirmDelete(identity)">
-          <span class="fa fa-trash"></span>
+          <i class="fa fa-trash"></i>
         </button>
         <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" 
[routerLink]="['/edit-identity', identity.name]">
-          <span class="fa fa-edit"></span>
+          <i class="fa fa-edit"></i>
         </button>
       </div>
     </div>
     <!-- Identity deletion confirmation -->
-    <div class="alert alert-danger fade show" *ngIf="showConfirmDelete == 
identity">
+    <div class="alert alert-danger fade show" [hidden]="showConfirmDelete != 
identity">
       Do you really want to delete this identity?<br/><br/>
       <button class="btn btn-primary" (click)="deleteIdentity(identity)">
         <span class="fa fa-trash"></span> Delete
@@ -74,10 +77,10 @@
       </button>
     </div>
     <!-- Maybe add some info to identities? - dialog -->
-    <div class="alert alert-secondary fade show" 
*ngIf="!hasAttributes(identity)">
+    <div class="alert alert-secondary fade show" 
[hidden]="hasAttributes(identity)">
       This identity has no attributes. Maybe try <a class="buttonlink" 
[routerLink]="['/edit-identity', identity.name]">adding some?</a>
     </div>
-    <div *ngIf="isAnyRequestedClaimMissing(identity)" class="alert 
alert-danger alert-dismissible fade show" role="alert">
+    <div [hidden]="!isAnyRequestedClaimMissing(identity)" class="alert 
alert-danger alert-dismissible fade show" role="alert">
       <span class="fa fa-openid"></span> This identity is missing some 
requested information:
       <ul>
         <li *ngIf="isProfileRequested() && 
isProfileMissing(identity)">getProfileDescription()</li>
@@ -90,7 +93,12 @@
         <span class="fa fa-plus"></span> Edit identity
       </button>
     </div>
-    <div class="card-body">
+
+    <div class="fa-3x mt-2" style="text-align:center">
+      <span class="fa fa-user-circle"></span><i> {{identity.name}}</i>
+    </div>
+
+    <div class="card-body" *ngIf="openIdentity == identity">
       <!-- Attribute table -->
       <div>
         <table class="table pb-1">
@@ -123,23 +131,25 @@
         </div>
 
       </div>
-      <div>
-
-        <div>
-          <button *ngIf="inOpenIdFlow()" [disabled]="!isClientVerified()" 
(click)="loginIdentity(identity)" class="btn btn-primary mr-1 openid-login">
-            <span *ngIf="isClientVerified()"><i class="fa fa-openid"></i> 
Share information from this identity</span>
-            <span *ngIf="!isClientVerified()"><i class="fa 
fa-exclamation-circle"></i> Sharing disabled</span>
-          </button>
-        </div>
-      </div>
-      <div style="text-align:center">
-        <img src="assets/reclaim_icon.png" style="width: 5em;opacity: 0.3;">
-      </div>
+    </div>
+    <div style="text-align:center" class="mb-4" (click)="openIdentity = ''" 
*ngIf="openIdentity == identity">
+      <i class="fa fa-chevron-up"></i><br/>
+      <span>Click to hide attributes</span>
+    </div>
+    <div style="text-align:center" class="mb-4 mt-4" (click)="openIdentity = 
identity" *ngIf="(openIdentity != identity) && hasAttributes(identity)">
+      <span>Click to show attributes</span><br/>
+          <i class="fa fa-chevron-down"></i>
+    </div>
+    <div>
+      <button *ngIf="inOpenIdFlow()" [disabled]="!isClientVerified()" 
(click)="loginIdentity(identity)" class="btn btn-primary mr-1 openid-login">
+        <span *ngIf="isClientVerified()"><i class="fa fa-openid"></i> Share 
information from this identity</span>
+        <span *ngIf="!isClientVerified()"><i class="fa 
fa-exclamation-circle"></i> Sharing disabled</span>
+      </button>
     </div>
   </div>
 
   <!-- New identity card -->
-  <div class="card identity-new" [routerLink]="['/new-identity']" *ngIf="0 != 
identities.length">
+  <div class="card identity-new" [routerLink]="['/new-identity']" *ngIf="0 != 
identities.length" style="max-width: 50em; min-height: 20em;">
     <div class="card-avatar card-img-top">
       <div class="card-avatar-character text-dark">
         <!--<div class="icon m-1 text-uppercase" 
[style.background-color]="intToRGB(identity.pubkey)">{{ 
identity.name[0]}}</div>-->
diff --git a/src/app/identity-list/identity-list.component.ts 
b/src/app/identity-list/identity-list.component.ts
index c0547be..cff5cd3 100644
--- a/src/app/identity-list/identity-list.component.ts
+++ b/src/app/identity-list/identity-list.component.ts
@@ -38,6 +38,7 @@ export class IdentityListComponent implements OnInit {
   searchTerm: any;
   showSharingInfo: any = '';
   sortAttributeByStandardClaim: any;
+  openIdentity: any = '';
 
   constructor(private route: ActivatedRoute, private oidcService: 
OpenIdService,
     private identityService: IdentityService,
diff --git a/src/app/new-identity/new-identity.component.html 
b/src/app/new-identity/new-identity.component.html
index 4e36507..83a8805 100644
--- a/src/app/new-identity/new-identity.component.html
+++ b/src/app/new-identity/new-identity.component.html
@@ -1,31 +1,33 @@
 <!-- Identity creation -->
-<div class="m-2 card" style="text-align:center;">
-  <div class="card-avatar card-img-top">
-    <div class="card-avatar-character text-dark">
-      Add Identity        
+<div style="display: flex; flex-direction:column; align-items:center">
+  <div class="m-2 card" style="text-align:center; width:100%; max-width: 
50em;">
+    <div class="card-avatar card-img-top">
+      <div class="card-avatar-character text-dark">
+        New identity        
+      </div>
+    </div>
+    <!-- Invalid input -->
+    <div *ngIf="'' !== newIdentity.name && !canSave() && !isDuplicate()" 
class="alert alert-danger alert-dismissible fade show" role="alert">
+      Only Alphanumeric input. No spaces or special characters allowed.
+    </div>
+    <!--Identity already exists -->  
+    <div *ngIf="isDuplicate()" class="alert alert-warning alert-dismissible 
fade show" role="alert"> 
+      An identity with this username already exists.
+    </div>
+    <!-- Input text -->
+    <div *ngIf="'' === newIdentity.name || canSave()" class="alert 
alert-secondary alert-dismissible fade show" role="alert">
+      Enter a username for your new identity
+    </div>
+    <div class="card-body">
+      <input [class.text-danger]="'' !== newIdentity.name && !canSave()" 
style="text-align: center; border: 1px solid #111;" 
(keyup.enter)="saveIdentity()" pattern="^[a-zA-Z0-9-]+" placeholder="Username" 
title="Only Alphanumeric input. No spaces or special characters allowed." 
class="mr-2" [(ngModel)]="newIdentity.name" autofocus>
+      <br/>
+      <br/>
+      <button [disabled]="!canSave()" [style.inactive]="!canSave()"  class="-1 
btn btn-primary" (click)="saveIdentity()">
+        <span class="fa fa-save"></span> Save
+      </button>
+      <button class="m-1 btn btn-danger" (click)="cancelAddIdentity()">
+        <span class="fa fa-close"></span> Cancel
+      </button>
     </div>
-  </div>
-  <!-- Invalid input -->
-  <div *ngIf="'' !== newIdentity.name && !canSave() && !isDuplicate()" 
class="alert alert-danger alert-dismissible fade show" role="alert">
-    Only Alphanumeric input. No spaces or special characters allowed.
-  </div>
-  <!--Identity already exists -->  
-  <div *ngIf="isDuplicate()" class="alert alert-warning alert-dismissible fade 
show" role="alert"> 
-    An identity with this username already exists.
-  </div>
-  <!-- Input text -->
-  <div *ngIf="'' === newIdentity.name || canSave()" class="alert 
alert-secondary alert-dismissible fade show" role="alert">
-    Enter a username for your new identity
-  </div>
-  <div class="card-body">
-    <input [class.text-danger]="'' !== newIdentity.name && !canSave()" 
style="text-align: center; border: 1px solid #111;" 
(keyup.enter)="saveIdentity()" pattern="^[a-zA-Z0-9-]+" placeholder="Username" 
title="Only Alphanumeric input. No spaces or special characters allowed." 
class="mr-2" [(ngModel)]="newIdentity.name" autofocus>
-    <br/>
-    <br/>
-    <button [disabled]="!canSave()" [style.inactive]="!canSave()"  class="-1 
btn btn-primary" (click)="saveIdentity()">
-      <span class="fa fa-save"></span> Save
-    </button>
-    <button class="m-1 btn btn-danger" (click)="cancelAddIdentity()">
-      <span class="fa fa-close"></span> Cancel
-    </button>
   </div>
 </div>
diff --git a/src/styles.scss b/src/styles.scss
index 2019ad2..9b0a221 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -87,7 +87,7 @@ div.card-avatar-character {
 }
 
 div.card-avatar {
-  border-bottom: 1px solid #555;
+  border-bottom: 1px solid #eee;
 }
 
 div.card-avatar-id {

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.