Merge pull request #338 from QutEcoacoustics/night-birds-landing

feat(citSci): landing page study-specific content loaded from outside the app
QutEcoacoustics · Oct 31, 2019 · d50634d · d50634d
2 parents a3d458e + c43a209
commit d50634d
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 85 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -287,16 +287,7 @@ angular.module("baw",
                     fullWidth: true
                 }).
                 when(convertRouteParams(paths.site.ngRoutes.citizenScience.aboutStudy), {
-                    templateUrl: function (params) {
-                        var templates = {
-                            "bristlebird": "citizenScience/studies/bristlebird/about.tpl.html",
-                            "koala-verification": "citizenScience/studies/koala/about.tpl.html",
-                            "default": "citizenScience/studies/default/about.tpl.html"
-                        };
-
-                        return(templates[templates.hasOwnProperty(params.studyName) ? params.studyName : "default"]);
-
-                    },
+                    templateUrl: "citizenScience/studies/default/about.tpl.html",
                     controller: "CitizenScienceAboutController",
                     title: "Citizen Science",
                     fullWidth: true

diff --git a/src/app/citizenScience/_citizenScience.scss b/src/app/citizenScience/_citizenScience.scss
@@ -6,22 +6,116 @@
     color: #0a0a0a;
   }
 
+  a {
+    color: #64a0d4;
+  }
 
 }
 
-.about-content {
+.about-content-container {
   padding: 20px;
 
-  img {
-    width: 200px;
+
+
+  .img {
     float: left;
     margin: 0px 20px 10px 0px;
-    border: 1px solid #ffffff;
+    img {
+      width: 200px;
+      border: 1px solid #ffffff;
+    }
+
+    &.right {
+      float: right;
+      margin: 10px 0px 10px 20px;
+    }
+
+    &.full {
+      float: none;
+      margin: 10px 0px 10px 0px;
+      img {
+        width: 100%;
+        max-height: 250px;
+        object-fit: cover;
+      }
+    }
 
   }
 
   .get-started {
+    clear: both;
     display: block;
+    float: right;
+    margin-left: 20px;
+
+    i {
+      font-size: 2em;
+      vertical-align: middle;
+       margin-left: 0.25em;
+    }
+
+    &:last-child {
+      float: none;
+      max-width: 300px;
+      margin-left: auto;
+      margin-right: auto;
+
+    }
+
+  }
+
+  .about-content {
+
+    section {
+
+      margin-bottom: 25px;
+
+      hr {
+        opacity: 0.3;
+      }
+
+    }
+
+    h2 {
+      margin: 10px 20px 20px 10px;
+    }
+
+    iframe {
+      width: 100%;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    .quote {
+
+      i {
+        font-size: 1.5em;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: 10px;
+        color: #aaaaaa;
+      }
+
+      i:first-child {
+        vertical-align: bottom;
+        margin-right: 10px;
+        margin-left: 0px;
+      }
+
+
+    }
+
+    .quote_source {
+
+      &:before {
+        content: " - ";
+      }
+
+      margin-left: 20px;
+
+    }
+
+
   }
 
 }

diff --git a/src/app/citizenScience/citizenScience.js b/src/app/citizenScience/citizenScience.js
@@ -3,21 +3,33 @@ class CitizenScienceAboutController {
                 $url,
                 paths,
                 backgroundImage,
-                $routeParams) {
+                $routeParams,
+                $http,
+                $sce) {
 
         $scope.listenLink =  $url.formatUri(paths.site.ngRoutes.citizenScience.listen,
             {studyName: $routeParams.studyName});
 
         $scope.study = $routeParams.studyName;
 
-        var backgroundFiles = {
-            "bristlebird": "2.jpg",
-            "koala-verification": "3.jpg"
-        };
-        var backgroundFile = backgroundFiles.hasOwnProperty($routeParams.studyName) ? backgroundFiles[$routeParams.studyName] : "1.jpg";
+        $http.get(paths.site.assets.citizenScience.landing + "backgrounds.json").then(response => {
+            var backgroundFiles = response.data;
+            var backgroundFile = backgroundFiles.hasOwnProperty($routeParams.studyName) ? backgroundFiles[$routeParams.studyName] : "1.jpg";
+            backgroundImage.currentBackground = paths.site.assets.citizenScience.backgrounds.files + backgroundFile;
+        });
 
+        $http.get(paths.site.assets.citizenScience.landing + $scope.study + ".html").then(response => {
+            $scope.content = $sce.trustAsHtml(response.data);
+        }, response => {
+
+            // convert e.g. my-study to My Study
+            var heading = $scope.study.replace(/-/, " ")
+                .split(" ").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+
+            $scope.content = `<h2>${heading}</h2>` +
+                "<p>Indicate whether the audio clips contain any of the given labels.</p>";
+        });
 
-        backgroundImage.currentBackground = paths.site.assets.backgrounds.citizenScience + backgroundFile;
     }
 }
 
@@ -42,5 +54,7 @@ angular
             "conf.paths",
             "backgroundImage",
             "$routeParams",
+            "$http",
+            "$sce",
             CitizenScienceAboutController
         ]);
diff --git a/src/app/citizenScience/labels/thumbLabels/_thumbs.scss b/src/app/citizenScience/labels/thumbLabels/_thumbs.scss
@@ -3,6 +3,23 @@ $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" pointer-events="none"/></g></svg>';
 
 
+.img {
+  position: relative;
+  .img-attribution {
+    background: rgba(0,0,0,0.5);
+    opacity: 0.7;
+    color: #aaaaaa;
+    position: absolute;
+    bottom: 1px;
+    text-align: center;
+    vertical-align: bottom;
+    display: block;
+    a {
+      color: #aaaaaa;
+    }
+  }
+}
+
 .thumb-labels-container {
   text-align: center;
   margin-top: 10px;
@@ -131,19 +148,7 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
           max-width: 400px;
           min-width: 30%;
 
-          .img-attribution {
-            background: rgba(0,0,0,0.5);
-            opacity: 0.7;
-            color: #aaaaaa;
-            position: absolute;
-            bottom: 1px;
-            text-align: center;
-            vertical-align: bottom;
-            display: block;
-            a {
-              color: #aaaaaa;
-            }
-          }
+
 
         }
 

diff --git a/src/app/citizenScience/studies/bristlebird/about.tpl.html b/src/app/citizenScience/studies/bristlebird/about.tpl.html
diff --git a/src/app/citizenScience/studies/default/about.tpl.html b/src/app/citizenScience/studies/default/about.tpl.html
@@ -1,14 +1,13 @@
 <div class="citizen-science">
 
      <div class="cs-main-container">
-        <div class="main wrapper clearfix dark-background about-content">
+        <div class="main wrapper clearfix dark-background about-content-container">
 
-            <h2>Dataset labelling for {{study}}</h2>
+            <a href="{{listenLink}}" class="btn btn-default get-started">Get Started! <i class="fa fa-arrow-circle-right"></i></a>
 
-            <p>Indicate whether the audio clips contain any of the given labels.</p>
-
-            <a href="{{listenLink}}" class="btn btn-default get-started">Get Started!</a>
+            <ng-bind-html class="about-content" ng-bind-html="content"></ng-bind-html>
 
+            <a href="{{listenLink}}" class="btn btn-default get-started">Get Started! <i class="fa fa-arrow-circle-right"></i></a>
 
         </div> <!-- #main -->
     </div> <!-- #main-container -->

diff --git a/src/app/citizenScience/studies/koala/about.tpl.html b/src/app/citizenScience/studies/koala/about.tpl.html
diff --git a/src/baw.paths.nobuild.js b/src/baw.paths.nobuild.js
@@ -229,7 +229,8 @@ module.exports = function (environment) {
                         "files": "/system/citizen_science/backgrounds/",
                         "lookup": "/system/citizen_science/samples/images.json"
                     },
-                    "labelImages": "/system/citizen_science/labels/images/"
+                    "labelImages": "/system/citizen_science/labels/images/",
+                    "landing": "/system/citizen_science/landing/"
                 }
             }
         }