From 0e37564acd4ab9d569099b2a6b4de421701d526c Mon Sep 17 00:00:00 2001
From: mikepsinn <m@quantimodo.com>
Date: Tue, 30 Apr 2019 13:22:53 -0500
Subject: [PATCH 1/2] Treat faces as buttons instead of images on mobile

---
 src/templates/items/notification-item.html | 29 ++++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/templates/items/notification-item.html b/src/templates/items/notification-item.html
index e62ebbaf2f..0c260aab10 100644
--- a/src/templates/items/notification-item.html
+++ b/src/templates/items/notification-item.html
@@ -75,25 +75,38 @@ <h2 style="white-space: normal; line-height: normal; ">{{trackingReminderNotific
 <div id="numericRatingOptions" class="primary-outcome-variable-reporting"
      ng-if="trackingReminderNotification.inputType === 'oneToFiveNumbers'">
     <div class="primary-outcome-variable-rating-buttons">
-        <img id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
+        <button id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
+                style="width: 18%; background: none; border: none;"
              on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
-             ng-click="track(trackingReminderNotification, option.numericValue, $event)" ng-src="{{option.img}}">
+                ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}"
+                 style="width: 100%;">
+        </button>
     </div>
 </div>
 <div id="happiestFaceIsFive" class="primary-outcome-variable-reporting"
      ng-if="trackingReminderNotification.inputType === 'happiestFaceIsFive'">
     <div class="primary-outcome-variable-rating-buttons">
-        <img id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
-             on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
-             ng-click="track(trackingReminderNotification, option.numericValue, $event)" ng-src="{{option.img}}">
+        <button id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
+                style="width: 18%; background: none; border: none;"
+                 on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
+                 ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}"
+                 style="width: 100%;">
+        </button>
     </div>
 </div>
 <div id="saddestFaceIsFive" class="primary-outcome-variable-reporting"
      ng-if="trackingReminderNotification.inputType === 'saddestFaceIsFive'">
     <div class="primary-outcome-variable-rating-buttons">
-        <img id="{{'negativeRatingOptions' + option.numericValue}}" ng-repeat="option in negativeRatingOptions"
-             on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
-             ng-click="track(trackingReminderNotification, option.numericValue, $event)" ng-src="{{option.img}}">
+        <button id="{{'negativeRatingOptions' + option.numericValue}}"
+                style="width: 18%; background: none; border: none;"
+                ng-repeat="option in negativeRatingOptions"
+                on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
+                ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}"
+                 style="width: 100%;">
+        </button>
     </div>
 </div>
 <div class="row" ng-if="trackingReminderNotification.unitAbbreviatedName.indexOf('yes/no') !== -1 ">

From d397db95662d2630070a18850f4ebe8c422d2eb8 Mon Sep 17 00:00:00 2001
From: mikepsinn <m@quantimodo.com>
Date: Tue, 6 Aug 2019 19:36:48 -0500
Subject: [PATCH 2/2] Face buttons

---
 .../reminder-notification-fragment.html       | 26 ++++++++++++-------
 src/templates/reminders-inbox-compact.html    | 21 ++++++++-------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/templates/fragments/reminder-notification-fragment.html b/src/templates/fragments/reminder-notification-fragment.html
index 16fbc1cc7b..855c158b2b 100644
--- a/src/templates/fragments/reminder-notification-fragment.html
+++ b/src/templates/fragments/reminder-notification-fragment.html
@@ -67,20 +67,28 @@ <h2 ng-if="inputType === 'value'" style="white-space: normal; line-height: norma
     </div>
 </div>
 <div class="primary-outcome-variable-reporting" ng-if="trackingReminderNotification.inputType === 'oneToFiveNumbers'">
-    <div class="primary-outcome-variable-rating-buttons"><img ng-repeat="option in numericRatingOptions"
-                                                              ng-click="track(trackingReminderNotification, option.numericValue, $event)"
-                                                              ng-src="{{option.img}}"></div>
+    <div class="primary-outcome-variable-rating-buttons">
+        <button ng-repeat="option in numericRatingOptions" ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}">
+        </button>
+    </div>
     <br>
 </div>
 <div class="primary-outcome-variable-reporting" ng-if="trackingReminderNotification.inputType === 'happiestFaceIsFive'">
-    <div class="primary-outcome-variable-rating-buttons"><img ng-repeat="option in positiveRatingOptions"
-                                                              ng-click="track(trackingReminderNotification, option.numericValue, $event)"
-                                                              ng-src="{{option.img}}"> <br></div>
+    <div class="primary-outcome-variable-rating-buttons">
+        <button ng-repeat="option in positiveRatingOptions" ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}">
+        </button>
+        <br>
+    </div>
     <br>
 </div>
 <div class="primary-outcome-variable-reporting" ng-if="trackingReminderNotification.inputType === 'saddestFaceIsFive'">
-    <div class="primary-outcome-variable-rating-buttons"><img ng-repeat="option in negativeRatingOptions"
-                                                              ng-click="track(trackingReminderNotification, option.numericValue, $event)"
-                                                              ng-src="{{option.img}}"> <br></div>
+    <div class="primary-outcome-variable-rating-buttons">
+        <button ng-repeat="option in negativeRatingOptions" ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}">
+        </button>
+        <br>
+    </div>
     <br>
 </div>
\ No newline at end of file
diff --git a/src/templates/reminders-inbox-compact.html b/src/templates/reminders-inbox-compact.html
index 7225da650e..f52645e328 100644
--- a/src/templates/reminders-inbox-compact.html
+++ b/src/templates/reminders-inbox-compact.html
@@ -73,28 +73,31 @@ <h2 style="white-space: normal; line-height: normal; ">{{trackingReminderNotific
         <div class="primary-outcome-variable-reporting"
              ng-if="trackingReminderNotifications[0].inputType === 'oneToFiveNumbers'">
             <div class="primary-outcome-variable-rating-buttons">
-                <img id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
+                <button id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
                      on-hold="trackAllWithConfirmation(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-src="{{option.img}}">
+                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)">
+                    <img ng-src="{{option.img}}">
+                </button>
             </div>
         </div>
         <div class="primary-outcome-variable-reporting"
              ng-if="trackingReminderNotifications[0].inputType === 'happiestFaceIsFive'">
             <div class="primary-outcome-variable-rating-buttons">
-                <img id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
+                <button id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
                      on-hold="trackAllWithConfirmation(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-src="{{option.img}}">
+                    ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)">
+                    <img ng-src="{{option.img}}">
+                </button>
             </div>
         </div>
         <div class="primary-outcome-variable-reporting"
              ng-if="trackingReminderNotifications[0].inputType === 'saddestFaceIsFive'">
             <div class="primary-outcome-variable-rating-buttons">
-                <img id="{{'negativeRatingOptions' + option.numericValue}}" ng-repeat="option in negativeRatingOptions"
+                <button id="{{'negativeRatingOptions' + option.numericValue}}" ng-repeat="option in negativeRatingOptions"
                      on-hold="trackAllWithConfirmation(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-src="{{option.img}}">
+                    ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)">
+                    <img ng-src="{{option.img}}">
+                </button>
             </div>
         </div>
         <div class="row" ng-if="trackingReminderNotifications[0].unitAbbreviatedName.indexOf('yes/no') !== -1 ">