Update identity layout

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html

@@ -2,17 +2,20 @@
     <div class="container">
         <article class="row">
 
-            <section class="col-sm-10">
+            <section class="col-lg-7 col-md-6 col-xs-12">
                 <a class="navbar-brand" routerLink="catalog">
                     <img src="../images/brand.png" />
                 </a>
             </section>
 
-            <section class="col-sm-2">
+            <section class="col-lg-4 col-md-5 col-xs-12">
-                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
                 <esh-identity></esh-identity>
             </section>
 
+            <section class="col-lg-1 col-xs-12">
+                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
+            </section>
+
         </article>
     </div>
 </header>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html

@@ -1,8 +1,35 @@
-<button *ngIf="!authenticated" class="identity-login" (click)="login()">Login</button>
+<div class="esh-identity">
-<div *ngIf="authenticated" class="identity-user">
+    <section class="esh-identity-section"
-    <div><span>{{userName}}</span></div><div style="float: right;top: 0;right: -15px;position: absolute;"><img src="../../../../images/arrow-down.png" class="identity-downArrow"></div>
+             *ngIf="!authenticated">
-    <div class="identity-userDropdown">
+        <div class="esh-identity-item"
-        <div [routerLink]="['orders']">MY ORDERS<img src="../../../../images/my_orders.png"></div>
+             (click)="login()">
-        <div (click)="logoutClicked($event)">LOG OUT<img src="../../../../images/logout.png"></div>
+
+            <div class="esh-identity-name esh-identity-name--upper">Login</div>
         </div>
+    </section>
+
+    <section class="esh-identity-section"
+         *ngIf="authenticated">
+
+        <div class="esh-identity-name">{{userName}}</div>
+        <img class="esh-identity-image" src="../../../../images/arrow-down.png">
+    </section>
+
+    <section class="esh-identity-drop"
+             *ngIf="authenticated">
+
+        <div class="esh-identity-item"
+             [routerLink]="['orders']">
+
+            <div class="esh-identity-name esh-identity-name--upper">My orders</div>
+            <img class="esh-identity-image" src="../../../../images/my_orders.png">
+        </div>
+
+        <div class="esh-identity-item"
+             (click)="logoutClicked($event)">
+
+            <div class="esh-identity-name esh-identity-name--upper">Log Out</div>
+            <img class="esh-identity-image" src="../../../../images/logout.png">
+        </div>
+    </section>
 </div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss

@@ -1,63 +1,55 @@
-.identity {
+@import "../../../variables";
-    &-user {
-        position: absolute !important;
-        top: 30px;
-        right: 120px;
-        cursor: pointer;
 
-        &:hover .identity-userDropdown {
+.esh-identity {
-            display: block;
+    line-height: 3rem;
-        }
+    position: relative;
-    }
-
-    &-userDropdown {
-        display: none;
-        position: absolute;
-        background-color: #FFFFFF;
-        min-width: 160px;
-        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-        right: -15px;
-        z-index: 3;
-
-        &:hover {
-            display: block;
-        }
-
-        & div {
-            color: black;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
     text-align: right;
+
+    &-section {
+        display: inline-block;
+        width: 100%;
+    }
+
+    &-name {
+        display: inline-block;
+
+        &--upper {
             text-transform: uppercase;
+        }
+
+        @media screen and (max-width: $media-screen-s) {
+            font-size: $font-size-s;
+        }
+    }
+
+    &-image {
+        display: inline-block;
+    }
+
+    &-drop {
+        background: $color-background-brighter;
+        height: 0;
+        min-width: 14rem;
+        right: 0;
+        overflow: hidden;
+        padding: .5rem;
+        position: absolute;
+        top: 2rem;
+        transition: height $animation-speed-default;
+    }
+
+    &:hover &-drop {
+        height: 6rem;
+        transition: height $animation-speed-default;
+    }
+
+    &-item {
+        cursor: pointer;
+        transition: color $animation-speed-default;
 
         &:hover {
-                color: #83d01b;
+            color: $color-secondary-dark;
+            transition: color $animation-speed-default;
         }
     }
-    }
-
-    &-downArrow {
-        height: 7px;
-        width: 10px;
-        display: inline-block;
-        margin-left: 20px;
-
-        &:hover > identity.userDropdown {
-            display: block;
-        }
-    }
-
-    &-login {
-        border: 1px solid #00a69c;
-        height: 36px !important;
-        margin-right: 10px;
-        margin-top: 10px;
-        background-color: #fff;
-        color: #00a69c;
-        text-transform: uppercase;
-        max-width: 140px;
-        width: 140px;
-        padding-top: 8px !important;
-    }
 }