Merge pull request #429 from smth/2019-update

2019 update

foundation/organisation/templates/organisation/networkgroup_detail.html

@@ -1,12 +1,21 @@
 {% extends "cms_apphook.html" %}
 {% load i18n %}
 {% load markdown_deux_tags %}
-
+{% load cms_tags %}
 {% block title %}{{ object.name }}{% endblock %}
 
-{% block pagebanner-inner %}
-    <h2>{{ object.name }}</h2>
-    <p>{{ object.description|markdown }}</p>
+{% block pagebanner %}
+  <div class="banner">
+    <div class="container">
+      <div class="banner_text">
+        <h2>{{ object.name }}</h2>
+        {{ object.description|markdown }}
+      </div>
+      <div class="banner_image">
+        {% placeholder "banner image" inherit %}
+      </div>
+    </div>
+  </div>
 {% endblock %}
 
 {% block custom_sidebar %}

foundation/search/templates/search/search.html

@@ -4,13 +4,21 @@
 
 {% block title %}{% trans 'Search' %}{% endblock %}
 
-{% block pagebanner-inner %}
-  <h2>{% trans 'Search' %}</h2>
-  {% if query %}
-    {% blocktrans with num=page.object_list|length %}
-      Your search for: "{{ query }}" returned {{ num }} results.
-    {% endblocktrans %}
-  {% endif %}
+{% block pagebanner %}
+  <div class="banner">
+    <div class="container">
+      <div class="banner_text">
+        <h2>{% trans 'Search' %}</h2>
+        {% if query %}
+          <p>
+          {% blocktrans with num=page.object_list|length %}
+            Your search for: "{{ query }}" returned {{ num }} results.
+          {% endblocktrans %}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+  </div>
 {% endblock %}
 
 {% block main %}

src/js/dom.js

@@ -40,4 +40,123 @@ $(document).ready(function() {
       window.open(this.href);
       return false;
   });
+
+
+  // home video
+  // Need to manipulate what aldryn-video gives us
+  var homeVideo = $('body.home-template .embed-responsive');
+  var homeVideoIframe = $(homeVideo).children("iframe");
+  // add some attributes
+  $(homeVideo).attr('id', 'video');
+  $(homeVideoIframe).attr('allow', 'autoplay');
+  // edit the params
+  var framesrc = $(homeVideoIframe).attr('src');
+  if (framesrc) {
+    var newframesrc = framesrc.replace('feature=oembed', 'enablejsapi=1');
+    $(homeVideoIframe).attr('src', newframesrc);
+  }
+
+  // Show video and play it
+  $('#play-home-video').on('click', function () {
+    $('#page').addClass("video-active");
+    callPlayer('video', 'playVideo');
+  });
+
+  // Stop video and hide it
+  $('#close-home-video').on('click', function () {
+    callPlayer('video', 'stopVideo');
+    $('#page').removeClass("video-active");
+  });
+
 });
+
+/**
+ * @author       Rob W <gwnRob@gmail.com>
+ * @website      https://stackoverflow.com/a/7513356/938089
+ * @version      20190409
+ * @description  Executes function on a framed YouTube video (see website link)
+ *               For a full list of possible functions, see:
+ *               https://developers.google.com/youtube/js_api_reference
+ * @param String frame_id The id of (the div containing) the frame
+ * @param String func     Desired function to call, eg. "playVideo"
+ *        (Function)      Function to call when the player is ready.
+ * @param Array  args     (optional) List of arguments to pass to function func*/
+function callPlayer(frame_id, func, args) {
+    if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
+    var iframe = document.getElementById(frame_id);
+    if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
+        iframe = iframe.getElementsByTagName('iframe')[0];
+    }
+
+    // When the player is not ready yet, add the event to a queue
+    // Each frame_id is associated with an own queue.
+    // Each queue has three possible states:
+    //  undefined = uninitialised / array = queue / 0 = ready
+    if (!callPlayer.queue) callPlayer.queue = {};
+    var queue = callPlayer.queue[frame_id],
+        domReady = document.readyState == 'complete';
+
+    if (domReady && !iframe) {
+        // DOM is ready and iframe does not exist. Log a message
+        window.console && console.log('callPlayer: Frame not found; id=' + frame_id);
+        if (queue) clearInterval(queue.poller);
+    } else if (func === 'listening') {
+        // Sending the "listener" message to the frame, to request status updates
+        if (iframe && iframe.contentWindow) {
+            func = '{"event":"listening","id":' + JSON.stringify(''+frame_id) + '}';
+            iframe.contentWindow.postMessage(func, '*');
+        }
+    } else if ((!queue || !queue.ready) && (
+               !domReady ||
+               iframe && !iframe.contentWindow ||
+               typeof func === 'function')) {
+        if (!queue) queue = callPlayer.queue[frame_id] = [];
+        queue.push([func, args]);
+        if (!('poller' in queue)) {
+            // keep polling until the document and frame is ready
+            queue.poller = setInterval(function() {
+                callPlayer(frame_id, 'listening');
+            }, 250);
+            // Add a global "message" event listener, to catch status updates:
+            messageEvent(1, function runOnceReady(e) {
+                    if (!iframe) {
+                        iframe = document.getElementById(frame_id);
+                        if (!iframe) return;
+                        if (iframe.tagName.toUpperCase() != 'IFRAME') {
+                            iframe = iframe.getElementsByTagName('iframe')[0];
+                            if (!iframe) return;
+                        }
+                    }
+                if (e.source === iframe.contentWindow) {
+                    // Assume that the player is ready if we receive a
+                    // message from the iframe
+                    clearInterval(queue.poller);
+                    queue.ready = true;
+                    messageEvent(0, runOnceReady);
+                    // .. and release the queue:
+                    while (tmp = queue.shift()) {
+                        callPlayer(frame_id, tmp[0], tmp[1]);
+                    }
+                }
+            }, false);
+        }
+    } else if (iframe && iframe.contentWindow) {
+        // When a function is supplied, just call it (like "onYouTubePlayerReady")
+        if (func.call) return func();
+        // Frame exists, send message
+        iframe.contentWindow.postMessage(JSON.stringify({
+            "event": "command",
+            "func": func,
+            "args": args || [],
+            "id": frame_id
+        }), "*");
+    }
+    /* IE8 does not support addEventListener... */
+    function messageEvent(add, listener) {
+        var w3 = add ? window.addEventListener : window.removeEventListener;
+        w3 ?
+            w3('message', listener, !1)
+        :
+            (add ? window.attachEvent : window.detachEvent)('onmessage', listener);
+    }
+}

src/scss/_article-links.scss

@@ -0,0 +1,7 @@
+.article-links {
+  @include docs-narrow;
+
+  &:empty {
+    margin: 0;
+  }
+}

src/scss/_continuum.scss

@@ -0,0 +1,95 @@
+.continuum {
+  text-align: center;
+  counter-reset: continuum-counter;
+  list-style: none;
+  font-weight: bold;
+  position: relative;
+  margin: 0 0 $size-spacing-base 0;
+  padding: $size-spacing-xl 0 0 0;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 4px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -2px;
+    background-color: $color-blue-base;
+    z-index: -1;
+  }
+
+  & > li {
+    counter-increment: continuum-counter;
+    background-color: $body-bg;
+    margin: $size-spacing-xxl 0;
+    padding: $size-spacing-lg 0 $size-spacing-sm 0;
+    position: relative;
+
+    &:first-child {
+      margin-top: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 14px solid $color-blue-base;
+      position: absolute;
+      top: -2px;
+      left: 50%;
+      margin-left: -8px;
+    }
+  }
+
+  h2, h3, h4 {
+    display: inline-flex;
+    align-items: center;
+    font-size: $size-font-xxl;
+
+    &::before {
+      content: counter(continuum-counter);
+      display: inline-flex;
+      font-size: $size-font-xl;
+      background-color: rgba($color-blue-base , 0.5);
+      width: 2em;
+      height: 2em;
+      border-radius: 50%;
+      margin-right: 0.5em;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  dt {
+    @include sr-only();
+  }
+
+  dd {
+    display: inline-block;
+    background-color: rgba($color-blue-base , 0.5);
+    font-size: $size-font-sm;
+    font-weight: 500;
+    padding: 0.1em 0.5em;
+    border-radius: 0.2em;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+
+    a,
+    a:hover {
+      box-shadow: none;
+    }
+  }
+}