Skip to content

G
getme
Commit 43c3f088 by Arjun
Options

add address

parent 9e685f40
Showing with 186 additions and 190 deletions
package.json
...@@ -39,18 +39,19 @@ ...@@ -39,18 +39,19 @@
"cordova-android": "8.0.0", "cordova-android": "8.0.0",
"cordova-plugin-device": "^2.0.3", "cordova-plugin-device": "^2.0.3",
"cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-googleplus": "^8.2.1", "cordova-plugin-googleplus": "^8.4.0",
"cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3", "cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-nativegeocoder": "^3.2.2", "cordova-plugin-nativegeocoder": "^3.2.2",
"cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4", "cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.3", "cordova-plugin-x-socialsharing": "^5.6.4",
"cordova-sqlite-storage": "^3.4.1", "cordova-sqlite-storage": "^3.4.1",
"core-js": "^2.6.11", "core-js": "^2.6.11",
"es6-promise-plugin": "^4.2.2", "es6-promise-plugin": "^4.2.2",
"firebase": "^6.6.2", "firebase": "^6.6.2",
"mx.ferreyra.callnumber": "0.0.2",
"rxjs": "^6.5.4", "rxjs": "^6.5.4",
"rxjs-compat": "^6.5.4", "rxjs-compat": "^6.5.4",
"tslib": "^1.9.0", "tslib": "^1.9.0",
...@@ -105,7 +106,8 @@ ...@@ -105,7 +106,8 @@
"cordova-plugin-x-socialsharing": { "cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+" "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
}, },
"mx.ferreyra.callnumber": {} "mx.ferreyra.callnumber": {},
"call-number": {}
}, },
"platforms": [ "platforms": [
"android" "android"
......
src/app/home/home.page.html
...@@ -117,10 +117,11 @@ ...@@ -117,10 +117,11 @@
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map> </agm-map>
<div class="add_address_wrapper"> <div class="add_address_wrapper">
<div class="add-address-c"> <h5 class="floatLeft">NEW ADDRESS</h5>
<span>NEW ADDRESS</span> <h5 class="floatRight" (click)="istoggle(); goToPage('nearby')">
<span (click)="istoggle(); goToPage('nearby')">ADD NEW</span> ADD NEW
</div> </h5>
<div class="clear"></div>
<div> <div>
<ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0"> <ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li *ngFor="let address of addressService.addressList; let i = index"> <li *ngFor="let address of addressService.addressList; let i = index">
......
src/app/nearby/nearby.page.scss
.nearby_map { .nearby_map {
width: 100%;
height: 100%;
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(29, 27, 130, 0.2);
}
agm-map {
width: 100%; width: 100%;
height: 100%; height: 100vh;
.overlay { .overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -11,123 +22,112 @@ ...@@ -11,123 +22,112 @@
} }
agm-map { agm-map {
width: 100%; width: 100%;
height: 100vh; height: 100%;
.overlay { position: relative;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(29, 27, 130, 0.2);
}
agm-map {
width: 100%;
height: 100%;
position: relative;
}
.click_marker {
min-width: 200px;
padding: 10px;
h5 {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
}
} }
.add_address_wrapper { .click_marker {
position: fixed; min-width: 200px;
bottom: 0px; padding: 10px;
left: 0px;
right: 0px;
padding: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 { h5 {
color: rgba(41, 40, 91, 1);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-weight: 800;
} }
input { p {
width: 100%; margin: 0px;
height: 45px; padding: 0px;
border: 1px solid #e1e0eb;
border-radius: 4px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
outline: none;
transition: all 0.4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
}
.add_btn {
width: 100%;
height: 45px;
background-color: #29285b;
color: #fff;
border-radius: 4px;
} }
} }
.styled-checkbox { }
position: absolute; // take it out of document flow .add_address_wrapper {
opacity: 0; // hide it position: fixed;
&+label { bottom: 0px;
position: relative; left: 0px;
cursor: pointer; right: 0px;
padding: 0; padding: 20px;
} border-top-left-radius: 15px;
// Box. border-top-right-radius: 15px;
&+label:before { background: #fff;
content: ''; -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
margin-right: 10px; -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
display: inline-block; box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
vertical-align: text-top; h5 {
width: 20px; color: rgba(41, 40, 91, 1);
height: 20px; margin: 0px;
border-radius: 10px; padding: 0px;
background: white; font-weight: 800;
border: 1px solid rgba(215, 213, 228, 1); }
} input {
// Box hover width: 100%;
// Box checked height: 45px;
&:checked+label:before { border: 1px solid #e1e0eb;
background: #29285b; border-radius: 4px;
} padding-left: 10px;
// Disabled state label. padding-right: 10px;
&:disabled+label { margin-bottom: 20px;
color: #b8b8b8; outline: none;
cursor: auto; transition: all 0.4s ease-in-out;
} &::placeholder {
// Disabled box. color: rgba(215, 213, 228, 1);
&:disabled+label:before {
box-shadow: none;
background: #ddd;
} }
// Checkmark. Could be replaced with an image &:focus {
&:checked+label:after { border: 1px solid #f3d09f;
content: ''; box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
position: absolute;
left: 6px;
top: 11px;
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);
} }
} }
} .add_btn {
\ No newline at end of file width: 100%;
height: 45px;
background-color: #29285b;
color: #fff;
border-radius: 4px;
}
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&: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: 11px;
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);
}
}
}
\ No newline at end of file
src/app/preference/preference.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()" *ngIf="type==0"> <button class="nav_btn nav_back floatLeft" (click)="goBack()" *ngIf="type==0">
<img src="../assets/Group17_2.png" /> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>Preferences</h4> <h4>Preferences</h4>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="preference-wrapper"> <div class="preference-wrapper">
<div class="pref-wrap-two"> <div class="pref-wrap-two">
<ion-grid> <ion-grid>
<ion-row <ion-row *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
*ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0" <ion-col size="6" *ngFor="let categories of categoriesService.categories">
> <div class="preference-box">
<ion-col <input type="checkbox" class="preference" (click)="selectPrefernce(categories.catId)" [checked]="selectedPref(categories.catId)" />
size="6" <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
*ngFor="let categories of categoriesService.categories" <h1>{{categories.catName}}</h1>
> </div>
<div class="preference-box"> </ion-col>
<input </ion-row>
type="checkbox" </ion-grid>
class="preference" </div>
(click)="selectPrefernce(categories.catId)"
[checked]="selectedPref(categories.catId)"
/>
<img
[src]="categories.catImage"
onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'"
/>
<h1>{{categories.catName}}</h1>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div> </div>
</ion-content>
<ion-footer>
<div class="bottom-button"> <div class="bottom-button">
<button class="show-btn" (click)="onSubmit()"> <button class="show-btn" (click)="onSubmit()">
Continue Continue
</button> </button>
<!-- <span>SKIP</span> --> <!-- <span>SKIP</span> -->
</div> </div>
</div> </ion-footer>
</ion-content>
<div class="loader" *ngIf="loader"> <div class="loader" *ngIf="loader">
<div class="lds-ripple"> <div class="lds-ripple">
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/preference/preference.page.scss
.preference-wrapper { .preference-wrapper {
padding: 20px 20px 110px 20px; padding: 20px 20px 110px 20px;
.bottom-button {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 20px;
text-align: center;
z-index: 2;
button {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
text-transform: uppercase;
}
span {
text-transform: uppercase;
font-size: 16px;
text-align: center;
margin-top: 10px;
display: inline-block;
font-weight: 600;
}
}
.pref-wrap-two { .pref-wrap-two {
.preference-box { .preference-box {
width: 100%; width: 100%;
...@@ -89,4 +62,32 @@ ...@@ -89,4 +62,32 @@
} }
} }
} }
}
.bottom-button {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 20px;
text-align: center;
z-index: 9;
button {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
text-transform: uppercase;
}
span {
text-transform: uppercase;
font-size: 16px;
text-align: center;
margin-top: 10px;
display: inline-block;
font-weight: 600;
}
} }
\ No newline at end of file
src/global.scss
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
--------------------------------*/ --------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap'); @import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
* { * {
font-family: 'Abel', sans-serif; font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
......
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