Skip to content

G
getme
Commit b0bde269 by Adarsh K
Options

design fix

parents 5ef7866a c56c1ad8
Showing with 234 additions and 219 deletions
src/app/app.component.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.side_menu_wrapper { .side_menu_wrapper {
background: rgba(41, 40, 91, 1); background: rgba(41, 40, 91, 1);
width: 100%; width: 100%;
height: 100vh; height: auto;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
padding-right: 10px; padding-right: 10px;
......
src/app/cart/cart.page.scss
...@@ -500,79 +500,79 @@ ...@@ -500,79 +500,79 @@
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
padding: 20px; overflow: scroll;
top: 40%;
padding: 20px 20px 50px 20px;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
background: #fff; 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); box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 { }
color: rgba(41, 40, 91, 1); h5 {
margin: 0px; color: rgba(41, 40, 91, 1);
padding: 0px; margin: 0px;
font-weight: 800; padding: 0px;
} font-weight: 800;
ul { }
margin: 0px; ul {
padding: 0px; margin: 0px;
padding-top: 30px; padding: 0px;
li { padding-top: 30px;
list-style: none; li {
margin-bottom: 15px; list-style: none;
p { margin-bottom: 15px;
margin: 0px; p {
padding: 0px; margin: 0px;
color: rgba(176, 174, 199, 1); padding: 0px;
padding-top: 5px; color: rgba(176, 174, 199, 1);
padding-bottom: 5px; padding-top: 5px;
padding-bottom: 5px;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
} }
.styled-checkbox { // Box.
position: absolute; // take it out of document flow &+label:before {
opacity: 0; // hide it content: '';
&+label { margin-right: 10px;
position: relative; display: inline-block;
cursor: pointer; vertical-align: text-top;
padding: 0; width: 20px;
width: 100%; height: 20px;
} border-radius: 50%;
// Box. background: white;
&+label:before { border: 1px solid rgba(215, 213, 228, 1);
content: ''; }
margin-right: 10px; &:checked+label:before {
display: inline-block; background: #29285b;
vertical-align: text-top; }
width: 20px; // Disabled state label.
height: 20px; &:disabled+label {
border-radius: 50%; color: #b8b8b8;
background: white; cursor: auto;
border: 1px solid rgba(215, 213, 228, 1); }
} // Disabled box.
&:checked+label:before { &:disabled+label:before {
background: #29285b; box-shadow: none;
} background: #ddd;
// Disabled state label. }
&:disabled+label { // Checkmark. Could be replaced with an image
color: #b8b8b8; &:checked+label:after {
cursor: auto; content: '';
} position: absolute;
// Disabled box. left: 6px;
&:disabled+label:before { top: 10px;
box-shadow: none; background: white;
background: #ddd; width: 2px;
} height: 2px;
// Checkmark. Could be replaced with an image 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;
&:checked+label:after { transform: rotate(45deg);
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);
}
} }
} }
} }
......
src/app/home/home.page.html
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
<div class="home_sub_header"> <div class="home_sub_header">
<span class="floatLeft">Nearby Shopping Centers</span> <span class="floatLeft">Nearby Shopping Centers</span>
<span class="floatRight"> <span class="floatRight">
<div class="nearby_icon" (click)="goToPage('nearby')"></div> <div class="nearby_icon" (click)="goToPage('nearby')"></div>
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="nearby_shop_list"> <div class="nearby_shop_list">
...@@ -77,8 +77,8 @@ ...@@ -77,8 +77,8 @@
<h5> <h5>
<span class="floatLeft">{{center.centerName}}</span> <span class="floatLeft">{{center.centerName}}</span>
<span class="floatRight">0 <span class="floatRight">0
<img src="../assets/Path61_2.png" /> <img src="../assets/Path61_2.png" />
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<p>{{center.description}}</p> <p>{{center.description}}</p>
...@@ -105,8 +105,8 @@ ...@@ -105,8 +105,8 @@
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()"> <button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<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>CHANGE LOCATION</h4> <h4>CHANGE LOCATION</h4>
</div> </div>
...@@ -117,26 +117,29 @@ ...@@ -117,26 +117,29 @@
<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">
<h5> <div class="add-address-c">
<span class="floatLeft">NEW ADDRESS</span> <span>NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span> <span (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div> </div>
</h5> <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">
<div class="floatLeft"> <div class="floatLeft">
{{address.default}} {{address.default}}
<input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" /> <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label> <label for="styled-checkbox-{{i}}">
</div> {{address.addressType}}
<div class="floatLeft"> </label>
<p> </div>
{{address.building}}, {{address.landmark}}, {{address.address}} <div class="floatLeft">
</p> <p>
</div> {{address.building}}, {{address.landmark}}, {{address.address}}
<div class="clear"></div> </p>
</li> </div>
</ul> <div class="clear"></div>
</li>
</ul>
</div>
</div> </div>
</ion-content> </ion-content>
</div> </div>
\ No newline at end of file
src/app/nearby/nearby.page.scss
.nearby_map { .nearby_map {
width: 100%; width: 100%;
height: 100%; height: 100%;
.overlay { .overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background: rgba(29, 27, 130, 0.2); background: rgba(29, 27, 130, 0.2);
} }
agm-map { agm-map {
width: 100%; width: 100%;
height: 100%; height: 100vh;
position: relative; .overlay {
} position: absolute;
.click_marker { top: 0px;
min-width: 200px; left: 0px;
padding: 10px; right: 0px;
h5 { bottom: 0px;
margin: 0px; background: rgba(29, 27, 130, 0.2);
padding: 0px; }
} agm-map {
p { width: 100%;
margin: 0px; height: 100%;
padding: 0px; position: relative;
} }
} .click_marker {
} min-width: 200px;
padding: 10px;
.add_address_wrapper { h5 {
position: fixed; margin: 0px;
bottom: 0px; padding: 0px;
left: 0px; }
right: 0px; p {
padding: 20px; margin: 0px;
border-top-left-radius: 15px; padding: 0px;
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); .add_address_wrapper {
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); position: fixed;
h5 { bottom: 0px;
color: rgba(41, 40, 91, 1); left: 0px;
margin: 0px; right: 0px;
padding: 0px; padding: 20px;
font-weight: 800; border-top-left-radius: 15px;
} border-top-right-radius: 15px;
input { background: #fff;
width: 100%; -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
height: 45px; -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
border: 1px solid #e1e0eb; box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px; h5 {
padding-left: 10px; color: rgba(41, 40, 91, 1);
padding-right: 10px; margin: 0px;
margin-bottom: 20px; padding: 0px;
outline: none; font-weight: 800;
transition: all 0.4s ease-in-out; }
&::placeholder { input {
color: rgba(215, 213, 228, 1); width: 100%;
} height: 45px;
&:focus { border: 1px solid #e1e0eb;
border: 1px solid #f3d09f; border-radius: 4px;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11); padding-left: 10px;
} padding-right: 10px;
} margin-bottom: 20px;
.add_btn { outline: none;
width: 100%; transition: all 0.4s ease-in-out;
height: 45px; &::placeholder {
background-color: #29285b; color: rgba(215, 213, 228, 1);
color: #fff; }
border-radius: 4px; &:focus {
} border: 1px solid #f3d09f;
} box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
.styled-checkbox { }
position: absolute; // take it out of document flow .add_btn {
opacity: 0; // hide it width: 100%;
& + label { height: 45px;
position: relative; background-color: #29285b;
cursor: pointer; color: #fff;
padding: 0; border-radius: 4px;
} }
// Box. }
& + label:before { .styled-checkbox {
content: ''; position: absolute; // take it out of document flow
margin-right: 10px; opacity: 0; // hide it
display: inline-block; &+label {
vertical-align: text-top; position: relative;
width: 20px; cursor: pointer;
height: 20px; padding: 0;
border-radius: 10px; }
background: white; // Box.
border: 1px solid rgba(215, 213, 228, 1); &+label:before {
} content: '';
// Box hover margin-right: 10px;
// Box checked display: inline-block;
&:checked + label:before { vertical-align: text-top;
background: #29285b; width: 20px;
} height: 20px;
// Disabled state label. border-radius: 10px;
&:disabled + label { background: white;
color: #b8b8b8; border: 1px solid rgba(215, 213, 228, 1);
cursor: auto; }
} // Box hover
// Disabled box. // Box checked
&:disabled + label:before { &:checked+label:before {
box-shadow: none; background: #29285b;
background: #ddd; }
} // Disabled state label.
// Checkmark. Could be replaced with an image &:disabled+label {
&:checked + label:after { color: #b8b8b8;
content: ''; cursor: auto;
position: absolute; }
left: 6px; // Disabled box.
top: 11px; &:disabled+label:before {
background: white; box-shadow: none;
width: 2px; background: #ddd;
height: 2px; }
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, // Checkmark. Could be replaced with an image
4px -6px 0 white, 4px -8px 0 white; &:checked+label:after {
transform: rotate(45deg); 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/storelist/storelist.page.scss
.home_wrapper { .home_wrapper {
width: 100%; width: 100%;
padding-bottom: 50px;
.home_banner { .home_banner {
width: 100%; width: 100%;
height: 300px; height: 300px;
......
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