From bceff8f13d6a1ff5e3afe7db249a44a207256b18 Mon Sep 17 00:00:00 2001 From: Thedro Neely Date: Sun, 24 Mar 2019 20:30:56 -0400 Subject: bootstrap/comments: Adapt comments UI to Tailwind CSS --- bootstrap/comments/backend/classes/commentsui.php | 26 ++++++++++++++------- bootstrap/comments/backend/classes/formui.php | 27 ++++++++++++++++------ bootstrap/comments/frontend/comments.js | 4 ++-- .../comments/frontend/uncollapsecommentslink.js | 4 +++- bootstrap/comments/themes/default/comments.html | 6 ++--- 5 files changed, 46 insertions(+), 21 deletions(-) (limited to 'bootstrap') diff --git a/bootstrap/comments/backend/classes/commentsui.php b/bootstrap/comments/backend/classes/commentsui.php index 9acd447..3273dc0 100644 --- a/bootstrap/comments/backend/classes/commentsui.php +++ b/bootstrap/comments/backend/classes/commentsui.php @@ -29,7 +29,8 @@ class CommentsUI extends FormUI { $comment_wrapper = new HTMLTag ('div', array ( 'id' => $permalink, - 'class' => 'hashover-comment' + 'class' => 'hashover-comment bg-white' + . ' rounded text-teal-darkest px-4 py-3 shadow-md my-3' ), false); if ($this->mode !== 'php') { @@ -46,7 +47,8 @@ class CommentsUI extends FormUI public function nameWrapper ($class = '{{class}}', $link = '{{link}}') { $name_wrapper = new HTMLTag ('span', array ( - 'class' => 'hashover-comment-name ' . $class, + 'class' => 'hashover-comment-name' + . ' text-sm font-bold text-black ' . $class, 'innerHTML' => $link ), false); @@ -99,7 +101,7 @@ class CommentsUI extends FormUI $thread_link = new HTMLTag ('a', array ( 'href' => '#' . $parent, 'id' => 'hashover-thread-link-' . $permalink, - 'class' => 'hashover-thread-link', + 'class' => 'hashover-thread-link no-underline text-grey-darker text-sm', 'title' => $this->locale->text['thread-tip'], 'innerHTML' => $inner_html ), false); @@ -135,7 +137,7 @@ class CommentsUI extends FormUI // Append more attributes $date_link->appendAttributes (array ( 'href' => '#' . $permalink, - 'class' => 'hashover-date-permalink', + 'class' => 'hashover-date-permalink no-underline text-grey-darker text-sm', 'title' => 'Permalink', 'innerHTML' => $date ), false); @@ -166,7 +168,9 @@ class CommentsUI extends FormUI $link = new HTMLTag ('a', array ( 'href' => '#', 'id' => 'hashover-' . $type . '-' . $permalink, - 'class' => $class, + 'class' => $class . ' no-underline bg-grey-lightest hover:bg-grey-light text-grey-darkest' + . ' font-bold py-1 px-2 border-b-4 border-r border-l border-t hover:border-grey-dark' + . ' rounded text-sm', 'title' => $title, 'innerHTML' => $text ), false); @@ -184,7 +188,9 @@ class CommentsUI extends FormUI // Create more attributes $link->createAttributes (array ( 'id' => $form. '-link-' . $permalink, - 'class' => 'hashover-comment-' . $type, + 'class' => ' no-underline bg-grey-lightest hover:bg-grey-light text-grey-darkest font-bold' + . ' py-1 px-2 border-b-4 border-r border-l border-t hover:border-grey-dark rounded text-sm' + . ' hashover-comment-' . $type, 'title' => $this->locale->text[$title_locale] )); @@ -280,7 +286,9 @@ class CommentsUI extends FormUI // Create more attributes $cancel_button->createAttributes (array ( - 'class' => 'hashover-submit ' . $class, + 'class' => 'no-underline bg-grey-lightest hover:bg-grey-light text-grey-darkest font-bold' + . ' py-1 px-2 border-b-4 border-r border-l border-t hover:border-grey-dark rounded text-sm' + . ' hashover-submit ' . $class, 'title' => $cancel_locale, 'innerHTML' => $cancel_locale )); @@ -399,7 +407,9 @@ class CommentsUI extends FormUI // Continue with other attributes $reply_post_button->createAttributes (array ( - 'class' => 'hashover-submit hashover-reply-post', + 'class' => 'no-underline bg-grey-lightest hover:bg-grey-light text-grey-darkest font-bold' + . ' py-1 px-2 border-b-4 border-r border-l border-t hover:border-grey-dark rounded text-sm' + . ' cursor-pointer hashover-submit hashover-reply-post', 'type' => 'submit', 'name' => 'post', 'value' => $post_reply, diff --git a/bootstrap/comments/backend/classes/formui.php b/bootstrap/comments/backend/classes/formui.php index eacb8e4..73556f4 100644 --- a/bootstrap/comments/backend/classes/formui.php +++ b/bootstrap/comments/backend/classes/formui.php @@ -183,7 +183,9 @@ class FormUI // Create input element $input = new HTMLTag ('input', array ( 'id' => $attributes['input-id'], - 'class' => 'hashover-input-info', + 'class' => 'hashover-input-info shadow-md appearance-none block w-full bg-grey-lightest' + . ' text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3' + . ' leading-tight focus:outline-none focus:bg-white focus:border-grey', 'type' => $attributes['input-type'], 'name' => $attributes['input-name'], 'value' => $attributes['input-value'], @@ -292,7 +294,10 @@ class FormUI // Create textarea $textarea = new HTMLTag ('textarea', array ( 'id' => 'hashover-' . $type . '-comment' . $permalink, - 'class' => 'hashover-textarea hashover-' . $type . '-textarea', + 'class' => 'hashover-textarea shadow-md appearance-none block w-full' + . ' bg-grey-lightest text-grey-darker border border-grey-lighter' + . ' rounded py-3 px-4 mb-3 leading-tight focus:outline-none' + . ' focus:bg-white focus:border-grey hashover-' . $type . '-textarea', 'cols' => '63', 'name' => 'comment', 'rows' => '6', @@ -501,7 +506,8 @@ class FormUI // Create element for message text $message_element = new HTMLTag ('div', array ( - 'id' => 'hashover-message' + 'id' => 'hashover-message', + 'class' => 'bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative mb-4' )); // Check if message cookie is set @@ -773,7 +779,9 @@ class FormUI // Create "Post Comment" button element $main_post_button = new HTMLTag ('input', array ( 'id' => 'hashover-post-button', - 'class' => 'hashover-submit hashover-post-button', + 'class' => 'hashover-submit hashover-post-button shadow bg-blue-light hover:bg-blue' + . ' focus:shadow-outline focus:outline-none text-white' + . ' font-bold py-2 px-4 rounded my-4 cursor-pointer', 'type' => 'submit', 'name' => 'post', 'value' => $post_button, @@ -851,13 +859,14 @@ class FormUI // Create wrapper element for comments $comments_section = new HTMLTag ('div', array ( - 'id' => 'hashover-comments-section' + 'id' => 'hashover-comments-section', + 'class' => 'mt-2' ), false); // Create wrapper element for comment count and sort dropdown menu $count_sort_wrapper = new HTMLTag ('div', array ( 'id' => 'hashover-count-wrapper', - 'class' => 'hashover-count-sort hashover-dashed-title' + 'class' => 'hashover-count-sort hashover-dashed-title text-right' )); // Create element for comment count @@ -896,6 +905,9 @@ class FormUI $sort_select = new HTMLTag ('select', array ( 'id' => 'hashover-sort-select', 'name' => 'sort', + 'class' => 'appearance-none mt-2 bg-white border inline-block' + . ' border-grey-light hover:border-grey px-4 py-2 pr-8 rounded' + . ' shadow leading-tight focus:outline-none focus:shadow-outline', 'size' => '1', 'title' => $this->locale->text['sort'] )); @@ -971,7 +983,8 @@ class FormUI // Create element that will hold the comments $sort_div = new HTMLTag ('div', array ( - 'id' => 'hashover-sort-section' + 'id' => 'hashover-sort-section', + 'class' => 'mt-6' ), false); // Add comments to HashOver element diff --git a/bootstrap/comments/frontend/comments.js b/bootstrap/comments/frontend/comments.js index d8bace6..0434837 100644 --- a/bootstrap/comments/frontend/comments.js +++ b/bootstrap/comments/frontend/comments.js @@ -86,9 +86,9 @@ HashOverConstructor.prototype.comments = { classes += ' hashover-reply'; // Append class to indicate odd or even reply for CSS styling if ((commentKey.split("r").length & 1) == 0) { - classes += ' odd'; + classes += ' comment-post-odd'; } else { - classes += ' even'; + classes += ' comment-post-even'; } } } diff --git a/bootstrap/comments/frontend/uncollapsecommentslink.js b/bootstrap/comments/frontend/uncollapsecommentslink.js index 48fbeb9..c6372d1 100644 --- a/bootstrap/comments/frontend/uncollapsecommentslink.js +++ b/bootstrap/comments/frontend/uncollapsecommentslink.js @@ -11,7 +11,9 @@ HashOver.prototype.uncollapseCommentsLink = function () // If so, create "More Comments" hyperlink this.instance['more-link'] = this.elements.create ('a', { href: '#', - className: 'hashover-more-link', + className: 'hashover-more-link bg-blue-light hover:bg-blue no-underline' + + ' text-white font-bold py-2 px-4 shadow-md' + + ' hover:border-blue rounded inline-block mt-2', title: this.instance['more-link-text'], textContent: this.instance['more-link-text'], diff --git a/bootstrap/comments/themes/default/comments.html b/bootstrap/comments/themes/default/comments.html index f9abc14..8694f37 100644 --- a/bootstrap/comments/themes/default/comments.html +++ b/bootstrap/comments/themes/default/comments.html @@ -3,8 +3,8 @@ {hashover:parent-link} -
-
+
+
{hashover:comment}
@@ -15,7 +15,7 @@ {hashover:dislike-count} - + {hashover:like-link} {hashover:dislike-link} {hashover:edit-link} -- cgit v1.2.3