bug/1693 add helper method to center extra long ULURP names

- the custom helper method determines the length of `action.dcpName` and if it is too long, the helper method applies styling to center the text to prevent the ULURP name from obscturing the BBL numbers on smaller screens
NYCPlanning · Jul 6, 2022 · 6193cfc · 6193cfc
1 parent 108227e
commit 6193cfc
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 24 deletions.
diff --git a/client/app/helpers/center-lengthy-text.js b/client/app/helpers/center-lengthy-text.js
@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function centerLengthyText(text) {
+  return (text.length > 22) ? 'center-content' : '';
+}
+
+export default helper(centerLengthyText);
diff --git a/client/app/styles/layouts/_l-default.scss b/client/app/styles/layouts/_l-default.scss
@@ -342,3 +342,9 @@ h5.clickable-header {
     box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
   }
 }
+
+// fixes for the extra long ULURP name & numbers to prevent bleeding into the BBL numbers
+.text-tiny .center-content {
+  display: flex;
+  justify-content: center;
+}
diff --git a/client/app/templates/components/milestones/public-hearing.hbs b/client/app/templates/components/milestones/public-hearing.hbs
@@ -11,9 +11,12 @@
 <div class="text-tiny">
   {{#each @hearing.hearingActions as |action index|}}
     {{#if action.dcpName}}
-      <span class="label light-gray tiny-margin-bottom tiny-margin-right" data-test-hearing-actions-list="{{@hearing.disposition.id}}{{index}}">
-        {{action.dcpName}}
-        <small>{{action.dcpUlurpnumber}}</small>
+      <span class="{{center-lengthy-text action.dcpName}}">
+        <span class="label light-gray tiny-margin-bottom tiny-margin-right"
+          data-test-hearing-actions-list="{{@hearing.disposition.id}}{{index}}">
+          {{action.dcpName}}
+          <small>{{action.dcpUlurpnumber}}</small>
+        </span>
       </span>
     {{/if}}
   {{/each}}

diff --git a/client/app/templates/components/project-milestone.hbs b/client/app/templates/components/project-milestone.hbs
@@ -125,9 +125,12 @@
                         <div class="text-tiny">
                           {{#each vote.voteActions as |action index|}}
                             {{#if action.dcpName}}
-                              <span class="label light-gray tiny-margin-bottom tiny-margin-right" data-test-vote-actions-list="{{vote.disposition.id}}{{index}}">
-                                {{action.dcpName}}
-                                <small>{{action.dcpUlurpnumber}}</small>
+                              <span class="{{center-lengthy-text action.dcpName}}">
+                                <span class="label light-gray tiny-margin-bottom tiny-margin-right"
+                                  data-test-vote-actions-list="{{vote.disposition.id}}{{index}}">
+                                  {{action.dcpName}}
+                                  <small>{{action.dcpUlurpnumber}}</small>
+                                </span>
                               </span>
                             {{/if}}
                           {{/each}}
@@ -158,9 +161,12 @@
                         <div class="text-tiny">
                           {{#each vote.voteActions as |action index|}}
                             {{#if action.dcpName}}
-                              <span class="label light-gray tiny-margin-bottom tiny-margin-right" data-test-vote-actions-list="{{vote.disposition.id}}{{index}}">
-                                {{action.dcpName}}
-                                <small>{{action.dcpUlurpnumber}}</small>
+                              <span class="{{center-lengthy-text action.dcpName}}">
+                                <span class="label light-gray tiny-margin-bottom tiny-margin-right"
+                                  data-test-vote-actions-list="{{vote.disposition.id}}{{index}}">
+                                  {{action.dcpName}}
+                                  <small>{{action.dcpUlurpnumber}}</small>
+                                </span>
                               </span>
                             {{/if}}
                           {{/each}}

diff --git a/client/app/templates/components/to-review-project-card.hbs b/client/app/templates/components/to-review-project-card.hbs
@@ -131,9 +131,11 @@
                     <small data-test-hearing-actions-list="{{hearing.disposition.id}}">
                       {{#each hearing.hearingActions as |action index| ~}}
                         {{#if action.dcpName}}
-                          <span class="label light-gray tiny-margin-bottom tiny-margin-right">
-                            {{action.dcpName}}
-                            <small>{{action.dcpUlurpnumber}}</small>
+                          <span class="{{center-lengthy-text action.dcpName}}">
+                            <span class="label light-gray tiny-margin-bottom tiny-margin-right">
+                              {{action.dcpName}}
+                              <small>{{action.dcpUlurpnumber}}</small>
+                            </span>
                           </span>
                         {{/if}}
                       {{~/each}}

diff --git a/client/app/templates/components/upcoming-project-card.hbs b/client/app/templates/components/upcoming-project-card.hbs
@@ -118,9 +118,11 @@
                     <small data-test-hearing-actions-list="{{hearing.disposition.id}}">
                       {{#each hearing.hearingActions as |action index| ~}}
                         {{#if action.dcpName}}
-                          <span class="label light-gray tiny-margin-bottom tiny-margin-right">
-                            {{action.dcpName}}
-                            <small>{{action.dcpUlurpnumber}}</small>
+                          <span class="{{center-lengthy-text action.dcpName}}">
+                            <span class="label light-gray tiny-margin-bottom tiny-margin-right">
+                              {{action.dcpName}}
+                              <small>{{action.dcpUlurpnumber}}</small>
+                            </span>
                           </span>
                         {{/if}}
                       {{~/each}}

diff --git a/client/app/templates/my-projects/assignment/hearing/add.hbs b/client/app/templates/my-projects/assignment/hearing/add.hbs
@@ -161,9 +161,11 @@
                       <div class="text-tiny" data-test-hearing-actions-list="{{hearing.disposition.id}}">
                         {{#each hearing.hearingActions as |action index| ~}}
                           {{#if action.dcpName}}
-                            <span class="label light-gray tiny-margin-bottom tiny-margin-right">
-                              {{action.dcpName}}
-                              <small>{{action.dcpUlurpnumber}}</small>
+                            <span class="{{center-lengthy-text action.dcpName}}">
+                              <span class="label light-gray tiny-margin-bottom tiny-margin-right">
+                                {{action.dcpName}}
+                                <small>{{action.dcpUlurpnumber}}</small>
+                              </span>
                             </span>
                           {{/if}}
                         {{~/each}}

diff --git a/client/app/templates/my-projects/assignment/recommendations/add.hbs b/client/app/templates/my-projects/assignment/recommendations/add.hbs
@@ -61,9 +61,11 @@
                       <small data-test-hearing-actions-list="{{hearing.disposition.id}}">
                         {{#each hearing.hearingActions as |action index| ~}}
                           {{#if action.dcpName}}
-                            <span class="label light-gray tiny-margin-bottom tiny-margin-right">
-                              {{action.dcpName}}
-                              <small>{{action.dcpUlurpnumber}}</small>
+                            <span class="{{(center-lengthy-text action.dcpName}}">
+                              <span class="label light-gray tiny-margin-bottom tiny-margin-right">
+                                {{action.dcpName}}
+                                <small>{{action.dcpUlurpnumber}}</small>
+                              </span>
                             </span>
                           {{/if}}
                         {{~/each}}
@@ -556,9 +558,11 @@
                           <small data-test-hearing-actions-list="{{hearing.disposition.id}}">
                             {{#each hearing.hearingActions as |action index| ~}}
                               {{#if action.dcpName}}
-                                <span class="label light-gray tiny-margin-bottom tiny-margin-right">
-                                  {{action.dcpName}}
-                                  <small>{{action.dcpUlurpnumber}}</small>
+                                <span class="{{center-lengthy-text action.dcpName}}">
+                                  <span class="label light-gray tiny-margin-bottom tiny-margin-right">
+                                    {{action.dcpName}}
+                                    <small>{{action.dcpUlurpnumber}}</small>
+                                  </span>
                                 </span>
                               {{/if}}
                             {{~/each}}