html2canvas

And canvas2image. Works. AND it's got a download button, so let's call that an improvement.
AhoyLemon · Nov 14, 2017 · 777a0d3 · 777a0d3
1 parent ed79124
commit 777a0d3
Show file tree

Hide file tree

Showing 13 changed files with 389 additions and 35 deletions.
diff --git a/css/tips.css b/css/tips.css
@@ -576,8 +576,6 @@ img.bug {
   top: 0;
   left: 0;
   z-index: 1; }
-  .image-builder.hidden {
-    display: none; }
   .image-builder figure {
     background-size: cover;
     position: relative;
@@ -602,6 +600,10 @@ img.bug {
       -webkit-box-shadow: none;
       box-shadow: none;
       padding: 0.35em 0.65em; }
+  .image-builder .share-text {
+    position: relative; }
+  .image-builder .tip-headline, .image-builder .share-text, .image-builder .learn-more, .image-builder img.logo {
+    z-index: 3; }
   .image-builder figcaption {
     min-height: 470px;
     display: -webkit-box;
@@ -656,6 +658,16 @@ img.bug {
     left: 8px;
     opacity: 0.7; }
 
+@media screen and (max-width: 900px) {
+  .image-builder figure {
+    width: 90vw; }
+  .image-builder .share-text {
+    font-size: 8vw;
+    padding-top: 0.5em;
+    padding-bottom: 1em; }
+  .image-builder figcaption {
+    min-height: 90vw; } }
+
 .share {
   position: fixed;
   top: 0;
@@ -665,6 +677,8 @@ img.bug {
   background-color: rgba(33, 33, 33, 0.92);
   z-index: 13;
   display: none; }
+  .share canvas {
+    max-width: 100%; }
   .share .inner {
     max-width: 900px; }
   .share .share-screen {
@@ -725,12 +739,22 @@ img.bug {
     display: inline-block;
     padding: 0.35em 1.35em;
     cursor: pointer; }
+    .share button.download {
+      font-family: "Lora", serif;
+      font-weight: 600;
+      font-size: 1.5em;
+      padding: 0.25 1em; }
     .share button.swap {
-      width: 12em; }
+      width: 14em; }
     .share button:hover {
       background: #e5e972;
       color: #212121; }
     .share button[disabled] {
       color: rgba(238, 238, 238, 0.5);
       background: transparent;
       border-color: currentColor; }
+
+@media screen and (max-width: 900px) {
+  .share .inner {
+    overflow-y: scroll;
+    max-height: 80vh; } }
diff --git a/img/logo-white32.png b/img/logo-white32.png
diff --git a/index.html b/index.html
@@ -6,8 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="🍆+🍑=🌟">
-    <meta http-equiv="last-modified" content="2017-10-14@09:45:31">
-    <link href="css/tips.css?lastUpdated=2017-10-14@09:45:31" rel="stylesheet">
+    <meta http-equiv="last-modified" content="2017-10-14@14:45:46">
+    <link href="css/tips.css?lastUpdated=2017-10-14@14:45:46" rel="stylesheet">
     <!-- Twitter-->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:creator" content="@AhoyLemon">
@@ -138,7 +138,7 @@
             <h3 class="tip-headline"><span>{{tipLabel}} {{tipNumberFormatted}}</span></h3>
             <div class="tip-text" v-html="currentTip"></div>
             <div class="share-wrapper">
-              <button v-on:click="shareThisTip" v-if="browser != 'safari'"><span class="icon"> 
+              <button v-on:click="shareThisTip" v-if="browser != 'ssafari'"><span class="icon"> 
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                     <path d="M6.9 10.3c-3.1 0-5.6 2.5-5.6 5.6 0 3.1 2.5 5.6 5.6 5.6 1.4 0 2.7-.5 3.7-1.4l7.6 4.2c-.5 3.1 1.5 6 4.6 6.5 3.1.5 6-1.5 6.5-4.6.5-3.1-1.5-6-4.6-6.5-1.7-.3-3.4.2-4.7 1.3l-7.6-4.2c.1-.6.1-1.3 0-1.9l7.6-4.2c2.3 2.1 5.9 1.8 7.9-.5s1.8-5.9-.5-7.9c-2.3-2.1-5.9-1.8-7.9.5-.9 1-1.4 2.4-1.4 3.7 0 .3 0 .6.1.9l-7.6 4.2c-1-.8-2.4-1.3-3.7-1.3z"></path>
                   </svg></span><span class="text">Share this tip!</span></button>
@@ -157,7 +157,7 @@ <h3 class="tip-headline"><span>{{tipLabel}} {{tipNumberFormatted}}</span></h3>
             <figcaption>
               <div class="share-text" v-html="currentTip"></div>
             </figcaption>
-            <h4><span class="learnmore">Learn more at </span><span class="url">greatsex.tips</span></h4><img class="logo" src="svg/logo-white.svg">
+            <h4 class="learn-more"><span class="learnmore">Learn more at </span><span class="url">greatsex.tips</span></h4><img class="logo" src="img/logo-white32.png" style="position:absolute; z-index:9999;">
           </figure>
         </div>
       </div>
@@ -167,11 +167,12 @@ <h4><span class="learnmore">Learn more at </span><span class="url">greatsex.tips
             <div id="ShareImageWrapper">
               <!--img(src="https://picsum.photos/900/510")-->
             </div>
-            <div class="share-caption"> 
-              <p>Download this image and share it with whoever needs to have their sex lives improved.</p>
+            <div class="button-holder">
+              <button class="download" v-on:click="downloadCanvas">download</button>
             </div>
             <div class="button-holder">
               <button class="swap" v-on:click="switchBackground" :disabled="imageLoading"> <span v-if="imageLoading">Hang on...</span><span v-else>Switch Background</span></button>
+              <!--button#DownloadImageButton(download) Download-->
               <button v-on:click="shareScreen = false">Close </button>
             </div>
           </div>
@@ -184,9 +185,9 @@ <h4><span class="learnmore">Learn more at </span><span class="url">greatsex.tips
       </div>
     </div>
     <div class="javascripts">
-      <script src="js/libraries/vue.min.js"></script>
-      <script src="js/libraries/dom-to-image.min.js"></script>
-      <script src="js/libraries/file-saver.min.js"></script>
+      <script src="js/libraries/vue.full.js"></script>
+      <script src="js/libraries/html2canvas.min.js"></script>
+      <script src="js/libraries/canvas2image.js"></script>
       <script type="text/javascript">
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -196,7 +197,7 @@ <h4><span class="learnmore">Learn more at </span><span class="url">greatsex.tips
         ga('create', 'UA-15129990-28', 'auto');
         ga('send', 'pageview');
       </script>
-      <script src="js/min/tips.min.js?lastUpdated=2017-10-14@09:45:31"></script>
+      <script src="js/min/tips.min.js?lastUpdated=2017-10-14@14:45:46"></script>
       <script type="text/javascript">
         if ('serviceWorker' in navigator) {
           navigator.serviceWorker.register('/service-worker.js').then(function(registration) {