Add responsive text sizes

Also,
 - new activity badge
 - activity info and join button
 - bs4 version for main JS

open_humans/templates/base-bs4.html

@@ -18,8 +18,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
-    <script src="{% static 'js/main.js' %}"></script>
-  
+    <script src="{% static 'js/main-bs4.js' %}"></script>
+
     {# Per-page JavaScript #}
     {% page_bundle %}
 
@@ -51,7 +51,7 @@
           </button>
           <div class="collapse navbar-collapse text-right" id="navbarCollapse">
             <ul class="navbar-nav ml-auto">
-              <li class="nav-item mr-md-2{% active 'add-data' %}">
+              <li class="nav-item mt-2 mt-md-0 mr-md-2{% active 'add-data' %}">
                 <a class="nav-link" href="{% url 'add-data' %}">Add data</a>
               </li>
               <li class="nav-item mr-md-2 {% active 'explore-share' %}">
@@ -82,7 +82,8 @@
               </li>
               {% else %}
               <li class="nav-item {% active 'login' %} mr-md-4 mt-2 mt-md-1">
-                <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#login-modal-bs4">
+                <button type="button" class="btn btn-sm btn-default"
+                data-toggle="modal" data-target="#login-modal-bs4">
                   Log in
                 </button>
               </li>

open_humans/templates/member/activity.html

@@ -7,7 +7,7 @@
 {% block meta_description %}"{{ activity.verbose_name }}" on Open Humans: {{ activity.description }}{% endblock meta_description %}
 
 {% block main %}
-<div class="d-flex">
+<div class="d-flex mt-4">
     <div class="flex-grow-1 mb-3">
         <div class="d-none d-sm-inline-block">
             <h1>{{ project.name }}</h1>
@@ -23,10 +23,15 @@ <h1 class="justify-content-center">{{ project.name }}</h1>
             {% include 'partials/activity-info-table-bs4.html' %}
         </div>
     </div>
-    <div class="d-none d-sm-inline-block">
-        <img class="img-fluid max-width pl-4" src="{% static 'images/default-badge.png' %}">
+    <div class="d-none d-sm-inline-block w-25">
+        <img class="img-fluid max-width px-sm-1 pt-sm-1 px-md-3 pt-md-2" src="{% static 'images/default-badge.png' %}" style="max-height:10rem;">
     </div>
 </div>
 <h2>About {{ project.name }}</h2>
 <p>{{ project.long_description|markdown }}</p>
-{% endblock main %}
+{% if project.onsitedatarequestproject %}
+<a class="btn btn-primary btn-sm" href="{% url 'direct-sharing:join-on-site' project.slug %}">Join project</a>
+{% elif project.oauth2datarequestproject %}
+<a class="btn btn-primary btn-sm" href="{{ project.oauth2datarequestproject.enrollment_url }}">Join project</a>
+{% endif %}
+{% endblock main %}

static/js/main-bs4.js

@@ -0,0 +1,94 @@
+/*global webshim:true*/
+
+'use strict';
+
+var enableCsrf = require('./lib/enable-csrf.js');
+
+require('drmonty-garlicjs');
+require('webshim');
+
+enableCsrf($);
+
+// Specifically so IE will support the HTML5 form attribute on <input> elements
+webshim.setOptions('basePath', '/static/vendor/shims/');
+webshim.polyfill('forms');
+
+function parsleyForm(element) {
+  return $(element).parsley({
+    successClass: 'has-success',
+    errorClass: 'has-error',
+    trigger: 'change keyup focusout',
+    classHandler: function (field) {
+      if (field.$element.attr('type') === 'radio') {
+        return $('input[type=radio][name=' + field.$element.attr('name') + ']')
+          .parents('.radio');
+      }
+
+      return field.$element.parents('.form-group');
+    },
+    errorsContainer: function (field) {
+      var $field = field.$element;
+
+      if (field.$element.attr('type') === 'radio') {
+        $field = $('input[type=radio][name=' + field.$element.attr('name') +
+          ']:last').parent().parent();
+
+        return $('<span></span>').insertAfter($field);
+      }
+
+      if (field.$element.parent('.input-group')) {
+        $field = field.$element.parent('.input-group');
+      }
+
+      return $('<span></span>').insertAfter($field);
+    },
+    errorsWrapper: '<span class="help-block"></span>',
+    errorTemplate: '<div></div>'
+  });
+}
+
+function showModal(modalId) {
+  return function (e) {
+    // Allow for middle-clicking, control-clicking, and command-clicking
+    if (e.isDefaultPrevented() || e.metaKey || e.ctrlKey) {
+      return;
+    }
+
+    e.preventDefault();
+
+    $(modalId).modal({remote: false});
+  };
+}
+
+function storeRedirect(){
+  var location = window.location.href;
+
+  // Make a POST, but not asynchronously!
+  $.ajax({ type: 'POST',
+           url: '/account/storeredirect/',
+           data: {next_url: location},
+           success: function(){},
+           async:false });
+}
+
+$(function () {
+  $('[rel=persist]').garlic();
+
+  parsleyForm('form');
+
+  $('.logout-link').click(function (e) {
+    e.preventDefault();
+
+    $.post($(this).attr('href'), function () {
+      location.reload();
+    });
+  });
+
+  // Add these modals with JavaScript rather than data- attributes to prevent
+  // AJAX loading of modal content by Bootstrap.
+  $('.login-link').click(showModal('#login-modal'));
+  $('.signup-link').click(showModal('#signup-modal'));
+
+  // POST current URL to be stored as a redirect link upon login/signup
+  $('.redirect-storage-link').click(storeRedirect);
+});