Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Product list Ui #234

Merged
merged 7 commits into from
Aug 9, 2018
Merged

Product list Ui #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8f3c48b
Product list Ui
jaypal412 Aug 7, 2018
821680c
Product-list-Ui
jaypal412 Aug 7, 2018
170ec3e
Added category link
jaypal412 Aug 7, 2018
d12adf5
Work on thee UI Fixes
jaypal412 Aug 8, 2018
4ab0d7d
aliginment fixes
jaypal412 Aug 8, 2018
29e6592
changed order-detail Ui
jaypal412 Aug 9, 2018
077c682
fixes
jaypal412 Aug 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/app/checkout/cart/components/empty-cart/empty-cart.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
<i class="fa fa-cart-arrow-down fa-5x" aria-hidden="true"></i>
</div>
<div class="empty-cart-message">Your Shopping Bag is empty</div>
<button type="button" class="btn themebtnprimary themebtnprimarysade col-8 col-sm-3 m-auto" [routerLink]="['/']">Coutinue Shopping</button>
<button type="button" class="btn themebtnprimary themebtnprimarysade col-8 col-sm-3 m-auto m-b-4"
[routerLink]="['/']">Continue Shopping</button>
</div>
24 changes: 23 additions & 1 deletion src/app/checkout/order-failed/order-failed.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ <h3>Shipping</h3>
</div>
</div>
</div>
<div class="order-items shadow-sm mt-3 mb-3">
<!-- <div class="order-items shadow-sm mt-3 mb-3">
<div class="col-sm">
<h3>Item(s)</h3>
<div class="row" *ngFor="let line_item of orderDetails.line_items">
Expand All @@ -97,5 +97,27 @@ <h3>Item(s)</h3>
</div>
</div>
</div>
</div> -->
<div class="order-items shadow-sm mt-3 mb-3">
<h3>Item(s)</h3>
<div class="row">
<div *ngFor="let item of orderDetails.line_items" class="lineitems col-12 col-sm-6">
<div class="row">
<div class="col-12 pr-0 col-sm-2">
<a [routerLink]="['/', item.variant.slug]" class="col-sm col-3">
<img [src]="getProductImageUrl(item)">
</a>
</div>
<div class="col-12 col-sm-8" [routerLink]="['/', item.variant.slug]">
<div class="lineitems-name"> {{item.variant.name}}</div>
<div class="lineitems-info"> {{item.variant.options_text}}</div>
</div>
<div class="col-12 col-sm-2">
<div class="price">{{item.display_amount}}</div>
<div class="qty"> QTY: {{item.quantity}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
9 changes: 8 additions & 1 deletion src/app/home/content/content-header/content-header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ <h4 title="men casual shirts">Showing {{paginationInfo.count}} of {{paginationIn
</div>
</div>

<div class="container content " *ngIf="screenWidth">
<div class="container content content-device" *ngIf="screenWidth">


<div class="row">
<div class="col-6 pl-1 pr-1 text-right">
<button type="button" class="search-btns col-12 p-0 px-1 py-3 shadow-sm" (click)="sortModalShow()">
Expand Down Expand Up @@ -82,4 +84,9 @@ <h4 title="men casual shirts">Showing {{paginationInfo.count}} of {{paginationIn
</div>
</div>
</div>
<div class="col-12 text-center">
<span class="showcount">
Showing {{paginationInfo.count}} of {{paginationInfo.total_count}} products.
</span>
</div>
</div>
36 changes: 29 additions & 7 deletions src/app/home/content/content-header/content-header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
.content {
.search-btns {
text-transform: uppercase;
margin-bottom: 2rem;
@include button-size(10px, 10px, 1em, 1em, 7px);
margin-bottom: 10px;
@include button-size(10px, 10px, 0.7em, 1em, 7px);
color: $black;
border: 1px solid $gray-600;
@include gradient-y($start-color: $gray-100, $end-color: $gray-300, $start-percent: 0%, $end-percent: 100%)
Expand All @@ -14,13 +14,21 @@
text-align: left;
}
.dropdown-menu {
width: 80%;
right: 18px !important
width: 17em;
right: 18px !important;
li {
border-bottom: 0 solid
}
}
.dropdown-toggle::after {
right: -50%;
display: inline-block;
position: relative;
position: absolute;
right: 10px;
top: 15px;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: $gray-100
}
.queried-for {
overflow: hidden; // display: inline-block;
Expand Down Expand Up @@ -234,7 +242,7 @@ ul {
box-shadow: none;
}
a {
padding: 0.8rem .1rem;
padding: 0.8rem .7rem;
border-bottom: 1px solid $gray-10;
color: $gray-900;
display: block;
Expand All @@ -249,6 +257,9 @@ ul {
position: absolute;
background-size: 10px;
}
&:focus {
background-color: $gray-100;
}
}
ul {
li {
Expand Down Expand Up @@ -372,3 +383,14 @@ input[type="radio"]:checked+span .fake-radiobutton:after,
input[type="checkbox"]:checked+span .fake-checkbox:after {
display: block;
}

.content-device {
@media screen and (min-width: 320px) and (max-width: 768px) {
background-color:$gray-100;
padding: 0 22px;
margin-bottom: 5px;
}
.showcount {
font-size: 10px;
}
}
20 changes: 14 additions & 6 deletions src/app/home/content/product-list/product-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@
</div>
</a>
</div>
<div class="col-12 mt-3">
<div class="row">
<pagination *ngIf="paginationData.total_count > paginationData.per_page" [totalItems]="paginationData.total_count" [itemsPerPage]="paginationData.per_page"
[(ngModel)]="paginationData.current_page" (pageChanged)="pageChanged($event)" class="m-auto" [maxSize]="5"></pagination>
</div>

</div>
</div>

<div class="row results-base m-0" *ngIf="isMobile">
Expand Down Expand Up @@ -60,11 +67,12 @@
</div>
</a>
</div>
</div>
<div class="col-12 mt-3">
<div class="row">
<pagination *ngIf="paginationData.total_count > paginationData.per_page" [totalItems]="paginationData.total_count" [itemsPerPage]="paginationData.per_page"
[(ngModel)]="paginationData.current_page" (pageChanged)="pageChanged($event)" class="m-auto" [maxSize]="5"></pagination>
<div class="col-12 mt-3">
<div class="row">
<pagination *ngIf="paginationData.total_count > paginationData.per_page" [totalItems]="paginationData.total_count" [itemsPerPage]="paginationData.per_page"
[(ngModel)]="paginationData.current_page" (pageChanged)="pageChanged($event)" class="m-auto" [maxSize]="3"></pagination>
</div>

</div>

</div>

16 changes: 12 additions & 4 deletions src/app/home/content/product-list/product-list.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
border-radius: 0;
border-bottom: 1px solid $gray-10;
display: block;
padding: 1em;
padding: 1em 1.5em;
box-shadow: none;
}
@media screen and(width: 768px) {
flex: 0 0 30.5%;
Expand Down Expand Up @@ -108,9 +109,9 @@
background-color: $white;
color: $gray-400;
margin-top: 0px;
width: 60%;
margin: 0 auto;
font-size: 0.7rem;
width: 90.5%;
margin: 5px auto 0;
font-size: 0.6rem;
}
}

Expand All @@ -134,3 +135,10 @@
text-decoration: line-through;
margin-left: 10px;
}

.results-base {
@media screen and (min-width: 320px) and (max-width: 768px) {
padding: 0 0px;
background-color: $white;
}
}
4 changes: 2 additions & 2 deletions src/app/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div *ngIf="pagination$ | async; let paginationData">
<div class="container col-12 home" *ngIf="paginationData.total_count > 0">
<div class="col-12 p-0 p-sm-3 home" *ngIf="paginationData.total_count > 0">
<div class="container" *ngIf="taxonomies$ | async; let taxonomies">
<div class="row">
<div class="col-lg-3 sidebar d-sm-none d-xs-none d-none d-lg-block">
Expand All @@ -23,7 +23,7 @@ <h1>Searched Results</h1>
<div class="col-9 col-sm-6 m-auto nproduct">
<img src="../../assets/custom/noproduct.png" />
<h2 class="my-5">No Products Found</h2>
<button type="button" class="btn themebtnprimary themebtnprimarysade col-12 col-sm-5 m-auto" [routerLink]="['/']">Coutinue Shopping</button>
<button type="button" class="btn themebtnprimary themebtnprimarysade mb-3 col-12 col-sm-5 m-auto" [routerLink]="['/']">Continue Shopping</button>

</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/app/home/home.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
@import '../shared/scss/selected_theme_variables';
.home {
background-color: $gray-100;
@media screen and(min-width: 320px) and(max-width: 768px) {
background-color:transparent;
padding: 0px;
}
.sidebar {
background-color: $gray-100;
padding: 3.5vh 2vw;
Expand Down Expand Up @@ -29,7 +33,7 @@

.nproduct {
text-align: center;
padding-top:2em;
padding-top: 2em;
img {
height: 170px;
}
Expand Down
6 changes: 3 additions & 3 deletions src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@
<ul class="bg-color" *ngIf="menuTaxons">
<li (click)="parrantBack()" class="backbtn">
<i class="fa fa-chevron-left mr-2"></i>Back</li>
<div class="subhead">{{menuTaxons.name}}</div>
<div class="subhead" (click)="onCloseMobilemenu()" [routerLink]="['search']" [queryParams]="{'q[name_cont]': menuTaxons.name, id: menuTaxons.id}" >{{menuTaxons.name}}</div>
Copy link
Member

@gopalshimpi gopalshimpi Aug 7, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why It is added here?

Copy link
Contributor Author

@jaypal412 jaypal412 Aug 8, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in the mobile view click on the category name the page will show. like on click of dog, dog detail page will be open.

<li *ngFor="let taxon of menuTaxons.taxons; let i= index" (click)="showSubCategory(i)">{{taxon.name}}</li>
</ul>
</div>
<div class="p-0 no-gutters" class="sub-sub-catgory" [@subCatgory]="getChildState">
<ul class="bg-color" *ngIf="subChild">
<li (click)="childBack()" class="backbtn">
<i class="fa fa-chevron-left mr-2"></i> Back</li>
<div class="subhead">{{subChild.name}}</div>
<div class="subhead" (click)="onCloseMobilemenu()" [routerLink]="['search']" [queryParams]="{'q[name_cont]': subChild.name, id: subChild.id}">{{subChild.name}}</div>
<li *ngFor="let taxon of subChild.taxons; let i= index" [routerLink]="['search']" [queryParams]="{'q[name_cont]': taxon.name, id: taxon.id}"
(click)="onCloseMobilemenu()">{{taxon.name}}</li>
</ul>
</div>
<div class="need-help">Need help?+91-9176031568</div>
<div class="need-help">Need help?{{contactno}}</div>
</div>
2 changes: 2 additions & 0 deletions src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
transition
} from '@angular/animations';
import { ElementRef, EventEmitter } from '@angular/core';
import { environment } from '../../../../../environments/environment';
@Component({
selector: 'app-category-mobile-menu',
templateUrl: './category-mobile-menu.component.html',
Expand Down Expand Up @@ -51,6 +52,7 @@ export class CategoryMobileMenuComponent implements OnInit {
showParrent = false;
showChild = false;
backBtnShow = false;
contactno = environment.config.contact_info.contact_no;
constructor(private el: ElementRef) { }
showCategory(i) {
this.menuTaxons = this.taxonomies[0].root.taxons[i];
Expand Down
2 changes: 1 addition & 1 deletion src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<ul>
<li role="menuitem">
<h6>Get help from our experts 24/7</h6>
<h2 class="text-danger">+ {{contactno}}</h2>
<h2 class="text-danger">{{contactno}}</h2>
</li>
<li class="divider dropdown-divider"></li>
<li></li>
Expand Down
34 changes: 27 additions & 7 deletions src/app/user/components/orders/order-detail/order-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div *ngIf="order">
<div class="row box">
<div class="col-12 col-sm-6">
<div class="row box m-0">
<div class="col-12 col-sm-6 p-0 p-sm-3">
<h3>Order Details</h3>
<table>
<tr>
Expand Down Expand Up @@ -41,7 +41,7 @@ <h3>Order Details</h3>
</tr>
</table>
</div>
<div class="col-12 col-sm-6">
<div class="col-12 col-sm-6 p-0 p-sm-3">
<h3>Address</h3>
<table>
<tr>
Expand Down Expand Up @@ -70,10 +70,9 @@ <h3>Address</h3>
</div>


<div class="box mt-2 p-0">

<div *ngFor="let item of order.line_items" class="lineitems">
<div class="box mt-2 p-0 mb-4 row m-0" *ngIf="!isMobile">

<div *ngFor="let item of order.line_items" class="lineitems">
<div class="row ">
<div class="col-12 pr-0 col-sm-1">
<img [routerLink]="['/', item.variant.slug]" [src]='getProductImageUrl(item)' />
Expand All @@ -87,7 +86,28 @@ <h3>Address</h3>
<div class="qty"> QTY: {{item.quantity}}</div>
</div>
<div class="col-12 col-sm-4">
<b class="text-warning">Please note:</b> You can return or exchange this within 15 days.
<b class="text-danger note p-0">Please note:</b> You can return or exchange this within 15 days.
</div>
</div>
</div>
</div>
<div class="box mt-2 p-0 mb-4 row m-0" *ngIf="isMobile">
<div *ngFor="let item of order.line_items" class="lineitems">
<div class="row ">
<div class="col-12 pr-0 col-sm-1">
<img [routerLink]="['/', item.variant.slug]" [src]='getProductImageUrl(item)' />
</div>
<div class="col-6 col-sm-5" [routerLink]="['/', item.variant.slug]">
<div class="lineitems-name"> {{item.variant.name}}</div>
<div class="lineitems-info"> {{item.variant.options_text}}</div>
</div>
<div class="col-6 col-sm-2">
<div class="qty"> QTY: {{item.quantity}}</div>
<div class="price">{{item.display_amount}}</div>
</div>
<div class="col-12 col-sm-4">
<b class="note text-danger p-0">Note:</b>
<span class="note">You can return or exchange this within 15 days.</span>
</div>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/app/user/components/orders/order-detail/order-detail.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@
font-weight: 200;
margin-top: 17px;
cursor: pointer;
@media only screen and (min-width: 320px) and (max-width: 767px){
margin-top: 0;
}
}
.lineitems-info {
font-size: .8em;
Expand Down Expand Up @@ -81,3 +84,4 @@ table {
}
}
}
.note{color:$gray-600;padding-left: 5px;font-size: 11px;}
13 changes: 11 additions & 2 deletions src/app/user/components/orders/order-detail/order-detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export class OrderDetailComponent implements OnInit, OnDestroy {
order: Order;
title = environment.appName;
payubiz = environment.config.PaymentMethodPayubiz

isMobile = false;
screenwidth: any;
constructor(
private userService: UserService,
private route: ActivatedRoute,
Expand All @@ -38,8 +39,16 @@ export class OrderDetailComponent implements OnInit, OnDestroy {
.subscribe(order => this.order = order);
}
);
if (isPlatformBrowser(this.platformId)) {
this.screenwidth = window.innerWidth;
}
this.calculateInnerWidth();
}
calculateInnerWidth() {
if (this.screenwidth <= 1000) {
this.isMobile = this.screenwidth;
}
}

getProductImageUrl(line_item: LineItem) {
return line_item.variant.images[0].small_url;
}
Expand Down
Loading