From 0d4dc29741ce63a52fe3328013e98313511f83fa Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Tue, 11 Dec 2018 11:09:44 +0000
Subject: [PATCH] Comments form improvements

---
 css/comment-respond.css | 40 ++++++++++++++++++++++++++++++++++++++++
 css/index.css           |  3 +++
 css/link.css            | 24 ++++++++++++++++++++++++
 docker-compose.yml      |  2 +-
 theme/comments.php      | 19 ++++++++++++++++---
 theme/index.php         |  3 ---
 6 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 css/comment-respond.css
 create mode 100644 css/link.css

diff --git a/css/comment-respond.css b/css/comment-respond.css
new file mode 100644
index 0000000..3e18eb3
--- /dev/null
+++ b/css/comment-respond.css
@@ -0,0 +1,40 @@
+.comment-respond__title {
+  border-bottom: 1px solid var(--color-light-grey);
+  margin-bottom: var(--space-xs);
+  padding-bottom: var(--space-sm);
+}
+
+.comment-respond__text {
+  font-size: 14px;
+}
+
+.comment-respond__item {
+  margin-bottom: var(--space-sm);
+}
+
+.comment-respond__label {
+  display: block;
+  margin-bottom: var(--space-xs);
+}
+
+.comment-respond__input {
+  background-color: #fff;
+  border: 1px solid var(--color-near-black);
+  padding: var(--space-xs);
+}
+
+.comment-respond__input:focus {
+  background-color: var(--color-pale-blue);
+  border-color: var(--color-light-blue);
+  outline: 0;
+}
+
+.comment-respond__submit {
+  background-color: var(--color-light-blue);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-family: var(--heading-font-family);
+  min-width: 100px;
+  padding: var(--space-xs);
+}
diff --git a/css/index.css b/css/index.css
index b0e5c02..ff35fb2 100644
--- a/css/index.css
+++ b/css/index.css
@@ -12,13 +12,16 @@
 @import "footer";
 @import "comments";
 @import "comment";
+@import "comment-respond";
 @import "avatar";
+@import "link";
 
 :root {
   --color-black: #000;
   --color-near-black: #333;
   --color-dark-blue: #201f42;
   --color-light-blue: #1574d2;
+  --color-pale-blue: #e9f4ff;
   --color-grey: #757575;
   --color-light-grey: #e0e0e0;
   --color-facebook: #3e5a98;
diff --git a/css/link.css b/css/link.css
new file mode 100644
index 0000000..92c1852
--- /dev/null
+++ b/css/link.css
@@ -0,0 +1,24 @@
+.link,
+.link:hover,
+.link:focus,
+.link:visited {
+  position: relative;
+  color: var(--color-light-blue);
+}
+
+.link:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transition-md) ease-out;
+}
+
+.link:focus:after,
+.link:hover:after {
+  opacity: 1;
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index 0987c7c..37dfede 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ wordpress:
     - WORDPRESS_DB_HOST=db
     - WORDPRESS_DB_PASSWORD=password
     - WORDPRESS_DB_USER=windycoys
-  image: 'wordpress:4.9.5-php5.6-apache'
+  image: 'wordpress:5.0.0-php5.6-apache'
   links:
     - db
   ports:
diff --git a/theme/comments.php b/theme/comments.php
index a4c053b..ff6f522 100644
--- a/theme/comments.php
+++ b/theme/comments.php
@@ -1,3 +1,18 @@
+<?php
+$form_settings = array(
+  class_form => 'comment-respond__form',
+  class_submit => 'comment-respond__submit',
+  comment_field => '<label class="comment-respond__label" for="comment">Comment</label><textarea class="comment-respond__input" id="comment" name="comment" cols="25" rows="8" aria-required="true"></textarea></p>',
+  logged_in_as => '<p class="comment-respond__text">' . sprintf( __( 'Logged in as <a class="link" href="%1$s">%2$s</a>. <a class="link" href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',
+  title_reply_before => '<h3 id="reply-title" class="comment-respond__title">',
+  comment_notes_before => '<p class="comment-respond__notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
+  fields => array(
+    author => '<div class="comment-respond__item"><label class="comment-respond__label" for="author">' . __( 'Name', 'domainreference' ) . ( $req ? '<span class="comment-respond__required">*</span>' : '' ) . '</label>' . '<input class="comment-respond__input" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
+    email => '<div class="comment-respond__item"><label class="comment-respond__label" for="email">' . __( 'Email', 'domainreference' ) . ( $req ? '<span class="comment-respond__required">*</span>' : '' ) . '</label>' . '<input class="comment-respond__input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
+    url => '<div class="comment-respond__item"><label class="comment-respond__label" for="url">' . __( 'Website', 'domainreference' ) . '</label>' . '<input class="comment-respond__input" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>',
+  ),
+);
+?>
 <div class="comments" id="comments">
   <div class="comments__head">
     <h2 class="comments__title">
@@ -27,8 +42,6 @@
     </ol>
   </div>
   <div class="comments__foot">
-    <?php comment_form(array(
-      'class_form' => 'foo-bar'
-    )) ?>
+    <?php comment_form($form_settings) ?>
   </div>
 </div>
diff --git a/theme/index.php b/theme/index.php
index 2d33f3b..bc42dc5 100644
--- a/theme/index.php
+++ b/theme/index.php
@@ -26,9 +26,6 @@
   </section>
   <section class="page__metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
     <?php get_template_part('partials/metadata') ?>
-    <div class="page__advert">
-      <?php get_template_part('partials/ad_wide_skyscraper') ?>
-    </div>
   </section>
   <?php endwhile; ?>
   <section class="page__banner">