add info text and buttons

opentech/apply/funds/templates/funds/includes/supporting_documents.html

@@ -33,28 +33,35 @@
             <div class="docs-block__row-inner">
                 <a class="docs-block__link" href="#">Upload new</a>
             </div>
-            <ul class="docs-block__document-list">
-                <li class="docs-block__document">
-                    <div class="docs-block__document-inner">
-                        <p class="docs-block__document-info"><b>This is a document title</b></p>
-                        <p class="docs-block__document-info">This is a document type</p>
-                    </div>
-                    <div class="docs-block__document-inner">
-                        <a class="docs-block__document-link" href="#">Download</a>
-                        <a class="docs-block__document-link" href="#">Remove</a>
-                    </div>
-                </li>
-                <li class="docs-block__document">
-                    <div class="docs-block__document-inner">
-                        <p class="docs-block__document-info"><b>This is a document title</b></p>
-                        <p class="docs-block__document-info">This is a document type</p>
-                    </div>
-                    <div class="docs-block__document-inner">
-                        <a class="docs-block__document-link" href="#">Download</a>
-                        <a class="docs-block__document-link" href="#">Remove</a>
-                    </div>
-                </li>
-            </ul>
+            <p class="docs-block__info-text">Every project requires a XXXXXX and XXXXXX to be uploaded</p>
+            <!-- Example document list
+                <ul class="docs-block__document-list">
+                    <li class="docs-block__document">
+                        <div class="docs-block__document-inner">
+                            <p class="docs-block__document-info"><b>This is a document title</b></p>
+                            <p class="docs-block__document-info">This is a document type</p>
+                        </div>
+                        <div class="docs-block__document-inner">
+                            <a class="docs-block__document-link" href="#">Download</a>
+                            <a class="docs-block__document-link" href="#">Remove</a>
+                        </div>
+                    </li>
+                    <li class="docs-block__document">
+                        <div class="docs-block__document-inner">
+                            <p class="docs-block__document-info"><b>This is a document title</b></p>
+                            <p class="docs-block__document-info">This is a document type</p>
+                        </div>
+                        <div class="docs-block__document-inner">
+                            <a class="docs-block__document-link" href="#">Download</a>
+                            <a class="docs-block__document-link" href="#">Remove</a>
+                        </div>
+                    </li>
+                </ul>
+            -->
         </li>
     </ul>
+    <div class="docs-block__buttons">
+        <a class="button button--primary" href="#">Submit for approval</a>
+        <a class="button button--primary" href="#">Ready for contracting</a>
+    </div>
 </div>

opentech/static_src/src/sass/apply/components/_docs-block.scss

@@ -100,6 +100,29 @@
         }
     }
 
+    &__info-text {
+        @include media-query(tablet-landscape) {
+            max-width: 65%;
+        }
+    }
+
+    &__buttons {
+        padding: 0 1rem 1rem;
+
+        @include media-query(tablet-portrait) {
+            padding: 0 2rem 2rem;
+        }
+
+        .button {
+            padding: .5rem 1rem;
+            margin: 0 .5rem .5rem 0;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
     &__document-list {
         width: 100%;
         margin-top: 1.5rem;