From b208f059a03852b33cf6924ffc3782ca28300980 Mon Sep 17 00:00:00 2001
From: Ahsan Ulhaq <ahsan.haq@arbisoft.com>
Date: Wed, 11 Feb 2015 16:12:32 +0500
Subject: [PATCH 1/4] CSS Background Image used for important link

CSS background image was used for the home icon at upper right corner
so when user enter high contrast mode or disable bakground image it
disapear so moved it to DOM element

TNL-1382
---
 lms/static/sass/shared/_header.scss | 16 ++++++++--------
 lms/templates/navigation.html       |  8 +++++---
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 709d59e86d..4125168ca2 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -138,7 +138,7 @@ header.global {
     }
 
     a.user-link {
-      @include padding(6px, 12px, 8px, 35px);
+      @include padding(3px, 12px, 8px, 8px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -146,24 +146,24 @@ header.global {
       letter-spacing: 0;
 
       .avatar {
-        @include background-image(url('../images/small-header-home-icon.png'));
-        background-repeat: no-repeat;
 
         // CASE: right to left layout
-        @include rtl {
-          background-position: top right;
-        }
 
-        height: 26px;
         display: inline-block;
         @include left(8px);
         opacity: 0.5;
         overflow: hidden;
-        position: absolute;
         top: 4px;
+        margin-top: 1px;
+        margin-right: 2px;
         @include transition(all 0.15s linear 0s);
         width: 19px;
       }
+      div {
+        margin-top: 3px;
+        float: right;
+        margin-left: 4px;
+      }
 
       &:hover, &:focus {
         .avatar {
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 945291ae2e..7df24bce38 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -68,12 +68,14 @@ site_status_msg = get_site_status_msg(course_id)
     <ol class="user">
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
-          <span class="avatar"></span>
-          <span class="sr">${_("Dashboard for:")} </span> ${user.username}
+          <img alt='${_("Dashboard for:")}' class="avatar" src="${settings.STATIC_URL}images/small-header-home-icon.png">
+          <div>
+          ${user.username}
+          </div>
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
+        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><i class="fa fa-sort-desc" aria-hidden="true"></i></a>
         <ul class="dropdown-menu" aria-label="More Options" role="menu">
           <%block name="navigation_dropdown_menu_links" >
             % if settings.MKTG_URL_LINK_MAP.get('FAQ'):

From cd33ee8ad58f269a9a649e24f7c2374faf43b674 Mon Sep 17 00:00:00 2001
From: Ahsan Ulhaq <ahsan.haq@arbisoft.com>
Date: Wed, 11 Feb 2015 20:09:18 +0500
Subject: [PATCH 2/4] changes in the css for text with home icon

---
 lms/static/sass/shared/_header.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 4125168ca2..d7b1db080f 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -164,6 +164,11 @@ header.global {
         float: right;
         margin-left: 4px;
       }
+      div {
+        margin-top: 3px;
+        float: right;
+        margin-left: 4px;
+      }
 
       &:hover, &:focus {
         .avatar {

From fe7b5b2c82d80aa71880b46f10317dedfb622311 Mon Sep 17 00:00:00 2001
From: Ahsan Ulhaq <ahsan.haq@arbisoft.com>
Date: Wed, 18 Feb 2015 20:27:09 +0500
Subject: [PATCH 3/4] dropdown button position issue

---
 lms/static/sass/shared/_header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index d7b1db080f..773c1a44c2 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -125,7 +125,7 @@ header.global {
         > a {
           @include border-radius(0, 4px, 4px, 0);
           @include border-left(none);
-          padding: 5px 8px 7px 8px;
+          padding: 3px 8px 9px 8px;
 
           &.shopping-cart {
             border-radius: 4px;

From 01435692fbea2c19aa8c2a777b1fa86f49b1343c Mon Sep 17 00:00:00 2001
From: Ahsan Ulhaq <ahsan.haq@arbisoft.com>
Date: Fri, 20 Feb 2015 15:30:25 +0500
Subject: [PATCH 4/4] change home icon image to font awesome icon and changed
 css accordingly

---
 lms/static/sass/shared/_header.scss | 8 ++++++++
 lms/templates/navigation.html       | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 773c1a44c2..cc02f5bf6e 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -145,6 +145,14 @@ header.global {
       font-weight: bold;
       letter-spacing: 0;
 
+      .icon {
+        display: inline-block;
+        @include float(left);
+        margin: 3px 0 -3px 0;
+        font-size: 1.2em;
+        color: $m-gray;
+      }
+
       .avatar {
 
         // CASE: right to left layout
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 7df24bce38..daf8a16be9 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -68,7 +68,8 @@ site_status_msg = get_site_status_msg(course_id)
     <ol class="user">
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
-          <img alt='${_("Dashboard for:")}' class="avatar" src="${settings.STATIC_URL}images/small-header-home-icon.png">
+          <i class="icon fa fa-home" aria-hidden="true"></i>
+          <span class="sr">${_("Dashboard for:")}</span>
           <div>
           ${user.username}
           </div>