adding sidebar to individual submission page template

opentech/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -17,22 +17,32 @@
 <div>Submission Details</div>
 
 <div class="wrapper wrapper--medium wrapper--top-bottom-inner-space">
-    Submitted: {{ object.submit_time.date }} by {{ object.user.get_full_name }}
-    <h2>Proposal Information</h2>
-    <div>
-        Requested Funding {{ object.value }}
-        Project Duration {{ object.value }}
-        Legal Name {{ object.full_name }}
-        Email {{ object.email }}
-    </div>
-    <div>
-        {{ object.render_answers }}
+    <div class="wrapper wrapper--sidebar">
+        <div>
+            <h6 class="heading heading--submission-meta">
+                <span>Submitted: </span>{{ object.submit_time.date }} by {{ object.user.get_full_name }}
+            </h6>
+
+            <h3>Proposal Information</h3>
+            <div>
+                Requested Funding {{ object.value }}
+                Project Duration {{ object.value }}
+                Legal Name {{ object.full_name }}
+                Email {{ object.email }}
+            </div>
+            <div>
+                {{ object.render_answers }}
+            </div>
+        </div>
+        <aside class="sidebar">
+            <div class="sidebar__inner">
+                <h3>Other Submissions</h3>
+                {% for submission in other_submissions %}
+                    <a href="{% url 'funds:submission' submission.id %}">{{ submission.title }}</a>
+                {% endfor %}
+            </div>
+        </aside>
     </div>
-</div>
-<div>
-    <h3>Other Submissions</h3>
-    {% for submission in other_submissions %}
-        <a href="{% url 'funds:submission' submission.id %}">{{ submission.title }}</a>
-    {% endfor %}
+
 </div>
 {% endblock %}

opentech/static_src/src/sass/apply/components/_heading.scss

@@ -20,4 +20,12 @@
             }
         }
     }
+
+    &--submission-meta {
+        color: transparentize($color--dark-grey, 0.5);
+
+        span {
+            font-weight: $weight--normal;
+        }
+    }
 }

opentech/static_src/src/sass/apply/components/_sidebar.scss

+.sidebar {
+    flex-basis: 345px;
+    margin-top: 20px;
+
+
+    @include media-query(tablet-portrait) {
+        margin: 0 20px 0 0;
+    }
+
+    &__inner {
+        padding: 20px;
+        border: 1px solid $color--mid-grey;
+    }
+}

opentech/static_src/src/sass/apply/main.scss

@@ -14,6 +14,7 @@
 @import 'components/button';
 @import 'components/heading';
 @import 'components/icon';
+@import 'components/sidebar';
 @import 'components/status-bar';
 @import 'components/wrapper';