Skip to content

Commit

Permalink
Merge pull request #565 from GoogleCloudPlatform/minherz/integrate_ra…
Browse files Browse the repository at this point in the history 
…tings

Implement a mocked UI for product rating
  • Loading branch information
@minherz
minherz committed Nov 17, 2020
2 parents 161cfd3 + 8fb757d commit 81c0ef8
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 90 deletions.
31 changes: 31 additions & 0 deletions src/frontend/static/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* Copyright 2020 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.rating-5starts {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: 30px;
font-family: "Comic Sans MS";
line-height: 1;
}
.rating-5starts::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, #fc0 var(--percent), #fff var(--percent));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

4 changes: 2 additions & 2 deletions src/frontend/templates/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
<footer class="py-5 px-5">
<div class="container">
<p>
&copy; 2018 Google Inc
&copy; 2020 Google Inc
<span class="text-muted">
<a href="https://github.com/GoogleCloudPlatform/stackdriver-sandbox/">(Source Code)</a>
<a href="https://github.com/GoogleCloudPlatform/cloud-ops-sandbox/">(Source Code)</a>
</span>
</p>
<p>
Expand Down
13 changes: 7 additions & 6 deletions src/frontend/templates/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@
{{ define "header" }}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hipster Shop</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="/static/css/styles.css" rel="stylesheet">
</head>
<body>

<header>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Expand All @@ -35,10 +36,10 @@
{{ if $.currencies }}
<form class="form-inline ml-auto" method="POST" action="/setCurrency" id="currency_form">
<select name="currency_code" class="form-control"
onchange="document.getElementById('currency_form').submit();" style="width:auto;">
{{range $.currencies}}
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
{{end}}
onchange="document.getElementById('currency_form').submit();" style="width:auto;">
{{range $.currencies}}
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected" {{end}}>{{.}}</option>
{{end}}
</select>
<a class="btn btn-primary btn-light ml-2" href="/cart" role="button">View Cart ({{$.cart_size}})</a>
</form>
Expand All @@ -48,4 +49,4 @@
</header>


{{end}}
{{end}}
67 changes: 34 additions & 33 deletions src/frontend/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,50 +16,51 @@

{{ define "home" }}

{{ template "header" . }}
<main role="main">
<section class="jumbotron text-center mb-0"
{{ with $.banner_color }}
style="background-color: {{.}};"
{{ end }}
>
<div class="container">
<h1 class="jumbotron-heading">
One-stop for Hipster Fashion &amp; Style Online
</h1>
<p class="lead text-muted">
Tired of mainstream fashion ideas, popular trends and
societal norms? This line of lifestyle products will help
you catch up with the hipster trend and express your
personal style. Start shopping hip and vintage items now!
</p>
</div>
</section>
{{ template "header" . }}
<main role="main">
<section class="jumbotron text-center mb-0" {{ with $.banner_color }} style="background-color: {{.}};" {{ end }}>
<div class="container">
<h1 class="jumbotron-heading">
One-stop for Hipster Fashion &amp; Style Online
</h1>
<p class="lead text-muted">
Tired of mainstream fashion ideas, popular trends and
societal norms? This line of lifestyle products will help
you catch up with the hipster trend and express your
personal style. Start shopping hip and vintage items now!
</p>
</div>
</section>

<div class="py-5 bg-light">
<div class="container">
<div class="py-5 bg-light">
<div class="container">
<div class="row">
{{ range $.products }}
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<a href="/product/{{.Item.Id}}">
<img class="card-img-top" alt =""
style="width: 100%; height: auto;"
src="{{.Item.Picture}}">
<img class="card-img-top" alt="" style="width: 100%; height: auto;" src="{{.Item.Picture}}">
</a>
<div class="card-body">
<h5 class="card-title">
{{ .Item.Name }}
</h5>
<div class="row no-gutters">
<div class="col-md-9">
<h5 class="card-title">
{{ .Item.Name }}
</h5>
</div>
<div class="col-md-3 justify-content-end">
<div class="rating-5starts" style="font-size: 15px; --rating: 3.5"></div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="/product/{{.Item.Id}}">
<button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
</a>
</div>
<small class="text-muted">
{{ renderMoney .Price }}
</strong>
{{ renderMoney .Price }}
</strong>
</small>
</div>
</div>
Expand All @@ -70,10 +71,10 @@ <h5 class="card-title">
<div class="row">
{{ with $.ad }}{{ template "text_ad" . }}{{ end}}
</div>
</div>
</div>
</main>
</div>
</main>

{{ template "footer" . }}
{{ template "footer" . }}

{{ end }}
{{ end }}
128 changes: 79 additions & 49 deletions src/frontend/templates/product.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,58 +15,88 @@
-->

{{ define "product" }}
{{ template "header" . }}
{{ template "header" . }}

<main role="main">
<div class="py-5">
<div class="container bg-light py-3 px-lg-5 py-lg-5">
<div class="row">
<div class="col-12 col-lg-5">
<img class="img-fluid border" style="width: 100%;"
src="{{$.product.Item.Picture}}" />
</div>
<div class="col-12 col-lg-7">
<main role="main">
<div class="py-5">
<div class="container bg-light py-3 px-lg-5 py-lg-5">
<div class="row">
<div class="col-12 col-lg-5">
<img class="img-fluid border" style="width: 100%;" src="{{$.product.Item.Picture}}" />
</div>
<div class="col-12 col-lg-7">
<div class="row">
<div class="col-md-9">
<h2>{{$.product.Item.Name}}</h2>

<p class="text-muted">
{{ renderMoney $.product.Price}}
</p>
<hr/>
<p>
<h6>Product Description:</h6>
{{$.product.Item.Description}}
</p>
<hr/>

<form method="POST" action="/cart" class="form-inline text-muted">
<input type="hidden" name="product_id" value="{{$.product.Item.Id}}"/>
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="quantity">Quantity</label>
</div>
<select name="quantity" id="quantity" class="custom-select form-control form-control-lg">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>10</option>
</select>
<button type="submit" class="btn btn-info btn-lg ml-3">Add to Cart</button>
</div>
</form>
</div>
<div class="col-md-3 justify-content-end">
<div class="rating-5starts" style="--rating: 3.5"></div>
</div>
</div>
<p class="text-muted">
{{ renderMoney $.product.Price}}
</p>
<hr />
<p>
<h6>Product Description:</h6>
{{$.product.Item.Description}}
</p>
<form id="vote_form" method="POST" action="/rating" onsubmit="hideVoteForm()" class="form-inline text-muted">
<input type="hidden" name="product_id" value="{{$.product.Item.Id}}" />
<div class="input-group">
<select name="rating" id="rating_select" class="custom-select form-control form-control-lg" onchange="enableVoteButton()">
<option selected="" disabled="" class="text-hide">Place rating</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button id="vote_btn" type="button" class="btn btn-info btn-lg ml-3" disabled onclick="hideVoteForm()">Vote</button>
</div>
</form>
<hr />
<form method="POST" action="/cart" class="form-inline text-muted">
<input type="hidden" name="product_id" value="{{$.product.Item.Id}}" />
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="quantity">Quantity</label>
</div>
<select name="quantity" id="quantity" class="custom-select form-control form-control-lg">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>10</option>
</select>
<button type="submit" class="btn btn-info btn-lg ml-3">Add to Cart</button>
</div>
</form>
</div>

{{ if $.recommendations}}
<hr/>
{{ template "recommendations" $.recommendations }}
{{ end }}

{{ with $.ad }}{{ template "text_ad" . }}{{ end}}
</div>

{{ if $.recommendations}}
<hr />
{{ template "recommendations" $.recommendations }}
{{ end }}

{{ with $.ad }}{{ template "text_ad" . }}{{ end}}
</div>

</main>
{{ template "footer" . }}
{{ end }}
</div>
</main>
{{ template "footer" . }}
<script type="text/javascript">
function hideFormSubmit() {
var form = document.getElementById('vote_form');
form.classList.add('invisible')
}
function enableVoteButton() {
var select = document.getElementById('rating_select');
if (select.value !== "") {
var btn = document.getElementById('vote_btn');
btn.disabled = false;
}
}
</script>
{{ end }}

0 comments on commit 81c0ef8

Please sign in to comment.