Affichage en cours d'amélioration

2 files changed, 47 insertions, 94 deletions

diff --git a/static/css/staticman.css b/static/css/staticman.css
index 4f7af1f..178ee32 100644
--- a/static/css/staticman.css
+++ b/static/css/staticman.css
@@ -1,45 +1,44 @@
-.staticman-comments {
-  padding: 20px 0px 0px 0px;
+.staticman-comments form {
+  margin-top: 1rem;
 }
 
-.staticman-comments .comment-content {
-  border-top: 1px solid #EEEEEE;
-  padding: 4px 0px 4px 0px;
-}
-
-.staticman-comments .comment-content > * {
-  padding: 5px 0px 5px 0px;
-  margin: 5px 58px 0px 58px;
-}
-
-.staticman-comments .textfield {
-  width: 420px;
-  max-width: 100%;
-  padding: 0.5rem 0;
-  width: 100%;
+.staticman-comments article.static-comment {
+  padding: 0.5rem 0.3rem;
+  margin: 0.6rem 0.3rem;
 }
 
 .staticman-comments input {
-  border: 1px solid rgba(0,0,0,0.12);
-  padding: 4px 5px;
-  width: 100%;
+  margin: .3rem 0;
+  padding:.4rem .8rem;
+  border: .1rem solid #768294;
+  border-radius:3px;
+  background-color:#fff;
+  width: 60%;
+  max-width: 95%;
+  display: block;
 }
 
+.staticman-comments input[type="submit"], input[type="reset"] {
+  width: auto;
+  display: inline;
+}
 
 .staticman-comments .g-recaptcha {
   padding: 0.5rem 0;
 }
 
 .staticman-comments textarea {
-  border: 1px solid rgba(0,0,0,0.12);
-  padding: 4px 5px;
-  vertical-align: top;
-  height: 10em;
+  margin: .3rem 0;
+  padding:.2rem .4rem;
+  border: .1rem solid #768294;
+  border-radius:2px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  box-shadow:0 0 2px #888;
   width: 100%;
-}
-
-.staticman-comments .comment-preview {
-    margin-top: 20px;
+  max-width: 100%;
+  min-height: 10ex;
 }
 
 .staticman-comments .comment-avatar {
@@ -49,54 +48,8 @@
   margin-right: 10px;
 }
 
-.staticman-comments .comment-timestamp {
-  margin-left: 58px;
-}
-
-
 .staticman-comments .static-comment-reply {
-  margin-left: 2em;
-}
-
-.staticman-comments .comment-reply-btn a {
-  margin: 0px 0px 14px 46px;
-}
-
-.staticman-comments .show-modal {
-  overflow: hidden;
-  position: relative;
-}
-
-.staticman-comments .show-modal:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  background-color: rgba(0, 45, 56, 0.85);
-}
-
-.show-modal .modal {
-  display: block;
-}
-
-.modal {
-  display: none;
-  position: fixed;
-  width: 300px;
-  top: 50%;
-  left: 50%;
-  margin-left: -150px;
-  margin-top: -150px;
-  min-height: 0;
-  height: 30%;
-  z-index: 9999;
-  padding: 0.5rem;
-  border: 1px solid rgba(0, 45, 56, 0.25);
-  background-color: rgba(237, 231, 212, 0.9);
-  height: 10em;
+  margin-left: 1rem;
 }
 
 form--loading:before {
diff --git a/static/js/staticman.js b/static/js/staticman.js
index 40c0c09..216d848 100644
--- a/static/js/staticman.js
+++ b/static/js/staticman.js
@@ -14,13 +14,17 @@ $(document).ready(function() {
       data: $(this).serialize(),
       contentType: 'application/x-www-form-urlencoded',
       success: function (data) {
-        showModal('Perfect !', 'Thanks for your comment! It will show on the site once it has been approved. .');
+        // $('.js-form input[type="submit"]').val('{{ i18n comment_btn_submit }}');
+        // showAlert('{{ i18n comment_success_msg }}');
+        showAlert('success');
         $(form).removeClass('form--loading');
         clearForm();
       },
       error: function (err) {
         console.log(err);
-        showModal('Error', 'Sorry, there was an error with the submission!');
+        // $('.js-form input[type="submit"]').val('{{ i18n comment_btn_submit }}');
+        // showAlert('{{ i18n comment_error_msg }}');
+        showAlert('failed');
         $(form).removeClass('form--loading');
       }
     });
@@ -28,35 +32,31 @@ $(document).ready(function() {
     return false;
   });
 
-  $('.js-close-modal').click(function () {
-    $('body').removeClass('show-modal');
-  });
-
-  function showModal(title, message) {
-    $('.js-modal-title').text(title);
-    $('.js-modal-text').html(message);
-
-    $('body').addClass('show-modal');
+  function showAlert(msg) {
+    $('.js-form .js-notice').removeClass('hidden');
+    $('.js-form .js-notice-text').text(msg);
   }
 
   function clearForm() {
-    $('input').val("");
-    $('textarea').val("");
-    $('.js-form fieldset button.button').text('Submit');
+    $('input[name="fields[replyThread]"]').val('');
+    $('input[name="fields[replyID]"]').val('');
+    $('input[name="fields[replyName]"]').val('');
+    $('.reply-notice-text').text('');
   }
 
   // record reply target when "reply to this comment" is pressed
-  $('article.static-comment').on("click", "a.btn", function (evt){
+  $('article.static-comment').on('click', 'a.btn', function (evt){
     var cmt = $(evt.delegateTarget);
     $('input[name="fields[replyThread]"]').val(this.title);
     $('input[name="fields[replyID]"]').val(cmt.attr("id"));
-    authorTag = cmt.children('h4.comment-author');
-    $('input[name="fields[replyName]"]').val(authorTag.text());
-    $('.js-form fieldset button.button').text('Submit reply');
+    authorTag = cmt.find('.comment-author');
+    replyName = authorTag.text();
+    $('input[name="fields[replyName]"]').val(replyName);
+    $('.reply-notice-text').text('↷\xa0' + replyName);
   });
 
   // clear form when reset button is clicked
-  $('.js-form fieldset button[type="reset"]').click(function (){
+  $('.js-form input[type="reset"]').click(function (){
     clearForm();
   });
 });