Improve layout, add explanation paragraph.

Author: jjeffryes

css/obBase.css

@@ -4876,7 +4876,8 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
     bottom: -150px;
     right: 0;
     z-index: 1;
-    padding: 20px;
+    width: 490px;
+    padding: 38px;
     opacity: 0;
     background: #141414;
     color: #fff;
@@ -4890,7 +4891,23 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 }
 
 .socialReminder .socialTitle {
-    margin-right: 40px;
+    margin-bottom: 20px;
+}
+
+.socialReminder .socialInfoLink {
+    font-style: normal;
+    cursor: pointer;
+}
+
+.socialReminder .socialInfoLinkInner {
+    font-style: normal;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.socialReminder .socialParagraph {
+    line-height: 1.4;
+    margin-bottom: 20px;
 }
 
 .socialReminder .closeBtn {

js/languages/en-US.json

@@ -731,8 +731,11 @@
     "newConfigTitle": "New Configuration",
     "new": "New"
   },
-  "socialSharing": {
+  "socialReminder": {
     "title": "OpenBazaar",
+    "explanationLink": "(%{linkText})",
+    "explanationLinkText": "<span class='socialInfoLinkInner'>more</span>",
+    "explanation": "If you can take a few seconds to post a link to OpenBazaar to social media, you can help OpenBazaar grow. The more buyers and sellers that are active, the stronger the network will be, with a greater variety of better products and services available for purchase.",
     "blurb": "OpenBazaar%20is%20a%20decentralized%2C%20P2P%20Bitcoin%20Marketplace.",
     "shareTwitter": "Share on Twitter",
     "shareFacebook": "Share on Facebook",

js/templates/pageNav.html

@@ -72,23 +72,23 @@
     </a>
     <hr/>
     <% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
-    <a href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialSharing.blurb') %>&url=<%= shareURL %>&hashtags=OpenBazaar&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
+    <a href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialReminder.blurb') %>&url=<%= shareURL %>&hashtags=OpenBazaar&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
       <span class="ion-social-twitter fontSize11 marginRight2 textOpacity1"></span>
       Twitter
     </a>
     <a href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
       <span class="ion-social-facebook fontSize11 marginRight2 textOpacity1"></span>
       Facebook
     </a>
-    <a href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialSharing.blurb') %>">
+    <a href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialReminder.blurb') %>">
       <span class="ion-social-pinterest fontSize11 marginRight2 textOpacity1"></span>
       Pinterest
     </a>
-    <a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialSharing.title') %>&summary=<%= polyglot.t('socialSharing.blurb') %>&source=OpenBazaar">
+    <a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialReminder.title') %>&summary=<%= polyglot.t('socialReminder.blurb') %>&source=OpenBazaar">
       <span class="ion-social-linkedin fontSize11 marginRight2 textOpacity1"></span>
       LinkedIn
     </a>
-    <a href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialSharing.blurb') %>">
+    <a href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialReminder.blurb') %>">
       <span class="ion-social-tumblr fontSize11 marginRight2 textOpacity1"></span>
       Tumblr
     </a>
@@ -173,22 +173,27 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
 <% if (ob.showSocial) { %>
 <div class="socialReminder js-socialReminder">
   <% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
-  <h3 class="socialTitle"><%= polyglot.t('socialSharing.reminder') %></h3>
+  <h3 class="socialTitle"><%= polyglot.t('socialReminder.reminder') %>&nbsp;
+    <span class="socialInfoLink js-socialInfoLink">
+      <%= polyglot.t('socialReminder.explanationLink', { linkText: polyglot.t('socialReminder.explanationLinkText') }) %>
+    </span>
+  </h3>
+  <p class="socialParagraph hide js-socialParagraph"><%= polyglot.t('socialReminder.explanation') %></p>
   <div class="closeBtn js-socialCloseBtn"><i class="ion-close"></i></div>
   <div class="socialLinkWrapper">
-    <a class="socialLink" href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialSharing.blurb') %>&url=<%= shareURL %>&hashtags=OpenBazaar&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
+    <a class="socialLink" href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialReminder.blurb') %>&url=<%= shareURL %>&hashtags=OpenBazaar&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
       <span class="ion-social-twitter socialIcon"></span>
     </a>
     <a class="socialLink" href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
       <span class="ion-social-facebook socialIcon"></span>
     </a>
-    <a class="socialLink" href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialSharing.blurb') %>">
+    <a class="socialLink" href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialReminder.blurb') %>">
       <span class="ion-social-pinterest socialIcon"></span>
     </a>
-    <a class="socialLink" href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialSharing.title') %>&summary=<%= polyglot.t('socialSharing.blurb') %>&source=OpenBazaar">
+    <a class="socialLink" href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialReminder.title') %>&summary=<%= polyglot.t('socialReminder.blurb') %>&source=OpenBazaar">
       <span class="ion-social-linkedin socialIcon"></span>
     </a>
-    <a class="socialLink" href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialSharing.blurb') %>">
+    <a class="socialLink" href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialReminder.blurb') %>">
       <span class="ion-social-tumblr socialIcon"></span>
     </a>
   </div>

js/views/pageNavVw.js

@@ -45,6 +45,7 @@ module.exports = baseVw.extend({
     'mouseenter .js-serverSubmenu': 'mouseenterServerSubmenu',
     'mouseleave .js-serverSubmenu': 'mouseleaveServerSubmenu',
     'click .js-socialCloseBtn': 'clickSocialCloseBtn',
+    'click .js-socialInfoLink': 'clickSocialInfoLink',
   },
 
   initialize: function(options){
@@ -409,6 +410,7 @@ module.exports = baseVw.extend({
 
       if (self.showSocial) {
         self.$socialReminder = self.$('.js-socialReminder');
+        self.$socialParagraph = self.$('.js-socialParagraph');
         setTimeout(function() {
           self.$socialReminder.addClass('show');
         }, 10000);
@@ -423,6 +425,10 @@ module.exports = baseVw.extend({
     localStorage.setItem('showSocial', 'hide');
   },
 
+  clickSocialInfoLink: function() {
+    this.$socialParagraph.toggleClass('hide');
+  },
+
   showAboutModal: function(){
     this.cleanNav();
     this.aboutModal.setTab('about')