replace left-side share buttons with more dynamic form
max.mehl
parent
38a8225b15
commit
5ff2a3ee76
|
|
@ -22,6 +22,7 @@
|
|||
{{ "<!-- Custom CSS -->" | safeHTML }}
|
||||
<link rel="stylesheet" href="{{ "css/creative.css" | absURL }}" type="text/css">
|
||||
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}" type="text/css">
|
||||
<link rel="stylesheet" href="{{ "css/buttons-side.css" | absURL }}" type="text/css">
|
||||
<link rel="stylesheet" href="{{ "css/modals.css" | absURL }}" type="text/css">
|
||||
|
||||
{{ "<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->" | safeHTML }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,40 @@
|
|||
{{ "<!-- SHARE COLUMN -->" | safeHTML }}
|
||||
{{ $data := index .Site.Data .Site.Language.Lang }}
|
||||
<aside class="sharecolumn">
|
||||
<div class="sharecolumn">
|
||||
<!--
|
||||
{{ range $data.share }}
|
||||
<a id="{{ .id }}-left" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter }}" target="_blank"> </a>
|
||||
{{ end }}
|
||||
</aside>
|
||||
-->
|
||||
|
||||
<form action="/cgi/share.php" method="GET" class="share-buttons-side" target="_blank">
|
||||
<input name="popup" id="no-share-popup" type="radio" />
|
||||
<input name="ref" value="bottom" type="hidden" />
|
||||
<input name="url" value="https://pmpc.mehl.mx" type="hidden" /> <!-- replace with your URL -->
|
||||
<input name="title" value="Public Money, Public Code!" type="hidden" /> <!-- replace with site/share title -->
|
||||
<input class="n" name="website" placeholder="Please do not put anything here" /> <!-- stupid bot detection -->
|
||||
|
||||
<label class="button share-diaspora" title="Share this page on Diaspora" for="diaspora-share"> </label>
|
||||
<input name="popup" id="diaspora-share" type="radio" />
|
||||
<span class="popup diaspora">
|
||||
<label for="no-share-popup"></label>
|
||||
<input name="diasporapod" value="" placeholder="Diaspora URL (diasp.tld)" type="text" />
|
||||
<button type="submit" name="service" value="diaspora">OK</button>
|
||||
</span>
|
||||
|
||||
<label class="button share-gnusocial" title="Share this page on GNU Social" for="gnusocial-share"> </label>
|
||||
<input name="popup" id="gnusocial-share" type="radio" />
|
||||
<span class="popup gnusocial">
|
||||
<label for="no-share-popup"></label>
|
||||
<input name="gnusocialpod" value="" placeholder="GNU Social URL (gnusocial.tld)" type="text" />
|
||||
<button type="submit" name="service" value="gnusocial">OK</button>
|
||||
</span>
|
||||
|
||||
<button type="submit" name="service" value="reddit" class="button share-reddit" title="Share this page on Reddit"> </button>
|
||||
<button type="submit" name="service" value="twitter" class="button share-twitter" title="Share this page on Twitter"> </button>
|
||||
<button type="submit" name="service" value="facebook" class="button share-facebook" title="Share this page on Facebook"> </button>
|
||||
<button type="submit" name="service" value="gplus" class="button share-gplus" title="Share this page on Google+"> </button>
|
||||
<button type="submit" name="service" value="support" class="button share-support" title="Support the FSFE"> </button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<?php
|
||||
|
||||
// Change these variables
|
||||
$gnusocialuser = "fsfe@quitter.no";
|
||||
$twitteruser = "@fsfe";
|
||||
$flattruser = "fsfe";
|
||||
$supporturl = "https://fsfe.org/donate?pmpc";
|
||||
|
||||
// Don't change below here
|
||||
$service = isset($_GET['service']) ? $_GET['service'] : false;
|
||||
$url = isset($_GET['url']) ? $_GET['url'] : false;
|
||||
$title = isset($_GET['title']) ? $_GET['title'] : false;
|
||||
$diasporapod = isset($_GET['diasporapod']) ? $_GET['diasporapod'] : false;
|
||||
$gnusocialpod = isset($_GET['gnusocialpod']) ? $_GET['gnusocialpod'] : false;
|
||||
|
||||
if(empty($service) || empty($url)) {
|
||||
echo 'At least one required variable is empty. You have to define at least service and url';
|
||||
}
|
||||
else {
|
||||
$service = htmlspecialchars($service);
|
||||
$diasporapod = htmlspecialchars($diasporapod);
|
||||
$gnusocialpod = htmlspecialchars($gnusocialpod);
|
||||
$url = urlencode(htmlspecialchars($url));
|
||||
$title = urlencode(htmlspecialchars($title));
|
||||
|
||||
if ($service === "diaspora") {
|
||||
$diasporapod = validateurl($diasporapod);
|
||||
echo $diasporapod;
|
||||
header("Location: " . $diasporapod . "/bookmarklet?url=" . $url . "&title=" . $title);
|
||||
die();
|
||||
} elseif($service === "gnusocial") {
|
||||
$gnusocialpod = validateurl($gnusocialpod);
|
||||
header("Location: " . $gnusocialpod . "/notice/new?status_textarea=" . $title . " " . $url . " via " . $gnusocialuser);
|
||||
die();
|
||||
} elseif($service === "reddit") {
|
||||
header("Location: https://reddit.com/submit?url=" . $url . "&title=" . $title);
|
||||
die();
|
||||
} elseif($service === "flattr") {
|
||||
header("Location: https://flattr.com/submit/auto?user_id=" . $flattruser . "&url=" . $url . "&title=" . $title);
|
||||
die();
|
||||
} elseif($service === "hnews") {
|
||||
header("Location: https://news.ycombinator.com/submitlink?u=" . $url . "&t=" . $title);
|
||||
die();
|
||||
} elseif($service === "twitter") {
|
||||
header("Location: https://twitter.com/share?url=" . $url . "&text=" . $title . "&via=" . $twitteruser);
|
||||
die();
|
||||
} elseif($service === "facebook") {
|
||||
header("Location: https://www.facebook.com/sharer/sharer.php?u=" . $url);
|
||||
die();
|
||||
} elseif($service === "gplus") {
|
||||
header("Location: https://plus.google.com/share?url=" . $url);
|
||||
die();
|
||||
} elseif($service === "support") {
|
||||
header("Location: " . $supporturl);
|
||||
die();
|
||||
} else {
|
||||
echo 'Social network unknown.';
|
||||
}
|
||||
}
|
||||
|
||||
// If diaspora/GS pod has been typed without http(s):// prefix, add it
|
||||
function validateurl($url) {
|
||||
if (preg_match('#^https?://#i', $url) === 0) {
|
||||
return 'https://' . $url;
|
||||
} else {
|
||||
return $url;
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
div.sharecolumn {
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.1vh 0.5vh;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media(min-width:768px) {
|
||||
div.sharecolumn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* General button look */
|
||||
.share-buttons-side {
|
||||
left: 0;
|
||||
padding: 0.1vh 0.5vh;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.share-buttons-side button.button,
|
||||
.share-buttons-side label.button {
|
||||
/*
|
||||
display: inline-block;
|
||||
margin: 2.5px 5px 2.5px 0;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
font-family: sans-serif;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 7px 7px 7px 20px;
|
||||
width: 19%;
|
||||
min-width: 90px;
|
||||
max-width: 110px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
background-position: left 5px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px auto;
|
||||
opacity: 0.9;
|
||||
vertical-align: top;
|
||||
line-height: 1.2em;
|
||||
*/
|
||||
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2.7vh auto;
|
||||
background-color: #474747;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
margin: 2.5px 5px 2.5px 0;
|
||||
opacity: 0.9;
|
||||
text-decoration: none;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Single services with their colours and logos */
|
||||
.share-buttons-side button:hover, .share-buttons-side label:hover {
|
||||
background-color: #F05F40;
|
||||
}
|
||||
.share-buttons-side .share-diaspora {
|
||||
background-image: url("/img/share/diaspora_white.png");
|
||||
}
|
||||
.share-buttons-side .share-gnusocial {
|
||||
background-image: url("/img/share/gnusocial_white.png");
|
||||
}
|
||||
.share-buttons-side .share-reddit {
|
||||
background-image: url("/img/share/reddit_white.png");
|
||||
}
|
||||
.share-buttons-side .share-flattr {
|
||||
background-image: url("/img/share/flattr_white.png");
|
||||
display: none !important;
|
||||
}
|
||||
.share-buttons-side .share-hnews {
|
||||
background-image: url("/img/share/hackernews_white.png");
|
||||
display: none !important;
|
||||
}
|
||||
.share-buttons-side .share-twitter {
|
||||
background-image: url("/img/share/twitter_white.png");
|
||||
}
|
||||
.share-buttons-side .share-facebook {
|
||||
background-image: url("/img/share/facebook_white.png");
|
||||
}
|
||||
.share-buttons-side .share-gplus {
|
||||
background-image: url("/img/share/gplus_white.png");
|
||||
display: none !important;
|
||||
}
|
||||
.share-buttons-side .share-support {
|
||||
background-image: url("/img/share/support_red.png");
|
||||
}
|
||||
|
||||
/* Share pop-up behaviour hacks */
|
||||
.share-buttons-side input[type="radio"],
|
||||
.share-buttons-side input[type="radio"] + span,
|
||||
.share-buttons-side input[type="checkbox"],
|
||||
.share-buttons-side input[type="checkbox"] + span {
|
||||
display: none;
|
||||
}
|
||||
.share-buttons-side input[type="radio"]:checked + span,
|
||||
.share-buttons-side input[type="checkbox"]:checked + span {
|
||||
position: absolute;
|
||||
margin-top: 3.5em; margin-left: -10em;
|
||||
padding: .5em;
|
||||
z-index: 3;
|
||||
background-color: #333;
|
||||
border-radius: .5em;
|
||||
display: inline-block;
|
||||
}
|
||||
.share-buttons-side input[type="radio"]:checked + span:before,
|
||||
.share-buttons-side input[type="checkbox"]:checked + span:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
height: 0em; width: 0em;
|
||||
border-bottom: 1em solid #333;
|
||||
border-left: 1em solid transparent;
|
||||
border-right: 1em solid transparent;
|
||||
z-index: 3;
|
||||
}
|
||||
.share-buttons-side input[type="radio"] + span > *{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.share-buttons-side input[type="radio"] + span > button {
|
||||
margin: 2.5px 0 2.5px 5px;
|
||||
min-width: 4em;
|
||||
padding: .25em;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
line-height: normal;
|
||||
}
|
||||
.share-buttons-side input[type="radio"] + span > label {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
/* Separate share buttons form from possibly floating content */
|
||||
form.share-buttons-side {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Hide something */
|
||||
.n {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Media Query to resize social links for portrait tablet view */
|
||||
@media screen and (max-height: 770px) {
|
||||
.share-buttons-side button.button,
|
||||
.share-buttons-side label.button {
|
||||
background-size: 3.7vh auto;
|
||||
height: 6vh;
|
||||
width: 6vh;
|
||||
}
|
||||
}
|
||||
|
|
@ -192,69 +192,3 @@ table.signatures th, table.signatures td {
|
|||
.share-buttons a#hnews:hover {
|
||||
background-color: #dd3500 !important;
|
||||
}
|
||||
|
||||
/* SHARE BUTTONS ON LEFT SIDE */
|
||||
aside.sharecolumn {
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.1vh 0.5vh;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media(min-width:768px) {
|
||||
aside.sharecolumn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
aside.sharecolumn a {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2.7vh auto;
|
||||
background-color: #474747;
|
||||
border-radius: 3px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
margin: 2.5px 5px 2.5px 0;
|
||||
opacity: 0.9;
|
||||
text-decoration: none;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
}
|
||||
aside.sharecolumn a:hover {
|
||||
background-color: #F05F40;
|
||||
}
|
||||
aside.sharecolumn a#diaspora-left {
|
||||
background-image: url("/img/share/diaspora_white.png");
|
||||
}
|
||||
aside.sharecolumn a#gnusocial-left {
|
||||
background-image: url("/img/share/gnusocial_white.png");
|
||||
}
|
||||
aside.sharecolumn a#reddit-left {
|
||||
background-image: url("/img/share/reddit_white.png");
|
||||
}
|
||||
aside.sharecolumn a#twitter-left {
|
||||
background-image: url("/img/share/twitter_white.png");
|
||||
}
|
||||
aside.sharecolumn a#gplus-left {
|
||||
background-image: url("/img/share/gplus_white.png");
|
||||
display: none;
|
||||
}
|
||||
aside.sharecolumn a#facebook-left {
|
||||
background-image: url("/img/share/facebook_white.png");
|
||||
}
|
||||
aside.sharecolumn a#support-left {
|
||||
background-image: url("/img/share/support_red.png");
|
||||
}
|
||||
|
||||
/* Media Query to resize social links for portrait tablet view */
|
||||
|
||||
@media screen and (max-height: 770px) {
|
||||
aside.sharecolumn a {
|
||||
background-size: 3.7vh auto;
|
||||
height: 6vh;
|
||||
width: 6vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue