Merge pull request #1635 from INN/hs-3039-floating-social-buttons

Various Floating Social Buttons improvements

changelog.md

@@ -15,6 +15,10 @@ This release contains bug fixes for Largo 0.6.
 
 ### Fixes
 
+- Increases contrast of the floating social button icons against the background, to improve accessibility. [Pull request #1635](https://github.com/INN/largo/pull/1635/).
+- Fixes issue where floating social buttons were not clickable, because of z-index ordering. [Pull request #1635](https://github.com/INN/largo/pull/1635/) for [issue #1576](https://github.com/INN/largo/issues/1576).
+- Fixes links in social media buttons not respecting the blog's character set. [Pull request #1635](https://github.com/INN/largo/pull/1635/) for [issue #1283](https://github.com/INN/largo/issues/1283).
+- Function `largo_post_social_links` now respects the blog character set option. [Pull request #1635](https://github.com/INN/largo/pull/1635/) for [issue #1283](https://github.com/INN/largo/issues/1283).
 - Fixes PHP notices in class `Bootstrap_Walker_Nav_Menu`. [Pull request #1624](https://github.com/INN/largo/pull/1624) and [#1625](https://github.com/INN/largo/pull/1625) for [issue #1623](https://github.com/INN/largo/issues/1623) as part of [issue #1492](https://github.com/INN/largo/issues/1492).
 - Fixes a regression in the behavior of the Largo Follow widget. [Pull request #1600](https://github.com/INN/largo/pull/1600) for [issue #1599](https://github.com/INN/largo/issues/1599).
 - Fixes issue where post excerpt and featured media were not being used for open graph tags on post types that are `is_singular()` but not `is_single()`. [Pull request #1604)(https://github.com/INN/largo/pull/1604) for [issue #1602](https://github.com/INN/largo/issues/1602).

inc/post-social.php

@@ -80,7 +80,7 @@ function largo_post_social_links( $echo = true ) {
 			$output .= sprintf(
 				$twitter_share,
 				// Yes, rawurlencode. Otherwise, the link will break. Use html_entity_decode to handle wordpress saving smart quotes as Ӓ entities.
-				rawurlencode( html_entity_decode( get_the_title(), ENT_QUOTES, "UTF-8" ) ),
+				rawurlencode( html_entity_decode( get_the_title(), ENT_QUOTES, get_option('blog_charset') ) ),
 				rawurlencode( get_permalink() ),
 				$via,
 				__( 'Tweet', 'largo' )
@@ -91,8 +91,8 @@ function largo_post_social_links( $echo = true ) {
 			$output .= sprintf(
 				'<span data-service="email" class="email share-button"><a href="mailto:?subject=%2$s&body=%3$s%0D%0A%4$s" target="_blank"><i class="icon-mail"></i> <span class="hidden-phone">%1$s</span></a></span>',
 				esc_attr( __( 'Email', 'largo' ) ),
-				rawurlencode( html_entity_decode( get_the_title(), ENT_QUOTES, "UTF-8" ) ), // subject
-				rawurlencode( html_entity_decode( strip_tags( get_the_excerpt() ), ENT_QUOTES, "UTF-8" ) ), // description
+				rawurlencode( html_entity_decode( get_the_title(), ENT_QUOTES, get_option( 'blog_charset' ) ) ), // subject
+				rawurlencode( html_entity_decode( strip_tags( get_the_excerpt() ), ENT_QUOTES, get_option( 'blog_charset' ) ) ), // description
 				rawurlencode( html_entity_decode( get_the_permalink() ) ) // url
 			);
 		}

less/inc/single.less

@@ -383,7 +383,7 @@ h2.subtitle {
 #floating-social-buttons {
   transition: opacity 0.2s;
   border: 1px solid @grayLighter;
-  z-index: 0;
+  z-index: 1;
 
   .hidden-phone {
     display: none;
@@ -399,7 +399,7 @@ h2.subtitle {
         cursor: pointer;
       }
       & > a {
-        color: @grayLighter;
+        color: @gray;
         display: block;
         padding: 18px;
         min-width: 28px;
@@ -415,31 +415,17 @@ h2.subtitle {
   .facebook,
   .print,
   .email {
-    color: @grayLighter;
+    color: @gray;
     background-color: @white;
   }
   .more-social-links {
     background-color: @white;
-    color: @grayLighter;
+    color: @gray;
     a.popped,
     &:hover {
       background-color: @orange;
       color: @white;
     }
-    .popover {
-      top: 68px;
-      font-size: 14px;
-      i {
-        margin-right: 0.25em;
-      }
-      a {
-        color: @gray;
-        &:hover {
-          color: @grayDark;
-          text-decoration: underline;
-        }
-      }
-    }
   }
   .social-btn {
     padding: 0.5em;