diff --git a/open_humans/fixtures/test-data.json b/open_humans/fixtures/test-data.json index 744f67271..f814f8d42 100644 --- a/open_humans/fixtures/test-data.json +++ b/open_humans/fixtures/test-data.json @@ -224,6 +224,7 @@ "is_academic_or_nonprofit": false, "contact_email": "asdf@test.com", "info_url": "http://jimihendrix.com", + "jogl_page": "https://app.jogl.io/project/135", "short_description": "Really groovy music", "long_description": "Bork norps are coming!", "returned_data_description": "Lots of music", @@ -253,6 +254,7 @@ "is_academic_or_nonprofit": false, "contact_email": "trance@email.com", "info_url": "https://en.wikipedia.org/wiki/Trance_music", + "jogl_page": "", "short_description": "List your five favorite trance tracks", "long_description": "Trance", "returned_data_description": "Lists of songs", @@ -282,6 +284,7 @@ "is_academic_or_nonprofit": false, "contact_email": "foobar@email.com", "info_url": "http://www.example.com", + "jogl_page": "", "short_description": "Some data", "long_description": "Some data, long description", "returned_data_description": "Stuff", diff --git a/open_humans/templates/member/activity.html b/open_humans/templates/member/activity.html index 5ce8e8ccf..46f36394a 100644 --- a/open_humans/templates/member/activity.html +++ b/open_humans/templates/member/activity.html @@ -1,5 +1,6 @@ {% extends 'base-bs4.html' %} {% load static %} +{% load waffle_tags %} {% load utilities %} {% block head_title %}{{ project.name }}{% endblock %} @@ -55,6 +56,22 @@

About {{ project.name }}

aria-selected="false">Data {% endif %} + + {% flag "jogl_features" %} + {# JOGL news & needs tabs #} + {% if project.jogl_page %} +
  • + News +
    • +
  • + Needs +
    • + {% endif %} + {% endflag %}
    About {{ project.name }} aria-labelledby="activity-panel-data-tab"> {% include 'partials/activity-panel-data.html' %}
    + + {% flag "jogl_features" %} + {# JOGL news & needs panels #} + {% if project.jogl_page %} + +
    + {% include 'partials/activity-panel-news.html' %} +
    +
    + {% include 'partials/activity-panel-needs.html' %} +
    + {% endif %} + {% endflag %}
    {% endblock main %} diff --git a/open_humans/templates/partials/activity-panel-info.html b/open_humans/templates/partials/activity-panel-info.html index c1f369a2b..ed5a7a27d 100644 --- a/open_humans/templates/partials/activity-panel-info.html +++ b/open_humans/templates/partials/activity-panel-info.html @@ -1,4 +1,5 @@ {% load static %} +{% load waffle_tags %} {% load utilities %} {# the "info" panel on an activity page #}
    @@ -194,6 +195,13 @@

    {% endif %} {# / if project_member #} + {% flag "jogl_features" %} + {% if project.jogl_page %} +
    +
    + {% endif %} + {% endflag %} +

    @@ -339,5 +347,13 @@

    ' + needsItem.title + '

    '); + + // Content. Add links to bare URLs, and prepend JOGL domains to bare path links. + var needsContent = linkify(needsItem.content); + needsContent = addJoglLinks(needsContent); + div.append('
    ' + needsContent + '
    '); + if (needsItem.skills) { + div.append('
    Helpful skills
    '); + for (var i = 0; i < needsItem.skills.length; i++) { + div.find("ul.jogl-need-skills").append('
  • ' + needsItem.skills[i] + '
    • '); + } + } + div.append('How to help'); + + // Make all links in news items open in a new tab. + div.find('a').prop('target', "_blank").prop('rel', "noopener"); +} + +function joglCompletedNeedContent(div, needsItem) { + const needURL = 'https://app.jogl.io/need/' + needsItem.id; + // header + div.append('

    ' + needsItem.title + '

    '); + + // Content. Add links to bare URLs, and prepend JOGL domains to bare path links. + var needsContent = linkify(needsItem.content); + needsContent = addJoglLinks(needsContent); + div.append('
    ' + needsContent + '
    '); + + // Make all links in news items open in a new tab. + div.find('a').prop('target', "_blank").prop('rel', "noopener"); +} + +function addJogl(joglId) { + const joglProjectURL = 'https://jogl-backend.herokuapp.com/api/projects/' + joglId + '/'; + $.getJSON(joglProjectURL, function( projData ) { + + // Load news. + const joglNewsURL = 'https://jogl-backend.herokuapp.com/api/feeds/' + projData.feed_id; + $.getJSON(joglNewsURL, function( feedData ) { + if (feedData.length == 0) { + // "No news" default text. + $("#jogl-news").append('No news items yet for this project\'s JOGL page.') + + } else { + //$("#jogl-news").append( + // '

    Comment on news items using this activity\'s JOGL project page

    '); + + // Add news items. + var infoTopNews = null; // populate top project news item for info tab + for (var i = 0; i < feedData.length; i++) { + var newsItemDiv = $('
    '); + $("#jogl-news").append(newsItemDiv); + if (i != 0) { + newsItemDiv.append('
    '); // separator for multiple items + }; + joglNewsItemContent(newsItemDiv, feedData[i]); // add additional content to news item + if (!infoTopNews && feedData[i].from.object_type == "project") { + infoTopNews = true; + $("#info-jogl-news").append("

    Latest News

    "); + newsItemDiv.clone().appendTo( "#info-jogl-news" ); // copy first item to info div + } + }; + }; + }); + + // Load needs. + const joglNeedsURL = 'https://jogl-backend.herokuapp.com/api/projects/' + joglId + '/needs'; + $.getJSON(joglNeedsURL, function (needsData) { + + // Sort needs and split into "active" and "completed". + needsData.sort(function (N1, N2) { return sortNeeds(N1, N2); }); + var activeNeeds = needsData.filter(function (N) { return N.status == "active"; }); + var completedNeeds = needsData.filter(function (N) { return N.status == "completed"; }); + + if (activeNeeds.length == 0 && completedNeeds.length == 0) { + $("#jogl-needs").append("

    No needs currently listed for this project.

    "); + } + + // Active needs. + if (activeNeeds.length > 0) { + $("#jogl-needs").append('

    Active Needs

    '); + for (var i = 0; i < activeNeeds.length; i++) { + var needsItemDiv = $('
    '); + $("#jogl-needs").append(needsItemDiv); + if (i !== 0) { + needsItemDiv.append('
    '); + } else { + $("#info-jogl-needs").append("

    Active needs

    "); + } + joglActiveNeedContent(needsItemDiv, activeNeeds[i]); + if (i < 3) { + needsItemDiv.clone().appendTo("#info-jogl-needs"); + } + }; + }; + + // Completed needs. + if (completedNeeds.length > 0) { + $("#jogl-needs").append('

    Completed Needs

    '); + for (var i = 0; i < completedNeeds.length; i++) { + var needsItemDiv = $('
    '); + $("#jogl-needs").append(needsItemDiv); + if (i !== 0) { + needsItemDiv.append('
    '); + } + joglCompletedNeedContent(needsItemDiv, completedNeeds[i]); + }; + }; + }); + }); +} + +// Run this during page load to immediately load the target panel. $(function () { var default_panel = "#activity-panel-info"; @@ -44,3 +230,11 @@ $(function () { // Run this to handle an existing hash on page load. hashHandler(); }); + +$(document).ready(function () { + // Add JOGL data after page load, if JOGL URL is defined. + if (typeof joglURL !== 'undefined') { + var joglId = /([0-9]+)/g.exec(joglURL)[1]; + addJogl(joglId); + }; +}) \ No newline at end of file diff --git a/static/scss/oh-proj-theming.scss b/static/scss/oh-proj-theming.scss index 9509c29f3..db537f54c 100644 --- a/static/scss/oh-proj-theming.scss +++ b/static/scss/oh-proj-theming.scss @@ -22,6 +22,8 @@ $text-h1-mult: 2.0; $text-h2-mult: 1.6; $text-h3-mult: 1.35; $text-h4-mult: 1.15; +$text-h5-mult: 1.05; +$text-h6-mult: 0.95; $text-sm-mult: 1.05; $text-md-mult: 1.1; $text-lg-mult: 1.15; @@ -53,6 +55,12 @@ body { h4 { font-size: $xs-text-base * $text-h4-mult; } + h5 { + font-size: $xs-text-base * $text-h5-mult; + } + h6 { + font-size: $xs-text-base * $text-h6-mult; + } } footer { font-size: $xs-text-base * $text-footer-mult; @@ -72,6 +80,12 @@ footer { h4 { font-size: $xs-text-base * $text-h4-mult * $text-sm-mult; } + h5 { + font-size: $xs-text-base * $text-h5-mult * $text-sm-mult; + } + h6 { + font-size: $xs-text-base * $text-h6-mult * $text-sm-mult; + } } footer { font-size: $xs-text-base * $text-footer-mult * $text-sm-mult; @@ -92,6 +106,12 @@ footer { h4 { font-size: $xs-text-base * $text-h4-mult * $text-md-mult; } + h5 { + font-size: $xs-text-base * $text-h5-mult * $text-md-mult; + } + h6 { + font-size: $xs-text-base * $text-h6-mult * $text-md-mult; + } } footer { font-size: $xs-text-base * $text-footer-mult * $text-md-mult; @@ -112,6 +132,12 @@ footer { h4 { font-size: $xs-text-base * $text-h4-mult * $text-lg-mult; } + h5 { + font-size: $xs-text-base * $text-h5-mult * $text-lg-mult; + } + h6 { + font-size: $xs-text-base * $text-h6-mult * $text-lg-mult; + } } footer { font-size: $xs-text-base * $text-footer-mult * $text-lg-mult; @@ -132,6 +158,12 @@ footer { h4 { font-size: $xs-text-base * $text-h4-mult * $text-xl-mult; } + h5 { + font-size: $xs-text-base * $text-h5-mult * $text-xl-mult; + } + h6 { + font-size: $xs-text-base * $text-h6-mult * $text-xl-mult; + } } footer { font-size: $xs-text-base * $text-footer-mult * $text-xl-mult; @@ -348,4 +380,10 @@ btn.btn-xs { } .activity-badge-h3rem { height:3rem; -} \ No newline at end of file +} + +/* make lists visually consistent */ +ul, li { + margin-left: 0; + padding-left: 40px; +}