Merge pull request #52 from OpenTechFund/feature/73-news-page

Feature/73 news page

opentech/public/news/templates/news/news_page.html

@@ -4,20 +4,33 @@
 {% block content %}
 <div class="wrapper wrapper--small">
 
-    <h1>{{ page.title }}</h1>
-
-    {% for author in page.authors.all %}
-        <p><a href="{% pageurl author.author %}">{{ author.author }}</a><p>
-    {% endfor %}
-
-    <p>{{ page.introduction }}</p>
+    <h5 class="heading heading--author">
+        {{ page.display_date|date:"D, Y-m-d H:i" }}
+        {% if page.authors.all %}
+            | By:
+            {% for author in page.authors.all %}
+                <a href="{% pageurl author.author %}">{{ author.author }}</a>
+            {% endfor %}
+        {% endif %}
+    </h5>
+
+    {% if page.introduction %}
+        <h4 class="heading heading--introduction">{{ page.introduction }}</h4>
+    {% endif %}
 
     <section class="main-body">
         {% include_block page.body %}
     </section>
 
-    {% include "includes/share.html" %}
+    {% if page.news_types.all %}
+        <ul class="list list--flex">
+            {% for news_type in page.news_types.all %}
+                <li class="list__label">{{ news_type }}</li>
+            {% endfor %}
+        </ul>
+    {% endif %}
 
+    {% include "includes/share.html" %}
 </div>
 
 {% include "includes/relatedcontent.html" with related_documents=page.related_documents.all related_pages=page.related_pages.all %}

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

@@ -5,4 +5,8 @@
         font-weight: $weight--light;
         border-bottom: 1px solid $color--mid-grey;
     }
+
+    &--author {
+        margin: 2rem 0 0;
+    }
 }

opentech/static_src/src/sass/components/_list.scss

+.list {
+    &--flex {
+        display: flex;
+    }
+
+    &__label {
+        padding: 10px;
+        margin-right: 20px;
+        color: $color--white;
+        background: $color--light-blue;
+    }
+}

opentech/static_src/src/sass/main.scss

@@ -21,6 +21,7 @@
 @import 'components/icon';
 @import 'components/input';
 @import 'components/link';
+@import 'components/list';
 @import 'components/nav';
 @import 'components/responsive-object';
 @import 'components/rich-text';