Skip to content
Snippets Groups Projects
Commit ae6e49c4 authored by Omar Alemailat's avatar Omar Alemailat
Browse files

Issue #3490949: Change style for Want help icon

parent eb6fd962
No related branches found
No related tags found
4 merge requests!10Issue #3479817: Uncaught PHP Exception Error: "Call to a member function...,!9Issue #3490949: Change style for Want help icon,!8Issue #3479817: Uncaught PHP Exception Error: "Call to a member function...,!7Issue #3479817: Uncaught PHP Exception Error: "Call to a member function...
Hide whitespace changes
Inline Side-by-side
assets/css/editing-helper.css
+ 68
− 2
View file @ ae6e49c4
.editing-helper-block .help-wrapper{margin-bottom:8px}.editing-helper-block .toggle-help{background-color:#df000f;border:none;border-radius:5px;box-shadow:0 4px 6px rgba(#df000f,.4);color:#fff;cursor:pointer;font-size:14px;margin-bottom:15px;padding:6px 12px;pointer-events:all!important;transition:background-color .3s ease}.editing-helper-block .toggle-help:hover{background-color:#a0040e}.editing-helper-block .help-content{background-color:#e9ecef;border-radius:6px;box-shadow:0 4px 8px rgba(0,0,0,.1);max-height:0;overflow:hidden;padding:0 15px;transition:max-height .3s ease-in-out;visibility:hidden}.editing-helper-block .help-content p{color:#333;font-size:14px;margin:0}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWxlL2VkaXRpbmctaGVscGVyLnBjc3MuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNFLG9DQUNFLGlCQUNGLENBQ0EsbUNBQ0Usd0JBQXlCLENBR3pCLFdBQVksQ0FDWixpQkFBa0IsQ0FJbEIscUNBQXdDLENBUHhDLFVBQVcsQ0FLWCxjQUFlLENBRGYsY0FBZSxDQUtmLGtCQUFtQixDQVJuQixnQkFBaUIsQ0FPakIsNEJBQThCLENBRjlCLG9DQUlGLENBRUEseUNBQ0Usd0JBQ0YsQ0FFQSxvQ0FDRSx3QkFBeUIsQ0FDekIsaUJBQWtCLENBQ2xCLG1DQUF3QyxDQUV4QyxZQUFhLENBRGIsZUFBZ0IsQ0FFaEIsY0FBZSxDQUVmLHFDQUF1QyxDQUR2QyxpQkFFRixDQUVBLHNDQUdFLFVBQVcsQ0FEWCxjQUFlLENBRGYsUUFHRiIsImZpbGUiOiJlZGl0aW5nLWhlbHBlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZWRpdGluZy1oZWxwZXItYmxvY2sge1xuICAuaGVscC13cmFwcGVyIHtcbiAgICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIH1cbiAgLnRvZ2dsZS1oZWxwIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGYwMDBmO1xuICAgIGNvbG9yOiAjZmZmO1xuICAgIHBhZGRpbmc6IDZweCAxMnB4O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTtcbiAgICBib3gtc2hhZG93OiAwIDRweCA2cHggcmdiYSgjZGYwMDBmLCAwLjQpO1xuICAgIHBvaW50ZXItZXZlbnRzOiBhbGwgIWltcG9ydGFudDtcbiAgICBtYXJnaW4tYm90dG9tOiAxNXB4O1xuICB9XG5cbiAgLnRvZ2dsZS1oZWxwOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYTAwNDBlO1xuICB9XG5cbiAgLmhlbHAtY29udGVudCB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2U5ZWNlZjtcbiAgICBib3JkZXItcmFkaXVzOiA2cHg7XG4gICAgYm94LXNoYWRvdzogMCA0cHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIG1heC1oZWlnaHQ6IDA7XG4gICAgcGFkZGluZzogMCAxNXB4O1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICB0cmFuc2l0aW9uOiBtYXgtaGVpZ2h0IDAuM3MgZWFzZS1pbi1vdXQ7XG4gIH1cblxuICAuaGVscC1jb250ZW50IHAge1xuICAgIG1hcmdpbjogMDtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gICAgY29sb3I6ICMzMzM7XG4gIH1cbn1cbiJdfQ== */ .editing-helper-block .help-wrapper {
\ No newline at end of file position: relative;
margin-bottom: 8px;
width: -moz-fit-content;
width: fit-content;
font-size: 14px;
}
.editing-helper-block .toggle-help {
background-color: #df000f;
border: none;
cursor: pointer;
margin-bottom: 15px;
border-radius: 50%;
background-image: url(../../assets/icons/question-icon.svg);
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
}
.editing-helper-block .toggle-help:hover {
background-color: #a0040e;
}
.editing-helper-block .help-content {
position: absolute;
top: 0;
left: calc(100% + 15px);
width: 320px;
z-index: 5;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 24px;
display: none;
color: #002856;
}
.editing-helper-block .help-content h2 {
font-size: 18px;
color: #002856;
}
.editing-helper-block .help-content span {
color: rgba(0,40,86,0.50196);
}
.editing-helper-block .help-content.active {
display: block;
}
.editing-helper-block .help-content p {
margin: 0;
}
.editing-helper-block .top-content {
display: flex;
justify-content: space-between;
}
.editing-helper-block .helper-close-btn {
background-image: url(../../assets/icons/close-btn.svg);
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
[dir="rtl"] .editing-helper-block .help-content {
right: calc(100% + 15px);
left: auto;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWxlL2VkaXRpbmctaGVscGVyLnBjc3MuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7RUFDRTtJQUNFLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsdUJBQWtCO0lBQWxCLGtCQUFrQjtJQUNsQixlQUFlO0VBQ2pCO0FBQ0E7SUFDRSx5QkFBeUI7SUFDekIsWUFBWTtJQUNaLGVBQWU7SUFDZixtQkFBbUI7SUFDbkIsa0JBQWtCO0lBQ2xCLDJEQUEyRDtJQUMzRCxXQUFXO0lBQ1gsWUFBWTtJQUNaLDRCQUE0QjtJQUM1QiwyQkFBMkI7RUFDN0I7QUFDQTtJQUNFLHlCQUF5QjtFQUMzQjtBQUVBO0lBQ0Usa0JBQWtCO0lBQ2xCLE1BQU07SUFDTix1QkFBdUI7SUFDdkIsWUFBWTtJQUNaLFVBQVU7SUFDVix1QkFBdUI7SUFDdkIsa0JBQWtCO0lBQ2xCLHdDQUF3QztJQUN4QyxnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLGFBQWE7SUFDYixjQUFjO0VBQ2hCO0FBRUE7SUFDRSxlQUFlO0lBQ2YsY0FBYztFQUNoQjtBQUNBO0lBQ0UsNEJBQWdCO0VBQ2xCO0FBQ0E7SUFDRSxjQUFjO0VBQ2hCO0FBRUE7SUFDRSxTQUFTO0VBQ1g7QUFDQTtJQUNFLGFBQWE7SUFDYiw4QkFBOEI7RUFDaEM7QUFDQTtJQUNFLHVEQUF1RDtJQUN2RCxXQUFXO0lBQ1gsWUFBWTtJQUNaLDRCQUE0QjtJQUM1QiwyQkFBMkI7SUFDM0IsZUFBZTtFQUNqQjtBQUVGO0VBQ0Usd0JBQXdCO0VBQ3hCLFVBQVc7QUFDYiIsImZpbGUiOiJlZGl0aW5nLWhlbHBlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZWRpdGluZy1oZWxwZXItYmxvY2sge1xuICAuaGVscC13cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgbWFyZ2luLWJvdHRvbTogOHB4O1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gIH1cbiAgLnRvZ2dsZS1oZWxwIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGYwMDBmO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbWFyZ2luLWJvdHRvbTogMTVweDtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKC4uLy4uL2Fzc2V0cy9pY29ucy9xdWVzdGlvbi1pY29uLnN2Zyk7XG4gICAgd2lkdGg6IDMycHg7XG4gICAgaGVpZ2h0OiAzMnB4O1xuICAgIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyO1xuICB9XG4gIC50b2dnbGUtaGVscDpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2EwMDQwZTtcbiAgfVxuXG4gIC5oZWxwLWNvbnRlbnQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogY2FsYygxMDAlICsgMTVweCk7XG4gICAgd2lkdGg6IDMyMHB4O1xuICAgIHotaW5kZXg6IDU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xuICAgIGJveC1zaGFkb3c6IDAgNHB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwYWRkaW5nOiAyNHB4O1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgY29sb3I6ICMwMDI4NTY7XG4gIH1cblxuICAuaGVscC1jb250ZW50IGgyIHtcbiAgICBmb250LXNpemU6IDE4cHg7XG4gICAgY29sb3I6ICMwMDI4NTY7XG4gIH1cbiAgLmhlbHAtY29udGVudCBzcGFuIHtcbiAgICBjb2xvcjogIzAwMjg1NjgwO1xuICB9XG4gIC5oZWxwLWNvbnRlbnQuYWN0aXZlIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuXG4gIC5oZWxwLWNvbnRlbnQgcCB7XG4gICAgbWFyZ2luOiAwO1xuICB9XG4gIC50b3AtY29udGVudCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIH1cbiAgLmhlbHBlci1jbG9zZS1idG4ge1xuICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCguLi8uLi9hc3NldHMvaWNvbnMvY2xvc2UtYnRuLnN2Zyk7XG4gICAgd2lkdGg6IDE0cHg7XG4gICAgaGVpZ2h0OiAxNHB4O1xuICAgIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuW2Rpcj1cInJ0bFwiXSAuZWRpdGluZy1oZWxwZXItYmxvY2sgLmhlbHAtY29udGVudCB7XG4gIHJpZ2h0OiBjYWxjKDEwMCUgKyAxNXB4KTtcbiAgbGVmdDogdW5zZXQ7XG59XG4iXX0= */
\ No newline at end of file
assets/icons/close-btn.svg 0 → 100644
+ 5
− 0
View file @ ae6e49c4
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.227806 0.227806C0.531547 -0.0759353 1.02401 -0.0759353 1.32775 0.227806L7 5.90006L12.6723 0.227806C12.976 -0.0759349 13.4685 -0.0759349 13.7722 0.227806C14.0759 0.531547 14.0759 1.02401 13.7722 1.32775L8.09994 7L13.7722 12.6723C14.0759 12.976 14.0759 13.4685 13.7722 13.7722C13.4685 14.0759 12.976 14.0759 12.6723 13.7722L7 8.09994L1.32775 13.7722C1.02401 14.0759 0.531547 14.0759 0.227806 13.7722C-0.0759353 13.4685 -0.0759353 12.976 0.227806 12.6723L5.90006 7L0.227806 1.32775C-0.0759349 1.02401 -0.0759349 0.531547 0.227806 0.227806Z"
fill="#000" />
</svg>
\ No newline at end of file
assets/icons/question-icon.svg 0 → 100644
+ 5
− 0
View file @ ae6e49c4
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="22" viewBox="0 0 14 22" fill="none">
<path
d="M13.08 5.79104C13.08 6.74322 12.8726 7.62538 12.4716 8.40952C12.0844 9.16566 11.4483 9.96381 10.6048 10.776C9.5815 11.7701 9.2358 12.2882 9.13901 12.5543C9.04221 12.8203 8.90393 13.3944 8.87628 14.5427C8.87628 14.8227 8.6412 15.0467 8.36464 15.0467H5.66818C5.37779 15.0467 5.15655 14.8087 5.15655 14.5286C5.15655 13.9125 5.19803 13.3104 5.29483 12.7083C5.37779 12.2042 5.48842 11.7841 5.65435 11.4481C5.91709 10.874 6.35958 10.2859 7.0095 9.64175C7.12012 9.52973 7.23074 9.43171 7.3552 9.31969C8.07425 8.66157 8.6412 8.04546 9.01455 7.48535C9.36025 6.98126 9.52619 6.44916 9.52619 5.88906C9.52619 5.20293 9.30494 4.65683 8.87628 4.20875C8.44761 3.76067 7.82535 3.55063 7.02332 3.55063H6.98184C6.19365 3.55063 5.59904 3.76067 5.19803 4.19475C4.74171 4.68484 4.40983 5.18893 4.20241 5.70703C4.09179 5.97308 3.8014 6.0991 3.53867 6.00108C3.53867 6.00108 3.53867 6.00108 3.52484 6.00108L1.2294 4.9929C0.980494 4.88087 0.856042 4.60082 0.952838 4.33477C1.16026 3.76067 1.45065 3.21457 1.81017 2.72448C2.18353 2.22039 2.62602 1.7583 3.12383 1.36623C4.1471 0.540076 5.44693 0.119999 6.95419 0.119999H6.99567C8.90393 0.119999 10.4112 0.680102 11.4759 1.78631C12.5269 2.89251 13.08 4.23676 13.08 5.79104ZM6.95419 17.0351C5.6267 17.0351 4.56194 18.1273 4.56194 19.4576C4.56194 20.7878 5.64053 21.88 6.95419 21.88C8.26784 21.88 9.34643 20.7878 9.34643 19.4576C9.34643 18.1273 8.26784 17.0351 6.95419 17.0351Z"
fill="white" />
</svg>
\ No newline at end of file
assets/js/editing-helper.js
+ 5
− 18
View file @ ae6e49c4
...@@ -6,10 +6,9 @@ ...@@ -6,10 +6,9 @@
Drupal.behaviors.help_description = { Drupal.behaviors.help_description = {
attach: function (context, settings) { attach: function (context, settings) {
const parentElements = document.querySelectorAll(".editing-helper-block"); // Select all help sections const parentElements = document.querySelectorAll(".editing-helper-block"); // Select all help sections
parentElements.forEach((parentElement) => { parentElements.forEach((parentElement) => {
const helpContent = parentElement.querySelector(".help-content"); // Get the specific help content for each section const helpContent = parentElement.querySelector(".help-content"); // Get the specific help content for each section
let closeBtn = parentElement.querySelector(".helper-close-btn");
if (helpContent) { if (helpContent) {
// Check if the event listener is already attached // Check if the event listener is already attached
if (!parentElement.getAttribute("data-listener-attached")) { if (!parentElement.getAttribute("data-listener-attached")) {
...@@ -20,27 +19,15 @@ ...@@ -20,27 +19,15 @@
// Check if the clicked element is the toggle button // Check if the clicked element is the toggle button
if (clickedElement.classList.contains("toggle-help")) { if (clickedElement.classList.contains("toggle-help")) {
// Prevent any parent events from being triggered // Prevent any parent events from being triggered
event.stopPropagation(); helpContent.classList.toggle("active");
// Toggle the help content
if (
helpContent.style.visibility === "hidden" ||
helpContent.style.visibility === ""
) {
helpContent.style.visibility = "visible";
helpContent.style.maxHeight = helpContent.scrollHeight + "px"; // Expand smoothly
} else {
helpContent.style.maxHeight = 0; // Collapse smoothly
setTimeout(function () {
helpContent.style.visibility = "hidden";
}, 300); // Adjust this timeout to match your transition duration
}
} }
}); });
// Mark the element as having the event listener attached // Mark the element as having the event listener attached
parentElement.setAttribute("data-listener-attached", "true"); parentElement.setAttribute("data-listener-attached", "true");
} }
closeBtn.addEventListener("click", function (event) {
helpContent.classList.remove("active");
});
} }
}); });
}, },
......
assets/style/editing-helper.pcss.css
+ 46
− 16
View file @ ae6e49c4
.editing-helper-block { .editing-helper-block {
.help-wrapper { .help-wrapper {
position: relative;
margin-bottom: 8px; margin-bottom: 8px;
width: fit-content;
font-size: 14px;
} }
.toggle-help { .toggle-help {
background-color: #df000f; background-color: #df000f;
color: #fff;
padding: 6px 12px;
border: none; border: none;
border-radius: 5px;
font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 4px 6px rgba(#df000f, 0.4);
pointer-events: all !important;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 50%;
background-image: url(../../assets/icons/question-icon.svg);
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
} }
.toggle-help:hover { .toggle-help:hover {
background-color: #a0040e; background-color: #a0040e;
} }
.help-content { .help-content {
background-color: #e9ecef; position: absolute;
border-radius: 6px; top: 0;
left: calc(100% + 15px);
width: 320px;
z-index: 5;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
max-height: 0; padding: 24px;
padding: 0 15px; display: none;
visibility: hidden; color: #002856;
transition: max-height 0.3s ease-in-out; }
.help-content h2 {
font-size: 18px;
color: #002856;
}
.help-content span {
color: #00285680;
}
.help-content.active {
display: block;
} }
.help-content p { .help-content p {
margin: 0; margin: 0;
font-size: 14px;
color: #333;
} }
.top-content {
display: flex;
justify-content: space-between;
}
.helper-close-btn {
background-image: url(../../assets/icons/close-btn.svg);
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
}
[dir="rtl"] .editing-helper-block .help-content {
right: calc(100% + 15px);
left: unset;
} }
editing_helper.info.yml
+ 5
− 0
View file @ ae6e49c4
...@@ -3,3 +3,8 @@ type: module ...@@ -3,3 +3,8 @@ type: module
description: Provides description helper for editor to provide optimized user experience. description: Provides description helper for editor to provide optimized user experience.
core_version_requirement: ^9 || ^10 || ^11 core_version_requirement: ^9 || ^10 || ^11
configure: editing_helper.config configure: editing_helper.config
# Information added by Drupal.org packaging script on 2024-12-11
version: '1.0.3'
project: 'editing_helper'
datestamp: 1733909405
editing_helper.module
+ 17
− 10
View file @ ae6e49c4
...@@ -130,7 +130,6 @@ function editing_helper_preprocess_block(array &$variables) { ...@@ -130,7 +130,6 @@ function editing_helper_preprocess_block(array &$variables) {
// Add the help wrapper with the computed help text. // Add the help wrapper with the computed help text.
if (!empty($help_text) && $current_user->hasPermission('access to editing helper')) { if (!empty($help_text) && $current_user->hasPermission('access to editing helper')) {
$block_title = (string) $config->get('block_title');
$variables['title_prefix']['help_wrapper'] = [ $variables['title_prefix']['help_wrapper'] = [
'#type' => 'container', '#type' => 'container',
'#attributes' => ['class' => ['help-wrapper']], '#attributes' => ['class' => ['help-wrapper']],
...@@ -138,21 +137,14 @@ function editing_helper_preprocess_block(array &$variables) { ...@@ -138,21 +137,14 @@ function editing_helper_preprocess_block(array &$variables) {
'toggle_help_button' => [ 'toggle_help_button' => [
'#type' => 'html_tag', '#type' => 'html_tag',
'#tag' => 'button', '#tag' => 'button',
'#value' => $block_title ? $block_title : t('Want Help!'),
'#attributes' => [ '#attributes' => [
'class' => ['toggle-help'], 'class' => ['toggle-help'],
'type' => 'button', 'type' => 'button',
], ],
], ],
'help_content' => [ 'help_content' => [
'#type' => 'container', '#theme' => 'help_content',
'#attributes' => [ '#help_text' => $help_text,
'class' => ['help-content'],
'style' => 'visibility:hidden;',
],
'content' => [
'#markup' => '<p>' . $help_text . '</p>',
],
], ],
'#attached' => [ '#attached' => [
'library' => [ 'library' => [
...@@ -161,5 +153,20 @@ function editing_helper_preprocess_block(array &$variables) { ...@@ -161,5 +153,20 @@ function editing_helper_preprocess_block(array &$variables) {
], ],
'#weight' => 100, '#weight' => 100,
]; ];
} }
} }
/**
* Implements hook_theme().
*/
function editing_helper_theme() {
return [
'help_content' => [
'variables' => [
'help_text' => NULL,
],
'template' => 'help-content',
],
];
}
templates/help-content.html.twig 0 → 100644
+ 8
− 0
View file @ ae6e49c4
<div class="help-content">
<div class="top-content">
<div class="toggle-help"></div>
<div class="helper-close-btn"></div>
</div>
<h2 class="text">{{'Want Help!'|t}}</h2>
<p>{{help_text|raw}}</p>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment