From 018b8561c0da687b563b880b256dfbf3ea6953e9 Mon Sep 17 00:00:00 2001
From: MSFTserver <sawyerlemmo@gmail.com>
Date: Fri, 6 Oct 2017 11:02:03 -0700
Subject: [PATCH] add social sharing icons

---
 public/assets/css/general.css       | 66 +++++++++++++++++++++++++++++
 views/partials/assetInfo.handlebars | 15 +++++++
 2 files changed, 81 insertions(+)

diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index 54dbff4d..1bc07d44 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -447,3 +447,69 @@ table {
 	word-wrap: break-word;
 }
 
+/* Social Sharing Icons */
+
+  .button {
+    margin-right: 10px;
+    max-width: 100px;
+    display: inline;
+    padding: 8px;
+}
+
+a.reddit-share.button img {
+	width: 38px;
+	height: 38px;}
+
+.row--short img {
+    width: 40px;
+    height: 40px;
+}
+
+.row--short img:hover {
+  -webkit-animation: animation 20000ms linear both;
+  animation: animation 20000ms linear both;
+}
+
+@-webkit-keyframes animation {
+  0% { -webkit-transform: matrix3d(-0.5, -0.866, 0, 0, 0.866, -0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.5, -0.866, 0, 0, 0.866, -0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.16% { -webkit-transform: matrix3d(-0.493, -0.875, 0, 0, 0.769, -0.646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.493, -0.875, 0, 0, 0.769, -0.646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.32% { -webkit-transform: matrix3d(-0.546, -0.846, 0, 0, 0.699, -0.724, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.546, -0.846, 0, 0, 0.699, -0.724, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.64% { -webkit-transform: matrix3d(-0.703, -0.715, 0, 0, 0.603, -0.801, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.703, -0.715, 0, 0, 0.603, -0.801, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.95% { -webkit-transform: matrix3d(-0.836, -0.55, 0, 0, 0.509, -0.861, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.836, -0.55, 0, 0, 0.509, -0.861, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  1.26% { -webkit-transform: matrix3d(-0.924, -0.383, 0, 0, 0.384, -0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.924, -0.383, 0, 0, 0.384, -0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  1.57% { -webkit-transform: matrix3d(-0.974, -0.225, 0, 0, 0.236, -0.972, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.974, -0.225, 0, 0, 0.236, -0.972, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  2.82% { -webkit-transform: matrix3d(-0.919, 0.394, 0, 0, -0.394, -0.919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.919, 0.394, 0, 0, -0.394, -0.919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  4.07% { -webkit-transform: matrix3d(-0.538, 0.843, 0, 0, -0.843, -0.538, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.538, 0.843, 0, 0, -0.843, -0.538, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  4.3% { -webkit-transform: matrix3d(-0.447, 0.894, 0, 0, -0.894, -0.447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.447, 0.894, 0, 0, -0.894, -0.447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  5% { -webkit-transform: matrix3d(-0.161, 0.987, 0, 0, -0.987, -0.161, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.161, 0.987, 0, 0, -0.987, -0.161, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  8.61% { -webkit-transform: matrix3d(0.873, 0.487, 0, 0, -0.487, 0.873, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.873, 0.487, 0, 0, -0.487, 0.873, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  12.91% { -webkit-transform: matrix3d(0.976, -0.217, 0, 0, 0.217, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.976, -0.217, 0, 0, 0.217, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  17.22% { -webkit-transform: matrix3d(0.925, -0.381, 0, 0, 0.381, 0.925, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.925, -0.381, 0, 0, 0.381, 0.925, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  28.33% { -webkit-transform: matrix3d(0.996, -0.086, 0, 0, 0.086, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, -0.086, 0, 0, 0.086, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  39.44% { -webkit-transform: matrix3d(1, 0.026, 0, 0, -0.026, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0.026, 0, 0, -0.026, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  61.66% { -webkit-transform: matrix3d(1, -0.002, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, -0.002, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+@keyframes animation {
+  0% { -webkit-transform: matrix3d(-0.5, -0.866, 0, 0, 0.866, -0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.5, -0.866, 0, 0, 0.866, -0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.16% { -webkit-transform: matrix3d(-0.493, -0.875, 0, 0, 0.769, -0.646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.493, -0.875, 0, 0, 0.769, -0.646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.32% { -webkit-transform: matrix3d(-0.546, -0.846, 0, 0, 0.699, -0.724, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.546, -0.846, 0, 0, 0.699, -0.724, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.64% { -webkit-transform: matrix3d(-0.703, -0.715, 0, 0, 0.603, -0.801, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.703, -0.715, 0, 0, 0.603, -0.801, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  0.95% { -webkit-transform: matrix3d(-0.836, -0.55, 0, 0, 0.509, -0.861, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.836, -0.55, 0, 0, 0.509, -0.861, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  1.26% { -webkit-transform: matrix3d(-0.924, -0.383, 0, 0, 0.384, -0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.924, -0.383, 0, 0, 0.384, -0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  1.57% { -webkit-transform: matrix3d(-0.974, -0.225, 0, 0, 0.236, -0.972, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.974, -0.225, 0, 0, 0.236, -0.972, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  2.82% { -webkit-transform: matrix3d(-0.919, 0.394, 0, 0, -0.394, -0.919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.919, 0.394, 0, 0, -0.394, -0.919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  4.07% { -webkit-transform: matrix3d(-0.538, 0.843, 0, 0, -0.843, -0.538, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.538, 0.843, 0, 0, -0.843, -0.538, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  4.3% { -webkit-transform: matrix3d(-0.447, 0.894, 0, 0, -0.894, -0.447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.447, 0.894, 0, 0, -0.894, -0.447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  5% { -webkit-transform: matrix3d(-0.161, 0.987, 0, 0, -0.987, -0.161, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.161, 0.987, 0, 0, -0.987, -0.161, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  8.61% { -webkit-transform: matrix3d(0.873, 0.487, 0, 0, -0.487, 0.873, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.873, 0.487, 0, 0, -0.487, 0.873, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  12.91% { -webkit-transform: matrix3d(0.976, -0.217, 0, 0, 0.217, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.976, -0.217, 0, 0, 0.217, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  17.22% { -webkit-transform: matrix3d(0.925, -0.381, 0, 0, 0.381, 0.925, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.925, -0.381, 0, 0, 0.381, 0.925, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  28.33% { -webkit-transform: matrix3d(0.996, -0.086, 0, 0, 0.086, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, -0.086, 0, 0, 0.086, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  39.44% { -webkit-transform: matrix3d(1, 0.026, 0, 0, -0.026, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0.026, 0, 0, -0.026, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  61.66% { -webkit-transform: matrix3d(1, -0.002, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, -0.002, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
diff --git a/views/partials/assetInfo.handlebars b/views/partials/assetInfo.handlebars
index f3663974..60540d22 100644
--- a/views/partials/assetInfo.handlebars
+++ b/views/partials/assetInfo.handlebars
@@ -1,6 +1,21 @@
 <h2 class="h2--top">Title</h2>
 <div class="row row--short">
     {{fileInfo.title}}
+</div>
+	<h2>Share via Social Media</h2>
+  <div class="row row--short">
+	<a class="twitter-share button" target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
+		<img src="https://i.imgur.com/Vt1XU5f.png" />
+	</a>
+	<a class="fb-share button" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&amp;src=sdkpreparse">
+		<img src="https://i.imgur.com/SpOUrdt.png" />
+	</a>
+	<a class="tumblr-share button" target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=photo&title=Spee.ch%20%7C%20Share&caption=Shared%20From%20https://spee.ch%20A%20Decentralized%20Image%20Hosting%20Service%20Running%20On%20The%20LBRY%20Protocol%20&content=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}&tags=lbry%2C%20spee.ch%2C%20lbry.io&canonicalUrl=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&shareSource=tumblr_share_button">
+		<img src="https://i.imgur.com/0g1xcRd.png" />
+	</a>
+	<a class="reddit-share button" target="_blank" href="https://www.reddit.com/submit?url=http%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&title={{fileInfo.name}}(Decentralized%20Hosting%20Provided%20By%20Spee.ch%20Using%20the%20LBRY%20Protocol)">
+		<img src="https://i.imgur.com/I57laEJ.png" />
+	</a>
 </div>
 <h2>Links</h2>
 {{!-- short direct link to asset --}}