tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revised comments to align and style of theme and wordpress

This commit is contained in:
Fabiano Alencar 2018-08-27 12:07:53 -03:00
parent 7464cfe03f
commit 67c5a02ccf
2 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/assets/scss/_comments.scss
View File

@ -8,8 +8,26 @@
} }
} }
form{ form{
&#form-comment{ &#commentform{
.comment-notes {
font-size: 12px;
color: #898d8f;
}
.form-row{ .form-row{
@media only screen and (min-width: 768px){
.form-row--avartar {
flex: 0 0 5.333333%;
max-width: 5.333333%;
}
.form-row--textarea {
flex: 0 0 94.666667%;
max-width: 94.666667%;
}
}
img {
width: 50px;
height: 50px;
}
.form-group { .form-group {
.comments-input { .comments-input {
margin-left: auto; margin-left: auto;
@ -21,6 +39,35 @@
} }
} }
} }
p[class^="comment-form-"] {
margin-bottom: 22px;
label{
font-size: 12px;
font-weight: 700;
color: #000;
margin-right: 1.8%;
}
input {
width: 50%;
border: 1px solid #cbcbcb;
height: 30px;
@media only screen and (max-width: 576px) {
width: 82%;
}
}
}
.comment-form-author {
margin-top: 22px;
}
.comment-form-url {
margin-bottom: 30px !important;
label {
margin-right: 1.4% !important;
@media only screen and (max-width: 576px) {
margin-right: 0.3% !important;
}
}
}
.mx-sm-auto{ .mx-sm-auto{
@media only screen and (max-width: 576px){ @media only screen and (max-width: 576px){
padding: 0 2rem; padding: 0 2rem;
@ -67,11 +114,12 @@
} }
} }
.list-comments{ .list-comments{
@media only screen and (max-width: 576px){
padding: 0 2rem;
}
.media{ .media{
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
> .avatar{
width: 50px;
height: 50px;
}
.media-body{ .media-body{
h5{ h5{
a{ a{

4
src/comments.php
View File

@ -43,7 +43,7 @@ if (post_password_required()) {
'title_reply' => '', 'title_reply' => '',
'title_reply_before' => '', 'title_reply_before' => '',
'title_reply_after' => '', 'title_reply_after' => '',
'comment_field' => sprintf('<div class="form-row"><div class="col-3 col-md-1 text-right"><img src="%1$s" class="img-fluid rounded-circle mr-sm-3"></div>', get_avatar_url($current_user->ID, array('size'=>60))).'<div class="col-9 col-md-11"><textarea name="comment" id="comment" tabindex="1" required class="form-control mt-2 mt-sm-0" rows="2"></textarea></div></div>', 'comment_field' => sprintf('<div class="form-row"><div class="col-3 col-md-1 align-self-center form-row--avartar"><img src="%1$s" class="img-fluid rounded-circle"></div>', get_avatar_url($current_user->ID, array('size'=>60))).'<div class="col-9 col-md-11 form-row--textarea"><textarea name="comment" id="comment" tabindex="1" required class="form-control mt-2 mt-sm-0" rows="2"></textarea></div></div>',
'cancel_reply_before' => '', 'cancel_reply_before' => '',
'cancel_reply_after' => '', 'cancel_reply_after' => '',
'class_submit' => 'btn btn-info bg-jungle-green align-self-center mt-3 float-right ml-auto comment-submit-link', 'class_submit' => 'btn btn-info bg-jungle-green align-self-center mt-3 float-right ml-auto comment-submit-link',
@ -55,7 +55,7 @@ if (post_password_required()) {
</div> </div>
<?php if (have_comments()) : ?> <?php if (have_comments()) : ?>
<div class="row <?php if(!wp_is_mobile()) { ?>margin-two-column<?php } ?>"> <div class="row <?php if(!wp_is_mobile()) { ?>margin-two-column<?php } ?>">
<div class="col mt-4 list-comments"> <div class="col mt-4 list-comments pl-md-0">
<?php wp_list_comments('type=comment&callback=tainacan_Comments_Callback'); ?> <?php wp_list_comments('type=comment&callback=tainacan_Comments_Callback'); ?>
</div> </div>
</div> </div>