Merge pull request #48 from OpenLiberty/ui

UI updates
OpenLiberty · Dec 1, 2023 · 53b785a · 53b785a
2 parents 479cbdb + 22c8168
commit 53b785a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 24 deletions.
diff --git a/src/main/webapp/css/app.css b/src/main/webapp/css/app.css
@@ -185,7 +185,7 @@ button:hover {
 	margin: 1em;
 	padding: .5em;
 	border-radius: 7pt;
-	width: 12em;
+	width: 15em;
 	justify-content: space-between;
 }
 
@@ -211,6 +211,15 @@ button:hover {
 #userBoxes {
 	flex-wrap: wrap;
 	justify-content: space-evenly;
+
+}
+
+#rankBoxes {
+    padding-top: 1em;
+    text-align: center;
+    font-size: 18pt;
+    white-space: nowrap;
+
 }
 
 #usersContainer{
@@ -222,5 +231,14 @@ button:hover {
 	margin: .5em;
 	padding: .25em;
 	border-radius: 7pt;
+    text-align: left;
+    font-size: 12pt;
+}
+
+strong {
+    font-size: 16pt;
 }
 
+#queryButtons, #userCreationForm {
+    flex: 1;
+}
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -37,28 +37,32 @@ <h2>Congrats on your shiny, new Open Liberty sample app!</h2>
 			<div id="usersContainer" class="hFlexContainer">
 				<div id="userCreation" class="vFlexContainer">
 					<strong id="createCrewMember" class="flexSelfCenter">Register Crew Member<br>CrewMembers.save()</strong>
-					<div id="Name" class="vFlexContainer inputLine">
-						<span>Name</span>
-						<input id="crewMemberName" class="textBox" type="text">
+					<div id="userCreationForm" class="vFlexContainer">
+						<div id="Name" class="vFlexContainer inputLine">
+							<span>Name</span>
+							<input id="crewMemberName" class="textBox" type="text">
+						</div>
+						<div id="ID" class="vFlexContainer inputLine">
+							<span>ID Number</span>
+							<input id="crewMemberID" class="textBox" type="text">
+						</div>
+						<div id="Rank" class="vFlexContainer inputLine">
+							<span>Rank</span>
+							<select id="crewMemberRank">
+									<option>Captain</option>
+									<option>Officer</option>
+									<option>Engineer</option>
+							</select>
+						</div>
+						<button id="registerButton" class="buttons" onclick="addCrewMember()">Register Crew Member</button>
 					</div>
-					<div id="ID" class="vFlexContainer inputLine">
-						<span>ID Number</span>
-						<input id="crewMemberID" class="textBox" type="text">
-					</div>
-					<div id="Rank" class="vFlexContainer inputLine">
-						<span>Rank</span>
-						<select id="crewMemberRank">
-								<option>Captain</option>
-								<option>Officer</option>
-								<option>Engineer</option>
-						</select>
-					</div>
-					<button id="registerButton" class="buttons" onclick="addCrewMember()">Register Crew Member</button>
 				</div>
 				<div id="queryMenu" class="vFlexContainer">
-					<strong id="createCrewMember" class="flexSelfCenter">Queries</strong>
-					<button id="findAllButton" class="buttons queryButton selectedQuery" onclick="setActiveQuery('findAll')">findAll</button>
-					<button id="findByRankButton" class="buttons queryButton" onclick="setActiveQuery('findByRank')">findByRank</button>
+					<strong id="createCrewMember" class="flexSelfCenter">Queries<br>&nbsp;</strong>
+					<div id="queryButtons" class="vFlexContainer">
+						<button id="findAllButton" class="buttons queryButton selectedQuery" onclick="setActiveQuery('findAll')">findAll</button>
+						<button id="findByRankButton" class="buttons queryButton" onclick="setActiveQuery('findByRank')">findByRank</button>
+					</div>
 				</div>
 				<div id="findAll" class="vFlexContainer queryContainer" style="display: flex">
 					<strong id="createCrewMember" class="flexSelfCenter">Crew Members<br>CrewMembers.findAll()</strong>
@@ -67,10 +71,12 @@ <h2>Congrats on your shiny, new Open Liberty sample app!</h2>
 					</div>
 				</div>
 				<div id="findByRank" class="flexBox vFlexContainer queryContainer">
-						<strong id="createCrewMember" class="flexSelfCenter">Crew Members by Rank<br>CrewMembers.findByRank()</strong>
-					<pre id="Captain"></pre>
-					<pre id="Officer"></pre>
-					<pre id="Engineer"></pre>
+					<strong id="createCrewMember" class="flexSelfCenter">Crew Members by Rank<br>CrewMembers.findByRank()</strong>
+					<div id="rankBoxes" class="hFlexContainer">
+						<div id="Captain" class="flexBox"></div>
+						<div id="Officer" class="flexBox"></div>
+						<div id="Engineer" class="flexBox"></div>
+					</div>
 				</div>
 			</div>
         </section>