From ec5256dabdf52e73baa39a6f9a2b216ec8f2cbbf Mon Sep 17 00:00:00 2001
From: Alex Ling <hkalexling@gmail.com>
Date: Sat, 26 Dec 2020 11:21:09 +0000
Subject: [PATCH] Improve batch mark UX (#97)

---
 src/views/components/card.html.ecr | 3 ++-
 src/views/title.html.ecr           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/components/card.html.ecr b/src/views/components/card.html.ecr
index d1c02c9..a116fee 100644
--- a/src/views/components/card.html.ecr
+++ b/src/views/components/card.html.ecr
@@ -35,7 +35,7 @@
       onclick="location='<%= base_url %>book/<%= item.id %>'" 
     <% end %>>
 
-    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true}" :class="{selected: selected}"
+    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true, selecting: false}" :class="{selected: selected}" @count.window="selecting = $event.detail.count > 0"
       <% if page == "title" && item.is_a?(Entry) && item.err_msg.nil? %>
         x-init="disabled = false"
       <% end %>>
@@ -45,6 +45,7 @@
           class="grayscale"
         <% end %>>
         <div class="uk-overlay-primary uk-position-cover" x-show="!disabled && (selected || hover)">
+          <div class="uk-height-1-1 uk-width-1-1" x-show="selecting" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')"></div>
           <div class="uk-position-center">
             <span class="fas fa-check-circle fa-3x" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')" :style="`color:${selected && 'orange'};`"></span>
           </div>
diff --git a/src/views/title.html.ecr b/src/views/title.html.ecr
index 8eb7881..9d22f22 100644
--- a/src/views/title.html.ecr
+++ b/src/views/title.html.ecr
@@ -1,5 +1,5 @@
 <div>
-  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++" @remove.window="count--" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
+  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++; $dispatch('count', {count: count})" @remove.window="count--; $dispatch('count', {count: count})" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
     <div class="uk-child-width-1-3" uk-grid>
       <div>
         <p x-text="count + ' items selected'" style="color:orange"></p>