From 316be2f8f6f86cf2c1cc255c790c4d7e8ecb5e4b Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 9 Jan 2018 14:15:49 +0000
Subject: [PATCH] styling for the share buttons
---
.../static_src/src/sass/components/_icon.scss | 20 +++++++++++
.../src/sass/components/_section.scss | 6 ++++
opentech/templates/includes/share.html | 35 +++++++++----------
opentech/templates/includes/sprites.html | 4 +++
4 files changed, 47 insertions(+), 18 deletions(-)
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index 330542e1a..183f2e255 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/opentech/static_src/src/sass/components/_icon.scss
@@ -52,6 +52,26 @@
}
}
+
+ &--social-share {
+ width: 40px;
+ height: 40px;
+ padding: 10px;
+ margin-right: 5px;
+ }
+
+ &--twitter-share {
+ background: $color--twitter;
+ }
+
+ &--linkedin-share {
+ background: $color--linkedin;
+ }
+
+ &--facebook-share {
+ background: $color--facebook;
+ }
+
&--card-pixels {
position: absolute;
right: 0;
diff --git a/opentech/static_src/src/sass/components/_section.scss b/opentech/static_src/src/sass/components/_section.scss
index 6aa8bbe77..d2c7de543 100644
--- a/opentech/static_src/src/sass/components/_section.scss
+++ b/opentech/static_src/src/sass/components/_section.scss
@@ -6,4 +6,10 @@
margin: 0 auto;
}
}
+
+ &--share {
+ padding: 2rem 0;
+ margin: 3rem 0;
+ border-top: 1px solid $color--mid-grey;
+ }
}
diff --git a/opentech/templates/includes/share.html b/opentech/templates/includes/share.html
index b88c922e0..405f2b5a7 100644
--- a/opentech/templates/includes/share.html
+++ b/opentech/templates/includes/share.html
@@ -1,25 +1,24 @@
{% load util_tags wagtailimages_tags %}
-<div class="share">
+<section class="section section--share">
+ <h5>Share</h5>
{% image page.social_image fill-150x150 as social_img %}
{% with settings.utils.SocialMediaSettings as social_media_settings %}
- <ul>
- <!-- see https://dev.twitter.com/web/tweet-button/web-intent -->
- <li><a href="https://twitter.com/intent/tweet?text={{ page|social_text:request.site|urlencode }}&url={{ page.full_url|urlencode }}&via={{ social_media_settings.twitter_handle|urlencode }}" title="Share on Twitter">Share on Twitter</a></li>
+ <!-- see https://dev.twitter.com/web/tweet-button/web-intent -->
+ <a href="https://twitter.com/intent/tweet?text={{ page|social_text:request.site|urlencode }}&url={{ page.full_url|urlencode }}&via={{ social_media_settings.twitter_handle|urlencode }}" title="Share on Twitter">
+ <svg class="icon icon--social-share icon--twitter-share"><use xlink:href="#twitter"></use></svg>
+ </a>
- <!-- see https://developer.linkedin.com/docs/share-on-linkedin -->
- <li><a
- href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.full_url|urlencode }}&title={{ page.title|urlencode }}&summary={{ page|social_text:request.site|urlencode }}&source={{ social_media_settings.site_name|urlencode }}"
- title="Share on LinkedIn">Share on LinkedIn</a></li>
+ <!-- see https://developer.linkedin.com/docs/share-on-linkedin -->
+ <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.full_url|urlencode }}&title={{ page.title|urlencode }}&summary={{ page|social_text:request.site|urlencode }}&source={{ social_media_settings.site_name|urlencode }}"
+ title="Share on LinkedIn">
+ <svg class="icon icon--social-share icon--linkedin-share"><use xlink:href="#linkedin"></use></svg>
+ </a>
- <!-- see https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5 -->
- <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
- <li><a href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&link={{ page.full_url|urlencode }}&picture={% if social_img %}{{ 'http://'|add:request.site.hostname|add:social_img.url|urlencode }}{% endif %}&name={{ page.title|urlencode }}&description={{ page|social_text:request.site|urlencode }}&redirect_uri={{ page.full_url|urlencode }}" title="Share on Facebook">Share on Facebook</a></li>
-
- <!-- see https://developers.google.com/+/web/share/#sharelink -->
- <li><a href="https://plus.google.com/share?url={{ page.full_url|urlencode }}" title="Share on Google Plus">Share on Google Plus</a></li>
-
- </ul>
-
+ <!-- see https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5 -->
+ <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
+ <a href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&link={{ page.full_url|urlencode }}&picture={% if social_img %}{{ 'http://'|add:request.site.hostname|add:social_img.url|urlencode }}{% endif %}&name={{ page.title|urlencode }}&description={{ page|social_text:request.site|urlencode }}&redirect_uri={{ page.full_url|urlencode }}" title="Share on Facebook">
+ <svg class="icon icon--social-share icon--facebook-share"><use xlink:href="#facebook"></use></svg>
+ </a>
{% endwith %}
-</div>
+</section>
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index 9035efc79..9f4fe4c08 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -67,4 +67,8 @@
</g>
</symbol>
+
+ <symbol id="linkedin" viewBox="0 0 17 16" >
+ <path d="M17 9.81V16h-3.644v-5.776c0-1.45-.527-2.441-1.846-2.441-1.006 0-1.605.667-1.87 1.313-.095.23-.12.552-.12.875V16H5.875s.05-9.782 0-10.796H9.52v1.53l-.024.035h.024v-.035c.484-.734 1.349-1.783 3.284-1.783C15.202 4.95 17 6.494 17 9.81zM2.062 0C.816 0 0 .806 0 1.865 0 2.9.792 3.73 2.014 3.73h.024c1.272 0 2.062-.83 2.062-1.866C4.076.805 3.31 0 2.062 0zM.216 16H3.86V5.204H.216V16z" fill-rule="nonzero" />
+ </symbol>
</svg>
--
GitLab