fix currency in UI, remove extra USD
This commit is contained in:
Megan O'Keefe
parent
25486dda33
commit
f1e33783d7
7 changed files with 69 additions and 150 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #b4b2bb;
|
||||
fill: #605f64;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 693 B |
|
|
@ -1,12 +1,19 @@
|
|||
/* general */
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #111111;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #b4b2bb;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #707070;
|
||||
|
|
@ -14,20 +21,20 @@ body {
|
|||
|
||||
.badge {
|
||||
display: inline-block !important;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #111111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
margin-left: 7px;
|
||||
font-size: 10px;
|
||||
border-radius: 50%;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.badge.badge-blue {
|
||||
background-color: #4bc7c7;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
|
|
@ -62,23 +69,20 @@ header .h-controls {
|
|||
header .h-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
color: #b4b2bb;
|
||||
outline:none !important;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control:first-child {
|
||||
margin-left: 0;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
header .h-control img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
header .h-control input {
|
||||
|
|
@ -87,16 +91,15 @@ header .h-control input {
|
|||
width: 250px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
background-color: #b4b2bb;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
header .h-control input:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
box-shadow: 0;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
header .icon {
|
||||
|
|
@ -121,43 +124,40 @@ header .icon.search-icon {
|
|||
header .h-control select {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border: 1px solid #acacac;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
|
||||
header .h-control::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
font-size: 14px;
|
||||
color: #b4b2bb;
|
||||
font-size: 12px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
font-size: 14px;
|
||||
color: #b4b2bb;
|
||||
font-size: 12px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control :-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
font-size: 14px;
|
||||
color: #b4b2bb;
|
||||
font-size: 12px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control :-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
font-size: 14px;
|
||||
color: #b4b2bb;
|
||||
font-size: 12px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header .navbar.sub-navbar {
|
||||
height: 60px;
|
||||
background-color: #111111;
|
||||
|
|
@ -185,8 +185,7 @@ header .navbar.sub-navbar nav a {
|
|||
}
|
||||
|
||||
header .navbar.sub-navbar .controls {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
|
@ -200,30 +199,6 @@ header .navbar.sub-navbar .controls a {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
header .navbar.sub-navbar .controls-div {
|
||||
display: block;
|
||||
width: 120px;
|
||||
border-left: 1px solid #b4b2bb;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
header .navbar.sub-navbar form .controls-form {
|
||||
background-color: #111111;
|
||||
display: block;
|
||||
width: 120px;
|
||||
border-left: 1px solid #b4b2bb;
|
||||
display: inline-block;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
header .navbar.sub-navbar .controls a img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -234,52 +209,10 @@ header .navbar.sub-navbar .controls a:last-child {
|
|||
border-right: 1px solid #b4b2bb;
|
||||
}
|
||||
|
||||
form .currency {
|
||||
height: auto;
|
||||
background-color: #111111;
|
||||
font-size: 15px;
|
||||
color: #b4b2bb;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0;
|
||||
padding-right: 30px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border: none;
|
||||
}
|
||||
|
||||
span .currency-icon {
|
||||
padding-bottom: 2px;
|
||||
padding-top: 20px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
span.buffer {
|
||||
padding-top: 3px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
select .currency {
|
||||
padding-left: 10px;
|
||||
padding-top: 2px;
|
||||
align-items: center;
|
||||
background-color: #111111;
|
||||
padding-right: 30px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
option .currency {
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
background-color: #111111;
|
||||
padding-right: 30px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*footer*/
|
||||
|
||||
footer.py-5 {
|
||||
flex-shrink: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -308,6 +241,9 @@ footer .footer-top .footer-social div {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.footer-top .social {
|
||||
border-right: 1px solid #b4b2bb;
|
||||
}
|
||||
|
||||
.footer-top .social h4 {
|
||||
font-size: 24px;
|
||||
|
|
@ -326,7 +262,6 @@ footer .footer-top .footer-social div {
|
|||
|
||||
.footer-top .app {
|
||||
justify-content: flex-end;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
.footer-top .app h4 {
|
||||
|
|
@ -401,6 +336,10 @@ footer .footer-bottom p:first-child {
|
|||
|
||||
/*Home*/
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
main.home {
|
||||
background-color: white;
|
||||
}
|
||||
|
|
@ -594,7 +533,6 @@ main.home {
|
|||
|
||||
.aws-platform,
|
||||
.onprem-platform,
|
||||
.azure-platform,
|
||||
.gcp-platform {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -609,6 +547,7 @@ main.home {
|
|||
.aws-platform,
|
||||
.aws-platform .platform-flag {
|
||||
background-color: #ff9900;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.onprem-platform,
|
||||
|
|
@ -621,11 +560,6 @@ main.home {
|
|||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.azure-platform,
|
||||
.azure-platform .platform-flag {
|
||||
background-color: #f35426;
|
||||
}
|
||||
|
||||
.platform-flag {
|
||||
position: absolute;
|
||||
top: 98px;
|
||||
|
|
@ -670,4 +604,4 @@ main.home {
|
|||
select {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="col">
|
||||
<h3>{{ len $.items }} item
|
||||
{{- if gt (len $.items) 1}}s{{end}}
|
||||
in your Shopping Cart</h3>
|
||||
in your cart</h3>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<form method="POST" action="/cart/empty">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<div class="details">
|
||||
Quantity: {{.Quantity}}<br/>
|
||||
<strong>
|
||||
USD {{ renderMoney .Price}}
|
||||
{{ renderMoney .Price}}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,8 +52,8 @@
|
|||
{{ end }} <!-- range $.items-->
|
||||
<div class="row pt-2 my-3">
|
||||
<div class="col text-center order-summary">
|
||||
<p class="text-muted my-0">Shipping Cost: <strong>USD {{ renderMoney .shipping_cost }}</strong></p>
|
||||
Total Cost: <strong>USD {{ renderMoney .total_cost }}</strong>
|
||||
<p class="text-muted my-0">Shipping Cost: <strong>{{ renderMoney .shipping_cost }}</strong></p>
|
||||
Total Cost: <strong>{{ renderMoney .total_cost }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -156,6 +156,5 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@
|
|||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
<footer class="py-5">
|
||||
<div class="footer-top">
|
||||
<div class="container footer-social">
|
||||
<p>© 2020 Google Inc (<a href="https://github.com/GoogleCloudPlatform/microservices-demo">Source Code</a>) — </p>
|
||||
<p class="footer-disclaimer"> This website is hosted for demo purposes only. It is not an actual shop. This is not a Google product.</p>
|
||||
<p class="footer-text">© 2020 Google Inc (<a href="https://github.com/GoogleCloudPlatform/microservices-demo">Source Code</a>) — </p>
|
||||
<p class="footer-text"> This website is hosted for demo purposes only. It is not an actual shop. This is not a Google product.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,46 +17,34 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<div class="h-free-shipping">Free shipping with $75 purchase! </div>
|
||||
<div class="h-controls">
|
||||
<div class="h-control">
|
||||
<img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
|
||||
<form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
|
||||
<select name="currency_code" onchange="document.getElementById('currency_form').submit();">
|
||||
{{range $.currencies}}
|
||||
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</form>
|
||||
<img src="/static/icons/Hipster_DownArrow.svg" alt="icon" class="icon arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar sub-navbar">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||
<img src="/static/icons/Hipster_NavLogo.svg" alt="logo" class="logo" />
|
||||
</a>
|
||||
<nav>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<div class="controls">
|
||||
|
||||
{{ if $.currencies }}
|
||||
|
||||
<span> <form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
|
||||
<span class="buffer"></span>
|
||||
<span class="currency-icon"><img src="/static/icons/Hipster_CurrencyIcon.svg" alt="currency-icon" class="icon" /></span>
|
||||
|
||||
<select class="currency" name="currency_code"
|
||||
onchange="document.getElementById('currency_form').submit();">
|
||||
|
||||
{{range $.currencies}}
|
||||
<option class="currency" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
|
||||
</form>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
<a href="/cart">
|
||||
<img src="/static/icons/Hipster_CheckOutIcon.svg" alt="cart-icon" class="logo" />
|
||||
<span>View Cart
|
||||
<img src="/static/icons/Hipster_CartIcon.svg" alt="cart-icon" class="logo" />
|
||||
<span>Cart
|
||||
{{ if $.cart_size }}
|
||||
<span class="badge badge-blue">{{$.cart_size}}</span>
|
||||
{{ end }}
|
||||
|
|
@ -66,6 +54,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
{{end}}
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
<p>Shipping Tracking ID</p>
|
||||
<p class="mg-bt"><strong>{{.order.ShippingTrackingId}}</strong></p>
|
||||
<p>Shipping Cost</p>
|
||||
<p class="mg-bt"><strong>USD {{renderMoney .order.ShippingCost}}</strong></p>
|
||||
<p class="mg-bt"><strong>{{renderMoney .order.ShippingCost}}</strong></p>
|
||||
<p>Total Paid</p>
|
||||
<p class="mg-bt"><strong>USD {{renderMoney .total_paid}}</strong></p>
|
||||
<p class="mg-bt"><strong>{{renderMoney .total_paid}}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -38,4 +38,4 @@
|
|||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue