feat(citizenScienceExamples): bird image

QutEcoacoustics · Dec 19, 2017 · f3b8c18 · f3b8c18
1 parent 355609a
commit f3b8c18
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/src/app/annotationViewer/gridLines/_gridLines.scss b/src/app/annotationViewer/gridLines/_gridLines.scss
@@ -132,8 +132,14 @@ $scale-background:  #f5f5f5; //#7eff5f
 
 
 .dark {
-  & .yScale span {
+
+  .yScale, .xScale {
     background-color: transparent;
-    color: #fff;
+    span {
+      background-color: transparent;
+      color: #888;
+    }
   }
+
+
 }
diff --git a/src/app/citizenScience/textLabels/_citizenScienceLabels.scss b/src/app/citizenScience/textLabels/_citizenScienceLabels.scss
@@ -23,14 +23,17 @@
       font-size: 18px;
       cursor: pointer;
       line-height: 1em;
+      color: #559cd9;
+      text-decoration: none;
+
 
       &.main-button {
 
         &:hover {
-          color: #333;
+          color: #77befb;
 
           .checkbox {
-            border-color: #333;
+            border-color: #77befb;
           }
 
         }

diff --git a/src/app/citizenScience/thumbLabels/_thumbs.scss b/src/app/citizenScience/thumbLabels/_thumbs.scss
@@ -1,6 +1,6 @@
 $thumb-height: 100;
 
-$triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="20px" version="1.1"><defs/><g><path d="M 0 20 L 20 0 L 40 20 Z" fill="#ffffff" pointer-events="none"/></g></svg>';
+$triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="20px" version="1.1"><defs/><g><path d="M 0 20 L 20 0 L 40 20 Z" fill="#000000" pointer-events="none"/></g></svg>';
 
 .thumb-labels-container {
   text-align: center;
@@ -34,6 +34,7 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
           z-index: 52;
           left: 0;
           right: 0;
+          opacity: 0.9
         }
 
       }
@@ -65,17 +66,34 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
       z-index: 50;
       box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.3);
       border-radius: 5px;
-      background: #fff;
+      background: rgba(0,0,0,0.9);
       padding: 5px;
       top: ($thumb-height + 10) + px;
 
+      .citizen-science-thumb-example {
+
+        display:flex;
+
+        .img {
+          flex-grow:1;
+          background-size: cover;
+          background-position: center center;
+          box-shadow: 0px 0px 1px 10px rgba(0,0,0,0.5) inset
+        }
+
+        annotation-item {
+          flex-grow: 1;
+        }
+
+      }
+
     }
 
   }
 
   .label-examples-annotations {
 
-    background: #fff;
+
 
     h3 {
       text-align: center;

diff --git a/src/app/citizenScience/thumbLabels/examples.tpl.html b/src/app/citizenScience/thumbLabels/examples.tpl.html
@@ -7,7 +7,12 @@
     <i class="fa fa-arrow-right arrow next" aria-hidden="true" ng-click="changeCurExample(key, 1)" ng-if="annotations.length>1"></i>
 
     <div class="citizen-science-thumb-example">
-        <annotation-item annotation="$ctrl.label.examples[currentExample].annotation"></annotation-item>
-    </div>
+        <div class="img"
+             ng-if="$ctrl.label.examples[currentExample].image"
+             style="background-image: url(/public/citizen_science/labels/images/{{$ctrl.label.examples[currentExample].image}})"
+             >&nbsp;
+        </div>
+        <annotation-item annotation="$ctrl.label.examples[currentExample].annotation" class="dark"></annotation-item>
+            </div>
 
 </div>