Tidy up unused templates and add very basic styling for the password …

…required page (#188)

* Tidy up unused templates and add very basic styling for the password required page
* border on input for high contrast mode, fix validation error
* remove commented code

tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html

@@ -7,7 +7,9 @@
 
         <ul class="page-listing page-listing--blog">
             {% for post in blog_posts %}
-                {% include "patterns/molecules/blog-item/blog-item.html" with item=post %}
+                {% firstof post.url post.link_external as link %}
+
+                {% include "patterns/molecules/listing/listing--avatar.html" with link=link avatar=post.author.image title=post.title name=post.author.name job_title=post.author.role date=post.date reading_time=post.read_time tags=post.tags tag_link_base=blog_index_url base_class="page-listing__item" %}
             {% endfor %}
         </ul>
 

tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html

@@ -5,12 +5,20 @@
 {% block html_class %}template-password-required{% endblock %}
 
 {% block content %}
-    <h1>Password required</h1>
 
-    <p>Please enter the password to proceed.</p>
 
-    <form action="{{ action_url }}" method="post">
-        <div>
+
+
+    <div class="grid grid--spacer-large streamfield">
+        <div class="grid__title">
+            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading="Password required" classes="motif-heading--one" %}
+        </div>
+
+        <div class="grid__paragraph">
+            <p class="heading heading--four">Please enter the password to proceed.</p>
+        </div>
+
+        <form action="#" method="post"  class="grid__form form">
             {% csrf_token %}
 
             {{ form.non_field_errors }}
@@ -22,7 +30,7 @@ <h1>Password required</h1>
             {% for field in form.hidden_fields %}
                 {{ field }}
             {% endfor %}
-            <input type="submit" value="Continue" />
-        </div>
-    </form>
+            <input type="submit" value="Continue" class="button" />
+        </form>
+    </div>
 {% endblock %}

tbx/static_src/sass/components/_form.scss

@@ -0,0 +1,37 @@
+@use 'config' as *;
+
+// Very basic form styling used for the 'password required' form but this could be adapted for other forms in the future
+
+.form {
+    @include font-size('heading-four');
+    font-family: $font--primary;
+    font-weight: $weight--light;
+
+    label {
+        @include font-size('body');
+        font-weight: $weight--semibold;
+        margin: $spacer-small 0 10px;
+        display: block;
+        color: var(--color--heading);
+    }
+
+    input[type='text'],
+    input[type='password'] {
+        border: 1px solid var(--color--border);
+        color: var(--color--background);
+        font-weight: $weight--normal;
+        padding: 10px $spacer-mini;
+        text-indent: 0;
+        display: block;
+    }
+
+    input[type='submit'] {
+        display: block;
+        margin-top: $spacer-small;
+    }
+}
+
+.errorlist {
+    color: var(--color--light-background);
+    font-weight: $weight--semibold;
+}

tbx/static_src/sass/components/_grid.scss

@@ -219,7 +219,8 @@
     &__stats,
     &__image,
     &__video,
-    &__mailchimp {
+    &__mailchimp,
+    &__form {
         margin-bottom: $spacer-medium;
         grid-column: 2 / span 4;
 

tbx/static_src/sass/main.scss

@@ -17,6 +17,7 @@
 @use 'components/featured-case-study';
 @use 'components/footer';
 @use 'components/footer-cta';
+@use 'components/form';
 @use 'components/grid';
 @use 'components/header';
 @use 'components/home-page-hero';