Improve claim page

11 files changed, 123 insertions, 89 deletions

diff --git a/app/flatpages/help/wtfpl.md b/app/flatpages/help/wtfpl.md
index 418a41e..918b52b 100644
--- a/app/flatpages/help/wtfpl.md
+++ b/app/flatpages/help/wtfpl.md
@@ -1,7 +1,7 @@
 title: WTFPL is a terrible license
 no_h1: true
 
-<div id="warning" class="box box_grey alert alert-warning">
+<div id="warning" class="alert alert-warning">
 	<span class="icon_message"></span>
 
 	Please reconsider the choice of WTFPL as a license.
diff --git a/app/flatpages/policy_and_guidance.md b/app/flatpages/policy_and_guidance.md
index a66c771..2273540 100644
--- a/app/flatpages/policy_and_guidance.md
+++ b/app/flatpages/policy_and_guidance.md
@@ -1,6 +1,6 @@
 title: Package Inclusion Policy and Guidance
 
-<div class="box box_grey alert alert-warning">
+<div class="alert alert-warning">
 	<b>Note:</b> This is a draft
 </div>
 
diff --git a/app/scss/custom.scss b/app/scss/custom.scss
index 559fea8..9017305 100644
--- a/app/scss/custom.scss
+++ b/app/scss/custom.scss
@@ -15,6 +15,22 @@
 	max-height: 1em;
 }
 
+#alerts {
+    display: block;
+    list-style: none;
+    position: fixed;
+    bottom: 0;
+    left:0;
+    right:0;
+    margin: 0;
+    padding:0;
+    z-index: 1000;
+}
+
+#alerts li {
+    list-style: none;
+}
+
 .jumbotron {
     background-size: cover;
     background-repeat: no-repeat;
diff --git a/app/templates/admin/list.html b/app/templates/admin/list.html
index 1b7063d..5237304 100644
--- a/app/templates/admin/list.html
+++ b/app/templates/admin/list.html
@@ -12,10 +12,10 @@
 		<li><a href="{{ url_for('switch_user_page') }}">Sign in as another user</a></li>
 	</ul>
 
-	<div class="box box_grey">
-		<h2>Do action</h2>
+	<div class="card my-4">
+		<h2 class="card-header">Do action</h2>
 
-		<form method="post" action="" class="box-body">
+		<form method="post" action="" class="card-body">
 			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 			<select name="action">
 				<option value="importmodlist" selected>Import forum topics</option>
@@ -29,10 +29,10 @@
 		</form>
 	</div>
 
-	<div class="box box_grey">
-		<h2>Restore Package</h2>
+	<div class="card my-4">
+		<h2 class="card-header">Restore Package</h2>
 
-		<form method="post" action="" class="box-body">
+		<form method="post" action="" class="card-body">
 			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 			<input type="hidden" name="action" value="restore" />
 			<select name="package">
diff --git a/app/templates/base.html b/app/templates/base.html
index b49b47d..919e591 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -95,7 +95,7 @@
 			{% if messages %}
 				<ul id="alerts">
 					{% for category, message in messages %}
-						<li class="box box_grey alert alert-{{category}}">
+						<li class="alert alert-{{category}} container">
 							<span class="icon_message"></span>
 
 							{{ message|safe }}
diff --git a/app/templates/flask_user/login.html b/app/templates/flask_user/login.html
index 73d83c3..642dc70 100644
--- a/app/templates/flask_user/login.html
+++ b/app/templates/flask_user/login.html
@@ -5,76 +5,76 @@ Sign in
 {% endblock %}
 
 {% block content %}
-<div class="sidebar_container">
-	<div class="left box box_grey">
-		{% from "flask_user/_macros.html" import render_field, render_checkbox_field, render_submit_field %}
-		<h2>{%trans%}Sign in{%endtrans%}</h2>
+<div class="row">
+	<div class="col-sm-8">
+		<div class="card">
+			{% from "flask_user/_macros.html" import render_field, render_checkbox_field, render_submit_field %}
+			<h2 class="card-header">{%trans%}Sign in{%endtrans%}</h2>
 
-		<form action="" method="POST" class="form box-body" role="form">
-			<h3>Sign in with username/password</h3>
-			{{ form.hidden_tag() }}
+			<form action="" method="POST" class="form card-body" role="form">
+				{{ form.hidden_tag() }}
 
-			{# Username or Email field #}
-			{% set field = form.username if user_manager.enable_username else form.email %}
-			<div class="form-group {% if field.errors %}has-error{% endif %}">
-				{# Label on left, "New here? Register." on right #}
-				<div class="row">
-					<div class="col-xs-6">
-						<label for="{{ field.id }}" class="control-label">{{ field.label.text }}</label>
-					</div>
+				{# Username or Email field #}
+				{% set field = form.username if user_manager.enable_username else form.email %}
+				<div class="form-group {% if field.errors %}has-error{% endif %}">
+					{# Label on left, "New here? Register." on right #}
+					<label for="{{ field.id }}" class="control-label">{{ field.label.text }}</label>
+					{{ field(class_='form-control', tabindex=110) }}
+					{% if field.errors %}
+					{% for e in field.errors %}
+					<p class="help-block">{{ e }}</p>
+					{% endfor %}
+					{% endif %}
 				</div>
-				{{ field(class_='form-control', tabindex=110) }}
-				{% if field.errors %}
-				{% for e in field.errors %}
-				<p class="help-block">{{ e }}</p>
-				{% endfor %}
-				{% endif %}
-			</div>
 
-			{# Password field #}
-			{% set field = form.password %}
-			<div class="form-group {% if field.errors %}has-error{% endif %}">
-				<div class="row">
+				{# Password field #}
+				{% set field = form.password %}
+				<div class="form-group {% if field.errors %}has-error{% endif %}">
 					<label for="{{ field.id }}" class="control-label">{{ field.label.text }}
 					{% if user_manager.enable_forgot_password %}
 						<a href="{{ url_for('user.forgot_password') }}" tabindex='195'>
 							[{%trans%}Forgot My Password{%endtrans%}]</a>
 					{% endif %}
 					</label>
+					{{ field(class_='form-control', tabindex=120) }}
+					{% if field.errors %}
+					{% for e in field.errors %}
+					<p class="help-block">{{ e }}</p>
+					{% endfor %}
+					{% endif %}
 				</div>
-				{{ field(class_='form-control', tabindex=120) }}
-				{% if field.errors %}
-				{% for e in field.errors %}
-				<p class="help-block">{{ e }}</p>
-				{% endfor %}
-				{% endif %}
-			</div>
 
-			{# Remember me #}
-			{% if user_manager.enable_remember_me %}
-			{{ render_checkbox_field(login_form.remember_me, tabindex=130) }}
-			{% endif %}
+				{# Remember me #}
+				{% if user_manager.enable_remember_me %}
+				{{ render_checkbox_field(login_form.remember_me, tabindex=130) }}
+				{% endif %}
 
-			{# Submit button #}
-			<p>
-				{{ render_submit_field(form.submit, tabindex=180) }}
-			</p>
+				{# Submit button #}
+				<p>
+					{{ render_submit_field(form.submit, tabindex=180) }}
+				</p>
+			</form>
+		</div>
 
-			<h3>Sign in with Github</h3>
-			<p><a class="btn" href="{{ url_for('github_signin_page') }}">GitHub</a></p>
-		</form>
+		<div class="card mt-4">
+			{% from "flask_user/_macros.html" import render_field, render_checkbox_field, render_submit_field %}
+			<h2 class="card-header">{%trans%}Sign in with Github{%endtrans%}</h2>
+			<div class="card-body">
+				<a class="btn btn-primary" href="{{ url_for('github_signin_page') }}">GitHub</a>
+			</div>
+		</div>
 	</div>
 
-	<div class="right">
-		<aside class="box box_grey">
-			<h2>New here?</h2>
-
-			<div class="box-body">
+	<aside class="col-sm-4">
+		<div class="card">
+			{% from "flask_user/_macros.html" import render_field, render_checkbox_field, render_submit_field %}
+			<h2 class="card-header">{%trans%}New here?{%endtrans%}</h2>
+			<div class="card-body">
 				<p>Create an account using your forum account or email.</p>
 
-				<a href="{{ url_for('user_claim_page') }}" class="btn">{%trans%}Claim your account{%endtrans%}</a>
+				<a href="{{ url_for('user_claim_page') }}" class="btn btn-primary">{%trans%}Claim your account{%endtrans%}</a>
 			</div>
-		</aside>
-	</div>
+		</div>
+	</aside>
 </div>
 {% endblock %}
diff --git a/app/templates/flask_user/public_base.html b/app/templates/flask_user/public_base.html
index 60cafee..d37f96a 100644
--- a/app/templates/flask_user/public_base.html
+++ b/app/templates/flask_user/public_base.html
@@ -2,9 +2,9 @@
 
 {% block container %}
 	<main>
-		<div class="box box_grey">
-			<!-- <h2>{{ self.title() }}</h2> -->
-			<div class="box-body">
+		<div class="card">
+			<h2 class="card-header">{{ self.title() }}</h2>
+			<div class="card-body">
 				{% block content %}
 				{% endblock %}
 			</div>
diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html
index 54bd9b3..c90ac6c 100644
--- a/app/templates/packages/create_edit.html
+++ b/app/templates/packages/create_edit.html
@@ -23,7 +23,7 @@
 		<script src="/static/polltask.js"></script>
 		<script src="/static/package_create.js"></script>
 		<noscript>
-			<div class="box box_grey alert alert-warning">
+			<div class="alert alert-warning">
 				<span class="icon_message"></span>
 				Javascript is needed to automatically import metadata from VCS.
 			</div>
diff --git a/app/templates/packages/editrequest_view.html b/app/templates/packages/editrequest_view.html
index a9e0d93..c16ec5a 100644
--- a/app/templates/packages/editrequest_view.html
+++ b/app/templates/packages/editrequest_view.html
@@ -24,7 +24,7 @@
 			This edit request was merged.
 		</div>
 	{% elif request.status == 2 %}
-		<div class="box  box_grey alert alert-error">
+		<div class="box  box_grey alert alert-danger">
 			This edit request was rejected.
 		</div>
 	{% elif package.checkPerm(current_user, "APPROVE_CHANGES") %}
diff --git a/app/templates/users/claim.html b/app/templates/users/claim.html
index 5a6b53a..db00d3f 100644
--- a/app/templates/users/claim.html
+++ b/app/templates/users/claim.html
@@ -5,10 +5,10 @@ Creating an Account
 {% endblock %}
 
 {% block content %}
-	<div class="box box_grey">
-		<h2>{{ self.title() }}</h2>
+	<div class="card">
+		<h2 class="card-header">{{ self.title() }}</h2>
 
-		<div class="box-body">
+		<div class="card-body">
 			<p>
 				If you have a forum account, you'll need to prove that you own it
 				to get an account on ContentDB.
@@ -28,7 +28,7 @@ Creating an Account
 					out of the Minetest community.
 				</p>
 
-				<a href="https://forum.minetest.net/ucp.php?mode=register">
+				<a class="btn btn-primary" href="https://forum.minetest.net/ucp.php?mode=register">
 					Create a Forum Account
 				</a>
 			{% endif %}
@@ -36,18 +36,23 @@ Creating an Account
 	</div>
 
 	{% if not current_user.is_authenticated %}
-		<div class="box box_grey">
-			<h2>Option 1 - Use GitHub field in forum profile</h2>
+	<div class="row mt-4">
+		<div class="col-sm-4">
+		<div class="card">
+			<div class="card-header">
+				<span class="badge badge-pill badge-dark mr-2">Option 1</span>
+				Use GitHub field in forum profile
+			</div>
 
-			<form method="post" class="box-body" action="{{ url_for('user_claim_page') }}">
-				<input type="hidden" name="claim_type" value="github">
-				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+			<form method="post" class="card-body" action="{{ url_for('user_claim_page') }}">
+				<input class="form-control" type="hidden" name="claim_type" value="github">
+				<input class="form-control" type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
 				<p>
 					Enter your forum username here:
 				</p>
 
-				<input type="text" name="username" value="{{ username }}" required placeholder="Forum username">
+				<input class="form-control my-4" type="text" name="username" value="{{ username }}" required placeholder="Forum username">
 
 				<p>
 					You'll need to have the GitHub field in your forum profile
@@ -56,14 +61,19 @@ Creating an Account
 						do that here</a>.
 				</p>
 
-				<input type="submit" value="Next: log in with GitHub">
+				<input class="btn btn-primary" type="submit" value="Next: log in with GitHub">
 			</form>
 		</div>
+		</div>
 
-		<div class="box box_grey">
-			<h2>Option 2 - Paste verification token into signature</h2>
+		<div class="col-sm-4">
+		<div class="card">
+			<div class="card-header">
+				<span class="badge badge-pill badge-dark mr-2">Option 2</span>
+				Verification token
+			</div>
 
-			<form method="post" class="box-body" action="{{ url_for('user_claim_page') }}">
+			<form method="post" class="card-body" action="{{ url_for('user_claim_page') }}">
 				<input type="hidden" name="claim_type" value="forum">
 				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
@@ -71,7 +81,7 @@ Creating an Account
 					Enter your forum username here:
 				</p>
 
-				<input type="text" name="username" value="{{ username }}" required placeholder="Forum username">
+				<input class="form-control my-3" type="text" name="username" value="{{ username }}" required placeholder="Forum username">
 
 				<p>
 					Go to
@@ -79,11 +89,12 @@ Creating an Account
 						User Control Panel > Profile > Edit signature
 					</a>
 				</p>
+
 				<p>
 					Paste this into your signature:
 				</p>
 
-				<input type="text" value="{{ key }}" readonly size=32>
+				<input class="form-control my-3" type="text" value="{{ key }}" readonly size=32>
 
 				<p>
 					Click next so we can check it.
@@ -92,15 +103,20 @@ Creating an Account
 					Don't worry, you can remove it after this is done.
 				</p>
 
-				<input type="submit" value="Next">
+				<input class="btn btn-primary" type="submit" value="Next">
 			</form>
 		</div>
+		</div>
 
-		<div class="box box_grey">
-			<h2>Option 3 - Email/password sign up</h2>
+		<div class="col-sm-4">
+		<div class="card">
+			<div class="card-header">
+				<span class="badge badge-pill badge-dark mr-2">Option 3</span>
+				Email/password sign up
+			</div>
 
-			<div class="box-body">
-				<p>
+			<div class="card-body">
+				<p class="alert alert-danger">
 					<b>Only do this if you don't have a forum account!</b>
 				</p>
 				<p>
@@ -108,8 +124,10 @@ Creating an Account
 					options.
 				</p>
 
-				<a class="btn" href="{{ url_for('user.register') }}">Register</a>
+				<a class="btn btn-primary" href="{{ url_for('user.register') }}">Register</a>
 			</div>
 		</div>
+		</div>
+	</div>
 	{% endif %}
 {% endblock %}
diff --git a/app/templates/users/set_password.html b/app/templates/users/set_password.html
index 6fe88e9..3fb7b26 100644
--- a/app/templates/users/set_password.html
+++ b/app/templates/users/set_password.html
@@ -7,7 +7,7 @@
 {% block content %}
 
 {% if optional %}
-	<div class="box box_grey alert alert-primary">
+	<div class="alert alert-primary">
 		It is recommended that you set a password for your account.
 
 		<a class="alert_right button" href="{{ url_for('home_page') }}">Skip</a>