From 0b432c2404ec5de3e29a872b7c56686cb71eea26 Mon Sep 17 00:00:00 2001
From: Rossen Stoyanchev <rstoyanchev@pivotal.io>
Date: Thu, 8 Feb 2018 12:25:53 -0500
Subject: [PATCH] Fix layout issues in booking-mvc

---
 .../hotels/booking/enterBookingDetails.jsp    | 28 ++++++++---------
 .../WEB-INF/hotels/booking/reviewBooking.jsp  | 28 ++++++++---------
 .../main/webapp/WEB-INF/hotels/searchForm.jsp |  7 ++---
 .../main/webapp/WEB-INF/layouts/standard.jsp  | 30 +++++++++----------
 4 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/enterBookingDetails.jsp b/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/enterBookingDetails.jsp
index 1f95919..413c5bb 100644
--- a/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/enterBookingDetails.jsp
+++ b/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/enterBookingDetails.jsp
@@ -34,7 +34,7 @@
 					<div class="span-4">
 						<label for="checkinDate">Check In:</label>
 					</div>
-					<div class="span-7 last">
+					<div class="last">
 						<p><form:input path="checkinDate"/></p>
 						<script type="text/javascript">
 							Spring.addDecoration(new Spring.ElementDecoration({
@@ -49,7 +49,7 @@
 					<div class="span-4">
 						<label for="checkoutDate">Check Out:</label>
 					</div>
-					<div class="span-7 last">
+					<div class="last">
 						<p><form:input path="checkoutDate"/></p>
 						<script type="text/javascript">
 							Spring.addDecoration(new Spring.ElementDecoration({
@@ -63,7 +63,7 @@
 					<div class="span-4">
 						<label for="beds">Room Preference:</label>
 					</div>
-					<div class="span-7 last">
+					<div class="last">
 						<p>
 							<form:select id="beds" path="beds">
 								<form:option label="One king-size bed" value="1"/>
@@ -74,10 +74,10 @@
 					</div>
 				</div>
 				<div>
-					<div class="label span-4">
-						Smoking Preference:
+					<div class="label">
+						<label for="radio">Smoking Preference:</label>
 					</div>
-					<div id="radio" class="span-7 last">
+					<div id="radio">
 						<p>
 							<form:radiobutton id="smoking" path="smoking" label="Smoking" value="true"/>
 							<form:radiobutton id="non-smoking" path="smoking" label="Non Smoking" value="false"/>
@@ -99,15 +99,13 @@
 					</div>
 				</div>
 				<div>
-					<div class="label span-4">
-						Amenities:
+					<div>
+						<label for="amenities">Amenities:</label>
 					</div>
-					<div id="amenities" class="span-7 last">
+					<div id="amenities">
 						<p>
 							<form:checkbox path="amenities" value="OCEAN_VIEW" label="Ocean View" />
-							<br />
 							<form:checkbox path="amenities" value="LATE_CHECKOUT" label="Late Checkout" />
-							<br />
 							<form:checkbox path="amenities" value="MINIBAR" label="Minibar" />
 						</p>
 						<script type="text/javascript">
@@ -125,7 +123,7 @@
 					<div class="span-4">
 						<label for="creditCard">Credit Card #:</label>
 					</div>
-					<div class="span-7 last">
+					<div class="last">
 						<p><form:input path="creditCard"/></p>
 						<script type="text/javascript">
 							Spring.addDecoration(new Spring.ElementDecoration({
@@ -140,7 +138,7 @@
 					<div class="span-4">
 						<label for="creditCardName">Credit Card Name:</label>
 					</div>
-					<div class="span-7 last">
+					<div class="last">
 						<p><form:input path="creditCardName" maxlength="40"/></p>
 						<script type="text/javascript">
 							Spring.addDecoration(new Spring.ElementDecoration({
@@ -154,7 +152,7 @@
 					<div class="span-4">
 						<label for="creditCardExpiryMonth">Expiration Date:</label>
 					</div>
-					<div class="span-7 last">
+					<div class="last">
 						<p>
 							<form:select id="creditCardExpiryMonth" path="creditCardExpiryMonth">
 								<form:option label="Jan" value="1"/>
@@ -181,10 +179,8 @@
 					</div>
 				</div>
 				<div>
-					<p>
 					<button type="submit" id="proceed" name="_eventId_proceed">Proceed</button>
 					<button type="submit" name="_eventId_cancel" >Cancel</button>
-					</p>
 					<script type="text/javascript">
 						Spring.addDecoration(new Spring.ValidateAllDecoration({elementId:'proceed', event:'onclick'}));
 						Spring.addDecoration(new Spring.AjaxEventDecoration({elementId:'proceed',event:'onclick',formId:'booking'}));
diff --git a/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/reviewBooking.jsp b/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/reviewBooking.jsp
index 9efe4fa..bfed676 100644
--- a/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/reviewBooking.jsp
+++ b/booking-mvc/src/main/webapp/WEB-INF/hotels/booking/reviewBooking.jsp
@@ -19,41 +19,39 @@
 		<fieldset>
 			<legend>Confirm Booking Details</legend>
 			<div>
-				<div class="span-3">Check In:</div>
-				<div class="span-8 last">
+				<div class="span-4">Check In:</div>
+				<div class="last">
 					<p><spring:bind path="checkinDate">${status.value}</spring:bind></p>
 				</div>
 			</div>
 			<div>
-				<div class="span-3">Checkout:</div>
-				<div class="span-8 last">
+				<div class="span-4">Checkout:</div>
+				<div class="last">
 					<p><spring:bind path="checkoutDate">${status.value}</spring:bind></p>
 				</div>
 			</div>
 	        <div>
-	            <div class="span-3">Number of Nights:</div>
-	            <div class="span-8 last">
+	            <div class="span-4">Number of Nights:</div>
+	            <div class="last">
 	            	<p><spring:bind path="nights">${status.value}</spring:bind></p>
 	            </div>
 	        </div>
 	        <div>
-	            <div class="span-3">Total Payment:</div>
-	            <div class="span-8 last">
+	            <div class="span-4">Total Payment:</div>
+	            <div class="last">
 	            	<p><spring:bind path="total">${status.value}</spring:bind></p>
 	            </div>
 	        </div>
 			<div>
-				<div class="span-3">Credit Card #:</div>
-				<div class="span-8 last">
+				<div class="span-4">Credit Card #:</div>
+				<div class="last">
 					<p>${booking.creditCard}</p>
 				</div>
 			</div>
 			<div>
-				<p>
-					<button type="submit" name="_eventId_confirm">Confirm</button>
-					<button type="submit" name="_eventId_revise" id="revise">Revise</button>
-					<button type="submit" name="_eventId_cancel">Cancel</button>
-				</p>
+				<button type="submit" name="_eventId_confirm">Confirm</button>
+				<button type="submit" name="_eventId_revise" id="revise">Revise</button>
+				<button type="submit" name="_eventId_cancel">Cancel</button>
 				<script type="text/javascript">
 					Spring.addDecoration(new Spring.AjaxEventDecoration({elementId:'revise',event:'onclick',formId:'confirm'}));
 				</script>
diff --git a/booking-mvc/src/main/webapp/WEB-INF/hotels/searchForm.jsp b/booking-mvc/src/main/webapp/WEB-INF/hotels/searchForm.jsp
index 0940b44..372baf7 100644
--- a/booking-mvc/src/main/webapp/WEB-INF/hotels/searchForm.jsp
+++ b/booking-mvc/src/main/webapp/WEB-INF/hotels/searchForm.jsp
@@ -9,19 +9,18 @@
     	<form:errors path="*"/>
     </span>
 	<fieldset>
-		<div class="span-8">
-			<label for="searchString">Search String:</label>
+		<div class="span-7">
 			<form:input id="searchString" path="searchString"/>
 			<script type="text/javascript">
 				Spring.addDecoration(new Spring.ElementDecoration({
 					elementId : "searchString",
 					widgetType : "dijit.form.ValidationTextBox",
-					widgetAttrs : { promptMessage : "Search hotels by name, address, city, or zip." }}));
+					widgetAttrs : { promptMessage : "Name, address, city, or zip." }}));
 			</script>
 		</div>
 		<div class="span-6">
 			<div>
-				<label for="pageSize">Maximum results:</label>
+				<label for="pageSize">Page Size:</label>
 				<form:select id="pageSize" path="pageSize">
 					<form:option label="5" value="5"/>
 					<form:option label="10" value="10"/>
diff --git a/booking-mvc/src/main/webapp/WEB-INF/layouts/standard.jsp b/booking-mvc/src/main/webapp/WEB-INF/layouts/standard.jsp
index 68854e3..fbd8029 100644
--- a/booking-mvc/src/main/webapp/WEB-INF/layouts/standard.jsp
+++ b/booking-mvc/src/main/webapp/WEB-INF/layouts/standard.jsp
@@ -21,22 +21,22 @@
 <div id="page" class="container">
 	<div id="header">
 		<div id="topbar">
-			<p>
-				<security:authorize access="hasRole('ROLE_USER')">
-					<c:if test="${pageContext.request.userPrincipal != null}">
-						Welcome, ${pageContext.request.userPrincipal.name} |
-					</c:if>
-					<form name="f" action="<c:url value="/logout" />" method="post">
-						<div>
-							<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-						</div>
+			<security:authorize access="hasRole('ROLE_USER')">
+				<form action="<c:url value="/logout" />" method="post" class="inline">
+					<div class="span-4 label">
+						<c:if test="${pageContext.request.userPrincipal != null}">
+							Welcome, ${pageContext.request.userPrincipal.name}
+						</c:if>
+					</div>
+					<div class="last">
+						<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
 						<button id="submit" type="submit">Logout</button>
-					</form>
-				</security:authorize>
-				<security:authorize access="hasRole('ROLE_ANONYMOUS')">
-					<a href="<c:url value="/login" />">Login</a>
-				</security:authorize>
-			</p>
+					</div>
+				</form>
+			</security:authorize>
+			<security:authorize access="hasRole('ROLE_ANONYMOUS')">
+				<a href="<c:url value="/login" />">Login</a>
+			</security:authorize>
 		</div>
 		<div id="logo">
 			<p>