From 8977de1eac366998dd6e5acdf249e9213946fd92 Mon Sep 17 00:00:00 2001
From: Sven Hoehn
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 @@
{% end %}
-
-
+
@@ -106,28 +105,29 @@
-
+
+
Choose an amount
-
@@ -222,5 +222,48 @@
+
+
{% end block %}
--
2.39.5