feat(citSci): improve css for label check

src/app/citizenScience/bristlebird/about.tpl.html

@@ -1,8 +1,5 @@
 <div class="citizen-science ipswich">
 
-
-
-
      <div class="cs-main-container">
         <div class="main wrapper clearfix dark-background about-content">
 

src/app/citizenScience/bristlebird/bristlebird.js

@@ -116,6 +116,10 @@ class BristlebirdController {
         });
 
 
+        $scope.studyTitle = {"bristlebird": "Eastern Bristlebird Search", "koala-verification": "Koala Verification"}[$scope.csProject];
+
+
+
         //SampleLabels.init($scope.csProject, $scope.samples, $scope.labels);
 
         /**

src/app/citizenScience/bristlebird/listen.tpl.html

@@ -1,6 +1,6 @@
 <div class="citizen-science bristlebird">
 
-    <h2>Eastern Bristlebird Search
+    <h2>{{studyTitle}}
         <onboarding config="onboarding"></onboarding>
     </h2>
 

src/app/citizenScience/labels/textLabels/_citizenScienceLabels.scss

@@ -26,16 +26,13 @@
       color: #FFFFFF;
       text-decoration: none;
 
-      &.main-button {
-
-        &:hover {
-
-          opacity: 0.9;
-
+      &:hover {
+        .label-check-shell {
+          background-color: rgba(60,60,60,0.8);
         }
-
       }
 
+
       &.example-toggle {
         text-decoration: none;
 
@@ -47,6 +44,86 @@
 
     }
 
+    .expanded-label-container {
+
+      display: flex;
+
+      a {
+        .label-check-shell {
+          border-radius: 0.75em;
+        }
+      }
+
+    }
+
+    a {
+
+      vertical-align: middle;
+
+      .label-value-text {
+
+      }
+
+      .label-check-shell {
+
+        border: 2px solid #ffffff;
+        border-radius: 0.25em;
+        display: inline-block;
+        width: 1.5em;
+        height: 1.5em;
+        margin-left: 0.3em;
+        margin-right: 0.3em;
+        vertical-align: middle;
+        background: rgba(0,0,0,0.5);
+
+      }
+
+      &.yes {
+        b {
+          color: #8cc967;
+          &:before {
+            content: "\f00c";
+          }
+        }
+      }
+      &.maybe {
+        b {
+          color: #ffbc3e;
+          &:before {
+            content: "\f128";
+          }
+        }
+      }
+      &.no {
+        b {
+          color: #d00900;
+          &:before {
+            content: "\f00d";
+          }
+        }
+      }
+
+      b {
+        font-size: 1.3em;
+        &.grey {
+          color: #666666;
+          opacity: 0.5;
+        }
+      }
+
+    }
+
+
+
+
+
+
+
+
+
+
+/*
+
      a {
 
        .label-value-text {
@@ -73,7 +150,7 @@
              color: #ffbc3e;
              &:before {
                content: "\f128";
-               padding-left:0.15em;
+               padding-left:0.18em;
              }
            }
          }
@@ -84,7 +161,7 @@
              color: #d00900;
              &:before {
                content: "\f00d";
-               padding-left:0.05em;
+               padding-left:0.06em;
              }
            }
          }
@@ -99,6 +176,9 @@
            top:0.15em;
            left:0px;
          }
+         &.radio:before {
+           content: "\f10c";
+         }
          b {
            position: absolute;
            top:0.15em;
@@ -122,7 +202,12 @@
       top: -0.25em;
     }
 
+*/
+
+
   }
 
+
+
 }
 

src/app/citizenScience/labels/textLabels/labelCheck.js

@@ -26,6 +26,7 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                  */
                 $scope.toggleLabel = function (stateIndex) {
 
+                    console.log(self.state);
 
                     if (typeof stateIndex !== "number") {
                         // no new stateIndex supplied so cycle through the states, excluding zero
@@ -40,8 +41,6 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                             return;
                     }
 
-                    console.log(self.state);
-
                     // the state is preserved by storing the stateIndex
                     $scope.stateIndex = stateIndex;
 

src/app/citizenScience/labels/textLabels/labelCheck.tpl.html

@@ -2,25 +2,24 @@
     <div ng-if="!expanded">
         <a ng-click="toggleLabel(); $event.stopPropagation()" class="main-button {{states[stateIndex]}}">
             <span class="label-text">{{$ctrl.text}}</span>
-            <i class="fa"
-               aria-hidden="true">
+            <i class="label-check-shell" aria-hidden="true">
                 <b class="fa" aria-hidden="true"></b>
             </i><span ng-if="$ctr.showStateText" class="label-value-text">{{labelValueTexts[stateIndex]}}</span>
             </a>
     </div>
-    <div ng-if="expanded">
+    <div ng-if="expanded" class="expanded-label-container">
 
         <a ng-click="toggleLabel()" class="main-button {{states[stateIndex]}}">
             <span class="label-text">{{$ctrl.text}}</span>
         </a>
+        <a ng-click="toggleLabel(forStateIndex); $event.stopPropagation()" class="{{states[forStateIndex]}}" ng-repeat="forStateIndex in stateIndexes">
 
-
-        <a ng-click="toggleLabel(forStateIndex); $event.stopPropagation()" class="main-button {{states[forStateIndex]}}" ng-repeat="forStateIndex in stateIndexes">
-            <i class="fa"
-               aria-hidden="true">
+            <i class="label-check-shell" aria-hidden="true">
                 <b class="fa" aria-hidden="true" ng-class="{'grey': forStateIndex !== stateIndex}"></b>
             </i><span class="label-value-text">{{labelValueTexts[forStateIndex]}}</span>
-            </a>
+
+        </a>
+
     </div>
 
 </div>

src/components/services/background/background.js

@@ -32,6 +32,7 @@ angular.module("bawApp.components.background", [])
 
             var segmentDate = new Date(audioRecording.recordedDate.getTime() + offsetSeconds * 1000);
 
+
             // order images by
             // - whether the site matches
             // - time of day difference (rounded to 3 hours)