User Comments.

module/VuFind/tests/integration-tests/src/VuFindTest/Mink/RecordActionsTest.php

@@ -132,15 +132,15 @@ class RecordActionsTest extends \VuFindTest\Unit\MinkTestCase
         );
         // "Add" empty comment
         $this->findCss($page, 'form.comment-form .btn-primary')->click();
-        $this->assertNull($page->find('css', '.comment.row'));
+        $this->assertNull($page->find('css', '.comment'));
         // Add comment
         $this->findCss($page, 'form.comment-form [name="comment"]')->setValue('one');
         $this->findCss($page, 'form.comment-form .btn-primary')->click();
-        $this->findCss($page, '.comment.row');
+        $this->findCss($page, '.comment');
         // Remove comment
-        $this->findCss($page, '.comment.row .delete')->click();
+        $this->findCss($page, '.comment .delete')->click();
         $this->snooze(); // wait for UI update
-        $this->assertNull($page->find('css', '.comment.row'));
+        $this->assertNull($page->find('css', '.comment'));
         // Logout
         $this->findCss($page, '.logoutOptions a.logout')->click();
     }

themes/bootstrap3/less/components/record.less

@@ -8,6 +8,31 @@
 .citation th {text-align: right;}
 .item-notes ul { padding-left: 2rem; }
 .recordcover {max-height: 300px;}
+
+/* ------ Comments ------ */
+.comment-label,
+.comment-name { font-style: italic; }
+.comment { margin-bottom: 1rem; }
+.comment-name .delete { color: @state-danger-text; }
+@media (min-width: 768px) {
+  .comment-form,
+  .comment {
+    display: flex;
+    margin-bottom: 0;
+  }
+  .comment-label,
+  .comment-name {
+    min-width: 25%;
+    font-style: unset;
+  }
+  .comment-form .text-form { width: 100%; }
+  .comment-form > label { flex: 0 0 auto; }
+  .comment-form textarea {
+    display: block;
+    width: 100%;
+  }
+}
+
 .tagList {
   .tag {
     display: inline-block;

themes/bootstrap3/templates/RecordTab/usercomments.phtml

@@ -7,23 +7,19 @@
   <?=$this->render('record/comments-list.phtml')?>
 </div>
 <form class="comment-form" name="commentRecord" action="<?=$this->recordLink()->getActionUrl($this->driver, 'AddComment')?>" method="post">
-  <div class="row">
-    <div class="col-sm-3 name">
-      <input type="hidden" name="id" value="<?=$this->escapeHtmlAttr($this->driver->getUniqueId())?>"/>
-      <input type="hidden" name="source" value="<?=$this->escapeHtmlAttr($this->driver->getSourceIdentifier())?>"/>
-      <strong><?=$this->transEsc("Your Comment")?></strong>
-    </div>
-    <div class="col-sm-9">
-      <? $user = $this->auth()->isLoggedIn() ?>
-      <? if($user): ?>
-        <textarea name="comment" class="form-control" rows="3" required></textarea><br/>
-        <? if ($this->tab->isRecaptchaActive()): ?>
-          <?=$this->recaptcha()->html(true, false) ?><br/>
-        <? endif; ?>
-        <input class="btn btn-primary" data-loading-text="<?=$this->transEsc('Submitting') ?>..." type="submit" value="<?=$this->transEsc("Add your comment")?>"/>
-      <? else: ?>
-        <a href="<?=$this->url('myresearch-userlogin') ?>" class="btn btn-primary" data-lightbox title="Login"><i class="fa fa-sign-in" aria-hidden="true"></i> <?=$this->transEsc("You must be logged in first") ?></a>
+  <input type="hidden" name="id" value="<?=$this->escapeHtmlAttr($this->driver->getUniqueId())?>"/>
+  <input type="hidden" name="source" value="<?=$this->escapeHtmlAttr($this->driver->getSourceIdentifier())?>"/>
+  <label class="comment-label"><?=$this->transEsc("Your Comment")?></label>
+  <? $user = $this->auth()->isLoggedIn() ?>
+  <? if($user): ?>
+    <div class="text-form">
+      <textarea name="comment" class="form-control" rows="3" required></textarea>
+      <? if ($this->tab->isRecaptchaActive()): ?>
+        <?=$this->recaptcha()->html(true, false) ?>
       <? endif; ?>
+      <input class="btn btn-primary" data-loading-text="<?=$this->transEsc('Submitting') ?>..." type="submit" value="<?=$this->transEsc("Add your comment")?>"/>
     </div>
-  </div>
+  <? else: ?>
+    <a href="<?=$this->url('myresearch-userlogin') ?>" class="btn btn-primary" data-lightbox title="Login"><i class="fa fa-sign-in" aria-hidden="true"></i> <?=$this->transEsc("You must be logged in first") ?></a>
+  <? endif; ?>
 </form>

themes/bootstrap3/templates/record/comments-list.phtml

@@ -3,17 +3,17 @@
   <div class="alert alert-info"><?=$this->transEsc('Be the first to leave a comment')?>!</div>
 <? else: ?>
   <? foreach ($comments as $comment): ?>
-    <div class="comment row">
-      <div class="col-sm-3 name">
+    <div class="comment">
+      <div class="comment-name">
         <strong><?=$this->escapeHtml(trim($comment->firstname . ' ' . $comment->lastname))?></strong><br/>
         <small>
           <?=$this->escapeHtml($comment->created)?>
           <? if (($user = $this->auth()->isLoggedIn()) && $comment->user_id == $user->id): ?>
-            <a href="<?=$this->recordLink()->getActionUrl($this->driver, 'DeleteComment')?>?delete=<?=urlencode($comment->id)?>" id="recordComment<?=$this->escapeHtml($comment->id)?>" class="delete text-danger"><?=$this->transEsc('Delete')?></a>
+            <a href="<?=$this->recordLink()->getActionUrl($this->driver, 'DeleteComment')?>?delete=<?=urlencode($comment->id)?>" id="recordComment<?=$this->escapeHtml($comment->id)?>" class="delete"><?=$this->transEsc('Delete')?></a>
           <? endif; ?>
         </small>
       </div>
-      <div class="col-sm-9">
+      <div class="comment-text">
         <?=$this->escapeHtml($comment->comment)?>
       </div>
     </div>