Cleaned up formatting on recipe detail display.

src/main/resources/META-INF/resources/recipeDetails.xhtml

@@ -27,22 +27,22 @@
         <h:messages />
         <h:form id="form1">
             <p:panelGrid label="#{recipeDetailBean.recipe.title}"
-                columns="1"
+                columns="2"
             >
-                <p:panelGrid>
                 <f:facet name="header">
                     <h:outputText styleClass="recipeTitle"
                         value="#{recipeDetailBean.recipe.title}"
                     />
                 </f:facet>
-                    <p:row>
-                        <p:column id="leftCol" style="width: 75%">
+                <p:panel id="leftCol" style="width: auto;">
                     <p:panelGrid columns="2">
+                        <p:panelGrid id="picButtons" columns="2">
                             <img id="bigpix"
+                                style="width: 132px;"
                                 src="/img/picture/#{recipeDetailBean.recipe.id}"
                             />
-                                <p:panelGrid id="pnlDetails"
-                                    columns="2"
+                            <p:panelGrid id="pnlButtons"
+                                columns="2" style="width: 220px;"
                             >
                                 <!--  TODO: ask if we should save -->
                                 <p:commandButton value="Back"
@@ -60,8 +60,7 @@
                                 />
                                 <p:commandButton id="ctlShop"
                                     icon="ui-icon-cart"
-                                        value="Shop"
-                                        immediate="true"
+                                    value="Shop" immediate="true"
                                     styleClass="#{recipeDetailBean.shop ? 'greenButton' : null}"
                                     action="#{recipeDetailBean.doShop}"
                                     update="ctlShop"
@@ -70,45 +69,42 @@
                                 <p:outputLabel for="@next"
                                     value="Categories:"
                                 />
-                                    <h:outputText
-                                        label="Category: "
+                                <h:outputText label="Category: "
                                     value="#{userSession.formatCategories(recipeDetailBean.recipe)}"
                                 />
                                 <p:outputLabel for="@next"
                                     value="Cuisine:"
                                 />
-                                    <h:outputText
-                                        label="Cuisine: "
+                                <h:outputText label="Cuisine: "
                                     value="#{recipeDetailBean.recipe.cuisine}"
                                 />
                                 <p:outputLabel for="@next"
                                     value="Prep Time:"
                                 />
-                                    <h:outputText
-                                        label="Prep Time: "
+                                <h:outputText label="Prep Time: "
                                     value="#{recipeDetailBean.recipe.preptime}"
                                     converter="com.mousetech.gourmetj.utils.TimeConverter"
                                 />
                                 <p:outputLabel for="@next"
                                     value="Cook Time:"
                                 />
-                                    <h:outputText
-                                        label="Cook Time: "
+                                <h:outputText label="Cook Time: "
                                     value="#{recipeDetailBean.recipe.cooktime}"
                                     converter="com.mousetech.gourmetj.utils.TimeConverter"
                                 />
-                                </p:panelGrid>
-                            </p:panelGrid>
-                            <h:commandLink value="Edit Details"
+                                <h:outputText value="" />
+                                <p:commandButton
+                                    icon="ui-icon-wrench"
+                                    value="Edit"
                                     action="#{recipeDetailBean.editDescription}"
                                 />
+                            </p:panelGrid>
+                        </p:panelGrid>
+                    </p:panelGrid>
                     <!--  -->
-                            <p:panelGrid id="pnlInstr"
-                                columns="1" style="width: 100%"
-                            >
+                    <p:panel id="pnlInstr">
                         <f:facet name="header">
-                                    <h:outputText
-                                        styleClass="subtitle"
+                            <h:outputText styleClass="subtitle"
                                 value="Instructions"
                             />
                         </f:facet>
@@ -116,35 +112,33 @@
                             escape="false"
                             value="#{recipeDetailBean.instructions}"
                         />
-                                <h:commandLink
-                                    value="Edit Instructions"
+                        <br />
+                        <h:commandLink value="Edit Instructions"
                             action="#{recipeDetailBean.editInstructions}"
                         />
-                            </p:panelGrid>
-                            <p:panelGrid id="pnlNotes"
-                                columns="1" style="width: 100%"
-                            >
+                    </p:panel>
+                    <p:panel id="pnlNotes">
                         <f:facet name="header">
-                                    <h:outputText
-                                        styleClass="subtitle"
+                            <h:outputText styleClass="subtitle"
                                 value="Notes"
                             />
                         </f:facet>
                         <h:outputText escape="false"
                             value="#{recipeDetailBean.modifications}"
                         />
+                        <br />
                         <h:commandLink value="Edit Notes"
                             action="#{recipeDetailBean.editNotes}"
                         />
-                            </p:panelGrid>
+                    </p:panel>
                     <p:commandButton id="ctlDelete"
                         value="Delete Recipe"
                         onclick="PF('okDeleteDlg').show()"
                     />
-                        </p:column>
+                </p:panel>
                 <!-- ====== Ingredients ============================ -->
-                        <p:column id="ingredientsc"
-                            style="width: 25%; vertical-align: top;"
+                <p:panel id="ingredientsc"
+                    style="width: 30%; min-width: 40em; vertical-align: top;"
                 >
                     <p:dataTable id="ingredients"
                         value="#{recipeDetailBean.ingredients}"
@@ -152,8 +146,7 @@
                         rowStyleClass="#{item.ingGroup ? 'displayIngGroupRow' : null}"
                     >
                         <f:facet name="header">
-                                    <h:outputText
-                                        styleClass="subtitle"
+                            <h:outputText styleClass="subtitle"
                                 value="Ingredients"
                             />
                         </f:facet>
@@ -174,22 +167,18 @@
                         <p:column label="Units"
                             style="width: 5em"
                         >
-                                    <h:outputText
-                                        value="#{item.unit}"
-                                    />
+                            <h:outputText value="#{item.unit}" />
                         </p:column>
                         <p:column label="Item"
-                                    style="width: 20em"
+                            style="width: 20em; text-wrap: wrap"
                         >
-                                    <h:outputText
-                                        value="#{item.item}"
-                                    />
+                            <h:outputText value="#{item.item}" />
                         </p:column>
                         <p:column label="Optional"
                             style="width: 2em"
                         >
                             <p:selectBooleanCheckbox
-                                        readonly="true"
+                                disabled="true"
                                 value="#{item.optionalCB}"
                             />
                         </p:column>
@@ -197,9 +186,7 @@
                     <h:outputText
                         value="Recipe ID: #{recipeDetailBean.recipe.id}"
                     />
-                        </p:column>
-                    </p:row>
-                </p:panelGrid>
+                </p:panel>
             </p:panelGrid>
         </h:form>
         <!--  -->