Ticket #4963 - Double "close" link in view profile picture popup on mobile.

modules/base/profile/classes/BxBaseModProfileTemplate.php

@@ -520,17 +520,11 @@ class BxBaseModProfileTemplate extends BxBaseModGeneralTemplate
                 'cover_settins' => isset($CNF['FIELD_PICTURE_POSITION']) ? $this->_getImageSettings($aData[$CNF['FIELD_PICTURE_POSITION']]) : '',
                 'picture_href' => !$aData[$CNF['FIELD_PICTURE']] && CHECK_ACTION_RESULT_ALLOWED === $oModule->checkAllowedEdit($aData) ? $sUrlPictureChange : 'javascript:void(0);',
             );
-            
+
             if($bProfileViewAllowed && $aData[$CNF['FIELD_PICTURE']]) {
-                $sPicturePopup = BxTemplFunctions::getInstance()->transBox($sPicturePopupId, $this->parseHtmlByName('image_popup.html', array (
+                $sPicturePopup = BxTemplFunctions::getInstance()->transBox($sPicturePopupId, $this->parseHtmlByName('image_popup.html', [
                     'image_url' => $sUrlPicture,
-                    'bx_if:owner' => array (
-                        'condition' => false,
-                        'content' => array (
-                            'change_image_url' => $sUrlPictureChange,
-                        ),
-                    ),
-                )), true, true);
+                ]), true, true);
             }
         }
 

modules/base/profile/template/image_popup.html

@@ -1,12 +1,3 @@
 <div class="bx-base-pofile-popup-wrapper">
-    <div class="bx-base-pofile-popup-btn bx-def-padding">
-        <bx_if:owner>
-            <a class="bx-btn" href="__change_image_url__"><bx_text:_sys_txt_change_image /></a>
-        </bx_if:owner>
-        <a class="bx-btn bx-def-margin-sec-left" title="<bx_text_attribute:_sys_close />" href="javascript:void(0);" onclick="$(this).parents().filter('.bx-popup-wrapper').dolPopupHide()">
-            <bx_image_auto:times />
-        </a>
-    </div>
-
-    <img class="bx-base-pofile-popup-image" src="__image_url__" />
+    <img class="bx-base-pofile-popup-image bx-def-border-radius-block" src="__image_url__" />
 </div>

modules/boonex/artificer/data/template/system/css/common.css

@@ -276,6 +276,10 @@ body.bx-popup-lock {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }
+.bx-popup-image-wrapper .bx-def-border-radius-block {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
 
 
 /*--- Loading indicator ---*/

template/css/common.css

@@ -539,9 +539,9 @@ body > .bx-popup-wrapper {
     position: relative;
     line-height: 1.2rem;
 }
-.bx-popup-image-wrapper .bx-popup-close-wrapper,
-.bx-popup-image-wrapper .bx-popup-element-close {
-    display:none;
+.bx-popup-image-wrapper .bx-def-border-radius-block {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
 }
 
 #bx-popup-alert,

template/css/media-phone.css

@@ -79,15 +79,12 @@ html.bx-media-phone {
 }
 
 .bx-media-phone .bx-popup-responsive,
-.bx-media-phone .bx-popup-responsive .bx-popup-trans > div,
 .bx-media-phone .bx-popup-responsive .bx-popup-box > div {
     border-radius:0;
     -moz-border-radius:0;
     -webkit-border-radius:0;
 }
 
-.bx-media-phone .bx-popup-responsive.bx-popup-image-wrapper:not(.foo) .bx-popup-border,
-.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper:not(.foo) .bx-popup-border,
 .bx-media-phone .bx-popup-responsive.bx-popup-box-wrapper:not(.foo) .bx-popup-border {
     border:none;
     border-radius:0;
@@ -98,8 +95,8 @@ html.bx-media-phone {
 .bx-media-phone .bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
 .bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
 .bx-media-phone .bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
-	-moz-box-shadow:none;
-	-webkit-box-shadow:none;
+    -moz-box-shadow:none;
+    -webkit-box-shadow:none;
     box-shadow:none;
 }
 

template/popup_box.html

@@ -1,18 +1,16 @@
 <div id="__id__" class="bx-popup-wrapper bx-popup-box-wrapper bx-def-box-sizing" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
     <!--<div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>-->
     <div class="bx-popup bx-popup-box bx-popup-width bx-popup-color-bg bx-popup-border bx-def-round-corners">
-    <div class="bx-def-round-corners" style="overflow:hidden;">
-        <div class="bx-popup-header bx-popup-header-color-bg bx-def-padding bx-def-font-contrasted">
-            <h2 id="__id___title">__title__</h2>
-            <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-contrasted bx-def-margin">
-                <div class="bx-icon bx-icon-close">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                </div>
-            </a>
+        <div class="bx-def-round-corners" style="overflow:hidden;">
+            <div class="bx-popup-header bx-popup-header-color-bg bx-def-padding bx-def-font-contrasted">
+                <h2 id="__id___title">__title__</h2>
+                <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-contrasted bx-def-margin">
+                    <div class="bx-icon bx-icon-close">
+                        <bx_image_auto:times />
+                    </div>
+                </a>
+            </div>
+            <div class="bx-popup-content bx-def-padding">__content__</div>
         </div>
-        <div class="bx-popup-content bx-def-padding">__content__</div>
-    </div>
     </div>
 </div>

template/popup_trans.html

@@ -1,7 +1,7 @@
 <div  id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper box-border __wrapper_class__" style="__wrapper_style__" role="alert">
     <div class="bx-popup-gap mx-4 my-px">
         <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg">
-            <div class="bx-popup-close-wrapper bx-def-media-desktop-hide bx-def-media-tablet-hide relative pt-2 px-2 text-right">
+            <div class="bx-popup-close-wrapper bx-def-media-desktop-hide bx-def-media-tablet-hide relative flex justify-end p-2">
                 <a href="javascript:void(0);" class="bx-popup-element-close flex items-center justify-center w-6 h-6 text-base text-gray-800 dark:text-gray-100">
                     <div class="bx-icon bx-icon-close">
                         <bx_image_auto:times />