From 345ab8f0dda4d70362db3892bbd84f457e81c5c2 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <github@andrewhayward.net>
Date: Fri, 31 May 2013 13:02:01 +0100
Subject: [PATCH] Submission template/style updates

---
 static/media/css/core.css         | 14 ++++-
 static/media/less/core.less       | 15 +++++-
 views/applications/new.html       | 86 +++++++++++++++++--------------
 views/applications/submitted.html | 56 +++++++++++---------
 4 files changed, 103 insertions(+), 68 deletions(-)

diff --git a/static/media/css/core.css b/static/media/css/core.css
index a354562..4bdc778 100644
--- a/static/media/css/core.css
+++ b/static/media/css/core.css
@@ -255,6 +255,12 @@ ol {
 #edit-application {
   margin-bottom: 20px;
 }
+#edit-application textarea {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
 #edit-application .items {
   list-style: none;
   margin: 0;
@@ -329,6 +335,12 @@ ol {
 }
 #evidence .item {
   position: relative;
+  width: 33%;
+  margin-left: 0;
+  padding-left: 20px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 #evidence .thumbnail {
   background: #FFF;
@@ -348,8 +360,6 @@ ol {
 #evidence img {
   display: block;
   width: 100%;
-  min-width: 150px;
-  min-height: 150px;
   margin: 0;
 }
 #evidence form {
diff --git a/static/media/less/core.less b/static/media/less/core.less
index ec1a814..256daee 100644
--- a/static/media/less/core.less
+++ b/static/media/less/core.less
@@ -290,6 +290,13 @@ ol {
 #edit-application {
 	margin-bottom: 20px;
 
+	textarea {
+		width: 100%;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
 	.items {
 		list-style: none;
 		margin: 0;
@@ -382,6 +389,12 @@ ol {
 #evidence {
 	.item {
 		position: relative;
+		width: 33%;
+		margin-left: 0;
+		padding-left: 20px;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
 	}
 
 	.thumbnail {
@@ -404,8 +417,6 @@ ol {
 	img {
 		display: block;
 		width: 100%;
-		min-width: 150px;
-		min-height: 150px;
 		margin: 0;
 	}
 
diff --git a/views/applications/new.html b/views/applications/new.html
index e9bc168..2b01d30 100644
--- a/views/applications/new.html
+++ b/views/applications/new.html
@@ -5,48 +5,54 @@
 {% endblock %}
 
 {% block content %}
-	<div class="span8 offset2">
-		<div id="application-review">
-			{% block intro %}
-			{% endblock %}
-			{% block items %}
-				<ul id="evidence" class="thumbnails"{% if evidence.length == 0 %} style="display: none;"{% endif %}>
-					{% for item in evidence %}
-						<li class="span2 item item-{{ item.mediaType.split('/')[0] }}">
-							{% if item.saved %}
-								<a href="{{ item.getLocationUrl() }}" class="thumbnail" data-fancybox-type="{{ item.mediaType.split('/')[0] }}" data-fancybox-group="gallery" title="{{ item.original }}">
-									<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
-								</a>
-							{% else %}
-								<span class="thumbnail processing" title="{{ item.original }}">
-									<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
-								</span>
-							{% endif %}
-							<form method="post" action="{{ item.getLocationUrl() }}">
-								<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-								<input type="hidden" name="action" value="delete">
-								<label title="Delete"><input type="submit" value="Delete"></label>
-							</form>
+	<div class="row">
+		<div class="span4">
+			<a href="{{ badge.url }}"><img src="{{ badge.image }}"></a>
+		</div>
+		<div class="span1"></div>
+		<div class="span7">
+			<div id="application-review">
+				{% block intro %}
+				{% endblock %}
+				{% block items %}
+					<ul id="evidence" class="thumbnails"{% if evidence.length == 0 %} style="display: none;"{% endif %}>
+						{% for item in evidence %}
+							<li class="item item-{{ item.mediaType.split('/')[0] }}">
+								{% if item.saved %}
+									<a href="{{ item.getLocationUrl() }}" class="thumbnail" data-fancybox-type="{{ item.mediaType.split('/')[0] }}" data-fancybox-group="gallery" title="{{ item.original }}">
+										<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
+									</a>
+								{% else %}
+									<span class="thumbnail processing" title="{{ item.original }}">
+										<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
+									</span>
+								{% endif %}
+								<form method="post" action="{{ item.getLocationUrl() }}">
+									<input type="hidden" name="_csrf" value="{{ csrfToken }}">
+									<input type="hidden" name="action" value="delete">
+									<label title="Delete"><input type="submit" value="Delete"></label>
+								</form>
+							</li>
+						{% endfor %}
+					</ul>
+				{% endblock %}
+			</div>
+			{% block form %}
+				<form id="edit-application" method="post" enctype="multipart/form-data">
+					<input type="hidden" name="_csrf" value="{{ csrfToken }}">
+					{% block descriptionTitle %}<h3>Start by telling us about your work</h3>{% endblock %}
+					<textarea name="description" rows="7" id="edit-description">{{ application.description }}</textarea>
+					<p class="text-right"><button type="submit" value="save" class="btn">Update</button></p>
+					{% block evidenceTitle %}<h3>Then upload your pictures and videos</h3>{% endblock %}
+					<ul class="items">
+						<li class="item">
+							<input type="file" name="media" accept="image/*, video/*" multiple="multiple">
 						</li>
-					{% endfor %}
-				</ul>
+					</ul>
+					<p class="text-right buttons"><button type="submit" value="upload" class="btn">Upload</button></p>
+				</form>
 			{% endblock %}
 		</div>
-		{% block form %}
-			<form id="edit-application" method="post" enctype="multipart/form-data">
-				<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-				{% block descriptionTitle %}<h3>Start by telling us about your work</h3>{% endblock %}
-				<textarea name="description" class="span8" rows="7" id="edit-description">{{ application.description }}</textarea>
-				<p class="text-right"><button type="submit" value="save" class="btn">Update</button></p>
-				{% block evidenceTitle %}<h3>Then upload your pictures and videos</h3>{% endblock %}
-				<ul class="items">
-					<li class="item">
-						<input type="file" name="media" accept="image/*, video/*" multiple="multiple">
-					</li>
-				</ul>
-				<p class="text-right buttons"><button type="submit" value="upload" class="btn">Upload</button></p>
-			</form>
-		{% endblock %}
 	</div>
 {% endblock %}
 
@@ -113,7 +119,7 @@
 
 				$item
 					.attr('id', 'uploaded-item-' + data.key)
-					.addClass('span2 item item-' + data.evidence.type.split('/')[0])
+					.addClass('item item-' + data.evidence.type.split('/')[0])
 					.append($wrapper)
 					.append($form)
 					.appendTo($list);
diff --git a/views/applications/submitted.html b/views/applications/submitted.html
index 135e252..36ab3ee 100644
--- a/views/applications/submitted.html
+++ b/views/applications/submitted.html
@@ -5,31 +5,39 @@
 {% endblock %}
 
 {% block content %}
-	<div class="span8 offset2">
-		{% block notice %}
-			<div class="alert">
-				Your application is waiting to be reviewed.
-			</div>
-		{% endblock %}
-		<div class="well">
+	{% block notice %}
+		<div class="alert">
+			Your application is waiting to be reviewed.
+		</div>
+	{% endblock %}
+	<div class="row">
+		<div class="span4">
+			<a href="{{ badge.url }}"><img src="{{ badge.image }}"></a>
+		</div>
+		<div class="span1"></div>
+		<div class="span7">
 			<div id="application-review">
-				<h3>Your application</h3>
-				<pre>{{ application.description }}</pre>
-				<ul id="evidence" class="thumbnails"{% if evidence.length == 0 %} style="display: none;"{% endif %}>
-					{% for item in evidence %}
-						<li class="span2 item item-{{ item.mediaType.split('/')[0] }}">
-							{% if item.saved %}
-								<a href="{{ item.getLocationUrl() }}" class="thumbnail" data-fancybox-type="{{ item.mediaType.split('/')[0] }}" data-fancybox-group="gallery" title="{{ item.original }}">
-									<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
-								</a>
-							{% else %}
-								<span class="thumbnail processing" title="{{ item.original }}">
-									<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
-								</span>
-							{% endif %}
-						</li>
-					{% endfor %}
-				</ul>
+				<div class="well">
+					<h3>Your application</h3>
+					{% if application.description %}
+						<pre>{{ application.description }}</pre>
+					{% endif %}
+					<ul id="evidence" class="thumbnails"{% if evidence.length == 0 %} style="display: none;"{% endif %}>
+						{% for item in evidence %}
+							<li class="span2 item item-{{ item.mediaType.split('/')[0] }}">
+								{% if item.saved %}
+									<a href="{{ item.getLocationUrl() }}" class="thumbnail" data-fancybox-type="{{ item.mediaType.split('/')[0] }}" data-fancybox-group="gallery" title="{{ item.original }}">
+										<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
+									</a>
+								{% else %}
+									<span class="thumbnail processing" title="{{ item.original }}">
+										<img src="{{ item.getThumbnailUrl() }}" width="150" height="150">
+									</span>
+								{% endif %}
+							</li>
+						{% endfor %}
+					</ul>
+				</div>
 			</div>
 		</div>
 	</div>