Added web sharing and updated mobile layout
This commit is contained in:
Moritz Kröger
parent
f3557c1493
commit
a9c5c383b4
|
|
@ -9,6 +9,9 @@ module.exports = {
|
|||
env: {
|
||||
browser: true,
|
||||
},
|
||||
globals: {
|
||||
FB: true
|
||||
},
|
||||
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
|
||||
extends: 'standard',
|
||||
// required to lint *.vue files
|
||||
|
|
|
|||
34
index.html
34
index.html
|
|
@ -10,8 +10,14 @@
|
|||
<!--[if IE]><link rel="shortcut icon" href="/static/img/favicon.ico"><![endif]-->
|
||||
<!-- Add to home screen for Android and modern mobile browsers -->
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<meta name="theme-color" content="#4DBA87">
|
||||
|
||||
<meta name="theme-color" content="#40A6EE">
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:url" content="https://www.euromat.info" />
|
||||
<meta property="og:title" content="Euromat 2017" />
|
||||
<meta property="og:locale" content="de_DE" />
|
||||
<meta property="og:locale:alternate" content="en_GB" />
|
||||
<meta property="og:description" content="Der Euromat nicht einfach nur ein Wahlomat. Sondern Ihr digitaler Wahl-Freund, der Ihnen einen Eindruck von den europapolitischen Positionen der Parteien vermittelt." />
|
||||
<meta property="og:image" content="https://euromat.info/static/img/facebook.png" />
|
||||
<!-- Add to home screen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
|
@ -19,7 +25,7 @@
|
|||
<link rel="apple-touch-icon" href="/static/img/icons/apple-touch-icon-152x152.png">
|
||||
<!-- Add to home screen for Windows -->
|
||||
<meta name="msapplication-TileImage" content="/static/img/icons/msapplication-icon-144x144.png">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<meta name="msapplication-TileColor" content="#40A6EE">
|
||||
<% for (var chunk of webpack.chunks) {
|
||||
for (var file of chunk.files) {
|
||||
if (file.match(/\.(js|css)$/)) { %>
|
||||
|
|
@ -27,11 +33,31 @@
|
|||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
This is your fallback content in case JavaScript fails to load.
|
||||
Unfortunately, this website requires JavaScript.
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- Todo: only include in production -->
|
||||
<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
<script>
|
||||
window.fbAsyncInit = () => {
|
||||
FB.init({
|
||||
appId: '1632993110065053',
|
||||
xfbml: true,
|
||||
version: 'v2.10'
|
||||
})
|
||||
FB.AppEvents.logPageView()
|
||||
}
|
||||
/* eslint-disable */
|
||||
(function(d, s, id){
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) {return;}
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
/* eslint-enable */
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<ul class="footer-social">
|
||||
<li v-for="item of social"
|
||||
:data-message="item.label === 'clipboard' ? item.message : ''"
|
||||
:class="{ 'show-info': showInfo }">
|
||||
:class="{ 'show-info': item.label === 'clipboard' && showClipboardInfo }">
|
||||
<button class="btn-dark" @click="share(item)" >
|
||||
<feather-icon :type="item.icon" />
|
||||
</button>
|
||||
|
|
@ -30,13 +30,28 @@
|
|||
|
||||
data () {
|
||||
return {
|
||||
url: window.location.origin,
|
||||
showInfo: false,
|
||||
shareURL: window.location.origin,
|
||||
showClipboardInfo: false,
|
||||
infoTimeout: 2000
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// https://stackoverflow.com/a/16861050/1724106
|
||||
getPopupDimensions (w = 800, h = 600) {
|
||||
const { screenLeft, screenTop, innerWidth, innerHeight } = window
|
||||
const dualScreenLeft = screenLeft || screen.left
|
||||
const dualScreenTop = screenTop || screen.top
|
||||
const width = innerWidth || document.documentElement.clientWidth || screen.width
|
||||
const height = innerHeight || document.documentElement.clientHeight || screen.height
|
||||
|
||||
return {
|
||||
width: w,
|
||||
height: h,
|
||||
left: ((width / 2) - (w / 2)) + dualScreenLeft,
|
||||
top: ((height / 2) - (h / 2)) + dualScreenTop
|
||||
}
|
||||
},
|
||||
share (social) {
|
||||
switch (social.label.toLowerCase()) {
|
||||
case 'twitter': return this.shareViaTwitter(social.message)
|
||||
|
|
@ -46,22 +61,34 @@
|
|||
}
|
||||
},
|
||||
shareViaTwitter () {
|
||||
console.log('shareViaTwitter')
|
||||
const url = 'https://twitter.com/intent/tweet'
|
||||
const frameName = 'Post a Tweet on Twitter'
|
||||
const { width, height, left, top } = this.getPopupDimensions()
|
||||
const options = `resizable,scrollbars,width=${width},height=${height},top=${top},left=${left}`
|
||||
|
||||
const popup = window.open(url, frameName, options)
|
||||
if (window.focus) {
|
||||
popup.focus()
|
||||
}
|
||||
},
|
||||
shareViaFacebook () {
|
||||
console.log('shareViaFacebook')
|
||||
FB.ui({
|
||||
method: 'share',
|
||||
display: 'popup',
|
||||
href: this.shareURL
|
||||
}, response => {})
|
||||
},
|
||||
copyToClipboard (message) {
|
||||
const $textarea = document.createElement('textarea')
|
||||
$textarea.value = this.url
|
||||
$textarea.value = this.shareURL
|
||||
document.body.appendChild($textarea)
|
||||
$textarea.select()
|
||||
|
||||
try {
|
||||
const successful = document.execCommand('copy')
|
||||
if (successful) {
|
||||
this.showInfo = true
|
||||
setTimeout(() => { this.showInfo = false }, this.infoTimeout)
|
||||
this.showClipboardInfo = true
|
||||
setTimeout(() => { this.showClipboardInfo = false }, this.infoTimeout)
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Oops, unable to copy')
|
||||
|
|
@ -74,10 +101,12 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~styles/animations";
|
||||
@import "~styles/colors";
|
||||
@import "~styles/layout";
|
||||
|
||||
$social-btn-size: 40px;
|
||||
$breakpoint: 768px;
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
|
|
@ -87,6 +116,10 @@
|
|||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-menu {
|
||||
|
|
@ -113,11 +146,23 @@
|
|||
.footer-social {
|
||||
padding: 0 $small-gap 0 0;
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-right: $small-gap;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.show-info::before {
|
||||
display: block;
|
||||
transform: translate(-105%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,14 +171,15 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate(-105%, -50%);
|
||||
transform: translate(-105%, -50%) scale(0);
|
||||
white-space: pre;
|
||||
padding: 10px 20px;
|
||||
border-radius: $border-radius;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
width: auto;
|
||||
font-size: $font-size-small;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms $easeInOutQuint;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue