diff --git a/data/de/share/1-diaspora.yaml b/data/de/share/1-diaspora.yaml index 08d6368..edc3cdf 100644 --- a/data/de/share/1-diaspora.yaml +++ b/data/de/share/1-diaspora.yaml @@ -2,4 +2,4 @@ id: diaspora name: Diaspora titleBefore: Auf titleAfter: teilen -link: https://test.fsfe.org/cgi-bin/share.php?service=diaspora&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc +userinput: true diff --git a/data/de/share/2-gnusocial.yaml b/data/de/share/2-gnusocial.yaml index a56737e..dff83cc 100644 --- a/data/de/share/2-gnusocial.yaml +++ b/data/de/share/2-gnusocial.yaml @@ -2,4 +2,4 @@ id: gnusocial name: GNU Social titleBefore: Auf titleAfter: teilen -link: https://test.fsfe.org/cgi-bin/share.php?service=gnusocial&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc +userinput: true diff --git a/data/de/share/3-reddit.yaml b/data/de/share/3-reddit.yaml index c61455b..74532d6 100644 --- a/data/de/share/3-reddit.yaml +++ b/data/de/share/3-reddit.yaml @@ -2,4 +2,3 @@ id: reddit name: Reddit titleBefore: Auf titleAfter: teilen -link: https://test.fsfe.org/cgi-bin/share.php?service=reddit&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/de/share/4-twitter.yaml b/data/de/share/4-twitter.yaml index 8ad84e5..bfe841f 100644 --- a/data/de/share/4-twitter.yaml +++ b/data/de/share/4-twitter.yaml @@ -2,4 +2,3 @@ id: twitter name: Twitter titleBefore: Auf titleAfter: teilen -link: https://test.fsfe.org/cgi-bin/share.php?service=twitter&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/de/share/5-gplus.yaml b/data/de/share/5-gplus.yaml index 4081a5a..7be6463 100644 --- a/data/de/share/5-gplus.yaml +++ b/data/de/share/5-gplus.yaml @@ -2,4 +2,3 @@ id: gplus name: Google+ titleBefore: Auf titleAfter: teilen -link: https://test.fsfe.org/cgi-bin/share.php?service=gplus&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/de/share/6-facebook.yaml b/data/de/share/6-facebook.yaml index 674d9c9..e312c3d 100644 --- a/data/de/share/6-facebook.yaml +++ b/data/de/share/6-facebook.yaml @@ -2,4 +2,3 @@ id: facebook name: Facebook titleBefore: Auf titleAfter: teilen -link: https://test.fsfe.org/cgi-bin/share.php?service=facebook&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/de/share/7-support.yaml b/data/de/share/7-support.yaml index 87a7970..fca02d5 100644 --- a/data/de/share/7-support.yaml +++ b/data/de/share/7-support.yaml @@ -2,4 +2,3 @@ id: support name: Kampagne unterstützen! titleBefore: titleAfter: -link: https://fsfe.org/donate?pmpc diff --git a/data/en/share/1-diaspora.yaml b/data/en/share/1-diaspora.yaml index a141f60..15f0af3 100644 --- a/data/en/share/1-diaspora.yaml +++ b/data/en/share/1-diaspora.yaml @@ -2,4 +2,4 @@ id: diaspora name: Diaspora titleBefore: Share on titleAfter: -link: https://test.fsfe.org/cgi-bin/share.php?service=diaspora&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc +userinput: true diff --git a/data/en/share/2-gnusocial.yaml b/data/en/share/2-gnusocial.yaml index 39c092a..8549b04 100644 --- a/data/en/share/2-gnusocial.yaml +++ b/data/en/share/2-gnusocial.yaml @@ -2,4 +2,4 @@ id: gnusocial name: GNU Social titleBefore: Share on titleAfter: -link: https://test.fsfe.org/cgi-bin/share.php?service=gnusocial&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc +userinput: true diff --git a/data/en/share/3-reddit.yaml b/data/en/share/3-reddit.yaml index 7c3c28b..fd02c60 100644 --- a/data/en/share/3-reddit.yaml +++ b/data/en/share/3-reddit.yaml @@ -2,4 +2,3 @@ id: reddit name: Reddit titleBefore: Share on titleAfter: -link: https://test.fsfe.org/cgi-bin/share.php?service=reddit&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/en/share/4-twitter.yaml b/data/en/share/4-twitter.yaml index 2df6043..3857759 100644 --- a/data/en/share/4-twitter.yaml +++ b/data/en/share/4-twitter.yaml @@ -2,4 +2,3 @@ id: twitter name: Twitter titleBefore: Share on titleAfter: -link: https://test.fsfe.org/cgi-bin/share.php?service=twitter&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/en/share/5-gplus.yaml b/data/en/share/5-gplus.yaml index efca808..214cf40 100644 --- a/data/en/share/5-gplus.yaml +++ b/data/en/share/5-gplus.yaml @@ -2,4 +2,3 @@ id: gplus name: Google+ titleBefore: Share on titleAfter: -link: https://test.fsfe.org/cgi-bin/share.php?service=gplus&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/en/share/6-facebook.yaml b/data/en/share/6-facebook.yaml index 61dedc6..caa4ef8 100644 --- a/data/en/share/6-facebook.yaml +++ b/data/en/share/6-facebook.yaml @@ -2,4 +2,3 @@ id: facebook name: Facebook titleBefore: Share on titleAfter: -link: https://test.fsfe.org/cgi-bin/share.php?service=facebook&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc diff --git a/data/en/share/7-support.yaml b/data/en/share/7-support.yaml index 25cb395..aa85023 100644 --- a/data/en/share/7-support.yaml +++ b/data/en/share/7-support.yaml @@ -2,4 +2,3 @@ id: support name: Support the Campaign! titleBefore: titleAfter: -link: https://fsfe.org/donate?pmpc diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 3b84a74..27b45d5 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -22,6 +22,8 @@ {{ "" | safeHTML }} + + {{ "" | safeHTML }} diff --git a/layouts/partials/sharecolumn.html b/layouts/partials/sharecolumn.html index 022e287..89ed59c 100644 --- a/layouts/partials/sharecolumn.html +++ b/layouts/partials/sharecolumn.html @@ -1,7 +1,31 @@ {{ "" | safeHTML }} {{ $data := index .Site.Data .Site.Language.Lang }} - + + {{ range $data.share }} + {{ if ne .userinput true }} + + {{ end }} + {{ end }} + + + diff --git a/layouts/partials/spread.html b/layouts/partials/spread.html index 711de57..95abe65 100644 --- a/layouts/partials/spread.html +++ b/layouts/partials/spread.html @@ -18,9 +18,36 @@
{{ .Site.Params.spread.shareTitle }} + +
+ + + + + + + {{ range $data.share }} + {{ if eq .userinput true }} + + + + + + + + {{ end }} + {{ end }} + + {{ range $data.share }} + {{ if ne .userinput true }} + + {{ end }} + {{ end }} +
diff --git a/static/cgi/share.php b/static/cgi/share.php new file mode 100644 index 0000000..b52e691 --- /dev/null +++ b/static/cgi/share.php @@ -0,0 +1,70 @@ + diff --git a/static/css/buttons-side.css b/static/css/buttons-side.css new file mode 100644 index 0000000..b8e978c --- /dev/null +++ b/static/css/buttons-side.css @@ -0,0 +1,134 @@ +div.sharecolumn .share-buttons.side { + display: flex; + left: 0; + padding: 0.1vh 0.5vh; + position: fixed; + top: 35%; + z-index: 10; + flex-direction: column; +} +@media(max-width:767px) { + .share-buttons.side { + display: none !important; + } +} + +.share-buttons.side button.button, +.share-buttons.side label.button { + 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: 0; + width: 300px; + 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; + } +} diff --git a/static/css/buttons-spread.css b/static/css/buttons-spread.css new file mode 100644 index 0000000..ee08734 --- /dev/null +++ b/static/css/buttons-spread.css @@ -0,0 +1,160 @@ +/* General button look */ +.share-buttons.spread { + color: initial; +} +.share-buttons.spread button.button, +.share-buttons.spread label.button { + display: inline-block; + margin: 0px 5px 10px 0; + color: #fff; + font-weight: 700; + font-size: 1em; + font-family: "Open Sans","Helvetica Neue",Arial,sans-serif; + line-height: normal; + text-align: center; + text-decoration: none; + padding: 7px 7px 7px 20px; + min-width: 120px; + box-sizing: border-box; + display: inline-block; + border: none; + 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; +} + +/* Single services with their colours and logos */ +.share-buttons.spread .share-diaspora { + background-color: #404040; + background-image: url("/img/share/diaspora_white.png"); +} +.share-buttons.spread .share-diaspora:hover { + background-color: #101010 !important; +} +.share-buttons.spread .share-gnusocial { + background-color: #a22430; + background-image: url("/img/share/gnusocial_white.png"); +} +.share-buttons.spread .share-gnusocial:hover { + background-color: #850713 !important; +} +.share-buttons.spread .share-reddit { + background-color: #ff5700; + background-image: url("/img/share/reddit_white.png"); +} +.share-buttons.spread .share-reddit:hover { + background-color: #dd3500 !important; +} +.share-buttons.spread .share-flattr { + background-color: #7ea352; + background-image: url("/img/share/flattr_white.png"); + display: none !important; +} +.share-buttons.spread .share-flattr:hover { + background-color: #5a7f2e !important; +} +.share-buttons.spread .share-hnews { + background-color: #ff6600; + background-image: url("/img/share/hackernews_white.png"); + display: none !important; +} +.share-buttons.spread .share-hnews:hover { + background-color: #dd3500 !important; +} +.share-buttons.spread .share-twitter { + background-color: #55acee; + background-image: url("/img/share/twitter_white.png"); +} +.share-buttons.spread .share-twitter:hover { + background-color: #338acc !important; +} +.share-buttons.spread .share-facebook { + background-color: #3b5998; + background-image: url("/img/share/facebook_white.png"); +} +.share-buttons.spread .share-facebook:hover { + background-color: #143271 !important; +} +.share-buttons.spread .share-gplus { + background-color: #d34836; + background-image: url("/img/share/gplus_white.png"); + display: none !important; +} +.share-buttons.spread .share-gplus:hover { + background-color: #b12614 !important; +} +.share-buttons.spread .share-support { + background-color: #47a447; + background-image: url("/img/share/support_red.png"); +} +.share-buttons.spread .share-support:hover { + background-color: #2a872a !important; +} +.share-buttons.spread .share-support { + padding-left: 30px !important; +} + +/* Share pop-up behaviour hacks */ +.share-buttons.spread input[type="radio"], +.share-buttons.spread input[type="radio"] + span, +.share-buttons.spread input[type="checkbox"], +.share-buttons.spread input[type="checkbox"] + span { + display: none; +} +.share-buttons.spread input[type="radio"]:checked + span, +.share-buttons.spread 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.spread input[type="radio"]:checked + span:before, +.share-buttons.spread 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.spread input[type="radio"] + span > * { + vertical-align: middle; +} +.share-buttons.spread 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.spread 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.spread { + clear: both; +} + +/* Hide something */ +.n { + display: none; +} + +/* Reset colour */ +.share-buttons.spread span label, .share-buttons.spread > span > button { + color: normal; +} diff --git a/static/css/custom.css b/static/css/custom.css index 72d7e46..f0882ab 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -100,161 +100,3 @@ table.signatures th, table.signatures td { text-align: left; padding: 2px; } - -/* SHARE BUTTONS IN "SPREAD THE WORD" SECTION */ -.share-buttons a { - background-position: left 5px center; - background-repeat: no-repeat; - background-size: 20px auto; - border-radius: 3px; - color: #000; - display: inline-block; - margin: 2.5px 5px 2.5px 0; - min-width: 120px; - opacity: 0.9; - padding: 7px 7px 7px 30px; - text-align: center; - text-decoration: none; - font-family: "Open Sans","Helvetica Neue",Arial,sans-serif; - font-weight: 700; -} - -.share-buttons a#facebook { - background-color: #3b5998; - background-image: url("/img/share/facebook_white.png"); - color: #fff; -} -.share-buttons a#facebook:hover { - background-color: #143271 !important; -} -.share-buttons a#twitter { - background-color: #55acee; - background-image: url("/img/share/twitter_white.png"); - color: #fff; -} -.share-buttons a#twitter:hover { - background-color: #338acc !important; -} -.share-buttons a#gplus { - background-color: #d34836; - background-image: url("/img/share/gplus_white.png"); - color: #fff; - display: none; -} -.share-buttons a#gplus:hover { - background-color: #b12614 !important; -} -.share-buttons a#diaspora { - background-color: #404040; - background-image: url("/img/share/diaspora_white.png"); - color: #fff; -} -.share-buttons a#diaspora:hover { - background-color: #101010 !important; -} -.share-buttons a#flattr { - background-color: #7ea352; - background-image: url("/img/share/flattr_white.png"); - color: #fff; -} -.share-buttons a#flattr:hover { - background-color: #5a7f2e !important; -} -.share-buttons a#support { - background-color: #47a447; - background-image: url("/img/share/support_red.png"); - color: #fff; -} -.share-buttons a#support:hover { - background-color: #2a872a !important; -} -.share-buttons a#reddit { - background-color: #ff5700; - background-image: url("/img/share/reddit_white.png"); - color: #fff; -} -.share-buttons a#reddit:hover { - background-color: #dd3500 !important; -} -.share-buttons a#gnusocial { - background-color: #a22430; - background-image: url("/img/share/gnusocial_white.png"); - color: #fff; -} -.share-buttons a#gnusocial:hover { - background-color: #850713 !important; -} -.share-buttons a#hnews { - background-color: #ff6600; - background-image: url("/img/share/hackernews_white.png"); - color: #fff; -} -.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; - } -}