From a757393d283c1a72aa3adee1bf643b2a3807ec04 Mon Sep 17 00:00:00 2001 From: Catherine Farman <Catherine.Farman@cfpb.gov> Date: Sat, 7 Mar 2015 16:33:26 -0500 Subject: [PATCH 1/4] placeholder markup for the graph using item length --- .../prepare-worksheets/page-summary.hbs | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs index d0fd1c5e7..8f98a61a1 100644 --- a/src/static/js/templates/prepare-worksheets/page-summary.hbs +++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs @@ -2,7 +2,48 @@ <h1>Your summary</h1> <p class="lead">Buying a home is more complicated than simply trading a rent payment for a mortgage payment. Owning a home is a long-term financial commitment that carries costs, risks, and benefits. Examine your summary below to decide whether or not you are ready to continue working towards buying a home.</p> - <div class="summary-chart"></div> + <div class="summary-chart"> + + + <!-- goals --> + {{#each this.goals.[2].[items]}} + low priority goal #{{@index}}: + <div class="goal-low"></div> + {{/each}} <!-- light green --> + + {{#each this.goals.[1].[items]}} + medium priority goal #{{@index}}: + <div class="goal-medium"></div> + {{/each}} <!-- medium green --> + + {{#each this.goals.[0].[items]}} + high priority goal #{{@index}}: + <div class="goal-high"></div> + {{/each}} <!-- dark green --> + + <!-- red flags --> + {{#each this.flags.[1].[items]}} + somewhat likely flag #{{@index}}: + <div class="flag-medium"></div> + {{/each}} <!-- light red --> + + {{#each this.flags.[0].[items]}} + likely flag #{{@index}}: + <div class="flag-high"></div> + {{/each}} <!-- dark red --> + + <!-- risks --> + + {{#each this.risks.[1].[items]}} + maybe ready risk #{{@index}}: + <div class="risk-medium"></div> + {{/each}} <!-- light yellow --> + + {{#each this.risks.[2].[items]}} + not ready risk #{{@index}}: + <div class="risk-low"></div> + {{/each}} <!-- dark yellow --> + </div> <div class="content-l content-l__main"> <div class="content-l_col content-l_col-1-2"> From 7068acb5a963c9f28605b17ecc2c560d4eba8a57 Mon Sep 17 00:00:00 2001 From: Catherine Farman <Catherine.Farman@cfpb.gov> Date: Sat, 7 Mar 2015 17:08:11 -0500 Subject: [PATCH 2/4] graph loops --- .../prepare-worksheets/page-summary.hbs | 65 +++++++------------ 1 file changed, 24 insertions(+), 41 deletions(-) diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs index 3d0b1a5a8..db01db2ce 100644 --- a/src/static/js/templates/prepare-worksheets/page-summary.hbs +++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs @@ -7,68 +7,51 @@ <section class="summary-chart"> <!-- goals --> + + <div class="box1 first"> {{#each this.goals.[2].[items]}} - low priority goal #{{@index}}: - <div class="goal-low"></div> + <!-- low priority goal #{{@index}}: --> + <div class="box-goals goals-low"></div> {{/each}} <!-- light green --> {{#each this.goals.[1].[items]}} - medium priority goal #{{@index}}: - <div class="goal-medium"></div> + <!-- medium priority goal #{{@index}}: --> + <div class="box-goals goals-medium"></div> {{/each}} <!-- medium green --> {{#each this.goals.[0].[items]}} - high priority goal #{{@index}}: - <div class="goal-high"></div> + <!-- high priority goal #{{@index}}: --> + <div class="box-goals goals-high"></div> {{/each}} <!-- dark green --> + </div> - <!-- red flags --> + <!-- red flags --> + <div class="box1"> {{#each this.flags.[1].[items]}} - somewhat likely flag #{{@index}}: - <div class="flag-medium"></div> + <!-- somewhat likely flag #{{@index}}: --> + <div class="box-goals flags-medium"></div> {{/each}} <!-- light red --> + {{#each this.flags.[0].[items]}} - likely flag #{{@index}}: - <div class="flag-high"></div> + <!-- likely flag #{{@index}}: --> + <div class="box-goals flags-high"></div> {{/each}} <!-- dark red --> + </div> - <!-- risks --> - + <!-- risks --> + <div class="box1"> {{#each this.risks.[1].[items]}} - maybe ready risk #{{@index}}: - <div class="risk-medium"></div> + <!-- maybe ready risk #{{@index}}: --> + <div class="box-goals risks-medium"></div> {{/each}} <!-- light yellow --> {{#each this.risks.[2].[items]}} - not ready risk #{{@index}}: - <div class="risk-low"></div> + <!-- not ready risk #{{@index}}: --> + <div class="box-goals risks-high"></div> {{/each}} <!-- dark yellow --> + </div> - <div class="box1 first"> - <div class="box-goals "></div> - <div class="box-goals"></div> - <div class="box-goals"></div> - <div class="box-goals"></div> - <div class="box-goals"></div> - <div class="box-goals"></div> - <div class="box-goals"></div> - <div class="box-goals goals-low"></div> - <div class="box-goals goals-high"></div> - <div class="box-goals goals-high"></div> - </div> - <div class="box1 "> - <div class="box-goals flags-medium"></div> - <div class="box-goals flags-medium"></div> - <div class="box-goals flags-high"></div> - <div class="box-goals flags-high"></div> - </div> - <div class="box1 "> - <div class="box-goals risks-medium"></div> - <div class="box-goals risks-medium"></div> - <div class="box-goals risks-high"></div> - <div class="box-goals risks-high"></div> - </div> <br> <div class="box2"> <h5>Goals</h5> From 639894ee05b75d2283c1c7db5a55069b63634bb4 Mon Sep 17 00:00:00 2001 From: Catherine Farman <Catherine.Farman@cfpb.gov> Date: Sat, 7 Mar 2015 17:09:38 -0500 Subject: [PATCH 3/4] clean up comments --- .../templates/prepare-worksheets/page-summary.hbs | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs index db01db2ce..06a330ec9 100644 --- a/src/static/js/templates/prepare-worksheets/page-summary.hbs +++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs @@ -8,19 +8,20 @@ <!-- goals --> + {{#if goalsError }} <div class="box1 first"> {{#each this.goals.[2].[items]}} - <!-- low priority goal #{{@index}}: --> + <!-- low priority goal --> <div class="box-goals goals-low"></div> {{/each}} <!-- light green --> {{#each this.goals.[1].[items]}} - <!-- medium priority goal #{{@index}}: --> + <!-- medium priority goal --> <div class="box-goals goals-medium"></div> {{/each}} <!-- medium green --> {{#each this.goals.[0].[items]}} - <!-- high priority goal #{{@index}}: --> + <!-- high priority goal --> <div class="box-goals goals-high"></div> {{/each}} <!-- dark green --> </div> @@ -28,13 +29,13 @@ <!-- red flags --> <div class="box1"> {{#each this.flags.[1].[items]}} - <!-- somewhat likely flag #{{@index}}: --> + <!-- somewhat likely flag --> <div class="box-goals flags-medium"></div> {{/each}} <!-- light red --> {{#each this.flags.[0].[items]}} - <!-- likely flag #{{@index}}: --> + <!-- likely flag --> <div class="box-goals flags-high"></div> {{/each}} <!-- dark red --> </div> @@ -42,12 +43,12 @@ <!-- risks --> <div class="box1"> {{#each this.risks.[1].[items]}} - <!-- maybe ready risk #{{@index}}: --> + <!-- maybe ready risk --> <div class="box-goals risks-medium"></div> {{/each}} <!-- light yellow --> {{#each this.risks.[2].[items]}} - <!-- not ready risk #{{@index}}: --> + <!-- not ready risk --> <div class="box-goals risks-high"></div> {{/each}} <!-- dark yellow --> </div> From 9d26c6d0e49bdacad388860e3196c2073f115792 Mon Sep 17 00:00:00 2001 From: Catherine Farman <Catherine.Farman@cfpb.gov> Date: Fri, 28 Aug 2015 16:31:20 -0400 Subject: [PATCH 4/4] fix(prepare worksheets): fix missing closing if tag --- .../prepare-worksheets/page-summary.hbs | 96 ++++++++++--------- 1 file changed, 50 insertions(+), 46 deletions(-) diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs index 06a330ec9..a92271cb2 100644 --- a/src/static/js/templates/prepare-worksheets/page-summary.hbs +++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs @@ -9,49 +9,50 @@ <!-- goals --> {{#if goalsError }} - <div class="box1 first"> - {{#each this.goals.[2].[items]}} - <!-- low priority goal --> - <div class="box-goals goals-low"></div> - {{/each}} <!-- light green --> + <div class="box1 first"> + {{#each this.goals.[2].[items]}} + <!-- low priority goal --> + <div class="box-goals goals-low"></div> + {{/each}} <!-- light green --> - {{#each this.goals.[1].[items]}} - <!-- medium priority goal --> - <div class="box-goals goals-medium"></div> - {{/each}} <!-- medium green --> + {{#each this.goals.[1].[items]}} + <!-- medium priority goal --> + <div class="box-goals goals-medium"></div> + {{/each}} <!-- medium green --> - {{#each this.goals.[0].[items]}} - <!-- high priority goal --> - <div class="box-goals goals-high"></div> - {{/each}} <!-- dark green --> - </div> + {{#each this.goals.[0].[items]}} + <!-- high priority goal --> + <div class="box-goals goals-high"></div> + {{/each}} <!-- dark green --> + </div> - <!-- red flags --> - <div class="box1"> - {{#each this.flags.[1].[items]}} - <!-- somewhat likely flag --> - <div class="box-goals flags-medium"></div> - {{/each}} <!-- light red --> + <!-- red flags --> + <div class="box1"> + {{#each this.flags.[1].[items]}} + <!-- somewhat likely flag --> + <div class="box-goals flags-medium"></div> + {{/each}} <!-- light red --> - {{#each this.flags.[0].[items]}} - <!-- likely flag --> - <div class="box-goals flags-high"></div> - {{/each}} <!-- dark red --> - </div> + {{#each this.flags.[0].[items]}} + <!-- likely flag --> + <div class="box-goals flags-high"></div> + {{/each}} <!-- dark red --> + </div> - <!-- risks --> - <div class="box1"> - {{#each this.risks.[1].[items]}} - <!-- maybe ready risk --> - <div class="box-goals risks-medium"></div> - {{/each}} <!-- light yellow --> + <!-- risks --> + <div class="box1"> + {{#each this.risks.[1].[items]}} + <!-- maybe ready risk --> + <div class="box-goals risks-medium"></div> + {{/each}} <!-- light yellow --> - {{#each this.risks.[2].[items]}} - <!-- not ready risk --> - <div class="box-goals risks-high"></div> - {{/each}} <!-- dark yellow --> - </div> + {{#each this.risks.[2].[items]}} + <!-- not ready risk --> + <div class="box-goals risks-high"></div> + {{/each}} <!-- dark yellow --> + </div> + {{/if}} <br> <div class="box2"> @@ -66,8 +67,11 @@ </section> </div> + <hr> + <br> + <div class="content-l content-l__main"> <div class="content-l_col content-l_col-1-2"> @@ -84,7 +88,8 @@ {{/if}} </section> - </div> + </div><!-- .content-l_col --> + <div class="content-l_col content-l_col-1-2 worksheet worksheet-summary worksheet-flags-summary"> <section class="worksheet worksheet-summary worksheet-flags-summary"> @@ -111,11 +116,11 @@ {{/if}} </section> - </div> - </div> -</div> + </div><!-- .content-l_col --> + </div><!-- .content-l_main --> +</div><!-- .summary --> -<div class="block__border-top block__padded-top"> +<div class="block block__border-top block__padded-top"> <div class="summary content-l content-l__main"> <div class="content-l_col content-l_col-1-2"> <section class="summary-callout"> @@ -124,7 +129,7 @@ The next step is to explore how much it will cost to buy a home that meets your goals, and whether buying makes sense financially. For most people, owning a home will end up being more expensive than their current rental. Before you start house shopping in earnest, it’s a good idea to get a clear sense for how much buying will cost, so you can decide for yourself if the benefits are worth the cost. </p> </section> - </div> + </div><!-- .content-l_col --> <div class="content-l_col content-l_col-1-2 content-l_col__before-divider"> <section class="summary-callout"> <h4>Not ready to buy?</h4> @@ -132,7 +137,6 @@ Are there red flags in your situation, or risks you’re not ready to accept? That’s ok. Sometimes, the smartest home buying decision is deciding not to buy – at least not right now. Consider pursuing the alternatives you identified, so that you can meet some of your goals right away. Or, consider working to build a larger financial cushion so you will be better able to accept the risks of homeownership when the time is right for you. </p> </section> - </div> - </div> - -</div> \ No newline at end of file + </div><!-- .content-l_col --> + </div><!-- .summary --> +</div><!-- .block --> \ No newline at end of file