Use a native button for the comment placeholder
authorAlexander Ebert <ebert@woltlab.com>
Tue, 23 Aug 2022 19:50:51 +0000 (21:50 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Tue, 23 Aug 2022 19:50:51 +0000 (21:50 +0200)
com.woltlab.wcf/templates/commentListAddComment.tpl
wcfsetup/install/files/style/ui/comment.scss

index 5b14b062c5cb954cf960f3bb5217a1fbce385f5e..123659df312fe730d5505e7ae07669c386a4b13c 100644 (file)
@@ -1,6 +1,10 @@
 <li class="box48 jsCommentAdd jsOnly">
        {@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(48)}
-       <div class="commentListAddComment collapsed jsOuterEditorContainer" data-placeholder="{lang}wcf.comment.add{/lang}">
+       <div class="commentListAddComment collapsed jsOuterEditorContainer">
+               <button type="button" class="commentListAddCommentPlaceholder">
+                       {icon size=32 name='reply'}
+                       {lang}wcf.comment.add{/lang}
+               </button>
                <div class="commentListAddCommentEditorContainer">
                        {if !$commentList->getCommentManager()->canAddWithoutApproval($commentList->objectID)}
                                <p class="info jsCommentAddRequiresApproval">{lang}wcf.comment.moderation.info{/lang}</p>
index c68d4b377cb6e7926000c32cdd17f4bce32f24d4..15ee64ec347b59e64664f326388807b91c3f911d 100644 (file)
 
 .commentListAddComment {
        &.collapsed {
-               background-color: $wcfSidebarBackground;
-               cursor: pointer;
                overflow: hidden;
-               padding: 10px 20px;
                position: relative;
 
-               &::before {
+               .commentListAddCommentPlaceholder {
+                       align-items: center;
+                       background-color: $wcfSidebarBackground;
+                       column-gap: 10px;
                        color: $wcfSidebarText;
-                       content: $fa-var-reply;
-                       font-family: FontAwesome;
-                       font-size: 28px;
-                       height: 32px;
-                       line-height: 32px;
-                       margin-right: 10px;
-                       width: 32px;
-                       vertical-align: -5px;
+                       display: flex;
+                       padding: 10px 20px;
+                       width: 100%;
                }
 
-               &::after {
-                       color: $wcfSidebarText;
-                       content: attr(data-placeholder);
-                       position: relative;
-                       top: 2px;
-               }
-
-               > .commentListAddCommentEditorContainer {
+               .commentListAddCommentEditorContainer {
                        left: 200%;
                        position: absolute;
                        top: -100%;
                }
        }
 
+       &:not(.collapsed) .commentListAddCommentPlaceholder {
+               display: none;
+       }
+
        &.loading {
                height: 150px;
                position: relative;