feat(citizenScienceExamples): alignment and spacing of bird images. H…

…ide image if screen too narrow
QutEcoacoustics · Jan 5, 2018 · f78c27b · f78c27b
1 parent 6f65998
commit f78c27b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/app/citizenScience/textLabels/labelCheck.tpl.html b/src/app/citizenScience/textLabels/labelCheck.tpl.html
@@ -1,9 +1,7 @@
 <div class="label-check">
-    <span>
         <a ng-click="toggleLabel()" class="main-button">
         <i class="fa"
            ng-class="$ctrl.isChecked() ? 'fa-check-square-o' : 'fa-square-o'"
            aria-hidden="true"></i><span>{{$ctrl.text}}</span>
         <a>
-    </span>
 </div>
diff --git a/src/app/citizenScience/thumbLabels/_thumbs.scss b/src/app/citizenScience/thumbLabels/_thumbs.scss
@@ -72,17 +72,30 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
 
       .citizen-science-thumb-example {
 
-        display:flex;
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-evenly;
 
         .img {
           flex-grow:1;
           background-size: cover;
           background-position: center center;
-          box-shadow: 0px 0px 1px 10px rgba(0, 0, 0, 0.5) inset
+          box-shadow: 0px 0px 1px 10px rgba(0, 0, 0, 0.5) inset;
+          max-width: 60%;
+          min-width: 30%;
+        }
+
+        @media (max-width: 520px) {
+          .img {
+            display: none;
+          }
         }
 
         annotation-item {
-          flex-grow: 1;
+
+          padding-left: 20px;
+          padding-right: 10px;
+
         }
 
       }