Merge pull request #18 from dlipeles/feature/rewards-banner

Restores modal to original size
yachtcaptain23 · Oct 1, 2018 · 841b573 · 841b573
2 parents 8561b00 + 410ff60
commit 841b573
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/app/javascript/packs/brave_rewards_banner.jsx b/app/javascript/packs/brave_rewards_banner.jsx
@@ -39,8 +39,11 @@ export default class BraveRewardsBanner extends React.Component {
      this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
   }
 
-  componentDidMount(){
+  componentWillMount(){
     this.modalize();
+  }
+
+  componentDidMount(){
     this.fetchSiteBanner();
     document.getElementsByClassName('brave-rewards-banner-control-bar-save-button')[0].addEventListener("click", this.handleSave);
     window.addEventListener('resize', this.updateWindowDimensions);
@@ -62,6 +65,9 @@ export default class BraveRewardsBanner extends React.Component {
   }
 
   close(){
+    document.getElementsByClassName("modal-panel")[0].style.maxWidth = '40rem';
+    document.getElementsByClassName("modal-panel")[0].style.padding = '2rem 2rem';
+    document.getElementsByClassName("modal-panel--content")[0].style.padding = '1rem 1rem 0 1rem';
     document.getElementsByClassName("modal-panel--close js-deny")[0].click();
   }
 

diff --git a/app/javascript/packs/brave_rewards_banner_container.jsx b/app/javascript/packs/brave_rewards_banner_container.jsx
@@ -14,13 +14,13 @@ export default class BraveRewardsBannerContainer extends React.Component {
 
     this.state = {
       mode: 'Edit',
-      isIntro: true,
+      isIntro: false,
     }
 
     this.setMode = this.setMode.bind(this)
   }
 
-  componentDidMount(){
+  componentWillMount(){
     this.modalize();
   }
 
@@ -116,14 +116,9 @@ export default class BraveRewardsBannerContainer extends React.Component {
 
 export function renderBraveRewardsBannerContainer(headline, intro) {
 
-  let props = {
-    headline: headline,
-    intro: intro
-  }
-
   ReactDOM.render(
-    <BraveRewardsBannerContainer {...props}/>,
-    document.getElementById("react-container").parentElement.parentElement
+    <BraveRewardsBannerContainer/>,
+    document.getElementById("rewards-banner-container").parentElement.parentElement
   )
 }
 

diff --git a/app/javascript/publishers/home.js b/app/javascript/publishers/home.js
@@ -403,11 +403,16 @@ document.addEventListener('DOMContentLoaded', function() {
   }, false);
 
   instantDonationButton.addEventListener("click", function(event) {
-    document.getElementsByClassName('container')[0].style.padding = 0;
-    document.getElementsByClassName('container')[0].style.width = '840px';
-    let headline = document.getElementsByClassName('translations')[0].getAttribute('headline')
-    let intro = document.getElementsByClassName('translations')[0].getAttribute('intro')
-    renderBraveRewardsBannerContainer(headline, intro);
+
+    document.getElementById("open-banner-button").onclick = function() {
+      renderBraveRewardsBannerContainer();
+    };
+
+    document.getElementsByClassName("modal-panel--close js-deny")[0].onclick = function(e) {
+      document.getElementsByClassName("modal-panel")[0].style.maxWidth = '40rem';
+      document.getElementsByClassName("modal-panel")[0].style.padding = '2rem 2rem';
+      document.getElementsByClassName("modal-panel--content")[0].style.padding = '1rem 1rem 0 1rem';
+    };
   }, false);
 
   updateContactForm.addEventListener('submit', function(event) {

diff --git a/app/views/publishers/_instant_donation_modal.html.slim b/app/views/publishers/_instant_donation_modal.html.slim
@@ -1,4 +1,11 @@
-.instant-donation-container id="instant-donation-container"
-  .container id=current_publisher.id
-    .translations headline=t(".headline") intro=t(".intro")
-        .react-container id="react-container"
+.modal id="rewards_banner_intro_modal" role="dialog" tabindex="-1"
+  .modal-dialog
+    .modal-header id="instant-donation-modal-selection"
+      center
+        = image_tag "icn-donation-jar@1x.png", id: 'icn-donation-jar'
+        h2.modal-title = t ".headline"
+        p = t ".intro"
+        = link_to(t(".continue"), "#", class: 'btn btn-primary', id: "open-banner-button")
+      center
+    .modal-header style="display: none;" id="rewards-banner-container"
+      = hidden_field_tag 'publisher_id', current_publisher.id