improving layout of premium addition

frontend/forms.py

@@ -228,7 +228,7 @@ class CustomPremiumForm(forms.ModelForm):
         model = Premium
         fields = 'campaign', 'amount', 'description', 'type', 'limit'
         widgets = { 
-                'description': forms.Textarea(attrs={'cols': 80, 'rows': 2}),
+                'description': forms.Textarea(attrs={'cols': 80, 'rows': 4}),
                 'campaign': forms.HiddenInput,
                 'type': forms.HiddenInput(attrs={'value':'XX'}),
                 'limit': forms.TextInput(attrs={'value':'0'}),

frontend/templates/manage_campaign.html

@@ -198,7 +198,7 @@ Please fix the following before launching your campaign:
 	
 	{{ form.target.errors }}${{ form.target }}
 	<h3>License being offered</h3>
-	<p> This is the license you are offering to use once the campaign succeeds. For more information on the licenses you can use, see <a href="http://creativecommons.org/licenses">Creative Commons: About the Licenses</a>.  Once your campaign is active, you'll be able to switch to a less restrictive license, but not a more restrictive one.</p>
+	<p> This is the license you are offering to use once the campaign succeeds. For more information on the licenses you can use, see <a href="http://creativecommons.org/licenses">Creative Commons: About the Licenses</a>.  Once your campaign is active, you'll be able to switch to a less restrictive license, but not a more restrictive one.  We encourage you to pick the least restrictive license you are comfortable with, as this will increase the ways people can use your unglued ebook and motivate more people to donate.</p>
 	{{ form.license.errors }}{{ form.license }}
 	<h3>Ending date</h3>
 	<p> This is the ending date of your campaign. Once you launch the campaign, you won't be able to change it.</p>
@@ -266,16 +266,16 @@ Please fix the following before launching your campaign:
 	</div>
 	<h4>Add a premium for this campaign</h4>
 
-	<form action="#" method="POST">
+	<form action="#" method="POST" id="premium_add">
 	{% csrf_token %}
-	Pledge Amount: {{ premium_form.amount.errors }}${{ premium_form.amount }}<br />
-	Premium Description: {{ premium_form.description.errors }}{{ premium_form.description }}<br />
-	Number Available (0 if no limit): {{ premium_form.limit.errors }}{{ premium_form.limit }}<br />
+	<span class="premium_add_label">Pledge Amount ($2000 maximum):</span> {{ premium_form.amount.errors }}<span class="premium_field_label">$</span>{{ premium_form.amount }}<br /><br />
+	<span class="premium_add_label">Premium Description:</span> {{ premium_form.description.errors }}{{ premium_form.description }}<br /><br />
+	<span class="premium_add_label">Number Available (0 if no limit):</span> {{ premium_form.limit.errors }}{{ premium_form.limit }}<br /><br />
 	{{ premium_form.campaign }}
 	{{ premium_form.type.errors }}{{ premium_form.type }}
 	<br />
 	<input type="submit" name="add_premium" value="Add Premium" />
-	</form>
+	</form><br /><br />
 
 	<h4>Editing premiums</h4>
 	<p>At this time, you can't edit a premium you've created. But you can deactivate a premium and add a new one to replace it. So be sure to double-check your spelling before adding it.</p>

static/css/manage_campaign.css

@@ -275,3 +275,25 @@ input[name="launch"] {
 #launchme {
   margin: 15px auto;
 }
+#premium_add span,
+#premium_add input[type="text"],
+#premium_add textarea {
+  float: left;
+}
+#premium_add input[type="submit"] {
+  float: right;
+}
+#premium_add input[type="text"] {
+  width: 33%;
+}
+#premium_add textarea {
+  width: 60%;
+}
+#premium_add .premium_add_label {
+  width: 30%;
+  margin-right: 2%;
+}
+#premium_add .premium_field_label {
+  width: 1%;
+  margin-left: -1%;
+}

static/less/manage_campaign.less

@@ -13,4 +13,32 @@ input[name="launch"] {
 
 #launchme {
 	margin: 15px auto;
+}
+
+#premium_add {
+    span, input[type="text"], textarea {
+        float: left;
+    }
+    
+    input[type="submit"] {
+        float: right;
+    }
+
+    input[type="text"] {
+        width: 33%;
+    }
+    
+    textarea {
+        width: 60%;
+    }
+    
+    .premium_add_label {
+        width: 30%;
+        margin-right: 2%;
+    }
+    
+    .premium_field_label {
+        width: 1%;
+        margin-left: -1%;
+    }
 }