ayan.poddar/eShopOnContainers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update identity layout

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-28 19:36:17 +01:00
parent 6f3a6a8c16
commit 293aa64bf9
3 changed files with 85 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html
View File

@ -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">
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
<section class="col-lg-4 col-md-5 col-xs-12">
<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>

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

@ -1,8 +1,35 @@
<button *ngIf="!authenticated" class="identity-login" (click)="login()">Login</button>
<div *ngIf="authenticated" class="identity-user">
<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>
<div class="identity-userDropdown">
<div [routerLink]="['orders']">MY ORDERS<img src="../../../../images/my_orders.png"></div>
<div (click)="logoutClicked($event)">LOG OUT<img src="../../../../images/logout.png"></div>
</div>
<div class="esh-identity">
<section class="esh-identity-section"
*ngIf="!authenticated">
<div class="esh-identity-item"
(click)="login()">
<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>

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

@ -1,63 +1,55 @@
.identity {
&-user {
position: absolute !important;
top: 30px;
right: 120px;
cursor: pointer;
@import "../../../variables";
&:hover .identity-userDropdown {
display: block;
.esh-identity {
line-height: 3rem;
position: relative;
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;
}
}
&-userDropdown {
display: none;
&-image {
display: inline-block;
}
&-drop {
background: $color-background-brighter;
height: 0;
min-width: 14rem;
right: 0;
overflow: hidden;
padding: .5rem;
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;
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 {
display: block;
color: $color-secondary-dark;
transition: color $animation-speed-default;
}
& div {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
text-transform: uppercase;
&:hover {
color: #83d01b;
}
}
}
&-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;
}
}