Merge branch 'dev' of https://github.com/the-domecode/domecode-opensource into dev

Author: arthtyagi

notes/static/js/resources.js

@@ -0,0 +1,58 @@
+/*This script is for implementing the mobile fix for resources. See 
+https://github.com/The-Domecode/domecode-opensource/issues/3#issuecomment-685106802
+for more info. */
+
+
+// polyfill "String.includes" function. required for bowsers without ES6 support, like Internet Explorer.
+if (!String.prototype.includes) {
+    String.prototype.includes = function(search, start) {
+        'use strict';
+        if (typeof start !== 'number') {
+            start = 0;
+        }
+  
+        if (start + search.length > this.length) {
+            return false;
+        } else {
+            return this.indexOf(search, start) !== -1;
+        }
+    };
+}
+
+var all = document.getElementsByTagName("*");
+
+var name;
+var elements = [];
+
+// loop through all elements on page to find all the iframes
+for (var i=0, max=all.length; i < max; i++) {
+    // get element name
+    var el = all[i];
+    var name = el.nodeName.toLowerCase();
+    if (name == "iframe") {
+        // if it's an iframe, push it to the list.
+        elements.push(el);
+    }
+}
+
+// loop through all the iframes we found
+for (var i=0, max=elements.length; i < max; i++) {
+    // get the frame to work on
+    var frame = elements[i];
+    // Skip trinket python editor
+    if(frame.src.includes("trinket")) {
+        continue;
+    }
+    // Wrap the video inside the video-wrapper class
+    
+    // get the frame's current parent
+    var parent = frame.parentNode;
+    // create the wrapper div and set its class
+    var wrapper = document.createElement("div");
+    wrapper.className = "video-container"
+
+    // set the wrapper as the parent's child instead of the frame
+    parent.replaceChild(wrapper, frame);
+    // set the frame as the child of the wrapper
+    wrapper.appendChild(frame);
+}

notes/static/notes/dark.css

@@ -371,3 +371,18 @@ p {
     background-position: 0% 50%;
   }
 }
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+}
+
+.video-container iframe, .video-container object, .video-container embed {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

notes/static/notes/light.css

@@ -118,7 +118,8 @@ body {
     left: 0;
     bottom: 0;
     width: 100%;
-    height: 18px;
+    height: auto;
+    min-height: 18px;
     background: #000000;
     color: white;
     text-align: center;
@@ -189,4 +190,19 @@ body {
     color: white;
     border: none;
     outline: none;
-  }
+  }
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+}
+
+.video-container iframe, .video-container object, .video-container embed {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

resources/templates/resources/resources_detail_python.html

@@ -1,4 +1,5 @@
-{% extends "notes/base.html" %}
+{% extends 'notes/base.html' %}
+{% load static %}
 {% block content %}
 
 <!--Add navigation to other resources-->
@@ -62,4 +63,8 @@ <h2 class="article-title">{{ object.title }}</h2>
 <p>Optional Python Editor for your use</p>
 <iframe src="https://trinket.io/embed/python3/9d578a67e3" width="90%" height="400" frameborder="0" marginwidth="0"
   marginheight="0"></iframe>
+
+<!-- Run video fix. Has to be at the bottom for this to work. -->
+<script src="{% static 'js/resources.js' %}"></script>
+
 {% endblock content %}