From 8977de1eac366998dd6e5acdf249e9213946fd92 Mon Sep 17 00:00:00 2001
From: Sven Hoehn <shoehn@ipfire.org>
Date: Wed, 6 Dec 2017 10:04:04 +0100
Subject: [PATCH] added "or" line and javascript switching for currency and
 frequency

---
 static/css/style.css       | 30 ++++++++++++++++--
 static/scss/_donation.scss | 30 ++++++++++++++++--
 templates/donate.html      | 65 +++++++++++++++++++++++++++++++-------
 3 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 4f3aa67..3f3942f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5331,7 +5331,9 @@ input.radiobtn:not(old):checked + label {
 .inline-card {
   border-radius: 8px;
   background-color: #eceff1;
-  padding: 24px; }
+  padding: 24px;
+  position: relative;
+  padding: 24px 20px; }
 
 label.amount {
   width: 84px;
@@ -5342,9 +5344,9 @@ label.amount {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
   font-size: 20px;
   color: #42a5f5;
-  text-align: left;
+  text-align: center;
   margin: 0 8px 16px 8px;
-  padding-top: 8px; }
+  padding: 8px 0 0 0; }
 
 input[name=amount] {
   display: none; }
@@ -5353,6 +5355,28 @@ input[name=amount]:checked + label {
   background-image: linear-gradient(120deg, #4fc3f7, #1976d2);
   color: white; }
 
+.or {
+  display: block;
+  height: 200px;
+  width: 1px;
+  border: 1px solid rgba(38, 50, 56, 0.3);
+  position: absolute;
+  left: 350px;
+  top: 12px; }
+  .or:before {
+    content: "OR";
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(38, 50, 56, 0.3);
+    background-color: #eceff1;
+    display: block;
+    position: absolute;
+    top: 12px;
+    left: -12px;
+    width: 24px;
+    height: 24px; }
+
 body {
   min-height: 100vh;
   display: flex;
diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss
index 82322f3..09a733b 100644
--- a/static/scss/_donation.scss
+++ b/static/scss/_donation.scss
@@ -39,6 +39,8 @@ input.radiobtn:not(old):checked + label {
 	border-radius: 8px;
 	background-color: $blue-grey-50;
 	padding: 24px;
+	position: relative;
+	padding: 24px 20px;
 }
 
 label.amount {
@@ -50,9 +52,9 @@ label.amount {
 	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
 	font-size: 20px;
 	color: $blue-400;
-	text-align: left;
+	text-align: center;
 	margin: 0 8px 16px 8px;
-	padding-top: 8px;
+	padding: 8px 0 0 0;
 }
 
 input[name=amount] {
@@ -62,4 +64,28 @@ input[name=amount] {
 input[name=amount]:checked + label {
 	background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
 	color: white;
+}
+
+.or {
+	display: block;
+	height: 200px;
+	width: 1px;
+	border: 1px solid $blue-grey-300;
+	position: absolute;
+	left: 350px;
+	top: 12px;
+	&:before {
+		content: "OR";
+		font-family: 'Ubuntu', sans-serif;
+		font-size: 16px;
+		font-weight: 500;
+		color: $blue-grey-300;
+		background-color: $blue-grey-50;
+		display: block;
+		position: absolute;
+		top: 12px;
+		left: -12px;
+		width: 24px;
+		height: 24px;
+	}
 }
\ No newline at end of file
diff --git a/templates/donate.html b/templates/donate.html
index 2ba9707..13e45f4 100644
--- a/templates/donate.html
+++ b/templates/donate.html
@@ -71,8 +71,7 @@
 										</p>
 									</div>
 								{% end %}
-								</div>
-								
+								</div>				
 								<div class="col pl-5 pr-5">
 									<div class="card p-3 pt-6">
 										<div class="row">
@@ -106,28 +105,29 @@
 										</div>
 									
 										<div class="row mt-6">
-											<div class="inline-card bg-blue-grey-50 w-100 p-5">
+											<div class="inline-card bg-blue-grey-50 w-100">
+												<div class="or"></div>
 												<div class="row mb-6">
 													<div class="col">
 														<h4 class="mb-5">Choose an amount</h4>
-														<div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;">
+														<div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;" id="amount">
 															<input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
-															<label for="10" class="form-check-label amount">10<span class="currency"></span></label>
+															<label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
 															
 															<input class="amount-check" type="radio" name="amount" id="25" value="25">
-															<label for="25" class="form-check-label amount">25<span class="currency"></span></label>
+															<label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label>
 															
 															<input class="amount-check" type="radio" name="amount" id="50" value="50">
-															<label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label>
+															<label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></label>
 															
-															<input class="amount-check" type="radio" name="amount" id="50" value="50">
-															<label for="50" class="form-check-label amount">75<span class="currency"></span></label>
+															<input class="amount-check" type="radio" name="amount" id="75" value="50">
+															<label for="50" class="form-check-label amount"><span id="amount_75">75</span><span class="currency">€</span></label>
 														
 															<input class="amount-check" type="radio" name="amount" id="100" value="100">
-															<label for="100" class="form-check-label amount">100<span class="currency"></span></label>
+															<label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label>
 															
 															<input class="amount-check" type="radio" name="amount" id="250" value="250">
-															<label for="250" class="form-check-label amount">250<span class="currency"></span></label>
+															<label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label>
 														</div>											
 													</div>
 													<div class="col">
@@ -222,5 +222,48 @@
 		<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
 	</symbol>
 </svg>
+
+<script type="text/javascript">
+$(document).ready(function(){
+	$("input[name='currency']").on("change", function(){
+		if ($(this).val() == "euro") {
+			$('.currency').html('€');
+		}
+		else if ($(this).val() == "usd") {
+			$('.currency').html('$');
+		}
+	});
+	$("input[name='frequency']").on("change", function(){
+		if ($(this).val() == "single") {
+			$("input#10").attr("value", "10");
+			document.getElementById("amount_10").innerHTML="10";
+			$("input#25").attr("value", "25");
+			document.getElementById("amount_25").innerHTML="25";
+			$("input#50").attr("value", "50");
+			document.getElementById("amount_50").innerHTML="50";
+			$("input#75").attr("value", "75");
+			document.getElementById("amount_75").innerHTML="75";
+			$("input#100").attr("value", "100");
+			document.getElementById("amount_100").innerHTML="100";
+			$("input#250").attr("value", "250");
+			document.getElementById("amount_250").innerHTML="250";
+		}
+		else if ($(this).val() == "monthly") {
+			$("input#10").attr("value", "2");
+			document.getElementById("amount_10").innerHTML="2";
+			$("input#25").attr("value", "3");
+			document.getElementById("amount_25").innerHTML="3";
+			$("input#50").attr("value", "5");
+			document.getElementById("amount_50").innerHTML="5";
+			$("input#75").attr("value", "7");
+			document.getElementById("amount_75").innerHTML="7";
+			$("input#100").attr("value", "10");
+			document.getElementById("amount_100").innerHTML="10";
+			$("input#250").attr("value", "12");
+			document.getElementById("amount_250").innerHTML="12";
+		}
+	})
+});
+</script>
 	
 {% end block %}
-- 
2.39.2