Commit ab5095f8 by Adarsh K

Merge branch 'master' of https://gitlab.techware.co.in/amal/getme

parents a484ee47 92897bf6
...@@ -25,7 +25,8 @@ const routes: Routes = [ ...@@ -25,7 +25,8 @@ const routes: Routes = [
{ path: 'productdetail', loadChildren: './productdetail/productdetail.module#ProductdetailPageModule' }, { path: 'productdetail', loadChildren: './productdetail/productdetail.module#ProductdetailPageModule' },
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' }, { path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' }, { path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' } { path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' },
{ path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' }
]; ];
@NgModule({ @NgModule({
......
<ion-header> <div class="nav_header">
<ion-toolbar> <button class="nav_btn nav_back floatLeft">
<ion-title>catagory</ion-title> <img src="../assets/Group22_2.png">
</ion-toolbar> </button>
</ion-header> <div class="nav_title floatLeft">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div>
<button class="nav_btn nav_search floatRight">
</button>
<div class="clear"></div>
</div>
<ion-content> <ion-content>
<div class="home_wrapper">
<div class="home_sub_header">
Featured Catagories
</div>
<div class="featured_catagory_list">
<ul>
<li (click)="goToPage('productlist')">
<img src="../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png">
<div class="featured_overlay">
<h4>Men's Fashion</h4>
</div>
</li>
<li (click)="goToPage('productlist')">
<img src="../assets/beautiful-woman-with-cocktail-suitcase-bed-hootel-room_118454-1593@3x.png">
<div class="featured_overlay">
<h4>Women's Fashion</h4>
</div>
</li>
<li (click)="goToPage('productlist')">
<img src="./assets/[email protected]">
<div class="featured_overlay">
<h4>Bags</h4>
</div>
</li>
<li (click)="goToPage('productlist')">
<img src="../assets/blue-striped-female-sneakers-colorful-background-top-view-flat-lay-minimal-background_77190-500@3x.png">
<div class="featured_overlay">
<h4>Shoes</h4>
</div>
</li>
</ul>
</div>
</div>
</ion-content> </ion-content>
\ No newline at end of file
.home_wrapper {
width: 100%;
.home_banner {
width: 100%;
height: 300px;
padding-top: 80px;
position: relative;
background-color: #fff;
.home_banner_title {
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url("../../assets/Path 55_2.png");
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
ion-slides {
width: 100%;
height: 100%;
ion-slide {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner_slide {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
padding-top: 160px;
padding-left: 20px;
padding-right: 20px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 5px;
font-size: 14px;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
}
}
}
}
}
.home_sub_header {
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
.featured_slider {
padding-left: 10px;
padding-right: 10px;
.feature_product {
width: 100%;
height: 130px;
position: relative;
background-color: #a8a8a8;
border: 2px solid #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
}
}
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.featured_catagory_list {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
position: relative;
height: 120px;
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
&:nth-child(odd) {
text-align: left;
}
&:nth-child(even) {
text-align: right;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px;
font-size: 26px;
font-weight: 900;
}
}
}
}
}
}
.sort_wrappper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%;
border-radius: 0px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
}
.search_box {
width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.search_btn {
width: 100px;
height: 45px;
background-color: rgba(41, 40, 91, 1);
border: none;
color: #fff;
font-size: 16px;
}
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
}
}
}
\ No newline at end of file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { StorelistPage } from './storelist.page';
const routes: Routes = [
{
path: '',
component: StorelistPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [StorelistPage]
})
export class StorelistPageModule {}
<div class="nav_header">
<button class="nav_btn nav_back floatLeft">
</button>
<div class="nav_title floatLeft">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div>
<button class="nav_btn nav_search floatRight">
</button>
<div class="clear"></div>
</div>
<ion-content>
<div class="home_wrapper">
<div class="home_sub_header">
Featured Stores
</div>
<div class="featured_slider">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide>
<div class="feature_product" (click)="goToPage('productlist')">
<img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
<div class="feature_overlay">
<h5>Flames Fashion</h5>
<p>Women Fashion</p>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="feature_product" (click)="goToPage('productlist')">
<img src="../assets/[email protected]">
<div class="feature_overlay">
<h5>Flames Fashion</h5>
<p>Women Fashion</p>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="feature_product" (click)="goToPage('productlist')">
<img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
<div class="feature_overlay">
<h5>Flames Fashion</h5>
<p>Women Fashion</p>
</div>
</div>
</ion-slide>
</ion-slides>
</div>
<div class="home_sub_header">
Nearby Stores
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../assets/2193bb91-3be9-4de9-96f4-4ce7aab8547e1558436499234-RARE-Women-Black-Printed-A-Line-Dress-6731558436495088-1@3x.png">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</ion-content>
\ No newline at end of file
.home_wrapper {
width: 100%;
.home_banner {
width: 100%;
height: 300px;
padding-top: 80px;
position: relative;
background-color: #fff;
.home_banner_title {
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url("../../assets/Path 55_2.png");
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
ion-slides {
width: 100%;
height: 100%;
ion-slide {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner_slide {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
padding-top: 160px;
padding-left: 20px;
padding-right: 20px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 5px;
font-size: 14px;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
}
}
}
}
}
.home_sub_header {
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
.featured_slider {
padding-left: 10px;
padding-right: 10px;
.feature_product {
width: 100%;
height: 130px;
position: relative;
background-color: #a8a8a8;
border: 2px solid #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
}
}
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.featured_catagory_list {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
position: relative;
height: 120px;
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
&:nth-child(odd) {
text-align: left;
}
&:nth-child(even) {
text-align: right;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px;
font-size: 26px;
font-weight: 900;
}
}
}
}
}
}
.sort_wrappper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%;
border-radius: 0px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
}
.search_box {
width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.search_btn {
width: 100px;
height: 45px;
background-color: rgba(41, 40, 91, 1);
border: none;
color: #fff;
font-size: 16px;
}
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StorelistPage } from './storelist.page';
describe('StorelistPage', () => {
let component: StorelistPage;
let fixture: ComponentFixture<StorelistPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ StorelistPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StorelistPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-storelist',
templateUrl: './storelist.page.html',
styleUrls: ['./storelist.page.scss'],
})
export class StorelistPage implements OnInit {
slideOpts = {
slidesPerView: 1.5
}
constructor() { }
ngOnInit() {
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment