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

High res avatar in side menu

Carsten Porth 5 years ago
parent
2f374cfa85
commit
24d38deab4
2 changed files with 41 additions and 40 deletions
Split View Show Diff Stats
  1. 1 1
      app/src/app/app.html
  2. 40 39
      app/src/app/app.scss

+ 1 - 1
app/src/app/app.html
View File 

@@ -12,7 +12,7 @@
 
           viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
 
           <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
 
         </svg>
 
-        <img src="{{ user.profile_image_url_https }}" alt="User" class="user-avatar">
 
+        <img src="{{ user.profile_image_url_https | highResolution }}" alt="User" class="user-avatar">
 
       </div>
 
       <div class="user-info">
 
         {{user.name}}<br><span class="handle">@{{user.screen_name}}</span>

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

@@ -13,47 +13,48 @@
 
 // for the .md, .ios, or .wp mode classes. The mode class is
 
 // automatically applied to the <body> element in the app.
 
 .icon.icon-verified {
 
-    color: #1da1f2;
 
+  color: #1da1f2;
 
 }
 
 
 #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;
 
-    }
 
-    .item-inner {
 
-        padding-left: 8px;
 
+  .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%;
 
+        width: 90px;
 
+      }
 
     }
 
-    .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;
 
+  }
 
+}