Home Explore Help
Sign In
SPIN
/
HOSN-app
11
1
Fork 0
Files Issues 3 Pull Requests 0 Wiki
Browse Source

Display verification icon next to username

Carsten Porth 6 years ago
parent
07de411cd5
commit
34b3330f1a
5 changed files with 57 additions and 45 deletions
Unified View Show Diff Stats
  1. 43 39
      app/src/app/app.scss
  2. 4 1
      app/src/components/tweet-header/tweet-header.html
  3. 3 4
      app/src/components/tweet-header/tweet-header.scss
  4. 4 1
      app/src/pages/profile/profile.html
  5. 3 0
      app/src/pages/profile/profile.scss

+ 43 - 39
app/src/app/app.scss
View File 

@@ -13,47 +13,51 @@
 
 // for the .md, .ios, or .wp mode classes. The mode class is
 
 // for the .md, .ios, or .wp mode classes. The mode class is
 
 // automatically applied to the <body> element in the app.
 
 // automatically applied to the <body> element in the app.
 
 .hashtag {
 
 .hashtag {
 
-    color: color($colors, primary, base);
 
+  color: color($colors, primary, base);
 
+}
 
+
 
+.icon.icon-verified {
 
+  color: #1da1f2;
 
 }
 
 }
 
 
 
 #sideNav {
 
 #sideNav {
 
-    .user-info {
 
-        .user-banner {
 
-            position: relative;
 
-            height: 140px;
 
-            margin-bottom: 20px;
 
-            .svg-triangle {
 
-                position: absolute;
 
-                bottom: 0;
 
-            }
 
-            .user-avatar {
 
-                position: absolute;
 
-                bottom: -10px;
 
-                left: 15px;
 
-                border-radius: 50%;
 
-            }
 
-        }
 
-        .user-info {
 
-            padding: 0 15px;
 
-            font-size: 15px;
 
-            font-weight: 500;
 
-            margin-bottom: 10px;
 
-            .handle {
 
-                color: #ababab;
 
-                font-weight: 300;
 
-                font-size: 11px;
 
-            }
 
-        }
 
-    }
 
-    .label-md {
 
-        margin-left: 8px;
 
-        display: flex;
 
-        align-items: center;
 
+  .user-info {
 
+    .user-banner {
 
+      position: relative;
 
+      height: 140px;
 
+      margin-bottom: 20px;
 
+      .svg-triangle {
 
+        position: absolute;
 
+        bottom: 0;
 
+      }
 
+      .user-avatar {
 
+        position: absolute;
 
+        bottom: -10px;
 
+        left: 15px;
 
+        border-radius: 50%;
 
+      }
 
     }
 
     }
 
-    .item-inner {
 
-        padding-left: 8px;
 
-    }
 
-    .ion-icon {
 
-        line-height: 1;
 
+    .user-info {
 
+      padding: 0 15px;
 
+      font-size: 15px;
 
+      font-weight: 500;
 
+      margin-bottom: 10px;
 
+      .handle {
 
+        color: #ababab;
 
+        font-weight: 300;
 
+        font-size: 11px;
 
+      }
 
     }
 
     }
 
-}
 
+  }
 
+  .label-md {
 
+    margin-left: 8px;
 
+    display: flex;
 
+    align-items: center;
 
+  }
 
+  .item-inner {
 
+    padding-left: 8px;
 
+  }
 
+  .ion-icon {
 
+    line-height: 1;
 
+  }
 
+}

+ 4 - 1
app/src/components/tweet-header/tweet-header.html
View File 

@@ -2,7 +2,10 @@
 
 <div class="header-container">
 
 <div class="header-container">
 
   <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar" (click)="showProfile(user.id_str)">
 
   <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar" (click)="showProfile(user.id_str)">
 
   <div class="username" (click)="showProfile(user.id)">
 
   <div class="username" (click)="showProfile(user.id)">
 
-    {{ user.name }}
 
+    <span>
 
+      {{ user.name }}
 
+      <ion-icon name="ios-checkmark-circle" *ngIf="user.verified" class="icon-verified"></ion-icon>
 
+    </span>
 
     <span class="twitter-handle">@{{user.screen_name}}</span>
 
     <span class="twitter-handle">@{{user.screen_name}}</span>
 
   </div>
 
   </div>
 
   <div class="timestamp">{{ tweetCreatedAt | diffForHumans }}</div>
 
   <div class="timestamp">{{ tweetCreatedAt | diffForHumans }}</div>

+ 3 - 4
app/src/components/tweet-header/tweet-header.scss
View File 

@@ -5,7 +5,6 @@ tweet-header {
 
     align-items: center;
 
     align-items: center;
 
     margin-bottom: 4px;
 
     margin-bottom: 4px;
 
   }
 
   }
 
-
 
   .avatar {
 
   .avatar {
 
     border-radius: 50%;
 
     border-radius: 50%;
 
     width: 32px;
 
     width: 32px;
 
@@ -13,7 +12,6 @@ tweet-header {
 
     box-shadow: 0px 0px 4px 0px #777;
 
     box-shadow: 0px 0px 4px 0px #777;
 
     margin: 4px 8px 4px 4px;
 
     margin: 4px 8px 4px 4px;
 
   }
 
   }
 
-
 
   .username {
 
   .username {
 
     display: flex;
 
     display: flex;
 
     flex-direction: column;
 
     flex-direction: column;
 
@@ -25,15 +23,16 @@ tweet-header {
 
       font-weight: 400;
 
       font-weight: 400;
 
     }
 
     }
 
   }
 
   }
 
-
 
   .timestamp {
 
   .timestamp {
 
     color: #aaa;
 
     color: #aaa;
 
     font-size: 10px;
 
     font-size: 10px;
 
     margin-left: auto;
 
     margin-left: auto;
 
   }
 
   }
 
-
 
   .options {
 
   .options {
 
     margin-left: 5px;
 
     margin-left: 5px;
 
     color: #666;
 
     color: #666;
 
   }
 
   }
 
+  .icon.icon-verified {
 
+    font-size: 1em;
 
+  }
 
 }
 
 }

+ 4 - 1
app/src/pages/profile/profile.html
View File 

@@ -6,7 +6,10 @@
 
 -->
 
 -->
 
 <ion-header>
 
 <ion-header>
 
   <ion-navbar>
 
   <ion-navbar>
 
-    <ion-title>{{ user.name }}</ion-title>
 
+    <ion-title>
 
+      {{ user.name }}
 
+      <ion-icon name="ios-checkmark-circle" *ngIf="user.verified" class="icon-verified"></ion-icon>
 
+    </ion-title>
 
   </ion-navbar>
 
   </ion-navbar>
 
 </ion-header>
 
 </ion-header>

+ 3 - 0
app/src/pages/profile/profile.scss
View File 

@@ -0,0 +1,3 @@
 
+ion-navbar .icon.icon-verified {
 
+  font-size: 2rem;
 
+}