Merge pull request #1486 from OpenBazaar/shipicon

Made "does not ship to you" less intrusive

Author: jjeffryes

css/obBase.css

@@ -489,18 +489,19 @@ form {
   transition: top .3s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.listingDoesNotShipToYou {
-  background-color: rgba(37, 37, 37, 0.65);
-  /*border-radius: 20px;*/
-  height: 20px;
-  left: 32px;
-  line-height: 20px;
-  padding: 8px 4px;
-  position: absolute;
-  text-align: center;
-  top: calc(50% - 32px);
-  width: 242px;
+.listingDoesNotShipToYou,
+.listingDoesNotShipToYou.tooltip {
+  background: #252525;
+  height: 18px; 
+  width: 18px;
+  right: 15px;
+  padding: 10px; 
+  position: absolute; 
+  text-align: center; 
+  top: 137px;
   transition: top .3s cubic-bezier(0, 0, 0.2, 1);
+  border-radius: 32px;
+  opacity: .95;
 }
 
 .noPointerEvents {
@@ -567,7 +568,8 @@ form {
 
 .userPage-subViews .gridItem:hover > .listingDoesNotShipToYou,
 .homeView .gridItem:hover > .listingDoesNotShipToYou {
-  top: calc(50% - 46px);
+  top: 140px;
+  opacity: 1;
 }
 
 .userPage-subViews .gridItem:hover .gridItemControls,
@@ -5146,6 +5148,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   margin-left: 0;
 }
 
+#ov1  .marginLeft05 {
+  margin-left: 0.5px;
+}
+
 #ov1  .marginLeft1 {
   margin-left: 1px;
 }

js/languages/en-US.json

@@ -77,6 +77,7 @@
   "GoToMyPage": "My Page",
   "Random": "Random",
   "ShowOnlyFollowerListings": "Personalized",
+  "DoesNotShip": "Does not ship to you",
   "TryRandom": "Try random mode to discover more",
   "ShowOnlyFollowerListingsTooltip": "View listings from stores I follow",
   "ShowAllListingsTooltip": "View random listings on the network",

js/templates/chatConversation.html

@@ -12,15 +12,15 @@
 </div>
 
 <div class="chatConversationMenu hide">
+     <div>
+         <a class="js-clearConvo"><%= polyglot.t('ClearConvo') %></a>
+     </div>     
      <div>
          <a class="js-viewPage" href="#userPage/<%= ob.guid %>/store"><%= polyglot.t('ViewPage') %></a>
      </div>
      <div>
          <a class="js-blockUser"><%= polyglot.t('Block') %></a>
      </div>
-     <div>
-         <a class="js-clearConvo"><%= polyglot.t('ClearConvo') %></a>
-     </div>     
  </div>
 
 <div class="chatConversationContent">

js/templates/itemShort.html

@@ -89,9 +89,8 @@
   <% } %>
 
   <% if(!shipsToYou && ob.ships_to.length != 0){ %>
-    <div class="listingDoesNotShipToYou">
-      <span class="ion-alert-circled fontSize11" style="color: #EFEF4C"></span>
-      Does not ship to you
+    <div class="listingDoesNotShipToYou cursorDefault tooltip" data-tooltip="<%= polyglot.t('DoesNotShip') %>">
+      <span class="ion-minus-circled fontSize15 marginLeft05 positionWrapper" style="color: #DCDCDC" ></span>
     </div>
   <% } %>