client: layout improvements to metric sorter

5 files changed, 53 insertions, 16 deletions

diff --git a/client/css/metric-sorter-view.styl b/client/css/metric-sorter-view.styl
index 6e2840a..036b1cd 100644
--- a/client/css/metric-sorter-view.styl
+++ b/client/css/metric-sorter-view.styl
@@ -1,4 +1,24 @@
+@import colors
+
 #metric-sorter
     width: 100%
-    //padding: 0
-    // background-color: none
+    @media (max-width: 1000px)
+        padding: 0 !important
+        background-color: white !important
+        h2
+            display: none
+    form
+        width: 100%
+    .posts-container
+        display: flex
+        flex-wrap: wrap
+        margin-bottom: 1em
+        @media (max-width: 1000px)
+            margin-left: -1em
+            margin-right: -1em
+            margin-top: -1em
+        .left-post-container, .right-post-container
+            flex: 1
+            width: 100%
+    .append
+        color: $inactive-link-color
diff --git a/client/html/metric_sorter.tpl b/client/html/metric_sorter.tpl
index f1107bb..c7420a1 100644
--- a/client/html/metric_sorter.tpl
+++ b/client/html/metric_sorter.tpl
@@ -1,5 +1,5 @@
 <div class='content-wrapper' id='metric-sorter'>
-    <h1>Sorting metric "<%- ctx.primaryMetric %>"</h1>
+    <h2>Sorting metric "<%- ctx.primaryMetric %>"</h2>
     <form>
         <div class='posts-container'>
             <div class='left-post-container'></div>
@@ -11,7 +11,7 @@
 
         <div class='buttons'>
             <input class='mousetrap done-btn' type='submit' value='Done'>
-            <a class='mousetrap append skip-btn'>Skip</a>
+            <a href class='mousetrap append skip-btn'>Skip</a>
         </div>
     </form>
 </div>
diff --git a/client/html/metric_sorter_side.tpl b/client/html/metric_sorter_side.tpl
index 3895ec8..8d0b010 100644
--- a/client/html/metric_sorter_side.tpl
+++ b/client/html/metric_sorter_side.tpl
@@ -1,9 +1,5 @@
-<header>
-    <% if (ctx.post) { %>
-        <label>Post #<%- ctx.post.id %></label>
-    <% } %>
-</header>
-
 <% if (ctx.post) { %>
-    <div class='post-container'></div>
+    <a href='<%= ctx.getPostUrl(ctx.post.id, ctx.parameters) %>'>
+        <div class='post-container'></div>
+    </a>
 <% } %>
diff --git a/client/js/controllers/metric_sorter_contoller.js b/client/js/controllers/metric_sorter_contoller.js
index 020c2cd..e36cfe6 100644
--- a/client/js/controllers/metric_sorter_contoller.js
+++ b/client/js/controllers/metric_sorter_contoller.js
@@ -70,7 +70,8 @@ class MetricSorterController  {
         let filterQuery = this._ctx.parameters.query || '';
         let unsetFullQuery = `${filterQuery} ${unsetMetricsQuery} sort:random`;
 
-        return PostList.search(unsetFullQuery, 0, 1, []).then(response => {
+        return PostList.search(unsetFullQuery,
+                this._ctx.parameters.skips || 0, 1, []).then(response => {
             if (!response.results.length) {
                 return Promise.reject(new Error('No posts found'));
             } else {
@@ -116,6 +117,7 @@ class MetricSorterController  {
     }
 
     _evtSkip(e) {
+        this._ctx.parameters.skips = (this._ctx.parameters.skips || 0) + 1;
         this.startSortingNewPost();
     }
 
diff --git a/client/js/views/metric_sorter_view.js b/client/js/views/metric_sorter_view.js
index 6e6caa3..bdbfa4d 100644
--- a/client/js/views/metric_sorter_view.js
+++ b/client/js/views/metric_sorter_view.js
@@ -15,6 +15,7 @@ class MetricSorterView extends events.EventTarget {
         this._ctx = ctx;
         this._hostNode = document.getElementById('content-holder');
         views.replaceContent(this._hostNode, template(ctx));
+        this._skipButtonNode.addEventListener('click', e => this._evtSkipClick(e));
     }
 
     installLeftPost(post) {
@@ -36,10 +37,16 @@ class MetricSorterView extends events.EventTarget {
             containerNode,
             post,
             () => {
-                return [
-                    containerNode.getBoundingClientRect().width,
-                    iosCorrectedInnerHeight() - containerNode.getBoundingClientRect().top,
-                ];
+                // TODO: come up with a more reliable resizing mechanism
+                return window.innerWidth < 1000 ?
+                    [
+                        window.innerWidth,
+                        window.innerHeight * 0.6
+                    ] : [
+                        containerNode.getBoundingClientRect().width,
+                        window.innerHeight - containerNode.getBoundingClientRect().top -
+                            this._buttonsNode.getBoundingClientRect().height * 2
+                    ];
             });
     }
 
@@ -75,10 +82,22 @@ class MetricSorterView extends events.EventTarget {
         return this._hostNode.querySelector('.right-post-container');
     }
 
+    get _buttonsNode() {
+        return this._hostNode.querySelector('.buttons');
+    }
+
+    get _skipButtonNode() {
+        return this._hostNode.querySelector('.skip-btn');
+    }
+
     _getSidePostContainerNode(sideNode) {
         return sideNode.querySelector('.post-container');
     }
 
+    _evtSkipClick(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('skip'));
+    }
 }
 
 module.exports = MetricSorterView;