From c43a209c6b91addca610e2872726cb1779e4dce5 Mon Sep 17 00:00:00 2001 From: Phil Eichinski Date: Thu, 31 Oct 2019 18:32:44 +1000 Subject: [PATCH] feat(citSci): landing page loads study-specific content from a source outside the app --- src/app/app.js | 11 +- src/app/citizenScience/_citizenScience.scss | 102 +++++++++++++++++- src/app/citizenScience/citizenScience.js | 28 +++-- .../labels/thumbLabels/_thumbs.scss | 31 +++--- .../studies/bristlebird/about.tpl.html | 27 ----- .../studies/default/about.tpl.html | 9 +- .../studies/koala/about.tpl.html | 18 ---- src/baw.paths.nobuild.js | 3 +- 8 files changed, 144 insertions(+), 85 deletions(-) delete mode 100644 src/app/citizenScience/studies/bristlebird/about.tpl.html delete mode 100644 src/app/citizenScience/studies/koala/about.tpl.html diff --git a/src/app/app.js b/src/app/app.js index 3b35c757..87ed8e1a 100644 --- 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 index 55beb213..2d91c60d 100644 --- 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 index 7c0d7c8c..7c155e47 100644 --- 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 = `

${heading}

` + + "

Indicate whether the audio clips contain any of the given labels.

"; + }); - backgroundImage.currentBackground = paths.site.assets.backgrounds.citizenScience + backgroundFile; } } @@ -42,5 +54,7 @@ angular "conf.paths", "backgroundImage", "$routeParams", + "$http", + "$sce", CitizenScienceAboutController ]); \ No newline at end of file diff --git a/src/app/citizenScience/labels/thumbLabels/_thumbs.scss b/src/app/citizenScience/labels/thumbLabels/_thumbs.scss index a8030bb1..eb15901c 100644 --- a/src/app/citizenScience/labels/thumbLabels/_thumbs.scss +++ b/src/app/citizenScience/labels/thumbLabels/_thumbs.scss @@ -3,6 +3,23 @@ $thumb-height: 100; $triangle: ''; +.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: ' - -
-
- - -

Welcome to the Eastern Bristlebird Citizen Science Project

- - Eastern Bristlebird - -

Eastern Bristlebirds are cryptic critters. They don't show up in recordings very often, but it's really important - to know when they do because it gives valuable information that can help their conservation. For each audio clip, - tell us which vocalisations you hear or see in the spectrogram.

- -

Aenean sit amet ante id nisl suscipit sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing - elit. Pellentesque erat risus, vulputate nec luctus at, rutrum quis diam. Donec eu magna nec orci - pharetra ultricies sed id eros. Sed lobortis pulvinar augue vitae posuere. Praesent sed ligula tortor. - Etiam eu ipsum nisi. Integer sed dignissim sapien, nec molestie lorem. Duis porttitor, mauris quis - egestas vestibulum, lacus nibh interdum neque, non mollis ligula lorem ut sapien. Nulla facilisi.

- - - Get Started! - -
-
- - \ No newline at end of file diff --git a/src/app/citizenScience/studies/default/about.tpl.html b/src/app/citizenScience/studies/default/about.tpl.html index 6b5986c7..71e4dd8f 100644 --- a/src/app/citizenScience/studies/default/about.tpl.html +++ b/src/app/citizenScience/studies/default/about.tpl.html @@ -1,14 +1,13 @@
-
+
-

Dataset labelling for {{study}}

+ Get Started! -

Indicate whether the audio clips contain any of the given labels.

- - Get Started! + + Get Started!
diff --git a/src/app/citizenScience/studies/koala/about.tpl.html b/src/app/citizenScience/studies/koala/about.tpl.html deleted file mode 100644 index 42c2f695..00000000 --- a/src/app/citizenScience/studies/koala/about.tpl.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
-
- - -

Verify Koala Detections

- -

Indicate whether the audio clips contain any Koala vocalisations.

- - - Get Started! - - -
-
- -
\ No newline at end of file diff --git a/src/baw.paths.nobuild.js b/src/baw.paths.nobuild.js index 2943cfe8..600b0dab 100644 --- 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/" } } }