footer cleanup

README.md

@@ -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                                                                                                    |

kubernetes-manifests/frontend.yaml

@@ -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

src/adservice/.classpath

@@ -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>

src/adservice/.settings/org.eclipse.buildship.core.prefs

@@ -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

src/frontend/handlers.go

@@ -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)
 }

src/frontend/static/styles/styles.css

@@ -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;
@@ -632,4 +608,16 @@ main.home {
 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;
 }

src/frontend/templates/footer.html

@@ -2,74 +2,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>
-            <div class="social">
+        <p>This website is hosted for demo purposes only. It is not an actual shop. This is not an official Google product.</p>
-                <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>
     </div>
 </footer>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
@@ -78,4 +12,4 @@
 </body>
 
 </html>
-{{ end }}
+{{ end }}

src/frontend/templates/header.html

@@ -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>