Fazendo js nao obstrusivo, corrigindo o estilo dos campos do formulario de comentarios

src/assets/js/js.js

@@ -180,4 +180,10 @@ jQuery( document ).ready(function( $ ) {
 			_formBuscaFilho.removeClass('hover');
 		}
 	});
+
+
+	/*
+	* ADICIONANDO JS NÃO OBSTRUSIVO
+	*/
+	$('body').addClass('js');
 });

src/assets/scss/_comments.scss

@@ -14,16 +14,6 @@
                 color: #898d8f;
             }
             .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;
@@ -41,18 +31,35 @@
             }
             p[class^="comment-form-"] {
                 margin-bottom: 22px;
+                display: flex;
+                justify-content: space-between;
                 label{
+                    width: 100%;
+                    max-width: 25%;
+                    margin-right: 0;
+                    padding-right: 5px;
                     font-size: 0.75rem;
                     font-weight: 700;
                     color: #000;
-                    margin-right: 1.8%;
                 }
                 input {
-                    width: 50%;
+                    width: 100%;
+                    max-width: 75%;
+                    margin-left: 3px;
                     border: 1px solid #cbcbcb;
                     height: 30px;
-                    @media only screen and (max-width: 576px) {
+                }
-                        width: 82%;
+
+                @media only screen and (max-width: 768px) {
+                    display: block;
+
+                    label{
+                        max-width: 100%;
+                        padding-right: 0;
+                    }
+                    input {
+                        max-width: 100%;
+                        margin-left: 0;
                     }
                 }
             }
@@ -72,18 +79,16 @@
             }
             .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{
                 @media only screen and (max-width: 576px){
                     padding: 0 2rem;
                 }
             }
+            textarea.form-control {
+                border-radius: 0;
+                border: 1px solid #cbcbcb;
+            }
             /* textarea{
                 @media only screen {
                     @media (max-width: 576px){

src/assets/scss/style.scss

@@ -329,7 +329,31 @@ nav{
 
 @media screen and (max-width: 768px) {
 	.navbar { z-index: 2; }
+	/* JS NÃO OBSTRUSIVO */
 	.tainacan-search-form .input-group {
+		.form-control {
+			width: 200px;
+			height: 38px;
+			padding: 1rem;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			opacity: 1;
+			border-radius: .25rem;
+			border: 1px solid rgba(0,0,0,0.15);
+			background-clip: padding-box;
+			background-color: #fff;
+			z-index: 2;
+			transform: translate(0,50px);
+
+			&:focus,
+			&:hover {
+				width: 200px;
+				padding: 1rem;
+			}
+		}
+	}
+	body.js .tainacan-search-form .input-group {
 		.form-control {
 			width: 200px;
 			height: 38px;
@@ -343,6 +367,7 @@ nav{
 			background-clip: padding-box;
 			background-color: #fff;
 			z-index: -2;
+			transform: translate(0,0);
 			transition: transform 0.35s, opacity 0.35s, border 0.35s, z-index 0s 0.35s;
 
 			&:focus {
@@ -717,7 +742,8 @@ nav{
 	background: #01295C;
 }
 
-.accessibility-options {
+.accessibility-options { display: none; }
+body.js .accessibility-options {
 	height: 24px;
 	margin: 0 -10px;
 	padding: 0;
@@ -819,6 +845,13 @@ nav{
 	.accessibility-bar.compact-mode .accessibility-shortcuts a:focus { transform: translate(-50%,160px); }
 }
 
+/*
+- ADICIONANDO JS NÃO OBSTRUSIVO
+*/
+
+.collapse:not(.show) { display: block; }
+body.js .collapse:not(.show) { display: none; }
+
 /*
 - ALTO CONTRASTE
 */

src/comments.php

@@ -45,9 +45,9 @@ if ( post_password_required() ) {
 						'title_reply' => '',
 						'title_reply_before' => '',
 						'title_reply_after' => '',
-						'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" alt="Avatar"></div>', get_avatar_url( $current_user->ID, array(
+						'comment_field' => sprintf( '<div class="form-row"><div class="col-12 col-md-3 align-self-center form-row--avartar"><img src="%1$s" class="img-fluid rounded-circle" alt="Avatar"></div>', get_avatar_url( $current_user->ID, array(
 							'size' => 60,
-						) ) ) . '<div class="col-9 col-md-11 form-row--textarea"><label for="comment" class="sr-only">Comentário</label><textarea name="comment" id="comment" tabindex="1" required class="form-control mt-2 mt-sm-0" rows="2"></textarea></div></div>',
+						) ) ) . '<div class="col-12 col-md-9 form-row--textarea"><label for="comment" class="sr-only">Comentário</label><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_after' => '',
 						'class_submit' => 'btn btn-info bg-jungle-green align-self-center mt-3 float-right ml-auto comment-submit-link',