comments implemented

app/assets/scripts/comments.js

@@ -9,6 +9,11 @@ var Comments;
             this.renderedCount = showAll.parent().find('.comments__comment').length;
             this.loadUrl = showAll.data('load-url');
             showAll.on('click', this.loadComments.bind(this));
+            $('.comments__add-popup-close').click(function (e) {
+                e.preventDefault();
+                $('.comments__add-popup').hide();
+                $('.comments__add-back-log').hide();
+            });
             this.form = new CommentForm(this);
         }
         Controller.prototype.loadComments = function () {
@@ -76,7 +81,8 @@ var Comments;
             $('.comments').on('click', '.comments__comment-reply', this.onAddClick.bind(this));
             this.form = $('.comments__add-popup-form');
             this.form.on('submit', this.submitFrom.bind(this));
-            this.formData = [];
+            this.owner.postEndpointUrl = this.form.attr('action');
+            this.formData = {};
         }
         CommentForm.prototype.onAddClick = function (event) {
             event.preventDefault();
@@ -93,12 +99,13 @@ var Comments;
         CommentForm.prototype.submitFrom = function (e) {
             e.preventDefault();
             var data = this.form.serializeArray();
-            for (var i in this.form.serializeArray()) {
+            for (var i in data) {
                 if (data.hasOwnProperty(i)) {
                     this.formData[data[i].name] = data[i].value;
                 }
             }
             $('.comments__add-error').remove();
+            console.dir({ UserComments: this.formData });
             $.ajax({
                 url: this.owner.postEndpointUrl,
                 data: { UserComments: this.formData },

app/assets/styles/content/centerbar/comments.scss

@@ -170,22 +170,29 @@
         position: fixed;
         top: 50%;
         background: #d7d7d7;
-        width: 960px;
+        width: 710px;
         padding: 15px;
         box-sizing: border-box;
     }
 
+    &__add-popup-form {
+        &:before,
+        &:after {
+            content: '';
+            clear: both;
+            display: block;
+        }
+    }
+
     &__add-popup-form-group--small {
-        display: inline-block;
-        vertical-align: top;
-        width: calc(25% - 0.25em - 11px);
+        float: left;
+        width: calc(32% - 15px);
         margin-right: 15px;
     }
 
     &__add-popup-form-group--big {
-        display: inline-block;
-        vertical-align: top;
-        width: calc(75% - 0.25em);
+        float: left;
+        width: calc(68%);
     }
 
     &__add-popup-form-input {
@@ -195,9 +202,10 @@
         border: none;
         box-sizing: border-box;
         margin-bottom: 15px;
-        font-size: 11px;
+        font-size: 13px;
         font-family: $fontopensans;
         color: #929292;
+        background-color: #fff;
     }
 
     &__add-popup-form-textarea {
@@ -208,9 +216,10 @@
         border-radius: 20px;
         padding: 15px;
         box-sizing: border-box;
-        font-size: 11px;
+        font-size: 13px;
         font-family: $fontopensans;
         color: #929292;
+        background-color: #fff;
     }
 
     &__add-popup-form-submit-block {
@@ -219,25 +228,29 @@
     }
 
     &__add-popup-form-submit {
-        font-size: 11px;
+        font-size: 13px;
         font-family: $fontopensans;
-        color: #929292;
+        color: #595959;
         text-decoration: none;
         border: none;
-        border-bottom: 1px dotted #004d7b;
         background: none;
         cursor: pointer;
+        vertical-align: middle;
+    }
+
+    &__add-popup-form-submit {
+        &:hover {
+            text-decoration: underline;
+        }
     }
 
     &__add-popup-ico {
-        position: absolute;
-        display: block;
-        right: 0;
-        top: 10px;
-        transform: translate(0, -50%);
-        background: url("../img/commentsIcoPopup.png");
+        vertical-align: middle;
+        display: inline-block;
+        background: url("../img/comments/commentsIcoPopup.png");
         width: 40px;
         height: 40px;
+        margin-left: 5px !important;
     }
 
     &__add-popup-close {
@@ -245,8 +258,13 @@
         top: -40px;
         right: 0;
         width: 28px;
-        background: url("../img/popupclose.png");
+        background: url("../img/comments/popupclose.png");
         cursor: pointer;
         height: 28px;
     }
+
+    &__add-error {
+        font-size: 13px;
+        color: #f00;
+    }
 }

app/assets/ts/comments.ts

@@ -13,6 +13,11 @@ namespace Comments {
             this.renderedCount = showAll.parent().find('.comments__comment').length;
             this.loadUrl = showAll.data('load-url');
             showAll.on('click', this.loadComments.bind(this));
+            $('.comments__add-popup-close').click(function (e) {
+                e.preventDefault();
+                $('.comments__add-popup').hide();
+                $('.comments__add-back-log').hide();
+            });
             this.form = new CommentForm(this);
         }
 
@@ -84,7 +89,8 @@ namespace Comments {
             $('.comments').on('click', '.comments__comment-reply', this.onAddClick.bind(this));
             this.form = $('.comments__add-popup-form');
             this.form.on('submit', this.submitFrom.bind(this));
-            this.formData = [];
+            this.owner.postEndpointUrl = this.form.attr('action');
+            this.formData = {};
         }
 
         private onAddClick(event) {
@@ -103,12 +109,13 @@ namespace Comments {
         private submitFrom(e) {
             e.preventDefault();
             let data = this.form.serializeArray();
-            for (let i in this.form.serializeArray()) {
+            for (let i in data) {
                 if (data.hasOwnProperty(i)) {
                     this.formData[data[i].name] = data[i].value;
                 }
             }
             $('.comments__add-error').remove();
+            console.dir({UserComments: this.formData});
             $.ajax({
                 url: this.owner.postEndpointUrl,
                 data: {UserComments: this.formData},

app/www/css/all.css

@@ -1567,132 +1567,94 @@ body {
     font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
     font-size: 15px;
     margin: 20px 0; }
-
-.full-news__text p img {
-    float: left;
-    margin-right: 20px;
-    margin-bottom: 23px;
-    margin-top: 6px;
-}
-
-.full-news__text ul {
+    .full-news__text p img {
+      float: left;
+      margin-right: 20px;
+      margin-bottom: 23px;
+      margin-top: 6px; }
+  .full-news__text ul {
     margin: 0;
     padding: 0;
-    list-style-type: none;
-}
-
-.full-news__text ul li {
-    padding-left: 12px;
-    position: relative;
-    font-size: 16px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-    color: #404040;
-    line-height: 1.5;
-    margin-bottom: 10px;
-}
-
-.full-news__text ul li:before {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 10px;
-    background: #265e86;
-    border-radius: 50%;
-    width: 6px;
-    height: 6px;
-}
-
-.full-news__text ol {
+    list-style-type: none; }
+    .full-news__text ul li {
+      padding-left: 12px;
+      position: relative;
+      font-size: 16px;
+      font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+      color: #404040;
+      line-height: 1.5;
+      margin-bottom: 10px; }
+      .full-news__text ul li:before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 10px;
+        background: #265e86;
+        border-radius: 50%;
+        width: 6px;
+        height: 6px; }
+  .full-news__text ol {
     margin: 0;
     padding: 0;
-    list-style-type: none;
-}
-
-.full-news__text ol li {
-    counter-increment: step-counter;
-    font-size: 16px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-    color: #404040;
-    line-height: 1.5;
-}
-
-.full-news__text ol li:before {
-    content: counter(step-counter) ".";
-    font-size: 11px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-    color: #004d7b;
-    font-weight: bold;
-}
-
-.full-news__text table {
+    list-style-type: none; }
+    .full-news__text ol li {
+      counter-increment: step-counter;
+      font-size: 16px;
+      font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+      color: #404040;
+      line-height: 1.5; }
+      .full-news__text ol li:before {
+        content: counter(step-counter) ".";
+        font-size: 11px;
+        font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+        color: #004d7b;
+        font-weight: bold; }
+  .full-news__text table {
     width: 100%;
     border-spacing: 0;
     border: 1px solid #e6e6e6;
-    margin-top: 20px;
-}
-
-.full-news__text table th {
-    background: #e6e6e6;
-    font-size: 11px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-    color: #004d7b;
-    text-transform: uppercase;
-    line-height: 1.2;
-    padding: 17px 0 17px 12px;
-    border: 1px solid #e6e6e6;
-    text-align: left;
-}
-
-.full-news__text table th:nth-child(1) {
-    width: 19%;
-}
-
-.full-news__text table th:nth-child(2) {
-    width: 23%;
-}
-
-.full-news__text table td {
-    font-size: 14px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-    color: #404040;
-    line-height: 1.714;
-    padding: 14px 0 14px 12px;
-    border: 1px solid #e6e6e6;
-    vertical-align: top;
-}
-
-.full-news__text table td:nth-child(1) {
-    width: 13%;
-}
-
-.full-news__text table td:nth-child(2) {
-    width: 23%;
-}
-
-.full-news__text table .mobileth {
-    display: none;
-}
-
-.full-news__text .col3__item {
+    margin-top: 20px; }
+    .full-news__text table th {
+      background: #e6e6e6;
+      font-size: 11px;
+      font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+      color: #004d7b;
+      text-transform: uppercase;
+      line-height: 1.2;
+      padding: 17px 0 17px 12px;
+      border: 1px solid #e6e6e6;
+      text-align: left; }
+      .full-news__text table th:nth-child(1) {
+        width: 19%; }
+      .full-news__text table th:nth-child(2) {
+        width: 23%; }
+    .full-news__text table td {
+      font-size: 14px;
+      font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+      color: #404040;
+      line-height: 1.714;
+      padding: 14px 0 14px 12px;
+      border: 1px solid #e6e6e6;
+      vertical-align: top; }
+      .full-news__text table td:nth-child(1) {
+        width: 13%; }
+      .full-news__text table td:nth-child(2) {
+        width: 23%; }
+    .full-news__text table .mobileth {
+      display: none; }
+  .full-news__text .col3__item {
     display: inline-block;
     width: calc(33% - 0.25em - 10px);
-    margin-right: 20px;
-}
-
-.full-news__text .col3__item:last-child {
-    margin-right: 0;
-}
-
-.full-news__text .col2__item {
+    margin-right: 20px; }
+    .full-news__text .col3__item:last-child {
+      margin-right: 0; }
+  .full-news__text .col2__item {
     display: inline-block;
     width: calc(50% - 0.25em - 10px);
-    margin-right: 20px;
-}
-
-.full-news__text .col2__item:last-child {
-    margin-right: 0;
-}
+    margin-right: 20px; }
+    .full-news__text .col2__item:last-child {
+      margin-right: 0; }
 
 .full-news__other-materials {
   margin: 20px 0; }
@@ -2363,20 +2325,23 @@ body {
   position: fixed;
   top: 50%;
   background: #d7d7d7;
-  width: 960px;
+  width: 710px;
   padding: 15px;
   box-sizing: border-box; }
 
+.comments__add-popup-form:before, .comments__add-popup-form:after {
+  content: '';
+  clear: both;
+  display: block; }
+
 .comments__add-popup-form-group--small {
-  display: inline-block;
-  vertical-align: top;
-  width: calc(25% - 0.25em - 11px);
+  float: left;
+  width: calc(32% - 15px);
   margin-right: 15px; }
 
 .comments__add-popup-form-group--big {
-  display: inline-block;
-  vertical-align: top;
-  width: calc(75% - 0.25em); }
+  float: left;
+  width: calc(68%); }
 
 .comments__add-popup-form-input {
   width: 100%;
@@ -2385,9 +2350,10 @@ body {
   border: none;
   box-sizing: border-box;
   margin-bottom: 15px;
-  font-size: 11px;
+  font-size: 13px;
   font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-  color: #929292; }
+  color: #929292;
+  background-color: #fff; }
 
 .comments__add-popup-form-textarea {
   resize: none;
@@ -2397,43 +2363,49 @@ body {
   border-radius: 20px;
   padding: 15px;
   box-sizing: border-box;
-  font-size: 11px;
+  font-size: 13px;
   font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-  color: #929292; }
+  color: #929292;
+  background-color: #fff; }
 
 .comments__add-popup-form-submit-block {
   position: relative;
   margin-top: 10px; }
 
 .comments__add-popup-form-submit {
-  font-size: 11px;
+  font-size: 13px;
   font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-  color: #929292;
+  color: #595959;
   text-decoration: none;
   border: none;
-  border-bottom: 1px dotted #004d7b;
   background: none;
-  cursor: pointer; }
+  cursor: pointer;
+  vertical-align: middle; }
+
+.comments__add-popup-form-submit:hover {
+  text-decoration: underline; }
 
 .comments__add-popup-ico {
-  position: absolute;
-  display: block;
-  right: 0;
-  top: 10px;
-  transform: translate(0, -50%);
-  background: url("../img/commentsIcoPopup.png");
+  vertical-align: middle;
+  display: inline-block;
+  background: url("../img/comments/commentsIcoPopup.png");
   width: 40px;
-  height: 40px; }
+  height: 40px;
+  margin-left: 5px !important; }
 
 .comments__add-popup-close {
   position: absolute;
   top: -40px;
   right: 0;
   width: 28px;
-  background: url("../img/popupclose.png");
+  background: url("../img/comments/popupclose.png");
   cursor: pointer;
   height: 28px; }
 
+.comments__add-error {
+  font-size: 13px;
+  color: #f00; }
+
 .errorblock {
   background: #ebebeb;
   display: -webkit-flex;