Merge branch 'main' into feature-generate-user-id

FatimahAreola · Mar 18, 2022 · 34157a7 · 34157a7
2 parents 6b86dd5 + a441682
commit 34157a7
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 11 deletions.
diff --git a/chromeExtension/popup.css b/chromeExtension/popup.css
@@ -50,16 +50,64 @@ button {
     box-shadow: 0px 8px 15px rgba(0,0, 0, 0.1);
     transition: all 0.3s ease 0s;
     cursor: pointer;
-
   }
 
   button:hover{
     background-color: #f7fff7;
     box-shadow: 0px 15px 20px rgba(0,0, 0, 0.1);
     transform: translateY(-2px);
+  } 
 
+  .flex-container{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40px;
+  }
+  .flex-container:first-child{
+    flex: 1; 
+    order: 1;
+  }
+
+  .flex-container:nth-child(2){
+    flex:1;
+    order: 2;
+    margin: 20px;
+  }
+
+  input[type=button]{
+    display: block;
+    height: 22px;
+    width: 70px;
+    outline: none;
+    margin-left: 20px;
+    border: none;
+    border-radius: 5px;
+    text-align: center;
+    justify-content: center;
+    background-color:#4ecdc4;;
+    box-shadow: 0px 8px 15px rgba(0,0, 0, 0.1);
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+  }
+  input[type=button]:hover{
+    background-color:#f7fff7;
+    box-shadow: 0px 15px 20px rgba(0,0, 0, 0.1);
+    transform: translateY(-2px);
   }
-
   .gap{
-    margin-bottom: 100px;
-  }
+    margin-bottom: 70px;
+  }
+
+  input[type=text] {
+    padding: 100;
+    height: 20px;
+    position: relative;
+    left: 0;
+    outline: none;
+    border: 1px solid #cdcdcd;
+    border-color: rgba(0, 0, 0, .15);
+    background-color: white;
+    box-shadow: 0px 8px 15px rgba(0,0, 0, 0.1);
+    font-size: 14px;
+    border-radius: 5px;
+  }
diff --git a/chromeExtension/popup.html b/chromeExtension/popup.html
@@ -6,13 +6,21 @@ <h1>Who Funds Your Feed</h1>
   </head>
 
   <body>
+     <div id="email">
+         <p>Please enter your e-mail to enable sponsorship detection:</p>
+         <div class="flex-container">
+             <div class="flex-child textBox">
+                 <input type="text" id="userEmail" placeholder=" [email protected] " name="inputText" value="" />
+             </div>
+             <div class="flex-child submitButton">
+                 <input type="button" id="submit" value="Submit" />
+             </div>
+         </div>
+     </div>
+
     <h2>Click to see your personalized insights!</h2>
     <button class="button" id="index_link">View Insights</button>
     <p class="gap"></p>
-    <div id="email">
-        Enter e-mail: <input type="text" id="userEmail" name="inputText" value="" />
-        <input type ="submit" id="submit" value="Submit" />
-    </div>
     <h2>About WFYF</h2>
     <p>This chrome extension will identify sponsored content on YouTube in order to provide awareness around the largest funders of your content consumption and their respective biases</p>
     <script src="popup.js"></script>

diff --git a/chromeExtension/popup.js b/chromeExtension/popup.js
@@ -53,3 +53,4 @@ function openIndex() {
 	url = userId ? baseUrl + userId : baseUrl;
 	chrome.tabs.create({ active: true, url: url });
 }
+
diff --git a/frontend/src/assets/DemoToDownload.png b/frontend/src/assets/DemoToDownload.png
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
@@ -38,9 +38,19 @@
 
 		<div v-if="!loading">
 			<h2>Share Your Results</h2>
-			<ion-icon name="logo-instagram" style="font-size: 35px"></ion-icon>
-			<ion-icon name="logo-facebook" style="font-size: 35px"></ion-icon>
-			<ion-icon name="download-outline" style="font-size: 35px"></ion-icon>
+			<ion-icon
+				name="logo-instagram"
+				style="font-size: 35px; fill: grey"
+			></ion-icon>
+			<ion-icon
+				name="logo-facebook"
+				style="font-size: 35px; fill: grey"
+			></ion-icon>
+			<ion-icon
+				name="download-outline"
+				style="font-size: 35px"
+				@click="download()"
+			></ion-icon>
 		</div>
 	</div>
 </template>
@@ -53,6 +63,7 @@ import HipTips from "./TipsCarousel/HipTips.vue";
 import axios from "axios";
 import DoubleBounce from "./loader.vue";
 import SampleData from "../../../endpointLambdas/reportAnalytics/SampleOutput.json";
+import img from "../assets/DemoToDownload.png";
 
 export default {
 	async mounted() {
@@ -105,6 +116,13 @@ export default {
 				behavior: "smooth",
 			});
 		},
+		download() {
+			console.log(img);
+			var a = document.createElement("a");
+			a.href = img;
+			a.download = "MainFunder.png";
+			a.click();
+		},
 	},
 };
 </script>

diff --git a/frontend/src/components/MainFunderCards/LeftMainFunderStat.vue b/frontend/src/components/MainFunderCards/LeftMainFunderStat.vue
@@ -5,6 +5,18 @@
 				style="max-width: 30vw; max-height: 30vw"
 				id="VideoSponsoredbyFunder"
 			></canvas>
+			<a id="toSave" v-show="false"></a>
+			<ion-icon
+				name="download-outline"
+				style="
+					font-size: 35px;
+					position: absolute;
+					left: 45vw;
+					top: 80vh;
+					cursor: pointer;
+				"
+				@click="downloadMainFunder()"
+			></ion-icon>
 		</div>
 		<div class="arrow-left">
 			<img
@@ -56,13 +68,21 @@ export default {
 			},
 			options: {
 				responsive: true,
+				animation: {
+					onComplete: function (animation) {
+						var a = document.getElementById("toSave");
+						a.setAttribute("download", "timeSponsoredByMainFunder.png");
+						a.setAttribute("href", this.toBase64Image());
+					},
+				},
 			},
 		};
 	},
 
 	data() {
 		return {
 			chartData: null,
+			href: null,
 		};
 	},
 	computed: {},
@@ -72,6 +92,12 @@ export default {
 			new Chart(ctx, this.chartData);
 		},
 	},
+	methods: {
+		downloadMainFunder() {
+			var a = document.getElementById("toSave");
+			a.click();
+		},
+	},
 };
 </script>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,3 +53,4 @@ function openIndex() {
		url = userId ? baseUrl + userId : baseUrl;
		chrome.tabs.create({ active: true, url: url });
		}