From: Rich Lott / Artful Robot <code.commits@artfulrobot.uk>
Date: Thu, 7 Dec 2023 09:48:40 +0000 (+0000)
Subject: standalone: fix double <h1> and padding on select2 drops dev/core#4831
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=e98988cbc45cbc31111e6b1edee06bf4768a4d5b;p=civicrm-core.git

standalone: fix double <h1> and padding on select2 drops dev/core#4831
---

diff --git a/ang/crmUi.js b/ang/crmUi.js
index 8bc3229ed2..68fadc23bb 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -2,7 +2,7 @@
 (function (angular, $, _) {
 
   var uidCount = 0,
-    pageTitle = 'CiviCRM',
+    pageTitleHTML = 'CiviCRM',
     documentTitle = 'CiviCRM';
 
   angular.module('crmUi', CRM.angRequires('crmUi'))
@@ -1186,7 +1186,7 @@
     // WARNING: Use only once per route!
     // WARNING: This directive works only if your AngularJS base page does not
     // set a custom title (i.e., it has an initial title of "CiviCRM"). See the
-    // global variables pageTitle and documentTitle.
+    // global variables pageTitleHTML and documentTitle.
     // Example (same title for both): <h1 crm-page-title>{{ts('Hello')}}</h1>
     // Example (separate document title): <h1 crm-document-title="ts('Hello')" crm-page-title><i class="crm-i fa-flag" aria-hidden="true"></i>{{ts('Hello')}}</h1>
     .directive('crmPageTitle', function($timeout) {
@@ -1197,27 +1197,22 @@
         link: function(scope, $el, attrs) {
           function update() {
             $timeout(function() {
-              var newPageTitle = _.trim($el.html()),
+              var newPageTitleHTML = $el.html().trim(),
                 newDocumentTitle = scope.crmDocumentTitle || $el.text(),
-                h1Count = 0,
                 dialog = $el.closest('.ui-dialog-content');
               if (dialog.length) {
                 dialog.dialog('option', 'title', newDocumentTitle);
                 $el.hide();
               } else {
                 document.title = $('title').text().replace(documentTitle, newDocumentTitle);
-                // If the CMS has already added title markup to the page, use it
-                $('h1').not('.crm-container h1').each(function () {
-                  if ($(this).hasClass('crm-page-title') || _.trim($(this).html()) === pageTitle) {
-                    $(this).addClass('crm-page-title').html(newPageTitle);
+                [].forEach.call(document.querySelectorAll('h1:not(.crm-container h1), .crm-page-title-wrapper>h1'), h1 => {
+                  if (h1.classList.contains('crm-page-title') || h1.innerHTML.trim() === pageTitleHTML) {
+                    h1.classList.add('crm-page-title');
+                    h1.innerHTML = newPageTitleHTML;
                     $el.hide();
-                    ++h1Count;
                   }
                 });
-                if (!h1Count) {
-                  $el.show();
-                }
-                pageTitle = newPageTitle;
+                pageTitleHTML = newPageTitleHTML;
                 documentTitle = newDocumentTitle;
               }
             });
diff --git a/ext/standaloneusers/css/standalone.css b/ext/standaloneusers/css/standalone.css
index 9093579fe7..6ca07724e7 100644
--- a/ext/standaloneusers/css/standalone.css
+++ b/ext/standaloneusers/css/standalone.css
@@ -1,4 +1,4 @@
-html.crm-standalone body>.crm-container {
+.standalone-page-padding {
   padding: 1px 3vw 1rem;
 }
 
diff --git a/templates/CRM/common/standalone.tpl b/templates/CRM/common/standalone.tpl
index 75f7382abd..a41444d1c5 100644
--- a/templates/CRM/common/standalone.tpl
+++ b/templates/CRM/common/standalone.tpl
@@ -27,7 +27,7 @@
   {include file="CRM/common/debug.tpl"}
   {/if}
 
-  <div id="crm-container" class="crm-container" lang="{$config->lcMessages|substr:0:2}" xml:lang="{$config->lcMessages|substr:0:2}">
+  <div id="crm-container" class="crm-container standalone-page-padding" lang="{$config->lcMessages|substr:0:2}" xml:lang="{$config->lcMessages|substr:0:2}">
     {if $breadcrumb}
       <nav aria-label="{ts}Breadcrumb{/ts}" class="breadcrumb"><ol>
         <li><a href="/civicrm/dashboard?reset=1" >{ts}Home{/ts}</a></li>
@@ -44,8 +44,8 @@
     {/if}
 
     {if $pageTitle}
-      <div class="crm-title">
-        <h1 class="title">{if $isDeleted}<del>{/if}{$pageTitle}{if $isDeleted}</del>{/if}</h1>
+      <div class="crm-page-title-wrapper">
+        <h1 class="crm-page-title">{$pageTitle}</h1>
       </div>
     {/if}