Merge pull request #21 from techsavvyjitsu/develop

Develop
techsavvyjitsu · Apr 19, 2018 · a6099e1 · a6099e1
2 parents 74282b1 + f18a958
commit a6099e1
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 20 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "main.css": "static/css/main.7e3ba35f.css",
   "main.css.map": "static/css/main.7e3ba35f.css.map",
-  "main.js": "static/js/main.5a1a0d70.js",
-  "main.js.map": "static/js/main.5a1a0d70.js.map",
+  "main.js": "static/js/main.8c906d36.js",
+  "main.js.map": "static/js/main.8c906d36.js.map",
   "static/media/self.jpeg": "static/media/self.412ef16b.jpeg"
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.png"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"><link href="https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise" rel="stylesheet"><title>Hello World! I am Ashwin, Welcome</title><link href="/static/css/main.7e3ba35f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async defer="defer" src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script><script type="text/javascript" src="/static/js/main.5a1a0d70.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.png"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"><link href="https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise" rel="stylesheet"><title>Hello World! I am Ashwin, Welcome</title><link href="/static/css/main.7e3ba35f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async defer="defer" src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script><script type="text/javascript" src="/static/js/main.8c906d36.js"></script></body></html>
diff --git a/build/service-worker.js b/build/service-worker.js
diff --git a/build/static/js/main.5a1a0d70.js.map b/build/static/js/main.5a1a0d70.js.map
diff --git a/build/static/js/main.5a1a0d70.js → build/static/js/main.8c906d36.js b/build/static/js/main.5a1a0d70.js → build/static/js/main.8c906d36.js
diff --git a/build/static/js/main.8c906d36.js.map b/build/static/js/main.8c906d36.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "me",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "dependencies": {
     "ajv": "^6.4.0",

diff --git a/src/components/youtube/youtube.js b/src/components/youtube/youtube.js
@@ -1,21 +1,23 @@
+import './youtube.less';
 import React, { Component } from 'react';
 
 class YouTube extends Component {
   render() {
     const {
-      width,
-      height,
       embedId
     } = this.props;
 
     const src = `https://www.youtube.com/embed/${embedId}?enablejsapi=1`;
 
     return (
-      <iframe className="youtube-component" id="player" type="text/html"
-        width={width}
-        height={height}
-        src={src}
-        frameborder="0" />
+      <div className="youtube-component">
+        <iframe id="player" type="text/html"
+          width="100%"
+          height="100%"
+          title={embedId}
+          src={src}
+          frameBorder="0" />
+      </div>
     );
   }
 }

diff --git a/src/components/youtube/youtube.less b/src/components/youtube/youtube.less
@@ -0,0 +1,13 @@
+.youtube-component {
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%; //16 x 9
+  position: relative;
+
+  #player {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/pages/donations/donations.js b/src/pages/donations/donations.js
@@ -30,13 +30,13 @@ class Donations extends Component {
       <section className="donations-component">
         <Panel title="NLWS - Northern Lights Wildlife Shelter">
           <div className="rows">
-            <div className="column is-12">
-              <YouTube width="490" height="280" embedId="tPZzaPeZutw" />
-            </div>
-            <div className="column is-12">
-              <h2>Visit Websites:</h2>
+            <div className="row">
+              <p className="website is-size-6">Visit Website: </p>
               <ul className="is-12 is-size-6 parent-list">{this.renderList(orgs)}</ul>
             </div>
+            <div className="row">
+              <YouTube embedId="tPZzaPeZutw" />
+            </div>
           </div>
         </Panel>
       </section>

diff --git a/src/pages/donations/donations.less b/src/pages/donations/donations.less
@@ -3,6 +3,14 @@
   p {
     margin-bottom: 10px;
   }
+
+  .website, .rows {
+    width: 100%;
+  }
+
+  .parent-list {
+    margin-bottom: 10px;
+  }
 }
 
 @media only screen and (max-width: 768px) {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.png"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"><link href="https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise" rel="stylesheet"><title>Hello World! I am Ashwin, Welcome</title><link href="/static/css/main.7e3ba35f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async defer="defer" src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script><script type="text/javascript" src="/static/js/main.5a1a0d70.js"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.png"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"><link href="https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise" rel="stylesheet"><title>Hello World! I am Ashwin, Welcome</title><link href="/static/css/main.7e3ba35f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async defer="defer" src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script><script type="text/javascript" src="/static/js/main.8c906d36.js"></script></body></html>