Added avatar and close button in reply notice

12 files changed, 55 insertions, 10 deletions

diff --git a/.gitignore b/.gitignore
index 17eff3e..00c7a58 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1 @@
 exampleSite/public
-exampleSite/resources
diff --git a/assets/css/staticman.css b/assets/css/staticman.css
index 5c41c99..9fe02af 100644
--- a/assets/css/staticman.css
+++ b/assets/css/staticman.css
@@ -56,11 +56,28 @@
   content: ' ↷ ';
 }
 
+.staticman-comments p.reply-notice img.comment-avatar {
+  display: inline-block;
+  float: none;
+  width: 2rem;
+  height: 2rem;
+  margin: 0 .6rem;
+}
+
+.staticman-comments a.close-btn {
+  margin: 0 .6rem;
+  color: #c34853;
+}
+
+.staticman-comments a.close-btn:hover {
+  text-decoration: none;
+}
+
 .staticman-comments form:disabled, .staticman-comments input:disabled, .staticman-comments textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
 
-.staticman-comments strong.hidden, .staticman-comments input[type="submit"].hidden {
+.staticman-comments .js-notice .hidden, .staticman-comments input[type="submit"].hidden, .staticman-comments p.reply-notice.hidden {
   display: none;
 }
diff --git a/assets/js/staticman.js b/assets/js/staticman.js
index 3ea1e98..dd21c81 100644
--- a/assets/js/staticman.js
+++ b/assets/js/staticman.js
@@ -43,28 +43,51 @@ $(document).ready(function() {
   }
 
   function clearForm() {
+    resetReplyTarget();
     $('.js-form input')
       .filter(function() {
         return this.name.match(/^fields\[.*\]$/);
       })
       .val(''); // empty all text & hidden fields
     $('.js-form textarea').val(''); // empty text area
-    $('.js-form .reply-notice-text').text(''); // reset reply target
-    $('.js-form .reply-notice').addClass('hidden'); // hide reply target display
     $('.js-form .submit-success').addClass('hidden'); // hide submission status
     $('.js-form .submit-failed').addClass('hidden'); // hide submission status
   }
 
+  function resetReplyTarget() {
+    $('.js-form .reply-notice .reply-name').text(''); // reset reply target
+    $('.js-form .reply-notice img').remove(); // remove reply avatar
+    $('.js-form .reply-notice a').remove(); // remove '×' button
+    $('.js-form .reply-notice').addClass('hidden'); // hide reply target display
+    $('.js-form input[name="fields[replyThread]"]').val('');
+    $('.js-form input[name="fields[replyID]"]').val('');
+    $('.js-form input[name="fields[replyName]"]').val('');
+  }
+
   // record reply target when "reply to this comment" is pressed
   $('article.static-comment').on('click', 'a.reply-btn', function (evt){
+    resetReplyTarget();
     var cmt = $(evt.delegateTarget);
     $('.js-form input[name="fields[replyThread]"]').val(this.title);
     $('.js-form input[name="fields[replyID]"]').val(cmt.attr("id"));
     authorTag = cmt.find('.comment-author');
     replyName = authorTag.text();
     $('.js-form input[name="fields[replyName]"]').val(replyName);
+
+    // display reply target avatar and name
     $('.js-form .reply-notice').removeClass('hidden');
-    $('.js-form .reply-notice-text').text('↷\xa0' + replyName);
+    $('.js-form .reply-name').text(replyName);
+    avatarTag = cmt.find('.comment-avatar');
+    // use clone to avoid removal of avatar in comments by resetReplyTarget()
+    $('.js-form .reply-arrow').after(avatarTag.clone());
+    // add button for removing reply target (static method would give error msg)
+    closeBtn = $("<a class='close-btn'>×</a>");
+    $('.js-form .reply-notice').append(closeBtn);
+  });
+
+  // handle removal of reply target when '×' is pressed
+  $('.js-form .reply-notice').on('click', 'a.close-btn', function(){
+    resetReplyTarget();
   });
 
   // clear form when reset button is clicked
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 432e332..702c99c 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -8,7 +8,7 @@ theme = "huginn"
 [Params]
   avatar = "img/avatar.png"
   sitesubtitle = "Un blog libre avec des commentaires"
-  footer = "Propulsé par [Hugo](https://gohugo.io) et [Staticman](https://staticman.net), thème [Huginn](https://framagit.org/Bridouz/hugo-theme-huginn), CC-BY-SA 4.0."
+  footer = "Propulsé par [Hugo](https://gohugo.io) et [Staticman](https://staticman.net), thème [Huginn](https://framagit.org/staticman-gitlab-pages/hugo-theme-huginn), CC-BY-SA 4.0."
 [Params.staticman]
   gitProvider = "gitlab"
   repo = "staticman-gitlab-pages/huginn"
diff --git a/exampleSite/resources/_gen/assets/css/css/pygments.css_d3f53f09220d597dac26fe7840c31fc9.content b/exampleSite/resources/_gen/assets/css/css/pygments.css_d3f53f09220d597dac26fe7840c31fc9.content
new file mode 100644
index 0000000..111022e
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/pygments.css_d3f53f09220d597dac26fe7840c31fc9.content
@@ -0,0 +1 @@
+.chroma .hll{background-color:#ffc}.chroma{background:#2b2e32;color:#c9d3e2}.chroma .c{color:#8c96a4}.chroma .err{color:#c9d3e2}.chroma .esc{color:#c9d3e2}.chroma .g{color:#c9d3e2}.chroma .k{color:#799e7a}.chroma .l{color:#c9d3e2}.chroma .n{color:#c9d3e2}.chroma .o{color:#c9d3e2}.chroma .x{color:#c9d3e2}.chroma .p{color:#c9d3e2}.chroma .ch{color:#8c96a4}.chroma .cm{color:#8c96a4}.chroma .cp{color:#5b9fa3}.chroma .cpf{color:#8c96a4}.chroma .c1{color:#8c96a4}.chroma .cs{color:#8c96a4}.chroma .gd{color:#be8786}.chroma .ge{color:#c9d3e2;text-decoration:underline}.chroma .gr{color:#be8786}.chroma .gh{color:#c9d3e2;font-weight:700}.chroma .gi{color:#799e7a}.chroma .go{color:#c9d3e2}.chroma .gp{color:#c9d3e2}.chroma .gs{color:#c9d3e2}.chroma .gu{color:#c9d3e2;font-weight:700}.chroma .gt{color:#be8786}.chroma .kc{color:#799e7a}.chroma .kd{color:#799e7a}.chroma .kn{color:#799e7a}.chroma .kp{color:#799e7a}.chroma .kr{color:#799e7a}.chroma .kt{color:#be8786}.chroma .ld{color:#c9d3e2}.chroma .m{color:#7a97bd}.chroma .s{color:#7a97bd}.chroma .na{color:#ad89ae}.chroma .nb{color:#c9d3e2}.chroma .nc{color:#c9d3e2}.chroma .no{color:#7a97bd}.chroma .nd{color:#c9d3e2}.chroma .ni{color:#a89263}.chroma .ne{color:#799e7a}.chroma .nf{color:#ad89ae}.chroma .nl{color:#799e7a}.chroma .nn{color:#c9d3e2}.chroma .nx{color:#c9d3e2}.chroma .py{color:#c9d3e2}.chroma .nt{color:#799e7a}.chroma .nv{color:#ad89ae}.chroma .ow{color:#799e7a}.chroma .w{color:#c9d3e2}.chroma .mb{color:#7a97bd}.chroma .mf{color:#7a97bd}.chroma .mh{color:#7a97bd}.chroma .mi{color:#7a97bd}.chroma .mo{color:#7a97bd}.chroma .sa{color:#7a97bd}.chroma .sb{color:#7a97bd}.chroma .sc{color:#7a97bd}.chroma .dl{color:#7a97bd}.chroma .sd{color:#7a97bd}.chroma .s2{color:#7a97bd}.chroma .se{color:#7a97bd}.chroma .sh{color:#7a97bd}.chroma .si{color:#7a97bd}.chroma .sx{color:#7a97bd}.chroma .sr{color:#7a97bd}.chroma .s1{color:#7a97bd}.chroma .ss{color:#7a97bd}.chroma .bp{color:#c9d3e2}.chroma .fm{color:#ad89ae}.chroma .vc{color:#ad89ae}.chroma .vg{color:#ad89ae}.chroma .vi{color:#ad89ae}.chroma .vm{color:#ad89ae}.chroma .il{color:#7a97bd}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/css/css/pygments.css_d3f53f09220d597dac26fe7840c31fc9.json b/exampleSite/resources/_gen/assets/css/css/pygments.css_d3f53f09220d597dac26fe7840c31fc9.json
new file mode 100644
index 0000000..eb2cd78
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/pygments.css_d3f53f09220d597dac26fe7840c31fc9.json
@@ -0,0 +1 @@
+{"Target":"css/pygments.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/css/css/staticman.css_d3f53f09220d597dac26fe7840c31fc9.content b/exampleSite/resources/_gen/assets/css/css/staticman.css_d3f53f09220d597dac26fe7840c31fc9.content
new file mode 100644
index 0000000..f739d0c
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/staticman.css_d3f53f09220d597dac26fe7840c31fc9.content
@@ -0,0 +1 @@
+.staticman-comments form{margin-top:1rem}.staticman-comments .static-comment{padding:.5rem .3rem;margin:.6rem .3rem}.staticman-comments input{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],.staticman-comments input[type=reset]{background-color:#ebeffa;width:auto;display:inline}.staticman-comments .g-recaptcha{padding:.5rem 0}.staticman-comments textarea{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;width:100%;max-width:100%;min-height:5rem}.staticman-comments .comment-avatar{float:left;width:3rem;height:3rem;margin-right:1rem}.staticman-comments .static-comment-reply{margin-left:1.5rem}.staticman-comments .reply-target::before{content:' ↷ '}.staticman-comments p.reply-notice img.comment-avatar{display:inline-block;float:none;width:2rem;height:2rem;margin:0 .6rem}.staticman-comments a.close-btn{margin:0 .6rem;color:#c34853}.staticman-comments a.close-btn:hover{text-decoration:none}.staticman-comments form:disabled,.staticman-comments input:disabled,.staticman-comments textarea:disabled{opacity:.5;cursor:not-allowed}.staticman-comments .js-notice .hidden,.staticman-comments input[type=submit].hidden,.staticman-comments p.reply-notice.hidden{display:none}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/css/css/staticman.css_d3f53f09220d597dac26fe7840c31fc9.json b/exampleSite/resources/_gen/assets/css/css/staticman.css_d3f53f09220d597dac26fe7840c31fc9.json
new file mode 100644
index 0000000..1ea2453
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/staticman.css_d3f53f09220d597dac26fe7840c31fc9.json
@@ -0,0 +1 @@
+{"Target":"css/staticman.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/css/css/style.css_d3f53f09220d597dac26fe7840c31fc9.content b/exampleSite/resources/_gen/assets/css/css/style.css_d3f53f09220d597dac26fe7840c31fc9.content
new file mode 100644
index 0000000..6ef81e5
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/style.css_d3f53f09220d597dac26fe7840c31fc9.content
@@ -0,0 +1 @@
+@font-face{font-family:open sans;src:url(../fonts/opensansregular.woff2) format("woff2")}html{background:#ebeffa}body{position:relative;max-width:1000px;margin:0 auto;padding-top:1rem;font:1rem/1.8rem open sans;color:#525d6e}aside{background:#dde3ec}#avatar{margin:0 auto;display:block;width:140px;border-radius:50%;border-width:4px;border-style:inset}#sitetitle{font-size:1.8rem;letter-spacing:-.5px;padding-top:1rem}#sitesubtitle{margin:12px 0}#social{background:#ebeffa;font-size:1.2rem;padding:.8rem}#social i{margin:1rem}main{background:#dfe3ea;text-align:justify;padding:10px}article{padding:1rem 1rem 3rem;background-color:#ebeffa;margin-bottom:.4rem}header{border:.2rem solid #768294;margin-bottom:1rem;padding:0 .75rem .75rem;background-color:#dfe3ea}header h1 a{margin-bottom:.4rem;text-align:center;width:85%}time{font-size:.8rem}.meta{clear:both;font-size:.86rem;margin-bottom:.8rem}.meta .categories{text-transform:uppercase;color:#e5bc5a}.meta .tags{color:#008895;margin-left:.6rem}.tags::before{content:"#"}footer{margin:2rem 0 1rem;background:#ebeffa;text-align:center;clear:both}a:hover{text-decoration:underline}blockquote{padding:1px 15px;border-left:4px solid #a158a8;border-top:1px solid #768294;border-right:1px solid #768294;border-bottom:1px solid #768294;background-color:#dfe3ec}p code{display:inline-block;font-size:.8rem;font-family:monospace;padding:0 .2rem;color:#2d3847;background-color:#dfe3ec;border:1px #768294 dashed;border-radius:2px}.chroma{font:.8rem/1.4rem monospace}pre{padding:1rem 2rem;border:1px #768294 solid;border-radius:2px;background:#262e3a;display:block;overflow-x:auto}pre code{border:none}a{font-weight:700;text-decoration:none;outline:0;color:#0779c5}h1{font-size:1.8em}h2{font-size:1.4em}h3{font-size:1.2em}h1 i{padding-right:1rem}em{color:#2a843c}strong{color:#c34853}#index{text-align:center}table,td,th{border:1px solid #bdbdbd}table{width:95%;margin:0 0 1.5rem;border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px}thead{background-color:#22272e}th{font-weight:700}td,th{border-width:0 1px 1px 0}td,th{padding:.375rem}figure{margin:auto}figcaption{text-align:center}img{display:block;margin:auto;max-width:90%}.icon-gitlab{color:#42b983}.icon-rss{color:#f60}.thumbnail{padding:1rem}.left{float:left}.right{float:right}.gallery{display:inline-block;padding-bottom:1rem}.gallery-item{float:left;position:relative}.gallery-item .thumbnail{max-width:90%}.nowlistening{padding:1rem 2rem;border:1px #8d7edc solid;border-radius:3px;background:#f2f2f2;text-align:center}.nowlistening:before{content:"Ce billet fut écrit en écoutant: "}.label{display:inline;padding:.2rem 1rem;font-size:80%;color:#ebeffa;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;background-color:#0779c5}label{display:block;margin-bottom:.5rem;font-weight:600}@media only screen and (min-width:1050px){aside{float:left;width:240px;position:fixed;border-radius:2%;border-width:1px;padding:2rem .5rem;text-align:center}main{float:right;width:720px}header h1 a{float:left}time{float:right}#TableOfContents{max-width:50%}.gallery-item{width:33%}}@media only screen and (max-width:1050px){body{padding-top:0}aside{position:relative;padding:.2rem 0 .2rem .2rem;vertical-align:middle;text-align:center}#avatar{float:left;margin-top:.5rem;margin-left:.8rem;width:100px}#sitetitle,#sitesubtitle,#navlinks{text-align:center}#sitesubtitle{font-size:.7rem}#navlinks{font-size:.8rem}main{clear:both;padding-top:1rem}header{text-align:center}time{display:block}.gallery-item{width:33.3%}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/css/css/style.css_d3f53f09220d597dac26fe7840c31fc9.json b/exampleSite/resources/_gen/assets/css/css/style.css_d3f53f09220d597dac26fe7840c31fc9.json
new file mode 100644
index 0000000..0095485
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/style.css_d3f53f09220d597dac26fe7840c31fc9.json
@@ -0,0 +1 @@
+{"Target":"css/style.min.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/layouts/partials/staticman-comments.html b/layouts/partials/staticman-comments.html
index 47cc4ff..1a7d584 100644
--- a/layouts/partials/staticman-comments.html
+++ b/layouts/partials/staticman-comments.html
@@ -59,8 +59,9 @@
   action="{{ .Site.Params.staticman.endpoint | default "https://staticman-frama.herokuapp.com" }}/v3/entry/{{ .Site.Params.staticman.gitProvider }}/{{ .Site.Params.staticman.repo }}/{{ .Site.Params.staticman.branch }}/comments">
 
   <!-- Start comment form display reply target -->
-  <p class="hidden reply-notice">
-    <strong class="reply-notice-text"></strong>
+  <p class="reply-notice hidden">
+    <strong class="reply-arrow">↷</strong>
+    <strong class="reply-name"></strong>
   </p>
   <!-- End comment form display reply target -->
 
diff --git a/theme.toml b/theme.toml
index 140f213..50e60c1 100644
--- a/theme.toml
+++ b/theme.toml
@@ -3,8 +3,7 @@
 
 name = "Huginn"
 license = "GPL3"
-licenselink = 
-"https://framagit.org/Bridouz/hugo-theme-huginn/blob/master/LICENSE.md"
+licenselink = "https://framagit.org/Bridouz/hugo-theme-huginn/blob/master/LICENSE.md"
 description = "A simple blog theme for Hugo, inspired by [Pneumatic](https://github.com/iKevinY/pneumatic) (A Pelican theme)"
 homepage = "https://framagit.org/Bridouz/hugo-theme-huginn"
 tags = [