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

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);

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;
+}

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}}

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}}

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}}

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}}

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}}

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}}