bootstrap/comments: Adapt comments UI to Tailwind CSS

5 files changed, 46 insertions, 21 deletions

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}
 </div>
 
-<div class="hashover-balloon">
-	<div id="hashover-content-{hashover:permalink}" class="hashover-content">
+<div class="hashover-balloon mb-4">
+	<div id="hashover-content-{hashover:permalink}" class="hashover-content mt-3 mb-2">
 		{hashover:comment}
 	</div>
 
@@ -15,7 +15,7 @@
 			{hashover:dislike-count}
 		</span>
 
-		<span class="hashover-buttons">
+		<span class="hashover-buttons float-right">
 			{hashover:like-link}
 			{hashover:dislike-link}
 			{hashover:edit-link}