Skip to content

Commit

Permalink
Share and install actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@AhoyLemon
AhoyLemon committed Feb 6, 2024
1 parent a0bb2a2 commit cfdd36d
Show file tree
Hide file tree
Showing 8 changed files with 58 additions and 146 deletions.
52 changes: 13 additions & 39 deletions css/damn.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 6 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<title>DAMN DOG</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,400,300,700|Roboto:400,300,700,400italic">
<link rel="stylesheet" href="css/damn.css?v=2024-02-06T02:15:44.296Z">
<link rel="stylesheet" href="css/damn.css?v=2024-02-06T04:37:56.570Z">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The guessing game for wikiHow illustrations.">
<meta http-equiv="last-modified" content="2024-02-06T02:15:44.296Z">
<meta http-equiv="last-modified" content="2024-02-06T04:37:56.570Z">
<link rel="canonical" href="https://damn.dog">
<!-- favicons-->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Expand Down Expand Up @@ -68,8 +68,10 @@
<li> <span class="label">Current round count</span><span class="indent"><span class="number-of-rounds">{{drawings.length}}</span></span></li>
<li><span class="label">Global average</span><span class="indent">{{averagePercent}}% correct</span></li>
<li> <span class="label">Learn more</span><span class="indent"><a href="https://github.com/AhoyLemon/damn.dog#readme" target="_blank" onclick="sendEvent('outside link', 'https://github.com/AhoyLemon/damn.dog')">here</a></span></li>
<li v-if="standalone == false"><span class="label">You can</span><span class="indent"><a v-on:click="help = 'share'">share this round.</a></span></li>
<li id="AddToHomeScreen" v-if="device &amp;&amp; standalone == false"><span class="label">But first</span><span class="indent"> <a v-on:click="help = 'bookmark'"><span v-if="(device == 'android') || (device == 'ios')">add to home screen</span><span v-else-if="(browser == 'ie') || (browser == 'edge')">pin to start</span><span v-else-if="device == 'chrome'">add to shelf</span><span v-else-if="browser == 'chrome'">save this</span><span v-else-if="(device == 'mac') || (browser == 'firefox') || (browser == 'opera') || (browser == 'vivaldi')">bookmark this</span></a></span></li>
<li v-if="standalone == false"><span class="label">You can</span><span class="indent">
<button @click="shareThisRound()">share this round.</button></span></li>
<li id="AddToHomeScreen" v-if="device &amp;&amp; standalone == false"><span class="label">But first</span><span class="indent">
<button @click="installPWA">Install this.</button></span></li>
<li class="smaller">Your progress will be saved if you close this browser.</li>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion js/min/damn.vue.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/min/damn.vue.min.js.map
View file

Large diffs are not rendered by default.

77 changes: 24 additions & 53 deletions js/partials/_vue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,69 +227,41 @@ var app = new Vue({

},


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CHECK BROWSER
checkBrowser: function() {
var ua = navigator.userAgent.toLowerCase();
//console.log(ua);
if (ua.indexOf("android") > -1) {
this.device = "android";
if (ua.indexOf("firefox") > -1) {
// Android Firefox
this.browser="firefox";
} else if (ua.indexOf("opr") > -1) {
// Android Opera
this.browser="opera";
} else if (ua.indexOf("chrome") > -1) {
// Android Chrome
this.browser="chrome";
}
} else if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('ipod') > -1) {
this.device = "ios";
} else if (ua.indexOf('windows') > -1) {
this.device = "windows";
if (ua.indexOf("edge") > -1) {
this.browser = "edge";
} else if (ua.indexOf("trident") > -1) {
this.browser = "ie";
} else if (ua.indexOf('firefox') > -1) {
this.browser = "firefox";
} else if (ua.indexOf('opr') > -1) {
this.browser = "opera";
} else if (ua.indexOf('vivaldi') > -1) {
this.browser = "vivaldi";
} else if (ua.indexOf('chrome') > -1) {
this.browser = "chrome";
}
} else if (ua.indexOf('mac') > -1) {
this.device = "mac";
// SHARE THIS ROUND

if (ua.indexOf('chrome') > -1) {
this.browser = "chrome";
} else if (ua.indexOf('safari') > -1) {
this.browser = "safari";
} else if (ua.indexOf('firefox') > -1) {
this.browser = "firefox";
}
} else if (ua.indexOf('cros') > -1) {
this.device = "chrome";
this.browser = "chrome";
shareThisRound: function() {
const self = this;
const currentUrl = window.location.href;
if (navigator.share) {
navigator.share({
title: 'damn.dog',
text: 'What is the title of this wikiHow article?',
url: currentUrl,
})
.then(() => {
sendEvent('share round', currentUrl)
})
.catch((error) => {
self.help = "share";
});
}

},

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Install This
installPWA: function() {
const self = this;
self.installEvent.prompt();
},

checkIfStandalone: function() {
var self = this;
//return (window.matchMedia('(display-mode: standalone)').matches);
if (window.matchMedia('(display-mode: standalone)').matches) {
self.standalone = true;
}
},

installPrompt: function() {
let self = this;
self.installEvent.prompt();
}

},
mounted: function() {
Expand Down Expand Up @@ -333,7 +305,6 @@ var app = new Vue({
// Sorry! No Web Storage support..
}

this.checkBrowser();
this.checkIfStandalone();

/////////////////////////////////////
Expand Down
10 changes: 6 additions & 4 deletions offline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<title>DAMN DOG</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,400,300,700|Roboto:400,300,700,400italic">
<link rel="stylesheet" href="css/damn.css?v=2024-02-06T02:15:44.242Z">
<link rel="stylesheet" href="css/damn.css?v=2024-02-06T04:37:56.486Z">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The guessing game for wikiHow illustrations.">
<meta http-equiv="last-modified" content="2024-02-06T02:15:44.242Z">
<meta http-equiv="last-modified" content="2024-02-06T04:37:56.486Z">
<link rel="canonical" href="https://damn.dog">
<!-- favicons-->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Expand Down Expand Up @@ -68,8 +68,10 @@
<li> <span class="label">Current round count</span><span class="indent"><span class="number-of-rounds">{{drawings.length}}</span></span></li>
<li><span class="label">Global average</span><span class="indent">{{averagePercent}}% correct</span></li>
<li> <span class="label">Learn more</span><span class="indent"><a href="https://github.com/AhoyLemon/damn.dog#readme" target="_blank" onclick="sendEvent('outside link', 'https://github.com/AhoyLemon/damn.dog')">here</a></span></li>
<li v-if="standalone == false"><span class="label">You can</span><span class="indent"><a v-on:click="help = 'share'">share this round.</a></span></li>
<li id="AddToHomeScreen" v-if="device &amp;&amp; standalone == false"><span class="label">But first</span><span class="indent"> <a v-on:click="help = 'bookmark'"><span v-if="(device == 'android') || (device == 'ios')">add to home screen</span><span v-else-if="(browser == 'ie') || (browser == 'edge')">pin to start</span><span v-else-if="device == 'chrome'">add to shelf</span><span v-else-if="browser == 'chrome'">save this</span><span v-else-if="(device == 'mac') || (browser == 'firefox') || (browser == 'opera') || (browser == 'vivaldi')">bookmark this</span></a></span></li>
<li v-if="standalone == false"><span class="label">You can</span><span class="indent">
<button @click="shareThisRound()">share this round.</button></span></li>
<li id="AddToHomeScreen" v-if="device &amp;&amp; standalone == false"><span class="label">But first</span><span class="indent">
<button @click="installPWA">Install this.</button></span></li>
<li class="smaller">Your progress will be saved if you close this browser.</li>
</ul>
</div>
Expand Down
9 changes: 2 additions & 7 deletions pug/partials/_sidebar.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,11 @@
li(v-if="standalone == false")
span.label You can
span.indent
a(v-on:click="help = 'share'") share this round.
button(@click="shareThisRound()") share this round.
li#AddToHomeScreen(v-if="device && standalone == false")
span.label But first
span.indent
a(v-on:click="help = 'bookmark'")
span(v-if="(device == 'android') || (device == 'ios')") add to home screen
span(v-else-if="(browser == 'ie') || (browser == 'edge')") pin to start
span(v-else-if="device == 'chrome'") add to shelf
span(v-else-if="browser == 'chrome'") save this
span(v-else-if="(device == 'mac') || (browser == 'firefox') || (browser == 'opera') || (browser == 'vivaldi')") bookmark this
button(@click="installPWA") Install this.
li.smaller Your progress will be saved if you close this browser.

.share-round-holder.helper-holder(v-cloak v-if="help == 'share'")
Expand Down
42 changes: 5 additions & 37 deletions sass/partials/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
.label { display: block; }
.indent { display: block; padding-left: 0.75em; font-weight: $bold; }
a { color:$blue; text-decoration: none; cursor: pointer;
&:hover { text-decoration: underline; }
&:hover, &:focus { text-decoration: underline; }
}
button { color:$blue; font-size: 1em; border:none; display: inline; font-family: $font; font-weight: 700; cursor: pointer;
&:hover, &:focus { text-decoration: underline; }
}
.smaller { font-size:0.8em; }
transform: translateX(101%); transition: all 0.3s ease;
Expand All @@ -19,43 +22,8 @@
}
}

/*

.homescreen-help-holder { background:$blue; color:$black; z-index:$z-homescreenbox;
&.android { @include position(fixed,0,0); max-width: 16em;
.ios, .edge, .opera, .desktop-chrome { display: none; }
b { display: block; }
.tap-that-icon { margin-top: -1.2em; }
.bottom-center-icon { display:none; }
&.opera { left:0; right: null; padding-top:20px;
.tap-that-icon { text-align: left; padding-top: 1em; padding-left: 2em; }
span.arrow { @include position(absolute,-16px,null,null,10px); }
.button { margin-top: 1em; display: inline-block; }
}
}
&.ios { @include position(fixed,null,0,0,0);
.homescreen-help { text-align: center; }
.android, .edge, .opera, .desktop-chrome { display: none; }
span.arrow { display:block; text-align: center; }
.top-right-icon { display:none; }
}
&.edge { @include position(fixed,0,0); max-width: 16em;
.ios, .android, .opera, .desktop-chrome { display: none; }
}
&.opera { @include position(fixed,0,0); max-width: 16em;
.top-right-icon { padding-right: 2.1em; }
.ios, .android, .edge, .desktop-chrome { display: none; }
}
&.desktop-chrome { @include position(fixed,0,0); max-width: 16em;
.ios, .android, .edge, .opera { display: none; }
}
.homescreen-help { text-align: right; padding-right: 0.5em; padding-bottom: 1em; padding-left: 1em; }
span.arrow { font-size:3.2em; }
.button { color:$black; border:2px solid $black; padding:.25em 1em; cursor: pointer;
&:hover { color:$blue; background:$black; border-color: $blue; }
}
}
*/

.homescreen-help-holder { background-color:rgba($black,0.9); @include position(fixed,0,0,0,0); z-index:$z-homescreenbox;
.homescreen-help { background:white; color:$black; @include position(fixed,0,0); padding:1em; }
svg { fill:currentColor;
Expand Down

0 comments on commit cfdd36d

Please sign in to comment.