FIX: Show initials if background image not loaded

doubtfire-lms · Mar 2, 2017 · adc9bf8 · adc9bf8
1 parent 344772e
commit adc9bf8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/app/common/user-icon/user-icon.scss b/src/app/common/user-icon/user-icon.scss
@@ -5,18 +5,25 @@
   font-size: inherit;
   width: 2em;
   height: 2em;
+  position: relative;
 }
 .user-icon > .user-icon-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
   color: #fff;
   font-weight: bold;
   font-size: inherit;
   padding-bottom: 2px;
   background-color: #777;
   background-size: cover;
   border-radius: 100%;
+  &.user-icon-gravatar {
+    z-index: 1;
+  }
 }
diff --git a/src/app/common/user-icon/user-icon.tpl.html b/src/app/common/user-icon/user-icon.tpl.html
@@ -1,5 +1,7 @@
 <div class="user-icon">
-  <div class="user-icon-wrapper" style="{{userBackgroundStyle}}">
-
+  <div class="user-icon-wrapper user-icon-gravatar" style="{{userBackgroundStyle}}">
+  </div>
+  <div class="user-icon-wrapper">
+    {{initials}}
   </div>
 </div>