(production) Elections Card, Recurring Dates, Icon linking and Captcha

Signed-off-by: davidrkupton <[email protected]>
CityOfBoston · Oct 9, 2024 · eff4b53 · eff4b53
1 parent b001abc
commit eff4b53
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 43 deletions.
diff --git a/config/default/webform.webform.website_feedback_form.yml b/config/default/webform.webform.website_feedback_form.yml
@@ -60,7 +60,6 @@ elements: |-
         captcha:
           '#type': captcha
           '#captcha_type': recaptcha/reCAPTCHA
-          '#captcha_admin_mode': true
         actions:
           '#type': webform_actions
           '#title': 'Submit button(s)'

diff --git a/...les/node_elections/templates/paragraph--election-contest-results--election-card.html.twig b/...les/node_elections/templates/paragraph--election-contest-results--election-card.html.twig
@@ -47,56 +47,56 @@
           <caption class="visually-hidden">Unofficail election results total ballots and votes</caption>
           <thead>
           <tr>
-            <th>Ballots Cast:
+            <th class="bos-contest-results-ballotscast">Ballots Cast:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Ballots cast represents the amount of people that cast a ballot."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <th>Total Votes:
+            <th class="bos-contest-results-totalvotes">Total Votes:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Total votes represents the total amount of votes for all candidates, including write-in votes."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <th>Undervotes:
+{#             <th class="bos-contest-results-undervotes">Undervotes:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Ballots not counted because of unclear marking by voters."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <th>Overvotes:
+            <th class="bos-contest-results-overvotes">Overvotes:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Ballots where a voter selected more candidates than the number of candidates you are permitted to vote for in that particular office race."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
-            </th>
+            </th>   #}
           </tr>
           </thead>
           <tbody>
           <tr>
-            <td data-label="ballots">{{ content.field_contest_ballots }}</td>
-            <td data-label="total Votes">{{ content.field_calc_total_votes }}</td>
-            <td data-label="undervotes">{{ content.field_contest_undervotes }}</td>
-            <td data-label="overvotes">{{ content.field_contest_overvotes }}</td>
+            <td data-label="ballots" class="contest-results-ballotscast">{{ content.field_contest_ballots }}</td>
+            <td data-label="total Votes" class="contest-results-totalvotes">{{ content.field_calc_total_votes }}</td>
+{#             <td data-label="undervotes" class="contest-results-undervotes">{{ content.field_contest_undervotes }}</td>
+            <td data-label="overvotes" class="contest-results-overvotes">{{ content.field_contest_overvotes }}</td> #}
           </tr>
           </tbody>
         </table>
         <table class="vertical-responsive-table table-mobile">
-          <caption class="visually-hidden">Unofficail election results total ballots and votes</caption>
+          <caption class="visually-hidden">Unofficial election results total ballots and votes</caption>
           <tbody>
           <tr>
-            <th>Ballots Cast:
+            <th class="contest-results-ballotscast">Ballots Cast:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Ballots cast represents the amount of people that cast a ballot."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <td>{{ content.field_contest_ballots }}</td>
+            <td class="contest-results-ballotscast">{{ content.field_contest_ballots }}</td>
           </tr>
           <tr>
-            <th>Total Votes:
+            <th class="contest-results-totalvotes">Total Votes:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Total votes represents the total amount of votes for all candidates, including write-in votes."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <td>{{ content.field_calc_total_votes }}</td>
+            <td class="contest-results-totalvotes">{{ content.field_calc_total_votes }}</td>
           </tr>
-          <tr>
-            <th>Undervotes:
+{#           <tr>
+            <th class="contest-results-undervotes">Undervotes:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Ballots not counted because of unclear marking by voters."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <td>{{ content.field_contest_undervotes }}</td>
+            <td class="contest-results-undervotes">{{ content.field_contest_undervotes }}</td>
           </tr>
           <tr>
-            <th>Overvotes:
+            <th class="contest-results-overvotes">Overvotes:
               <span tabindex="0" class="di-tt di-tt-data-tooltip explainer-icon" data-tooltip="Ballots where a voter selected more candidates than the number of candidates you are permitted to vote for in that particular office race."><svg class="explainer-icon" title="explainer icon" width="17" style="width:17px;display: inline-block;" id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><circle id="b" cx="8.5" cy="8.5" r="8.5" fill="#fff"/><g id="c" transform="translate(1 1)" isolation="isolate"><g isolation="isolate"><path d="M9.47,6.99c0-.59-.52-.96-1.3-.96s-1.35,.34-1.74,.89l-1.45-.85c.65-.98,1.78-1.61,3.39-1.61,1.8,0,3.05,.8,3.05,2.22,0,1.92-2.02,2.13-2.02,3.41h-1.81c0-1.68,1.87-2.05,1.87-3.1Zm-2.11,5.01c0-.61,.48-1.07,1.15-1.07s1.15,.46,1.15,1.07-.48,1.09-1.15,1.09-1.15-.49-1.15-1.09Z" fill="#0c1f2e"/></g></g></svg></span>
             </th>
-            <td>{{ content.field_contest_overvotes }}</td>
-          </tr>
+            <td class="contest-results-overvotes">{{ content.field_contest_overvotes }}</td>
+          </tr> #}
           </tbody>
         </table>
       </div>

diff --git a/docroot/themes/custom/bos_admin/bos_admin.libraries.yml b/docroot/themes/custom/bos_admin/bos_admin.libraries.yml
@@ -2,8 +2,8 @@ global-styling:
   version: VERSION
   css:
     theme:
-      css/bos_admin.css: {weight: 300}
-      css/bos_admin.media.css: {weight: 301}
+      css/bos_admin.css: {weight: 302}
+      css/bos_admin.media.css: {weight: 303}
 
 workbench:
   version: VERSION

diff --git a/docroot/themes/custom/bos_admin/css/bos_admin.css b/docroot/themes/custom/bos_admin/css/bos_admin.css
@@ -1197,15 +1197,7 @@ What: Helper for status_display preview - restricts icon sizing.
   margin-right: 0;
   margin-left: auto;
 }
-@media screen and (min-width: 840px)
-.g--6:last-child {
-  margin-right: 0;
-}
-@media screen and (min-width: 840px)
-.g--6:nth-child(1n) {
-  margin-right: 1.5rem;
-  margin-left: 0;
-}
+@media screen and (min-width: 840px) {
 .g--6:last-child {
   margin-right: 0;
 }
@@ -1214,7 +1206,6 @@ What: Helper for status_display preview - restricts icon sizing.
   margin-right: 1.5rem;
   margin-left: 0;
 }
-@media screen and (min-width: 840px)
 .g--6 {
   -webkit-box-flex: 0;
   -ms-flex-positive: 0;
@@ -1226,6 +1217,7 @@ What: Helper for status_display preview - restricts icon sizing.
   max-width: calc(99.9% * 6/12 - 0.75rem);
   width: calc(99.9% * 6/12 - 0.75rem);
 }
+}
 .cds-l {
   background-color: #fff;
   display: -webkit-box;
@@ -1581,6 +1573,9 @@ Hide default contact info
   width: 48%;
   vertical-align: sub;
 }
+.js-form-item-field-event-date-recur-0-ends-mode.form-item-field-event-date-recur-0-ends-mode {
+  display: none;
+}
 @media screen and (max-width: 1300px) {
   .field-group-html-element .field--name-field-contact {
     display: block;

diff --git a/docroot/themes/custom/bos_theme/bos_theme.theme b/docroot/themes/custom/bos_theme/bos_theme.theme
@@ -752,12 +752,16 @@ function bos_theme_preprocess_image(&$variables) {
       $path = \Drupal::request()->getSchemeAndHttpHost();
       $variables['uri'] = str_replace("https://assets.boston.gov/icons", $path . "/themes/custom/patterns/assets/icons", $variables['uri']);
     }
+    $variables['attributes']->addClass("svg-icon");
+    /*
+     * TODO: Review if the rest of the code in that hook is still actually required.
+     */
     // Load the icon.
-    $icon = file_get_contents($variables['uri']);
+    //$icon = file_get_contents($variables['uri']);
     // If the icon is in the format //domain/file then add scheme.
-    $icon = preg_replace(['/<\?xml.*\?>/i', '/<!DOCTYPE((.|\n|\r)*?)">/i'], '', $icon);
-    $variables['icon'] = Xss::filter($icon, explode(' ', BOS_CORE_SVG_ELEMENTS));
-    $variables['attributes']->removeAttribute("src");
+    /*$icon = preg_replace(['/<\?xml.*\?>/i', '/<!DOCTYPE((.|\n|\r)*?)">/i'], '', $icon);*/
+    //$variables['icon'] = Xss::filter($icon, explode(' ', BOS_CORE_SVG_ELEMENTS));
+    //$variables['attributes']->removeAttribute("src");
   }
 
 }

diff --git a/docroot/themes/custom/bos_theme/css/bos_theme_overrides.css b/docroot/themes/custom/bos_theme/css/bos_theme_overrides.css
@@ -588,6 +588,19 @@ What:  Now using svg image we cannot add a class to the <img> tag.  So set css o
   max-width: 85%;
   width: 100px;
 }
+@media screen and (max-width: 767px) {
+  .paragraphs-item-transaction-grid img.svg-icon {
+    max-height: 55px;
+    display: block;
+    max-width: 85%;
+    width: 75px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .paragraphs-item-transaction-grid img.svg-icon {
+    width: 55px;
+  }
+}
 
 /*
 David:  D8 Issue#408.
@@ -709,10 +722,14 @@ a .cdd-ic {
   min-width: 95px;
   max-width: 95px;
 }
-a .cdd-c svg {
+a .cdd-c svg, a .cdd-c img.svg-icon {
   height: 56px;
   width: 56px;
 }
+.department-icon img.svg-icon {
+  height: 76px;
+  width: 76px;
+}
 
 /*
 David:
@@ -775,11 +792,6 @@ David:
 Where: node--department-profile.html.twig
 What: Fixes the department icon to be 100px square. (Iterators issue #39)
 */
-@media screen and  (min-width: 980px) {
-  .node-type-department-profile .department-icon {
-    padding: 13px 0 0 15px;
-  }
-}
 .node-department-profile .department-icon svg {
   height: 76px;
   width: 76px;