From e4f71fe40214f85773805d8ebfb309da75ea4680 Mon Sep 17 00:00:00 2001
From: Adhityaa Chandrasekar <adtac@adtac.in>
Date: Thu, 20 Dec 2018 01:27:55 -0500
Subject: [PATCH] frontend: display options at the bottom on mobile

---
 frontend/js/commento.js     | 31 +++++++++++++++++++++++--------
 frontend/sass/commento.scss | 10 ++++++++++
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/js/commento.js b/frontend/js/commento.js
index f9982cc..02ae3cb 100644
--- a/frontend/js/commento.js
+++ b/frontend/js/commento.js
@@ -57,6 +57,7 @@
   var ID_APPROVE = "commento-comment-approve-";
   var ID_REMOVE = "commento-comment-remove-";
   var ID_STICKY = "commento-comment-sticky-";
+  var ID_CHILDREN = "commento-comment-children-";
   var ID_CONTENTS = "commento-comment-contents-";
   var ID_NAME = "commento-comment-name-";
   var ID_SUBMIT_BUTTON = "commento-submit-button-";
@@ -632,6 +633,7 @@
 
     var cards = create("div");
     cur.forEach(function(comment) {
+      var mobileView = root.getBoundingClientRect()["width"] < 450;
       var commenter = commenters[comment.commenterHex];
       var avatar;
       var card = create("div");
@@ -672,10 +674,12 @@
       approve.id = ID_APPROVE + comment.commentHex;
       remove.id = ID_REMOVE + comment.commentHex;
       sticky.id = ID_STICKY + comment.commentHex;
+      if (children)
+        children.id = ID_CHILDREN + comment.commentHex;
       contents.id = ID_CONTENTS + comment.commentHex;
       name.id = ID_NAME + comment.commentHex;
 
-      collapse.title = "Collapse";
+      collapse.title = "Collapse children";
       upvote.title = "Upvote";
       downvote.title = "Downvote";
       edit.title = "Edit";
@@ -724,6 +728,8 @@
       classAdd(score, "score");
       classAdd(body, "body");
       classAdd(options, "options");
+      if (mobileView)
+        classAdd(options, "options-mobile");
       classAdd(edit, "option-button");
       classAdd(edit, "option-edit");
       classAdd(reply, "option-button");
@@ -798,11 +804,18 @@
       append(subtitle, score);
       append(subtitle, timeago);
 
-      append(header, options);
+      if (!mobileView)
+        append(header, options);
       append(header, avatar);
       append(header, name);
       append(header, subtitle);
       append(contents, body);
+      if (mobileView) {
+        append(contents, options);
+        var optionsClearfix = create("div");
+        classAdd(optionsClearfix, "options-clearfix");
+        append(contents, optionsClearfix);
+      }
 
       if (children) {
         classAdd(children, "body");
@@ -949,30 +962,32 @@
 
 
   global.commentCollapse = function(id) {
-    var contents = $(ID_CONTENTS + id);
+    var children = $(ID_CHILDREN + id);
     var button = $(ID_COLLAPSE + id);
 
-    classAdd(contents, "hidden");
+    if (children)
+      classAdd(children, "hidden");
 
     classRemove(button, "option-collapse");
     classAdd(button, "option-uncollapse");
 
-    button.title = "Expand";
+    button.title = "Expand children";
 
     onclick(button, global.commentUncollapse, id);
   }
 
 
   global.commentUncollapse = function(id) {
-    var contents = $(ID_CONTENTS + id);
+    var children = $(ID_CHILDREN + id);
     var button = $(ID_COLLAPSE + id);
 
-    classRemove(contents, "hidden");
+    if (children)
+      classRemove(children, "hidden");
 
     classRemove(button, "option-uncollapse");
     classAdd(button, "option-collapse");
 
-    button.title = "Collapse";
+    button.title = "Collapse children";
 
     onclick(button, global.commentCollapse, id);
   }
diff --git a/frontend/sass/commento.scss b/frontend/sass/commento.scss
index 6e50321..816230c 100644
--- a/frontend/sass/commento.scss
+++ b/frontend/sass/commento.scss
@@ -186,6 +186,16 @@
       z-index: 2;
     }
 
+    .commento-options-mobile {
+      margin-right: 12px;
+    }
+
+    .commento-options-clearfix {
+      height: 38px;
+      width: 1px;
+      display: block;
+    }
+
     .commento-moderation {
       height: 48px;
     }