Improve style of forms

6 files changed, 51 insertions, 26 deletions

diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html
index e53beec..255a4ca 100644
--- a/app/templates/macros/forms.html
+++ b/app/templates/macros/forms.html
@@ -1,10 +1,10 @@
-{% macro render_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%}
+{% macro render_field(field, label=None, label_visible=true, right_url=None, right_label=None, fieldclass=None) -%}
 	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
 		{% if field.type != 'HiddenField' and label_visible %}
-			{% if not label %}{% set label=field.label.text %}{% endif %}
-			<label for="{{ field.id }}">{{ label|safe }}</label>
+			{% if not label and label != "" %}{% set label=field.label.text %}{% endif %}
+			{% if label %}<label for="{{ field.id }}">{{ label|safe }}</label>{% endif %}
 		{% endif %}
-		{{ field(class_='form-control', **kwargs) }}
+		{{ field(class_=fieldclass or 'form-control', **kwargs) }}
 		{% if field.errors %}
 			{% for e in field.errors %}
 				<p class="help-block">{{ e }}</p>
@@ -124,9 +124,9 @@
 
 {% macro render_radio_field(field) -%}
 	{% for value, label, checked in field.iter_choices() %}
-		<div class="radio">
-			<label>
-				<input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}"{% if checked %} checked{% endif %}>
+		<div class="form-check my-1">
+			<label class="form-check-label">
+				<input class="form-check-input" type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}"{% if checked %} checked{% endif %}>
 				{{ label }}
 			</label>
 		</div>
diff --git a/app/templates/packages/release_edit.html b/app/templates/packages/release_edit.html
index c806f81..c309dac 100644
--- a/app/templates/packages/release_edit.html
+++ b/app/templates/packages/release_edit.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-	{% from "macros/forms.html" import render_field, render_submit_field %}
+	{% from "macros/forms.html" import render_field, render_submit_field, render_checkbox_field %}
 	<form method="POST" action="">
 		{{ form.hidden_tag() }}
 
@@ -34,7 +34,7 @@
 			<br />
 		{% else %}
 			{% if package.checkPerm(current_user, "APPROVE_RELEASE") %}
-				{{ render_field(form.approved) }}
+				{{ render_checkbox_field(form.approved, class_="my-3") }}
 			{% else %}
 				Approved: {{ release.approved }}
 			{% endif %}
diff --git a/app/templates/packages/release_new.html b/app/templates/packages/release_new.html
index 3578466..2f3bf68 100644
--- a/app/templates/packages/release_new.html
+++ b/app/templates/packages/release_new.html
@@ -5,16 +5,19 @@
 {% endblock %}
 
 {% block content %}
-	{% from "macros/forms.html" import render_field, render_submit_field %}
+	{% from "macros/forms.html" import render_field, render_submit_field, render_radio_field %}
 	<form method="POST" action="" enctype="multipart/form-data">
 		{{ form.hidden_tag() }}
 
 		{{ render_field(form.title, placeholder="Human readable. Eg: 1.0.0 or 2018-05-28") }}
-		{{ render_field(form.uploadOpt) }}
+		<p class="mb-0">Method</p>
+		{{ render_radio_field(form.uploadOpt) }}
+
 		{% if package.repo %}
-			{{ render_field(form.vcsLabel) }}
+			{{ render_field(form.vcsLabel, class_="mt-3") }}
 		{% endif %}
-		{{ render_field(form.fileUpload) }}
+
+		{{ render_field(form.fileUpload, fieldclass="form-control-file") }}
 		{{ render_submit_field(form.submit) }}
 	</form>
 {% endblock %}
diff --git a/app/templates/packages/screenshot_edit.html b/app/templates/packages/screenshot_edit.html
index fb01d09..84e592a 100644
--- a/app/templates/packages/screenshot_edit.html
+++ b/app/templates/packages/screenshot_edit.html
@@ -9,15 +9,15 @@
 		<img src="{{ screenshot.getThumbnailURL() }}" alt="{{ screenshot.title }}" />
 	</a>
 
-	{% from "macros/forms.html" import render_field, render_submit_field %}
+	{% from "macros/forms.html" import render_field, render_submit_field, render_checkbox_field %}
 	<form method="POST" action="" enctype="multipart/form-data">
 		{{ form.hidden_tag() }}
 
 		{{ render_field(form.title) }}
-		{{ render_field(form.delete) }}
+		{{ render_checkbox_field(form.delete) }}
 
 		{% if package.checkPerm(current_user, "APPROVE_SCREENSHOT") %}
-			{{ render_field(form.approved) }}
+			{{ render_checkbox_field(form.approved) }}
 		{% else %}
 			<p>Approved: {{ screenshot.approved }}</p>
 		{% endif %}
diff --git a/app/templates/packages/screenshot_new.html b/app/templates/packages/screenshot_new.html
index 2ec8701..66752ed 100644
--- a/app/templates/packages/screenshot_new.html
+++ b/app/templates/packages/screenshot_new.html
@@ -10,7 +10,7 @@
 		{{ form.hidden_tag() }}
 
 		{{ render_field(form.title) }}
-		{{ render_field(form.fileUpload) }}
+		{{ render_field(form.fileUpload, fieldclass="form-control-file") }}
 		{{ render_submit_field(form.submit) }}
 	</form>
 {% endblock %}
diff --git a/app/templates/threads/new.html b/app/templates/threads/new.html
index 22f5b72..10fa7c8 100644
--- a/app/templates/threads/new.html
+++ b/app/templates/threads/new.html
@@ -5,15 +5,37 @@
 {% endblock %}
 
 {% block content %}
-	{% from "macros/forms.html" import render_field, render_submit_field %}
-	<form method="POST" action="" enctype="multipart/form-data">
-		{{ form.hidden_tag() }}
 
-		{{ render_field(form.title) }}
-		{{ render_field(form.comment) }}
-		{{ render_field(form.private) }}
-		{{ render_submit_field(form.submit) }}
+{% from "macros/forms.html" import render_field, render_submit_field, render_checkbox_field %}
+<form method="POST" action="" enctype="multipart/form-data">
+	{{ form.hidden_tag() }}
+	{{ render_field(form.title) }}
+
+	<div class="row mt-0 mb-4 comments mx-0">
+		<div class="col-md-1 p-1">
+			<img class="img-responsive user-photo img-thumbnail img-thumbnail-1" src="{{ (current_user.email or '') | gravatar }}">
+		</div>
+		<div class="col">
+			<div class="card">
+				<div class="card-header {{ current_user.rank.name }}">
+					{{ current_user.display_name }}
+					<a name="reply"></a>
+				</div>
+				<div class="card-body">
+					{{ render_field(form.comment, label="", class_="m-0") }}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	{{ render_checkbox_field(form.private, class_="my-3") }}
+	<p>
+		Only the you, the package author, and users of Editor rank
+		and above can read private threads.
+	</p>
+
+	{{ render_submit_field(form.submit) }}
+</form>
+
 
-		<p>Only the you, the package author, and users of Editor rank and above can read private threads.</p>
-	</form>
 {% endblock %}