Merge pull request #4330 from bitcoin-dot-org/improve-page

Make page simpler

Author: Cobra-Bitcoin

_sass/_donation-banner.scss

@@ -11,59 +11,6 @@ $dark-green: #318f20;
     background-image: linear-gradient(top, $color1 14%, $color2 70%);
 }
 
-.buy-sell-tabs iframe {
-  border: 0;
-}
-
-.tabs {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.tabs label {
-  order: 1;
-  display: block;
-  padding: 1rem 2rem;
-  margin-right: 0.2rem;
-  cursor: pointer;
-  background: #fff;
-  color: #ff7e00;
-  border: 1px solid #ff7e00;
-  font-weight: 600;
-  transition: background ease 0.2s;
-}
-
-.tabs .tab {
-  order: 99;
-  flex-grow: 1;
-  width: 100%;
-  display: none;
-  padding: 1rem;
-  background: #fff;
-}
-.tabs input[type="radio"] {
-  display: none;
-}
-.tabs input[type="radio"]:checked + label {
-  background: #ff9500;
-  color: #fff;
-}
-.tabs input[type="radio"]:checked + label + .tab {
-  display: block;
-}
-
-@media (max-width: 45em) {
-  .tabs .tab,
-  .tabs label {
-    order: initial;
-  }
-  .tabs label {
-    width: 100%;
-    margin-right: 0;
-    margin-top: 0.2rem;
-  }
-}
-
 .donation-btn {
     border: none;
     border-radius: 1px;

_sass/screen.scss

@@ -625,6 +625,17 @@ h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
     top: 0;
     transform: translateY(-100%);
 }
+.buy-widget{
+    width: 400px;
+    height: 650px;
+}
+.buy-widget iframe {
+   border: 0;
+}
+.buy-footer-notice {
+    margin-top: 50px;
+    text-align: center;
+}
 .statusmenu {
     color: inherit;
 }

_templates/buy.html

@@ -10,7 +10,7 @@
 
 <!-- Note: this file exempt from check-for-subheading-anchors check -->
 
-<div class="hero">
+<div class="hero" style="padding:25px;">
   <div class="container hero-container">
     <h1>{% translate pagetitle %}</h1>
   </div>
@@ -19,22 +19,11 @@ <h1>{% translate pagetitle %}</h1>
 <div class="container">
   <div class="row card-row" style="justify-content: center;">
 	<div class="card buy-card" style="width: 480px;margin-top: -30px;margin-bottom: 100px;">
-  		<div class="tabs buy-sell-tabs" style="">
-    		<input type="radio" name="tabs" id="selltab">
-    		<label for="selltab" style="margin-left: 25px;margin-right: 25px;">Sell Bitcoin</label>
-    		<div class="tab">
-      			<div id="sell-widget" style="width: 370px;height: 650px;"></div>
-    		</div>
-    		<input type="radio" name="tabs" id="buytab" checked="checked">
-    		<label for="buytab" style="margin-left: 25px;margin-right: 25px;">Buy Bitcoin</label>
-    		<div class="tab">
-      			<div id="buy-widget" style="width: 370px;height: 650px;"></div>
-    		</div>
+  		<div class="buy-widget"></div>
   	</div>
-</div>
-	  <div style="margin-top: 50px;text-align: center;">
-		  <b>The above widget is provided by a third party provider (<a href="https://www.moonpay.com/">MoonPay</a>) and is not associated with bitcoin.org.</b>
-	  </div>
+	<div class="buy-footer-notice">
+		<b>The above widget is provided by a third party provider (<a href="https://www.moonpay.com/">MoonPay</a>) and is not associated with bitcoin.org.</b>
+	</div>
   </div>
 </div>
 

js/main.js

@@ -732,23 +732,11 @@ function changeAccordionButtonText(button, text) {
 }
 
 function showBuySellWidgets() {
-  
-    var sellWidget = window.MoonPayWebSdk.init({
-    flow: 'sell',
-    environment: 'production',
-    containerNodeSelector: '#sell-widget',
-    variant: 'embedded',
-    params: {
-      theme: 'light',
-      colorCode: '#FF9500',
-      apiKey: 'pk_live_QWvwDl3WJAq7S8fDjsOUMfjn09DSw8R'
-    }
-  });
 
   var buyWidget = window.MoonPayWebSdk.init({
     flow: 'buy',
     environment: 'production',
-    containerNodeSelector: '#buy-widget',
+    containerNodeSelector: '.buy-widget',
     variant: 'embedded',
     params: {
       apiKey: 'pk_live_QWvwDl3WJAq7S8fDjsOUMfjn09DSw8R',
@@ -757,7 +745,6 @@ function showBuySellWidgets() {
     }
   });
 
-  sellWidget.show();
   buyWidget.show();
 }