Merge pull request #2 from nofrixion/fix-helper-dialog

james-nofrixion · web-flow · commit fc5a5816cbe6 · 2023-04-25T18:30:04.000+10:00
Fix helper dialog
diff --git a/README.md b/README.md
@@ -14,22 +14,32 @@ It is recommended to use the `composer` PHP package manager for production magen
 
 ### Installation ###
 
-- Install the files:
-  - Using composer (recommended). Run `composer require nofrixion/magento2-payments-module`
-  - Using a ZIP file (not recommended). Unzip the ZIP file in `app/code/Nofrixion/Payments`
-- Enable the module by running `php bin/magento module:enable Nofrixion_Payments`
-- Apply database updates by running `php bin/magento setup:upgrade` (for production, also add the parameter `--keep-generated` or you will need to run `php bin/magento setup:di:compile` again.)
-- Flush the cache by running `php bin/magento cache:flush`
+- Install the NoFrixion payments module using composer by running the following commands:
+
+```bash
+composer require nofrixion/magento2-payments-module
+php bin/magento module:enable Nofrixion_Payments
+php bin/magento setup:upgrade
+php bin/magento setup:di:compile
+php bin/magento cache:flush
+```
+
+\* it is also possible to install the module by downloading the ZIP file from github and extracting it to `{magento-install-directory/app/code/Nofrixion/Payments`. Then run the last four commands in the sequence above to enable the plugin. This method is NOT recommended for production environments.
 
 Note, there are several third-party caching products that may be deployed in your Magento environment and prevent the payments module from appearing in the Magento administration interface. If the Nofrixion Payments module is not visible after following the above steps, most third party caches will be cleared by restarting the apache server.
 
 ### Updates ###
 
-If you have installed the payments module using the composer command specified above, you can update the plugin using composer. The following procedure will update the payments plugin to the most recent stable version:
+If you have installed the payments module using the composer command specified above, you can update the plugin using composer. From a shell session on your magento server, run:
+
+```bash
+composer update nofrixion/magento2-payments-module
+php bin/magento setup:upgrade
+php bin/magento setup:di:compile
+php bin/magento cache:flush
+```
 
-- From a shell session on your magento server, run `composer update nofrixion/magento2-payments-module`.
-- Apply database updates by running `php bin/magento setup:upgrade` (for production, also add the parameter `--keep-generated` or you will need to run `php bin/magento setup:di:compile` again.)
-- Flush the cache by running `php bin/magento cache:flush`
+If you are updating a production environment, we recommend [placing the store in maintenance mode](https://experienceleague.adobe.com/docs/commerce-operations/installation-guide/tutorials/maintenance-mode.html) first.
 
 ### Removal ###
 
diff --git a/view/frontend/layout/checkout_index_index.xml b/view/frontend/layout/checkout_index_index.xml
@@ -1,5 +1,8 @@
 <?xml version="1.0" ?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+	<head>
+		<css src="Nofrixion_Payments::css/nofrixion-styles.css"/>
+	</head>
 	<body>
 		<referenceBlock name="checkout.root">
 			<arguments>
diff --git a/view/frontend/web/css/nofrixion-styles.css b/view/frontend/web/css/nofrixion-styles.css
@@ -0,0 +1,3 @@
+#spacer {
+    padding-left: 10%;
+}
diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less
@@ -1,6 +1,5 @@
 .nofrixion-tooltip {
-    .lib-tooltip(right,
-        @_tooltip-min-width: 400px,
-        @_tooltip-max-width: 800px,
-        @_tooltip-arrow-size: 5px);
-}
+    .lib-tooltip(bottom,
+        @_tooltip-arrow-size: 0px);
+    z-index: 2;
+}
diff --git a/view/frontend/web/template/payment/nofrixion.html b/view/frontend/web/template/payment/nofrixion.html
@@ -6,15 +6,15 @@
         <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
 
         <!-- BEGIN Nofrixion tooltip -->
-
-        <span class="nofrixion-tooltip" style="padding-left: 20%;">
+        <span id="spacer"></span>
+        <span class="nofrixion-tooltip">
             <a href="#" class="tooltip-toggle" data-bind="text: 'What is ' + getTitle() + '?'"></a>
             <span class="tooltip-content">
-                <span style="display: inline-block; vertical-align: top; padding: 1em; width: 40%;">
+                <span style="display: inline-block; vertical-align: top; padding: 1em">
                     <p>Pay by bank allows you to make a payment directly from your bank account without using a credit
                         card or other payment methods.</p>
                 </span>
-                <span style="display: inline-block;width: 50%;">
+                <span style="display: inline-block">
                     <img src="https://cdn.nofrixion.com/img/paybybank.gif"
                         alt="Pay by bank animation.">
                     </img>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+#spacer {`
	`2`	`+ padding-left: 10%;`
	`3`	`+}`