Merge pull request #15 from james-milligan/css

improve css of product page
Liquid-Reply · Apr 17, 2023 · 48609d5 · 48609d5
2 parents 65edce4 + 05eaa04
commit 48609d5
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 27 deletions.
diff --git a/bookinfo/product-page/pkg/config/config.go b/bookinfo/product-page/pkg/config/config.go
@@ -72,7 +72,7 @@ func NewServicesConfig() *ServicesConfig {
 			reviews,
 		},
 	}
-
+	fmt.Println(details)
 	return &ServicesConfig{
 		ProductPage: productPage,
 		Details:     details,

diff --git a/bookinfo/product-page/pkg/template/html_index.go b/bookinfo/product-page/pkg/template/html_index.go
@@ -57,9 +57,35 @@ var indexHTML = strings.Join(
 						width: 100%;
 						max-width: 100%;
 						margin-bottom:20px;
+						padding:5px;
 					}
 					.table-border, th, td {
 						border:1px solid #ddd;
+						box-sizing:border-box;
+					}
+					td, th {
+						display: table-cell;
+						padding:5px;
+					}
+					th:hover {
+						background-color: #ebebeb;
+					}
+					td:hover {
+						background-color: #ebebeb;
+					}
+					th {
+						text-align: left;
+					}
+					h3 {
+						font-size: 24px;
+					}
+					h1, h2, h3, h4, h5, h6 {
+						margin-top: 20px;
+						margin-bottom: 10px;
+						font-family: inherit;
+						font-weight: 500;
+						line-height: 1.1;
+						color: inherit;
 					}
 				</style>
 			<meta charset="utf-8">

diff --git a/bookinfo/product-page/pkg/template/html_product_page.go b/bookinfo/product-page/pkg/template/html_product_page.go
@@ -29,7 +29,7 @@ var productPageHTML = strings.Join(
                     text-align: center;
                 }
                 nav {
-                    background-color: #222;
+                    background-color: #950eba;
                     overflow: hidden;
                     padding: 14px 16px;
                 }
@@ -41,32 +41,31 @@ var productPageHTML = strings.Join(
                     text-decoration: none;
                 }
                 nav button {
-                    background-color: #337ab7;
+                    background-color: #fff;
+                    color: #222 !important;
                     border: none;
                     color: white;
                     float: right;
                     font-size: 14px;
                     margin-top: 8px;
                     padding: 5px 16px;
+                    border-radius: 5px;
                 }
                 main {
                     display: flex;
                     justify-content: center;
                     padding: 20px;
                 }
-                .book-info {
-                    max-width: 800px;
-                }
                 h3 {
                     text-align: center;
-                    color: #337ab7;
+                    color: #950eba;
                 }
                 p {
                     text-align: justify;
                 }
                 h4 {
                     text-align: center;
-                    color: #337ab7;
+                    color: #950eba;
                 }
                 .book-details,
                 .book-reviews {
@@ -95,32 +94,103 @@ var productPageHTML = strings.Join(
                     font-size: 20px;
                     margin-right: 5px;
                 }
+                .container {
+                    padding-right: 15px;
+                    padding-left: 15px;
+                    margin-right: auto;
+                    margin-left: auto;
+                    width:1170px;
+                    background-color:#950eba;
+                }
+                .container-fluid {
+                    padding-right: 15px;
+                    padding-left: 15px;
+                    margin-right: auto;
+                    margin-left: auto;
+                    display: block;
+                    width:100%;
+                }
+                .column1 {
+                    width: 100%;
+                    float: left;
+                    position: relative;
+                    min-height: 1px;
+                    padding-right: 15px;
+                    padding-left: 15px;
+                    display: block;
+                    text-align: center;
+                }
+                .row {
+                    margin-right: -15px;
+                    margin-left: -15px;
+                }
+                .column2 {
+                    width: 50%;
+                    float: left;
+                    position: relative;
+                    min-height: 1px;
+                    padding-right: 15px;
+                    padding-left: 15px;
+                    display: block;
+                    box-sizing: border-box;
+                    max-width: 45vw;
+                }
+                .column3 {
+                    box-sizing: border-box;
+                    float: left;
+                    position: relative;
+                    min-height: 1px;
+                    padding-right: 15px;
+                    padding-left: 15px;
+                    box-sizing: border-box;
+                    display: block;
+                    max-width: 45vw;
+                }
+                .served-by {
+                    margin-left:40px;
+                }
+                dd {
+                    margin-inline-start: 0px;
+                }
+                dt {
+                    font-weight: 700;
+                    line-height: 1.42857143;
+                }
+                blockquote {
+                    font-size: 17.5px;
+                    border-left: 5px solid #eee;
+                    padding: 10px 20px;
+                }
             </style>
         </head>
         <body>
-        <header>
-            <h1>Bookinfo Product Page</h1>
-        </header>
         <nav>
-            <a href="#">BookInfo Sample</a>
-            <button type="button">Sign in</button>
+            <div class="container">
+                <a href="#">BookInfo Sample</a>
+                <button type="button">Sign in</button>
+            </div>
         </nav>
         <main>
-            <div class="book-info">`,
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="column1">`,
 		productPageSummaryReplaceTarget,
-		"",
 		`
-            <div class="book-details">
-                <h4>Book Details</h4>
+                </div>
+                <div class="row">
+                    <div class="column2">
+                        <h4>Book Details</h4>
         `,
 		productPageDetailsReplaceTarget,
 		`
-            </div>
-            <div class="book-reviews">
-                <h4>Book Reviews</h4>
+                    </div>
+                    <div class="column3">
+                        <h4>Book Reviews</h4>
         `,
 		productPageReviewsReplaceTarget,
 		`
+                    </div>
+                </div>
             </div>
         </div>
         </main>

diff --git a/bookinfo/product-page/pkg/template/html_reviews.go b/bookinfo/product-page/pkg/template/html_reviews.go
@@ -10,13 +10,13 @@ const (
 	reviewsStarsReplaceTarget    = "{STARS}"
 	filledStar                   = `<span class="star" style=color:%s>&#9733;</span>`
 	emptyStar                    = `<span class="empty-star" style=color:%s>&#9734;</span>`
-	defaultStarColor             = "gold"
+	defaultStarColor             = "#950eba"
 )
 
 var reviewsHTML = fmt.Sprintf(
 	`
 	%s
-	<dl>
+	<dl class="served-by">
 	<dt>Reviews served by:</dt>
 	<dd><u>%s</u></dd>
 	</dl>

diff --git a/bookinfo/product-page/pkg/template/html_summary.go b/bookinfo/product-page/pkg/template/html_summary.go
@@ -9,7 +9,7 @@ const (
 
 var summaryHTML = fmt.Sprintf(`
 	<h3>%s</h3>
-	<p>%s</p>`,
+	<p>Summary: %s</p>`,
 	titleReplaceTarget,
 	descriptionReplaceTarget,
 )
diff --git a/bookinfo/product-page/pkg/template/template.go b/bookinfo/product-page/pkg/template/template.go
@@ -24,14 +24,14 @@ func (t *TemplateHandler) TemplateIndexPage(servicesDetails *config.ServicesConf
 func (t *TemplateHandler) newTable(servicesConfig *config.ServicesConfig) string {
 	return fmt.Sprintf(
 		tableHTML,
-		servicesConfig.ProductPage.Name,
-		servicesConfig.ProductPage.Endpoint,
+		servicesConfig.Details.Name,
 		servicesConfig.Details.Endpoint,
 		servicesConfig.Details.Name,
-		servicesConfig.Reviews.Endpoint,
+		servicesConfig.Details.Endpoint,
 		servicesConfig.Reviews.Name,
-		servicesConfig.Ratings.Endpoint,
+		servicesConfig.Reviews.Endpoint,
 		servicesConfig.Ratings.Name,
+		servicesConfig.Ratings.Endpoint,
 	)
 }