Improve form CSS

3 files changed, 87 insertions, 46 deletions

diff --git a/app/scss/components.scss b/app/scss/components.scss
index f23ba4a..4b9a227 100644
--- a/app/scss/components.scss
+++ b/app/scss/components.scss
@@ -25,16 +25,20 @@ a:hover {
 	padding: 0;
 }
 
-.box h3 {
+.box h2, .box h3 {
 	margin: 0;
-	padding: 1em 0.5em 0.5em 15px;
+	padding: 0.5em 0.5em 0.5em 15px;
 	border-bottom: 1px solid #444;
 }
 
-.box p, .box table {
+.box > p, .box > table, .box > .buttonset, .box > form {
 	margin: 1em;
 }
 
+// .box form {
+// 	padding: 1em;
+// }
+
 .box_grey {
 	background: #333;
 	border: 1px solid #444;
@@ -62,6 +66,7 @@ a:hover {
 	background: #3a3a3a;
 }
 
+
 /*
 	buttonset
 */
@@ -77,19 +82,59 @@ a:hover {
 	margin: 15px 0;
 }
 
-.button, .buttonset li a {
+.button, .buttonset li a, input[type=submit], input[type=text],
+		input[type=password], textarea, select {
 	text-align: center;
 	display: inline-block;
-	padding: 0.5em 0.7em;
-	background: #333;
-	border: 1px solid #444;
+	padding: 0.4em 1em;
+	background: rgba(255,255,255,0.07);
+	border: 1px solid rgba(255,255,255,0.1);
 	color: #ddd;
 	border-radius: 5px;
 	text-decoration: none;
+	font-size: 100%;
 }
 
-.button:hover, .buttonset li a:hover {
-	background: #444;
+input[type=text], input[type=password], textarea, select {
+	text-align: left;
+}
+
+select {
+	min-width: 200px;
+}
+
+select:not([multiple]) {
+	background: linear-gradient(#444, #333);
+}
+
+.form-group {
+	padding: 8px 0;
+}
+
+.form-group label {
+	display: block;
+	vertical-align: top;
+	padding: 0 8px 8px 0;
+}
+
+.form-group input, .form-group textarea {
+	display: block;
+	min-width: 100%;
+	max-width: 100%;
+}
+
+.box .form-group input, .box .form-group textarea {
+	min-width: 95%;
+	max-width: 95%;
+}
+
+.form-group textarea {
+	min-height: 200px;
+}
+
+.button:hover, .buttonset li a:hover, input[type=submit]:hover {
+	background: rgba(255,255,255,0.13);
+	border: 1px solid rgba(255,255,255,0.17);
 	border: 1px solid #555;
 	text-decoration: none;
 }
diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html
index 04ea617..1bd7ee6 100644
--- a/app/templates/packages/create_edit.html
+++ b/app/templates/packages/create_edit.html
@@ -8,32 +8,28 @@
 {% endblock %}
 
 {% block content %}
+	<h2>Create Package</h2>
+
 	{% from "macros/forms.html" import render_field, render_submit_field %}
-	<form method="POST" action="">
+	<form method="POST" action="" class="tableform">
 		{{ form.hidden_tag() }}
 
-		<div class="pkg_meta">
-			{{ render_field(form.name) }}
-			{{ render_field(form.title) }}
-			{{ render_field(form.shortDesc) }}
-			{{ render_field(form.desc) }}
-			{{ render_field(form.type) }}
-			{{ render_field(form.license) }}
-			{{ render_field(form.tags) }}
-		</div>
+		{{ 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_field(form.type, class_="pkg_meta") }}
+		{{ render_field(form.license, class_="pkg_meta") }}
+		{{ render_field(form.tags, class_="pkg_meta") }}
 
 		<div class="pkg_wiz_1">
-			<h2>Import Package</h2>
-
 			<p>Enter the repo URL for the package.
 			If it's hosted on Github then metadata will automatically be imported.</p>
 
 			<p>Leave blank if you don't have a repo.</p>
 		</div>
 
-		<div class="pkg_repo">
-			{{ render_field(form.repo) }}
-		</div>
+		{{ render_field(form.repo, class_="pkg_repo") }}
 
 		<div class="pkg_wiz_1">
 			<a id="pkg_wiz_1_next" class="button button-primary">Next</a>
@@ -43,12 +39,10 @@
 			Importing...
 		</div>
 
-		<div class="pkg_meta">
-			{{ render_field(form.website) }}
-			{{ render_field(form.issueTracker) }}
-			{{ render_field(form.forums) }}
-			{{ render_submit_field(form.submit) }}
-		</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>
 
 	{% if not package.title %}
diff --git a/app/templates/users/user_profile_page.html b/app/templates/users/user_profile_page.html
index 2d429f1..53afd57 100644
--- a/app/templates/users/user_profile_page.html
+++ b/app/templates/users/user_profile_page.html
@@ -57,34 +57,36 @@
 		{% endfor %}
 	</ul>
 	{% if user == current_user or user.checkPerm(current_user, "CHANGE_AUTHOR") %}
-		<a href="{{ url_for('create_edit_package_page', author=user.username) }}">
+		<p><a class="button" href="{{ url_for('create_edit_package_page', author=user.username) }}">
 			Create
-		</a>
+		</a></p>
 	{% endif %}
 </div>
 
 {% if form %}
 	{% from "macros/forms.html" import render_field, render_submit_field %}
-	<form class="box box_grey" action="" method="POST" class="form" role="form">
+	<div class="box box_grey">
 		<h2>Edit Details</h2>
 
-		<div class="row">
-			<div class="col-sm-6 col-md-5 col-lg-4">
-				{{ form.hidden_tag() }}
+		<form action="" method="POST" class="form" role="form">
+			<div class="row">
+				<div class="col-sm-6 col-md-5 col-lg-4">
+					{{ form.hidden_tag() }}
 
-				{{ render_field(form.display_name, tabindex=230) }}
+					{{ render_field(form.display_name, tabindex=230) }}
 
-				{% if user.checkPerm(current_user, "CHANGE_EMAIL") %}
-					{{ render_field(form.email, tabindex=240) }}
-				{% endif %}
+					{% if user.checkPerm(current_user, "CHANGE_EMAIL") %}
+						{{ render_field(form.email, tabindex=240) }}
+					{% endif %}
 
-				{% if user.checkPerm(current_user, "CHANGE_RANK") %}
-					{{ render_field(form.rank, tabindex=250) }}
-				{% endif %}
+					{% if user.checkPerm(current_user, "CHANGE_RANK") %}
+						{{ render_field(form.rank, tabindex=250) }}
+					{% endif %}
 
-				{{ render_submit_field(form.submit, tabindex=280) }}
+					{{ render_submit_field(form.submit, tabindex=280) }}
+				</div>
 			</div>
-		</div>
-	</form>
+		</form>
+	</div>
 {% endif %}
 {% endblock %}