From a7702e27f388f547bc53ba9ca75c01c65e4d2af6 Mon Sep 17 00:00:00 2001
From: tim holloway <timh@mousetech.com>
Date: Fri, 2 Feb 2024 17:16:46 -0500
Subject: [PATCH] Cleaned up formatting on recipe detail display.

---
 .../META-INF/resources/recipeDetails.xhtml    | 307 +++++++++---------
 1 file changed, 147 insertions(+), 160 deletions(-)

diff --git a/src/main/resources/META-INF/resources/recipeDetails.xhtml b/src/main/resources/META-INF/resources/recipeDetails.xhtml
index 6c32735..dc96a39 100644
--- a/src/main/resources/META-INF/resources/recipeDetails.xhtml
+++ b/src/main/resources/META-INF/resources/recipeDetails.xhtml
@@ -27,179 +27,166 @@
         <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:panelGrid columns="2">
-                                <img id="bigpix"
-                                    src="/img/picture/#{recipeDetailBean.recipe.id}"
-                                />
-                                <p:panelGrid id="pnlDetails"
-                                    columns="2"
-                                >
-                                <!--  TODO: ask if we should save -->
-                                    <p:commandButton value="Back"
-                                        ajax="false"
-                                        icon="ui-icon-arrowthick-1-w"
-                                        action="home"
-                                        immediate="true"
-                                    />
-                                    <p:commandButton ajax="false"
-                                        value="Print"
-                                        icon="ui-icon-print"
-                                        action="recipePrint.jsf"
-                                        styleClass="ui-button-print"
-                                        immediate="true"
-                                    />
-                                   <p:commandButton id="ctlShop"
-                                        icon="ui-icon-cart"
-                                        value="Shop"
-                                        immediate="true"
-                                        styleClass="#{recipeDetailBean.shop ? 'greenButton' : null}"
-                                        action="#{recipeDetailBean.doShop}"
-                                        update="ctlShop"
-                                    />
-                                    <h:outputText value=""/>
-                                     <p:outputLabel for="@next"
-                                        value="Categories:"
-                                    />
-                                    <h:outputText
-                                        label="Category: "
-                                        value="#{userSession.formatCategories(recipeDetailBean.recipe)}"
-                                    />
-                                    <p:outputLabel for="@next"
-                                        value="Cuisine:"
-                                    />
-                                    <h:outputText
-                                        label="Cuisine: "
-                                        value="#{recipeDetailBean.recipe.cuisine}"
-                                    />
-                                    <p:outputLabel for="@next"
-                                        value="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: "
-                                        value="#{recipeDetailBean.recipe.cooktime}"
-                                        converter="com.mousetech.gourmetj.utils.TimeConverter"
-                                    />
-                                </p:panelGrid>
-                            </p:panelGrid>
-                            <h:commandLink value="Edit Details"
-                                action="#{recipeDetailBean.editDescription}"
+                <f:facet name="header">
+                    <h:outputText styleClass="recipeTitle"
+                        value="#{recipeDetailBean.recipe.title}"
+                    />
+                </f:facet>
+                <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="pnlInstr"
-                                columns="1" style="width: 100%"
+                            <p:panelGrid id="pnlButtons"
+                                columns="2" style="width: 220px;"
                             >
-                                <f:facet name="header">
-                                    <h:outputText
-                                        styleClass="subtitle"
-                                        value="Instructions"
-                                    />
-                                </f:facet>
-                                <h:outputText id="instructions"
-                                    escape="false"
-                                    value="#{recipeDetailBean.instructions}"
+                                <!--  TODO: ask if we should save -->
+                                <p:commandButton value="Back"
+                                    ajax="false"
+                                    icon="ui-icon-arrowthick-1-w"
+                                    action="home"
+                                    immediate="true"
                                 />
-                                <h:commandLink
-                                    value="Edit Instructions"
-                                    action="#{recipeDetailBean.editInstructions}"
+                                <p:commandButton ajax="false"
+                                    value="Print"
+                                    icon="ui-icon-print"
+                                    action="recipePrint.jsf"
+                                    styleClass="ui-button-print"
+                                    immediate="true"
                                 />
-                            </p:panelGrid>
-                            <p:panelGrid id="pnlNotes"
-                                columns="1" style="width: 100%"
-                            >
-                                <f:facet name="header">
-                                    <h:outputText
-                                        styleClass="subtitle"
-                                        value="Notes"
-                                    />
-                                </f:facet>
-                                <h:outputText escape="false"
-                                    value="#{recipeDetailBean.modifications}"
+                                <p:commandButton id="ctlShop"
+                                    icon="ui-icon-cart"
+                                    value="Shop" immediate="true"
+                                    styleClass="#{recipeDetailBean.shop ? 'greenButton' : null}"
+                                    action="#{recipeDetailBean.doShop}"
+                                    update="ctlShop"
+                                />
+                                <h:outputText value="" />
+                                <p:outputLabel for="@next"
+                                    value="Categories:"
                                 />
-                                <h:commandLink value="Edit Notes"
-                                    action="#{recipeDetailBean.editNotes}"
+                                <h:outputText label="Category: "
+                                    value="#{userSession.formatCategories(recipeDetailBean.recipe)}"
+                                />
+                                <p:outputLabel for="@next"
+                                    value="Cuisine:"
+                                />
+                                <h:outputText label="Cuisine: "
+                                    value="#{recipeDetailBean.recipe.cuisine}"
+                                />
+                                <p:outputLabel for="@next"
+                                    value="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: "
+                                    value="#{recipeDetailBean.recipe.cooktime}"
+                                    converter="com.mousetech.gourmetj.utils.TimeConverter"
+                                />
+                                <h:outputText value="" />
+                                <p:commandButton
+                                    icon="ui-icon-wrench"
+                                    value="Edit"
+                                    action="#{recipeDetailBean.editDescription}"
                                 />
                             </p:panelGrid>
-                            <p:commandButton id="ctlDelete"
-                                value="Delete Recipe"
-                                onclick="PF('okDeleteDlg').show()"
+                        </p:panelGrid>
+                    </p:panelGrid>
+                    <!--  -->
+                    <p:panel id="pnlInstr">
+                        <f:facet name="header">
+                            <h:outputText styleClass="subtitle"
+                                value="Instructions"
                             />
-                        </p:column>
-                        <!-- ====== Ingredients ============================ -->
-                        <p:column id="ingredientsc"
-                            style="width: 25%; vertical-align: top;"
+                        </f:facet>
+                        <h:outputText id="instructions"
+                            escape="false"
+                            value="#{recipeDetailBean.instructions}"
+                        />
+                        <br />
+                        <h:commandLink value="Edit Instructions"
+                            action="#{recipeDetailBean.editInstructions}"
+                        />
+                    </p:panel>
+                    <p:panel id="pnlNotes">
+                        <f:facet name="header">
+                            <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:panel>
+                    <p:commandButton id="ctlDelete"
+                        value="Delete Recipe"
+                        onclick="PF('okDeleteDlg').show()"
+                    />
+                </p:panel>
+                <!-- ====== Ingredients ============================ -->
+                <p:panel id="ingredientsc"
+                    style="width: 30%; min-width: 40em; vertical-align: top;"
+                >
+                    <p:dataTable id="ingredients"
+                        value="#{recipeDetailBean.ingredients}"
+                        var="item"
+                        rowStyleClass="#{item.ingGroup ? 'displayIngGroupRow' : null}"
+                    >
+                        <f:facet name="header">
+                            <h:outputText styleClass="subtitle"
+                                value="Ingredients"
+                            />
+                        </f:facet>
+                        <f:facet name="footer">
+                            <h:commandLink
+                                value="Edit Ingredients"
+                                style="vertical-align: top"
+                                action="#{recipeDetailBean.editIngredients}"
+                            />
+                        </f:facet>
+                        <p:column label="Amt"
+                            style="width: 3em; text-align: right"
                         >
-                            <p:dataTable id="ingredients"
-                                value="#{recipeDetailBean.ingredients}"
-                                var="item"
-                                rowStyleClass="#{item.ingGroup ? 'displayIngGroupRow' : null}"
-                            >
-                                <f:facet name="header">
-                                    <h:outputText
-                                        styleClass="subtitle"
-                                        value="Ingredients"
-                                    />
-                                </f:facet>
-                                <f:facet name="footer">
-                                    <h:commandLink
-                                        value="Edit Ingredients"
-                                        style="vertical-align: top"
-                                        action="#{recipeDetailBean.editIngredients}"
-                                    />
-                                </f:facet>
-                                <p:column label="Amt"
-                                    style="width: 3em; text-align: right"
-                                >
-                                    <h:outputText
-                                        value="#{item.displayAmount}"
-                                    />
-                                </p:column>
-                                <p:column label="Units"
-                                    style="width: 5em"
-                                >
-                                    <h:outputText
-                                        value="#{item.unit}"
-                                    />
-                                </p:column>
-                                <p:column label="Item"
-                                    style="width: 20em"
-                                >
-                                    <h:outputText
-                                        value="#{item.item}"
-                                    />
-                                </p:column>
-                                <p:column label="Optional"
-                                    style="width: 2em"
-                                >
-                                    <p:selectBooleanCheckbox
-                                        readonly="true"
-                                        value="#{item.optionalCB}"
-                                    />
-                                </p:column>
-                            </p:dataTable>
                             <h:outputText
-                                value="Recipe ID: #{recipeDetailBean.recipe.id}"
+                                value="#{item.displayAmount}"
+                            />
+                        </p:column>
+                        <p:column label="Units"
+                            style="width: 5em"
+                        >
+                            <h:outputText value="#{item.unit}" />
+                        </p:column>
+                        <p:column label="Item"
+                            style="width: 20em; text-wrap: wrap"
+                        >
+                            <h:outputText value="#{item.item}" />
+                        </p:column>
+                        <p:column label="Optional"
+                            style="width: 2em"
+                        >
+                            <p:selectBooleanCheckbox
+                                disabled="true"
+                                value="#{item.optionalCB}"
                             />
                         </p:column>
-                    </p:row>
-                </p:panelGrid>
+                    </p:dataTable>
+                    <h:outputText
+                        value="Recipe ID: #{recipeDetailBean.recipe.id}"
+                    />
+                </p:panel>
             </p:panelGrid>
         </h:form>
         <!--  -->