footer cleanup
This commit is contained in:
Megan O'Keefe
parent
9794ba2394
commit
f01fcfca18
8 changed files with 59 additions and 157 deletions
|
|
@ -17,6 +17,9 @@ If you’re using this demo, please **★Star** this repository to show your int
|
|||
> [go/microservices-demo](http://go/microservices-demo) if you are using this
|
||||
> application.
|
||||
|
||||
|
||||
*If you're looking for the old Hipster Shop frontend interface, use the manifests in release [v0.1.4](https://github.com/GoogleCloudPlatform/microservices-demo/releases/v0.1.4).*
|
||||
|
||||
## Screenshots
|
||||
|
||||
| Home Page | Checkout Screen |
|
||||
|
|
|
|||
|
|
@ -65,6 +65,8 @@ spec:
|
|||
value: "checkoutservice:5050"
|
||||
- name: AD_SERVICE_ADDR
|
||||
value: "adservice:9555"
|
||||
- name: ENV_PLATFORM
|
||||
value: "gcp"
|
||||
# - name: DISABLE_TRACING
|
||||
# value: "1"
|
||||
# - name: DISABLE_PROFILER
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<classpath>
|
||||
<classpathentry kind="src" output="bin/main" path="src/main/java">
|
||||
<attributes>
|
||||
<attribute name="gradle_scope" value="main"/>
|
||||
<attribute name="gradle_used_by_scope" value="main,test"/>
|
||||
</attributes>
|
||||
</classpathentry>
|
||||
<classpathentry kind="src" output="bin/main" path="src/main/resources">
|
||||
<attributes>
|
||||
<attribute name="gradle_scope" value="main"/>
|
||||
<attribute name="gradle_used_by_scope" value="main,test"/>
|
||||
</attributes>
|
||||
</classpathentry>
|
||||
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-13/"/>
|
||||
<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
|
||||
<classpathentry kind="output" path="bin/default"/>
|
||||
</classpath>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
arguments=
|
||||
auto.sync=false
|
||||
build.scans.enabled=false
|
||||
connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
|
||||
connection.project.dir=
|
||||
eclipse.preferences.version=1
|
||||
gradle.user.home=
|
||||
java.home=/Library/Java/JavaVirtualMachines/jdk-13.0.2.jdk/Contents/Home
|
||||
jvm.arguments=
|
||||
offline.mode=false
|
||||
override.workspace.settings=true
|
||||
show.console.view=true
|
||||
show.executions.view=true
|
||||
|
|
@ -89,7 +89,7 @@ func (fe *frontendServer) homeHandler(w http.ResponseWriter, r *http.Request) {
|
|||
"user_currency": currentCurrency(r),
|
||||
"currencies": currencies,
|
||||
"products": ps,
|
||||
"cart_size": len(cart),
|
||||
"cart_size": cartSize(cart),
|
||||
"banner_color": os.Getenv("BANNER_COLOR"), // illustrates canary deployments
|
||||
"ad": fe.chooseAd(r.Context(), []string{}, log),
|
||||
"platform_css": plat.css,
|
||||
|
|
@ -106,6 +106,9 @@ func (plat *platformDetails) setPlatformDetails(env string) {
|
|||
} else if env == "onprem" {
|
||||
plat.provider = "On-Premises"
|
||||
plat.css = "onprem-platform"
|
||||
} else if env == "azure" {
|
||||
plat.provider = "Azure"
|
||||
plat.css = "azure-platform"
|
||||
} else {
|
||||
plat.provider = "Google Cloud"
|
||||
plat.css = "gcp-platform"
|
||||
|
|
@ -164,7 +167,7 @@ func (fe *frontendServer) productHandler(w http.ResponseWriter, r *http.Request)
|
|||
"currencies": currencies,
|
||||
"product": product,
|
||||
"recommendations": recommendations,
|
||||
"cart_size": len(cart),
|
||||
"cart_size": cartSize(cart),
|
||||
}); err != nil {
|
||||
log.Println(err)
|
||||
}
|
||||
|
|
@ -237,7 +240,7 @@ func (fe *frontendServer) viewCartHandler(w http.ResponseWriter, r *http.Request
|
|||
Quantity int32
|
||||
Price *pb.Money
|
||||
}
|
||||
items := make([]cartItemView, len(cart))
|
||||
items := make([]cartItemView, cartSize(cart))
|
||||
totalPrice := pb.Money{CurrencyCode: currentCurrency(r)}
|
||||
for i, item := range cart {
|
||||
p, err := fe.getProduct(r.Context(), item.GetProductId())
|
||||
|
|
@ -267,7 +270,7 @@ func (fe *frontendServer) viewCartHandler(w http.ResponseWriter, r *http.Request
|
|||
"user_currency": currentCurrency(r),
|
||||
"currencies": currencies,
|
||||
"recommendations": recommendations,
|
||||
"cart_size": len(cart),
|
||||
"cart_size": cartSize(cart),
|
||||
"shipping_cost": shippingCost,
|
||||
"total_cost": totalPrice,
|
||||
"items": items,
|
||||
|
|
@ -418,6 +421,15 @@ func cartIDs(c []*pb.CartItem) []string {
|
|||
return out
|
||||
}
|
||||
|
||||
// get total # of items in cart
|
||||
func cartSize(c []*pb.CartItem) int {
|
||||
cartSize := 0
|
||||
for _, item := range c {
|
||||
cartSize += int(item.GetQuantity())
|
||||
}
|
||||
return cartSize
|
||||
}
|
||||
|
||||
func renderMoney(money pb.Money) string {
|
||||
return fmt.Sprintf("%s %d.%02d", money.GetCurrencyCode(), money.GetUnits(), money.GetNanos()/10000000)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ hr {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
margin-left: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -64,20 +64,23 @@ header .h-controls {
|
|||
header .h-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
color: #605f64;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
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 {
|
||||
|
|
@ -89,49 +92,13 @@ header .h-control input {
|
|||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
header .h-form form {
|
||||
font-size: 12px;
|
||||
border: solid 1px #f2f2f2;
|
||||
padding: 0 0px 0 0px;
|
||||
width: 250px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header .h-form select {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: solid 1px #f2f2f2;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header .h-form option {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: solid 1px #f2f2f2;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
header .h-control input:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
box-shadow: 0;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
header .icon {
|
||||
|
|
@ -163,33 +130,36 @@ header .h-control select {
|
|||
padding: 0 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
|
||||
header .h-control::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control :-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
header .h-control :-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header .navbar.sub-navbar {
|
||||
height: 60px;
|
||||
background-color: #111111;
|
||||
|
|
@ -561,6 +531,7 @@ main.home {
|
|||
|
||||
.aws-platform,
|
||||
.onprem-platform,
|
||||
.azure-platform,
|
||||
.gcp-platform {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -588,6 +559,11 @@ main.home {
|
|||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.azure-platform,
|
||||
.azure-platform .platform-flag {
|
||||
background-color:#F25022;
|
||||
}
|
||||
|
||||
.platform-flag {
|
||||
position: absolute;
|
||||
top: 98px;
|
||||
|
|
@ -633,3 +609,15 @@ select {
|
|||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0px;
|
||||
}
|
||||
|
||||
form #currency_form {
|
||||
border: none;
|
||||
padding: 0 31px 0 31px;
|
||||
width: 250px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
}
|
||||
|
|
@ -2,74 +2,8 @@
|
|||
|
||||
<footer class="py-5">
|
||||
<div class="footer-top">
|
||||
<div class="container footer-social">
|
||||
<div class="social">
|
||||
<h4>Connect <br>with us</h4>
|
||||
<img src="/static/icons/Hipster_FacebookIcon.svg" alt="icon" />
|
||||
<img src="/static/icons/Hipster_InstagramIcon.svg" alt="icon" />
|
||||
<img src="/static/icons/Hipster_PinterestIcon.svg" alt="icon" />
|
||||
<img src="/static/icons/Hipster_TwitterIcon.svg" alt="icon" />
|
||||
<img src="/static/icons/Hipster_YoutubeIcon.svg" alt="icon" />
|
||||
</div>
|
||||
<div class="app">
|
||||
<h4>DOWNLOAD THE <span>ONLINE <br>BOUTIQUE</span> APP</h4>
|
||||
<img src="/static/icons/Hipster_GooglePlayIcon.svg" alt="icon" class="icon search-icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer-links">
|
||||
<ul class="links-group">
|
||||
<li class="group-header">CUSTOMER SERVICE</li>
|
||||
<li>Contact Us</li>
|
||||
<li>Shipping</li>
|
||||
<li>Returns</li>
|
||||
<li>Rebates</li>
|
||||
<li>Recalls</li>
|
||||
<li>Product Guides</li>
|
||||
<li>Store Survey</li>
|
||||
<li>O.B. Cash</li>
|
||||
</ul>
|
||||
<ul class="links-group">
|
||||
<li class="group-header">SHOP</li>
|
||||
<li>Get 15% off when you sign up for our emails</li>
|
||||
<li>My Lists</li>
|
||||
<li>Site Map</li>
|
||||
<li>Store Locator</li>
|
||||
<li>Gift Cards</li>
|
||||
<li>Today’s Ad</li>
|
||||
<li>O.B. Coupons</li>
|
||||
</ul>
|
||||
<ul class="links-group">
|
||||
<li class="group-header">MY ACCOUNT</li>
|
||||
<li>Sign in</li>
|
||||
<li>My Account</li>
|
||||
<li>Update Password</li>
|
||||
<li>Order Status</li>
|
||||
<li>Gift Card Balance</li>
|
||||
<li>O.B. Cash Balance</li>
|
||||
</ul>
|
||||
<ul class="links-group">
|
||||
<li class="group-header">O.B. CHARGE</li>
|
||||
<li>Pay & Manage Card</li>
|
||||
<li>Apply for a O.B. Charge</li>
|
||||
<li>See if you prequalify</li>
|
||||
</ul>
|
||||
<ul class="links-group">
|
||||
<li class="group-header">ABOUT O.B.</li>
|
||||
<li>Our Websites</li>
|
||||
<li>Community</li>
|
||||
<li>Sustainability</li>
|
||||
<li>Careers</li>
|
||||
<li>Apply for Seasonal Jobs</li>
|
||||
<li>Associate Services</li>
|
||||
<li>Investor Relations</li>
|
||||
<li>Affiliate Program</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2019 Google Inc</p>
|
||||
<p>This website is hosted for demo purposes only. It is not an actual shop.</p>
|
||||
<p>© 2020 Google Inc - <a href="https://github.com/GoogleCloudPlatform/microservices-demo">Source Code</a></p>
|
||||
<p>This website is hosted for demo purposes only. It is not an actual shop. This is not an official Google product.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@
|
|||
{{ if $.currencies }}
|
||||
<img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
|
||||
<form method="POST" action="/setCurrency" id="currency_form">
|
||||
<select value="US Dollars"
|
||||
<select name="currency_code" class="h-control"
|
||||
onchange="document.getElementById('currency_form').submit();" style="width:auto;">
|
||||
{{range $.currencies}}
|
||||
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
<option class="h-control" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</form>
|
||||
|
|
@ -57,19 +57,13 @@
|
|||
<img src="/static/icons/Hipster_NavLogo.svg" alt="logo" class="logo" />
|
||||
</a>
|
||||
<nav>
|
||||
<a href="/">Women's</a>
|
||||
<a href="/">Men's</a>
|
||||
<a href="/">Home</a>
|
||||
<a href="/">Lifestyle</a>
|
||||
<a href="/">Beauty</a>
|
||||
<a href="/">Sale</a>
|
||||
</nav>
|
||||
<div class="controls">
|
||||
<a href="/cart">
|
||||
<img src="/static/icons/Hipster_CheckOutIcon.svg" alt="cart-icon" class="logo" />
|
||||
<span>View Cart
|
||||
{{ if $.cart_size }}
|
||||
<span class="badge badge-blue">{{$.cart_size}} x</span>
|
||||
<span class="badge badge-blue">{{$.cart_size}}</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue