Improve package creation form

3 files changed, 81 insertions, 68 deletions

diff --git a/app/templates/base.html b/app/templates/base.html
index c80e080..b49b47d 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -7,7 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="/static/main.css">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css">
 	{% block headextra %}{% endblock %}
 </head>
 
@@ -122,8 +122,9 @@
 		<a href="{{ url_for('flatpage', path='help/reporting') }}">Report / DMCA</a>
 	</footer>
 
-	<script src="static/jquery.min.js"></script>
-	<script src="static/popper.min.js"></script>
-	<script src="static/bootstrap.min.js"></script>
+	<script src="/static/jquery.min.js"></script>
+	<script src="/static/popper.min.js"></script>
+	<script src="/static/bootstrap.min.js"></script>
+	{% block scriptextra %}{% endblock %}
 </body>
 </html>
diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html
index 66f305b..e53beec 100644
--- a/app/templates/macros/forms.html
+++ b/app/templates/macros/forms.html
@@ -2,7 +2,7 @@
 	<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 }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
 		{{ field(class_='form-control', **kwargs) }}
 		{% if field.errors %}
@@ -13,9 +13,8 @@
 	</div>
 {%- endmacro %}
 
-{% macro form_includes() -%}
+{% macro form_scripts() -%}
 	<link href="/static/jquery-ui.min.css" rel="stylesheet" type="text/css">
-	<script src="/static/jquery.min.js"></script>
 	<script src="/static/jquery-ui.min.js"></script>
 	<script src="/static/tagselector.js"></script>
 {% endmacro %}
@@ -58,16 +57,17 @@
 	<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 }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
-		<div class="multichoice_selector bulletselector">
+		<div class="multichoice_selector bulletselector form-control">
 			<input type="text" placeholder="Start typing to see suggestions">
 			<div class="clearboth"></div>
 		</div>
+		<div class="invalid-remaining invalid-feedback"></div>
 		{{ field(class_='form-control', **kwargs) }}
 		{% if field.errors %}
 			{% for e in field.errors %}
-				<p class="help-block">{{ e }}</p>
+				<div class="invalid-feedback">{{ e }}</div>
 			{% endfor %}
 		{% endif %}
 	</div>
@@ -77,13 +77,14 @@
 	<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 }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
-		<div class="metapackage_selector bulletselector">
+		<div class="metapackage_selector bulletselector form-control">
 			<input type="text" placeholder="Comma-seperated values">
 			<div class="clearboth"></div>
 		</div>
 		{{ field(class_='form-control', **kwargs) }}
+		<div class="invalid-remaining invalid-feedback"></div>
 		{% if field.errors %}
 			{% for e in field.errors %}
 				<p class="help-block">{{ e }}</p>
@@ -96,13 +97,14 @@
 	<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 }}" class="control-label">{{ label|safe }}</label>
+			<label for="{{ field.id }}">{{ label|safe }}</label>
 		{% endif %}
-		<div class="deps_selector bulletselector">
+		<div class="deps_selector bulletselector form-control">
 			<input type="text" placeholder="Comma-seperated values">
 			<div class="clearboth"></div>
 		</div>
 		{{ field(class_='form-control', **kwargs) }}
+		<div class="invalid-remaining invalid-feedback"></div>
 		{% if field.errors %}
 			{% for e in field.errors %}
 				<p class="help-block">{{ e }}</p>
@@ -134,7 +136,7 @@
 {% macro render_submit_field(field, label=None, tabindex=None) -%}
 	{% if not label %}{% set label=field.label.text %}{% endif %}
 	{#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
-	<input type="submit" value="{{label}}"
+	<input type="submit" value="{{label}}" class="btn btn-primary"
 		   {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
 		   >
 {%- endmacro %}
diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html
index 7e9392e..be61b1c 100644
--- a/app/templates/packages/create_edit.html
+++ b/app/templates/packages/create_edit.html
@@ -7,6 +7,31 @@
 	{% endif %}
 {% endblock %}
 
+{% from "macros/forms.html" import render_field, render_submit_field, form_scripts, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %}
+
+{% block scriptextra %}
+	{{ form_scripts() }}
+
+	<script src="/static/simplemde.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="/static/simplemde.min.css">
+	<script>
+		var simplemde = new SimpleMDE({ element: $("#desc")[0] });
+	</script>
+
+	{% if enable_wizard %}
+		<script src="/static/url.min.js"></script>
+		<script src="/static/polltask.js"></script>
+		<script src="/static/package_create.js"></script>
+		<noscript>
+			<div class="box box_grey alert alert-warning">
+				<span class="icon_message"></span>
+				Javascript is needed to automatically import metadata from VCS.
+			</div>
+		</noscript>
+	{% endif %}
+	<script src="/static/package_edit.js"></script>
+{% endblock %}
+
 {% block content %}
 	<h1>Create Package</h1>
 
@@ -17,76 +42,61 @@
 	</div>
 
 
-	{% from "macros/forms.html" import render_field, render_submit_field, form_includes, render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %}
-	{{ form_includes() }}
 	{{ package_lists() }}
 
 	<form method="POST" action="" class="tableform">
 		{{ form.hidden_tag() }}
 
-		<h2 class="pkg_meta">Package</h2>
-
-		{{ render_field(form.type, class_="pkg_meta") }}
-		{{ render_field(form.name, class_="pkg_meta") }}
-		{{ render_field(form.title, class_="pkg_meta") }}
-		{{ render_field(form.shortDesc, class_="pkg_meta") }}
-		{{ render_field(form.desc, class_="pkg_meta") }}
-		{{ render_multiselect_field(form.tags, class_="pkg_meta") }}
-		<div class="pkg_meta">
-			{{ render_field(form.license, class_="not_txp") }}
-		</div>
-		{{ render_field(form.media_license, class_="pkg_meta") }}
+		<fieldset>
+			<legend>Package</legend>
+
+			{{ render_field(form.type, class_="pkg_meta") }}
+			{{ render_field(form.name, class_="pkg_meta") }}
+			{{ render_field(form.title, class_="pkg_meta") }}
+			{{ render_field(form.shortDesc, class_="pkg_meta") }}
+			{{ render_field(form.desc, class_="pkg_meta") }}
+			{{ render_multiselect_field(form.tags, class_="pkg_meta") }}
+			<div class="pkg_meta">
+				{{ render_field(form.license, class_="not_txp") }}
+			</div>
+			{{ render_field(form.media_license, class_="pkg_meta") }}
+		</fieldset>
 
-		<div class="pkg_meta">
-			<h2 class="not_txp">Dependency Info</h2>
+		<fieldset class="pkg_meta">
+			<legend class="not_txp">Package</legend>
 
 			{{ render_mpackage_field(form.provides_str, class_="not_txp", placeholder="Comma separated list") }}
 			{{ render_deps_field(form.harddep_str, class_="not_txp not_game", placeholder="Comma separated list") }}
 			{{ render_deps_field(form.softdep_str, class_="not_txp not_game", placeholder="Comma separated list") }}
-		</div>
+		</fieldset>
 
-		<h2 class="pkg_meta">Repository and Links</h2>
+		<fieldset>
+			<legend class="pkg_meta">Repository and Links</legend>
 
-		<div class="pkg_wiz_1">
-			<p>Enter the repo URL for the package.
-			If the repo uses git then the metadata will be automatically imported.</p>
+			<div class="pkg_wiz_1">
+				<p>Enter the repo URL for the package.
+				If the repo uses git then the metadata will be automatically imported.</p>
 
-			<p>Leave blank if you don't have a repo. Click skip if the import fails.</p>
-		</div>
+				<p>Leave blank if you don't have a repo. Click skip if the import fails.</p>
+			</div>
 
-		{{ render_field(form.repo, class_="pkg_repo") }}
+			{{ render_field(form.repo, class_="pkg_repo") }}
 
-		<div class="pkg_wiz_1">
-			<a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
-			<a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
-		</div>
 
-		<div class="pkg_wiz_2">
-			Importing... (This may take a while)
-		</div>
+			<div class="pkg_wiz_1">
+				<a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
+				<a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
+			</div>
 
-		{{ render_field(form.website, class_="pkg_meta") }}
-		{{ render_field(form.issueTracker, class_="pkg_meta") }}
-		{{ render_field(form.forums, class_="pkg_meta") }}
-		<div class="pkg_meta">{{ render_submit_field(form.submit) }}</div>
-	</form>
+			<div class="pkg_wiz_2">
+				Importing... (This may take a while)
+			</div>
 
-	<script src="/static/simplemde.min.js"></script>
-	<link rel="stylesheet" type="text/css" href="/static/simplemde.min.css">
-	<script>
-		var simplemde = new SimpleMDE({ element: $("#desc")[0] });
-	</script>
+			{{ render_field(form.website, class_="pkg_meta") }}
+			{{ render_field(form.issueTracker, class_="pkg_meta") }}
+			{{ render_field(form.forums, class_="pkg_meta") }}
+		</fieldset>
 
-	{% if enable_wizard %}
-		<script src="/static/url.min.js"></script>
-		<script src="/static/polltask.js"></script>
-		<script src="/static/package_create.js"></script>
-		<noscript>
-			<div class="box box_grey alert alert-warning">
-				<span class="icon_message"></span>
-				Javascript is needed to automatically import metadata from VCS.
-			</div>
-		</noscript>
-	{% endif %}
-	<script src="/static/package_edit.js"></script>
+		<div class="pkg_meta">{{ render_submit_field(form.submit) }}</div>
+	</form>
 {% endblock %}