adding download link component to individual submission page

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

@@ -48,7 +48,18 @@
             <div>
                 {{ object.render_answers }}
             </div>
+
+            <div class="wrapper wrapper--top-bottom-space">
+                <a class="link link--download" href="#">
+                    <div>
+                        <svg><use xlink:href="#file"></use></svg>
+                        <span>loremfilename.pdf</span>
+                    </div>
+                    <svg><use xlink:href="#download"></use></svg>
+                </a>
+            </div>
         </div>
+
         <aside class="sidebar">
             <div class="sidebar__inner">
                 <h3>Other Submissions</h3>

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

+.link {
+    &--download {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px;
+        color: $color--default;
+        border-top: 1px solid $color--mid-grey;
+        border-right: 1px solid $color--mid-grey;
+        border-left: 1px solid $color--mid-grey;
+        transition: background-color, $transition;
+
+        &:only-child,
+        &:last-child {
+            border-bottom: 1px solid $color--mid-grey;
+        }
+
+        &:hover {
+            background-color: transparentize($color--light-blue, 0.9);
+        }
+
+        span {
+            @extend %h5;
+            margin-left: 10px;
+            font-weight: $weight--bold;
+        }
+
+        svg {
+            &:first-child {
+                width: 26px;
+                height: 32px;
+                stroke: $color--dark-grey;
+            }
+
+            &:last-child {
+                width: 12px;
+                height: 18px;
+                stroke: $color--primary;
+            }
+        }
+    }
+}

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

@@ -15,6 +15,7 @@
 @import 'components/grid';
 @import 'components/heading';
 @import 'components/icon';
+@import 'components/link';
 @import 'components/sidebar';
 @import 'components/status-bar';
 @import 'components/wrapper';

opentech/templates/includes/sprites.html

@@ -159,4 +159,18 @@
     <symbol id="github" width="26" height="25" viewBox="0 0 26 25">
         <path d="M12.71 0C5.692 0 0 5.69 0 12.71c0 5.616 3.642 10.38 8.692 12.06.635.119.869-.275.869-.61 0-.304-.012-1.305-.018-2.367-3.536.769-4.282-1.5-4.282-1.5-.578-1.469-1.411-1.86-1.411-1.86-1.153-.788.087-.772.087-.772 1.276.09 1.948 1.31 1.948 1.31 1.134 1.943 2.974 1.381 3.699 1.056.114-.82.443-1.382.807-1.7-2.823-.32-5.791-1.41-5.791-6.28 0-1.388.497-2.522 1.31-3.412-.132-.32-.567-1.613.123-3.364 0 0 1.067-.342 3.496 1.303a12.183 12.183 0 0 1 3.181-.428c1.08.005 2.169.146 3.184.428 2.426-1.645 3.492-1.303 3.492-1.303.692 1.75.257 3.043.125 3.364.815.89 1.308 2.024 1.308 3.411 0 4.882-2.973 5.957-5.804 6.272.456.394.862 1.168.862 2.353 0 1.7-.014 3.07-.014 3.489 0 .338.228.734.873.61 5.047-1.683 8.684-6.446 8.684-12.06C25.42 5.69 19.73 0 12.71 0" />
     </symbol>
+
+    <symbol id="file" viewBox="0 0 27 32">
+        <g stroke-width="2" fill="none" fill-rule="evenodd">
+            <path d="M1.296 1v29.25H25V9.429h-8.218V1H1.296z" />
+            <path d="M5.5 20h15M5.5 15H12" stroke-linecap="square" />
+            <path d="M16.828.729l8.551 8.5" />
+        </g>
+    </symbol>
+
+    <symbol id="download" viewBox="0 0 16 21">
+        <g stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="square">
+            <path d="M8.176 13.833V2.167M8.303 14l4.991-4.714M8 14L3.009 9.286M13.824 19.5H2.176" />
+        </g>
+    </symbol>
 </svg>