From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 30 Jul 2018 19:39:21 +0000 (+0100)
Subject: donation: Fix page layout on mobile devices
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=f89c578dbd5f65a0785c456a14077a1ed8d4efc8;p=ipfire.org.git

donation: Fix page layout on mobile devices

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/templates/donate.html b/src/templates/donate.html
index 15eb3911..5a0681d2 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -10,7 +10,7 @@
 	<div class="container">
 		<div class="card mb-5">
 			<div class="row">
-				<div class="d-none d-md-block col col-lg-4 p-4 bg-dark text-white">
+				<div class="d-none d-md-block col col-md-4 p-4 bg-dark text-white">
 					<h5 class="text-white mt-4">Why we need you to donate today</h5>
 
 					<p>
@@ -29,238 +29,234 @@
 					</p>
 				</div>
 
-				<div class="col p-4">
+				<div class="col p-5 p-md-4 pt-4">
 					<form action="" method="POST">
 						{% raw xsrf_form_html() %}
 
-						<div class="row justify-content-center mt-4">
-							<div class="col-12 col-sm-11 col-xl-12 px-4 px-sm-6">
-								<div class="row">
-									<div class="col-12 col-lg-6 mb-3 mb-md-0">
-										<h6>Choose a currency</h6>
+						<div class="row mt-md-4">
+							<div class="col-12 col-lg-6 mb-3 mb-md-0">
+								<h6>Choose a currency</h6>
 
-										<div class="form-check form-check-inline">
-											<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
-												{% if currency == "EUR" %}checked{% end %}>
-											<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
-										</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
+										{% if currency == "EUR" %}checked{% end %}>
+									<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
+								</div>
 
-										<div class="form-check form-check-inline">
-											<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
-												{% if currency == "USD" %}checked{% end %}>
-											<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
-										</div>
-									</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
+										{% if currency == "USD" %}checked{% end %}>
+									<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
+								</div>
+							</div>
 
-									<div class="col-12 col-lg-6">
-										<h6>Frequency</h6>
+							<div class="col-12 col-lg-6">
+								<h6>Frequency</h6>
 
-										<div class="form-check form-check-inline">
-											<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
-												value="one-time" {% if frequency == "one-time" %}checked{% end %}>
-											<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
-										</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
+										value="one-time" {% if frequency == "one-time" %}checked{% end %}>
+									<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
+								</div>
 
-										<div class="form-check form-check-inline">
-											<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
-												value="monthly" {% if frequency == "monthly" %}checked{% end %}>
-											<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
-										</div>
-									</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
+										value="monthly" {% if frequency == "monthly" %}checked{% end %}>
+									<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
 								</div>
+							</div>
+						</div>
 
-								<div class="mt-5 mb-3 p-5 bg-light">
-									<h6>{{ _("Choose an amount") }}</h6>
+						<div class="mt-5 mb-3 p-4 bg-light rounded">
+							<h6>{{ _("Choose an amount") }}</h6>
 
-									<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
+							<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
 
-									<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
-										{% for a in amounts %}
-											<label class="btn btn-secondary btn-lg mb-2">
-												<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
-													autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
-											</label>
-										{% end %}
-									</div>
+							<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
+								{% for a in amounts %}
+									<label class="btn btn-secondary btn-lg mb-2">
+										<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
+											autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
+									</label>
+								{% end %}
+							</div>
 
-									<div class="form-group row mb-5">
-										<label class="col-sm-5 col-form-label col-form-label-lg">
-											or enter your own
-										</label>
+							<div class="form-group row mb-5">
+								<label class="col-sm-5 col-form-label col-form-label-lg">
+									or enter your own
+								</label>
 
-										<div class="col-sm-5">
-											<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
-												{% if not amount in amounts %}value="{{ amount }}"{% end %}>
-										</div>
-									</div>
+								<div class="col-sm-5">
+									<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
+										{% if not amount in amounts %}value="{{ amount }}"{% end %}>
+								</div>
+							</div>
 
-									<div class="row mb-5">
-										<div class="col d-flex flex-column">
-											<div class="form-row">
-												<div class="col">
-													<div class="form-check form-check-inline mb-3">
-														<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
-														<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
-													</div>
-													<div class="form-check form-check-inline mb-3">
-														<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
-														<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
-													</div>
-												</div>
+							<div class="row mb-5">
+								<div class="col d-flex flex-column">
+									<div class="form-row">
+										<div class="col">
+											<div class="form-check form-check-inline mb-3">
+												<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
+												<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
 											</div>
-
-											<div class="form-row">
-												<div class="col-sm-6">
-													<div class="form-group">
-														<input type="text" class="form-control" name="first_name"
-															placeholder="{{ _("First Name" )}}" required>
-													</div>
-												</div>
-
-												<div class="col-sm-6">
-													<div class="form-group">
-														<input type="text" class="form-control" name="last_name"
-															placeholder="{{ _("Last Name" )}}" required>
-													</div>
-												</div>
+											<div class="form-check form-check-inline mb-3">
+												<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
+												<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
 											</div>
+										</div>
+									</div>
 
+									<div class="form-row">
+										<div class="col-sm-6">
 											<div class="form-group">
-												<input type="email" class="form-control" name="email"
-													placeholder="{{ _("Email Address") }}" required>
+												<input type="text" class="form-control" name="first_name"
+													placeholder="{{ _("First Name" )}}" required>
 											</div>
+										</div>
 
+										<div class="col-sm-6">
 											<div class="form-group">
-												<input type="text" class="form-control" name="company_name"
-													placeholder="{{ _("Company Name (optional)") }}">
+												<input type="text" class="form-control" name="last_name"
+													placeholder="{{ _("Last Name" )}}" required>
 											</div>
+										</div>
+									</div>
+
+									<div class="form-group">
+										<input type="email" class="form-control" name="email"
+											placeholder="{{ _("Email Address") }}" required>
+									</div>
 
+									<div class="form-group">
+										<input type="text" class="form-control" name="company_name"
+											placeholder="{{ _("Company Name (optional)") }}">
+									</div>
+
+									<div class="form-group">
+										<input type="text" class="form-control" name="street1"
+											placeholder="{{ _("Address Line 1") }}" required>
+									</div>
+
+									<div class="form-group">
+										<input type="text" class="form-control" name="street2"
+											placeholder="{{ _("Address Line 2") }}">
+									</div>
+
+									<div class="form-row">
+										<div class="col-sm-6">
 											<div class="form-group">
-												<input type="text" class="form-control" name="street1"
-													placeholder="{{ _("Address Line 1") }}" required>
+												<input type="text" class="form-control" name="city"
+													placeholder="{{ _("City") }}" required>
 											</div>
+										</div>
 
+										<div class="col-sm-6">
 											<div class="form-group">
-												<input type="text" class="form-control" name="street2"
-													placeholder="{{ _("Address Line 2") }}">
+												<input type="text" class="form-control" name="post_code"
+													placeholder="{{ _("Post Code") }}" required>
 											</div>
+										</div>
+									</div>
+
+									<div class="form-row">
+										<div class="col-sm-6">
+											<div class="form-group">
+												<select class="form-control" name="country_code" required>
+													<option value="">- {{ _("Country") }} -</option>
 
-											<div class="form-row">
-												<div class="col-sm-6">
-													<div class="form-group">
-														<input type="text" class="form-control" name="city"
-															placeholder="{{ _("City") }}" required>
-													</div>
-												</div>
-
-												<div class="col-sm-6">
-													<div class="form-group">
-														<input type="text" class="form-control" name="post_code"
-															placeholder="{{ _("Post Code") }}" required>
-													</div>
-												</div>
+													{% for c in countries %}
+														<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+													{% end %}
+												</select>
 											</div>
+										</div>
 
-											<div class="form-row">
-												<div class="col-sm-6">
-													<div class="form-group">
-														<select class="form-control" name="country_code" required>
-															<option value="">- {{ _("Country") }} -</option>
-
-															{% for c in countries %}
-																<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-															{% end %}
-														</select>
-													</div>
-												</div>
-
-												<div class="col-sm-6">
-													<div class="form-group">
-														<input type="text" class="form-control" name="state"
-															placeholder="{{ _("State (optional)") }}">
-													</div>
-												</div>
+										<div class="col-sm-6">
+											<div class="form-group">
+												<input type="text" class="form-control" name="state"
+													placeholder="{{ _("State (optional)") }}">
 											</div>
 										</div>
 									</div>
+								</div>
+							</div>
 
-									<div class="row mb-5">
-										<div class="col text-center">
-											<input type="submit" class="btn btn-primary btn-lg"
-												id="donate" value="{{ _("Donate Now") }}">
+							<div class="row mb-5">
+								<div class="col text-center">
+									<input type="submit" class="btn btn-primary btn-lg"
+										id="donate" value="{{ _("Donate Now") }}">
+								</div>
+							</div>
+
+							<div class="row">
+								<div class="col d-flex justify-content-center">
+									<picture>
+										<source srcset="{{ static_url("img/amex.png") }},
+											{{ static_url("img/amex@2x.png") }} 2x,
+											{{ static_url("img/amex@3x.png") }} 3x">
+										<img src="{{ static_url("img/amex.png") }}"
+											srcset="{{ static_url("img/amex.png") }},
+											{{ static_url("img/amex@2x.png") }} 2x,
+											{{ static_url("img/amex@3x.png") }} 3x"
+											alt="Amex" class="m-xl-2">
+									</picture>
+
+									<picture>
+										<source srcset="{{ static_url("img/mastercard.png") }},
+											{{ static_url("img/mastercard@2x.png") }} 2x,
+											{{ static_url("img/mastercard@3x.png") }} 3x">
+										<img src="{{ static_url("img/mastercard.png") }}"
+											srcset="{{ static_url("img/mastercard.png") }},
+											{{ static_url("img/mastercard@2x.png") }} 2x,
+											{{ static_url("img/mastercard@3x.png") }} 3x"
+											alt="Mastercard" class="m-xl-2">
+									</picture>
+
+									<picture>
+										<source srcset="{{ static_url("img/visa.png") }},
+											{{ static_url("img/visa@2x.png") }} 2x,
+											{{ static_url("img/visa@3x.png") }} 3x">
+										<img src="{{ static_url("img/visa.png") }}"
+											srcset="{{ static_url("img/visa.png") }},
+											{{ static_url("img/visa@2x.png") }} 2x,
+											{{ static_url("img/visa@3x.png") }} 3x"
+											alt="Visa" class="m-xl-2">
+									</picture>
+
+									<!-- XXX insert SEPA logo -->
+								</div>
+							</div>
+
+							<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
+								<div class="modal-dialog modal-dialog-centered" role="document">
+									<div class="modal-content">
+										<div class="modal-header">
+											<h5 class="modal-title">Modal title</h5>
+											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+												<span aria-hidden="true">&times;</span>
+											</button>
 										</div>
-									</div>
 
-									<div class="row">
-										<div class="col d-flex justify-content-center">
-											<picture>
-												<source srcset="{{ static_url("img/amex.png") }},
-													{{ static_url("img/amex@2x.png") }} 2x,
-													{{ static_url("img/amex@3x.png") }} 3x">
-												<img src="{{ static_url("img/amex.png") }}"
-													srcset="{{ static_url("img/amex.png") }},
-													{{ static_url("img/amex@2x.png") }} 2x,
-													{{ static_url("img/amex@3x.png") }} 3x"
-													alt="Amex" class="m-xl-2">
-											</picture>
-
-											<picture>
-												<source srcset="{{ static_url("img/mastercard.png") }},
-													{{ static_url("img/mastercard@2x.png") }} 2x,
-													{{ static_url("img/mastercard@3x.png") }} 3x">
-												<img src="{{ static_url("img/mastercard.png") }}"
-													srcset="{{ static_url("img/mastercard.png") }},
-													{{ static_url("img/mastercard@2x.png") }} 2x,
-													{{ static_url("img/mastercard@3x.png") }} 3x"
-													alt="Mastercard" class="m-xl-2">
-											</picture>
-
-											<picture>
-												<source srcset="{{ static_url("img/visa.png") }},
-													{{ static_url("img/visa@2x.png") }} 2x,
-													{{ static_url("img/visa@3x.png") }} 3x">
-												<img src="{{ static_url("img/visa.png") }}"
-													srcset="{{ static_url("img/visa.png") }},
-													{{ static_url("img/visa@2x.png") }} 2x,
-													{{ static_url("img/visa@3x.png") }} 3x"
-													alt="Visa" class="m-xl-2">
-											</picture>
-
-											<!-- XXX insert SEPA logo -->
+										<div class="modal-body">
+											<p>Modal body text goes here.</p>
 										</div>
-									</div>
 
-									<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
-										<div class="modal-dialog modal-dialog-centered" role="document">
-											<div class="modal-content">
-												<div class="modal-header">
-													<h5 class="modal-title">Modal title</h5>
-													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-														<span aria-hidden="true">&times;</span>
-													</button>
-												</div>
-
-												<div class="modal-body">
-													<p>Modal body text goes here.</p>
-												</div>
-
-												<div class="modal-footer">
-													<input type="submit" class="btn btn-primary" value="Donate Now">
-													<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-												</div>
-											</div>
+										<div class="modal-footer">
+											<input type="submit" class="btn btn-primary" value="Donate Now">
+											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 										</div>
 									</div>
 								</div>
-
-								<p class="small text-muted mb-0">
-									The organization you will be donating to is Lightning Wire Labs GmbH who is
-									kindly handling donations for the IPFire project.
-									After clicking "Donate Now", you will be redirected to Lightning Wire Labs
-									where you will be able to complete the transaction.
-								</p>
 							</div>
 						</div>
+
+						<p class="small text-muted mb-0">
+							The organization you will be donating to is Lightning Wire Labs GmbH who is
+							kindly handling donations for the IPFire project.
+							After clicking "Donate Now", you will be redirected to Lightning Wire Labs
+							where you will be able to complete the transaction.
+						</p>
 					</form>
 				</div>
 			</div>