-Comments finished

Alexey Boroda
1 parent 17c30848
Showing 3 changed files with 89 additions and 2 deletions Show diff stats
common/modules/comment/resources/artbox_comment.css
frontend/views/comments/_form.php
frontend/web/css/style.css
@@ -262,7 +262,11 @@
 .input_bl.has-error input, .input_bl.has-error textarea, .answer-form .has-error textarea {
     box-shadow: 1px 2px 2px 0 rgba(212, 0, 0, 0.2) inset;
-    border: 1px solid #d2d2d2;
+    border: 1px solid #cccccc;
+}
+.input_bl.has-success input, .input_bl.has-success textarea, .answer-form .has-success textarea {
+    box-shadow: none;
+    border: 1px solid #cccccc;
 }
 .required.has-error label {
@@ -316,4 +320,85 @@
 .comments-start ul.pagination li.active a {
     color: #333;
     background-color: inherit;
+}
+
+/* Validation error tooltips*/
+/*.has-error {*/
+    /*text-transform: uppercase;*/
+    /*background: #ececec;*/
+    /*color: #555;*/
+    /*cursor: help;*/
+    /*font-family: "Gill Sans", Impact, sans-serif;*/
+    /*font-size: 20px;*/
+    /*margin: 100px 75px 10px 75px;*/
+    /*padding: 15px 20px;*/
+    /*position: relative;*/
+    /*text-align: center;*/
+    /*width: 200px;*/
+    /*-webkit-transform: translateZ(0); !* webkit flicker fix *!*/
+    /*-webkit-font-smoothing: antialiased; !* webkit text rendering fix *!*/
+/*}*/
+
+.has-error .help-block {
+    background: #ffffff;
+    bottom: 100%;
+    color: #000000 !important;
+    display: block;
+    left: -25px;
+    margin-bottom: 15px;
+    opacity: 0;
+    padding: 20px;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    -webkit-transform: translateY(10px);
+    -moz-transform: translateY(10px);
+    -ms-transform: translateY(10px);
+    -o-transform: translateY(10px);
+    transform: translateY(10px);
+    -webkit-transition: all .25s ease-out;
+    -moz-transition: all .25s ease-out;
+    -ms-transition: all .25s ease-out;
+    -o-transition: all .25s ease-out;
+    transition: all .25s ease-out;
+    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+}
+
+/* This bridges the gap so you can mouse into the tooltip without it disappearing */
+.has-error .help-block:before {
+    bottom: -20px;
+    content: " ";
+    display: block;
+    height: 20px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+}
+
+/* CSS Triangles - see Trevor's post */
+.has-error .help-block:after {
+    border-left: solid transparent 10px;
+    border-right: solid transparent 10px;
+    border-top: solid #ffffff 10px;
+    bottom: -10px;
+    content: " ";
+    height: 0;
+    left: 50%;
+    margin-left: -13px;
+    position: absolute;
+    width: 0;
+}
+
+.has-error:hover .help-block {
+    opacity: 1;
+    pointer-events: auto;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
 }
 \ No newline at end of file
@@ -37,6 +37,8 @@
             echo $form->field($comment_model, 'text', [ 'options' => [ 'class' => 'form-group input_bl area_bl' ] ])
             ->textarea([
                 'placeholder' => 'Комментарий',
+                'rows' => 8,
+                'spellcheck' => false,
             ]);
             echo $form->field($comment_model, 'username', [ 'options' => [ 'class' => 'form-group input_bl' ] ])
@@ -1803,7 +1803,7 @@ p.right{text-align: right;}
     resize: none;
     padding: 0px 14px;
     letter-spacing: 0.5px;
-    box-shadow: none!important;
+    /*box-shadow: none!important;*/
     border: 1px solid rgb(204, 204, 204);
     width: 100%;
 }