Merge pull request #1652 from OpenBazaar/minGraphicsTweaks

Minimal Effects Tweaks

Author: jjeffryes

css/obBase.css

@@ -6131,18 +6131,18 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 
 /* turn off animations and transitions with this style */
 
-#ov1.notFancy,
-#ov1.notFancy *,
-#ov1.notFancy #userPage,
-#ov1.notFancy #userPage *,
-#ov1.notFancy #obContainer,
-#ov1.notFancy #obContainer *,
-#ov1.notFancy #overlay,
-#ov1.notFancy #sideBar,
-#ov1.notFancy #pageNav,
-#ov1.notFancy #modalHolder,
-#ov1.notFancy #messageModal,
-#ov1.notFancy #statusBar {
+#ov1.minEffects,
+#ov1.minEffects *,
+#ov1.minEffects #userPage,
+#ov1.minEffects #userPage *,
+#ov1.minEffects #obContainer,
+#ov1.minEffects #obContainer *,
+#ov1.minEffects #overlay,
+#ov1.minEffects #sideBar,
+#ov1.minEffects #pageNav,
+#ov1.minEffects #modalHolder,
+#ov1.minEffects #messageModal,
+#ov1.minEffects #statusBar {
   transition: none !important;
   -webkit-filter: none !important;
   opacity: 1 !important;
@@ -6152,139 +6152,143 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   text-shadow: none !important;
 }
 
-#ov1.notFancy #pageNav .popMenu.popMenu-navBar.popMenu-opened {
+#ov1.minEffects #pageNav .popMenu-navBarSubMenu {
   border-left: 1px solid #444;
   border-right: 1px solid #444;
   border-bottom: 1px solid #444;
 }
 
-#ov1.notFancy .fadeOut,
-#ov1.notFancy .statusBar.fadeOut,
-#ov1.notFancy #pageNav .statusBar.fadeOut,
-#ov1.notFancy #userPage .fadeOut,
-#ov1.notFancy #userPage #pageNav .fadeOut,
-#ov1.notFancy #userPage #pageNav .statusBar.fadeOut,
-#ov1.notFancy #userPage #obContainer #content .statusBar.fadeOut {
+#ov1.minEffects .fadeOut,
+#ov1.minEffects .statusBar.fadeOut,
+#ov1.minEffects #pageNav .statusBar.fadeOut,
+#ov1.minEffects #userPage .fadeOut,
+#ov1.minEffects #userPage #pageNav .fadeOut,
+#ov1.minEffects #userPage #pageNav .statusBar.fadeOut,
+#ov1.minEffects #userPage #obContainer #content .statusBar.fadeOut {
   opacity: 0 !important;
 }
 
-#ov1.notFancy #sideBar .sideBarSlidShow {
+#ov1.minEffects #sideBar .sideBarSlidShow {
   display: none;
 }
 
-#ov1.notFancy #sideBar.sideBarSlid .sideBarSlidShow {
+#ov1.minEffects #sideBar.sideBarSlid .sideBarSlidShow {
   display: block;
 }
 
-#ov1.notFancy #sideBar .chatConversation textarea,
-#ov1.notFancy #sideBar .chatConversation textarea::-webkit-input-placeholder,
-#ov1.notFancy #sideBar .chatConversation input,
-#ov1.notFancy #sideBar .chatConversation input::-webkit-input-placeholder {
+#ov1.minEffects #sideBar .chatConversation textarea,
+#ov1.minEffects #sideBar .chatConversation textarea::-webkit-input-placeholder,
+#ov1.minEffects #sideBar .chatConversation input,
+#ov1.minEffects #sideBar .chatConversation input::-webkit-input-placeholder {
   color: #fff;
 }
 
-#ov1.notFancy .gridItemControls {
+#ov1.minEffects .gridItemControls {
   display: none;
 }
 
-#ov1.notFancy .gridItemControls .btn-gridItemControl:hover,
-#ov1.notFancy .userPage-subViews .gridItem:hover .gridItemControls,
-#ov1.notFancy .homeView .gridItem:hover .gridItemControls {
+#ov1.minEffects .gridItemControls .btn-gridItemControl:hover,
+#ov1.minEffects .userPage-subViews .gridItem:hover .gridItemControls,
+#ov1.minEffects .homeView .gridItem:hover .gridItemControls {
   display: block;
 }
 
-#ov1.notFancy .btn .postConfirm {
+#ov1.minEffects .btn .postConfirm {
   display: none;
 }
 
-#ov1.notFancy .confirm.btn .preConfirm {
+#ov1.minEffects .confirm.btn .preConfirm {
   display: none;
 }
 
-#ov1.notFancy .confirm.btn .postConfirm {
+#ov1.minEffects .confirm.btn .postConfirm {
   display: inline-block;
 }
 
-#ov1.notFancy #userPage #obContainer #content .labelWrap.fade {
+#ov1.minEffects #userPage #obContainer #content .labelWrap.fade {
   opacity: 0 !important;
 }
 
-#ov1.notFancy #userPage #obContainer #content .labelWrap.fadeIn {
+#ov1.minEffects #userPage #obContainer #content .labelWrap.fadeIn {
   opacity: 1;
 }
 
-#ov1.notFancy #obContainer .taggle_placeholder,
-#ov1.notFancy #userPage #obContainer .taggle_placeholder {
+#ov1.minEffects #obContainer .taggle_placeholder,
+#ov1.minEffects #userPage #obContainer .taggle_placeholder {
   display: none !important;
 }
 
-#ov1.notFancy #obContainer .unfilled,
-#ov1.notFancy #userPage .unfilled {
+#ov1.minEffects #obContainer .unfilled,
+#ov1.minEffects #userPage .unfilled {
   opacity: 0.35 !important;
 }
 
-#ov1.notFancy .notFancyDarkBackground,
-#ov1.notFancy #obContainer .notFancyDarkBackground {
+#ov1.minEffects .minEffectsDarkBackground,
+#ov1.minEffects #obContainer .minEffectsDarkBackground {
   background: #262626 !important;
 }
 
-#ov1.notFancy .addressFormOpened .buyWizardMap .blurMore {
+#ov1.minEffects .addressFormOpened .buyWizardMap .blurMore {
   display: none;
 }
 
-#ov1.notFancy .user-page-header-slim {
+#ov1.minEffects .user-page-header-slim {
   display: none;
 }
 
-#ov1.notFancy .user-page-header-slim.scrolledIntoView {
+#ov1.minEffects .user-page-header-slim.scrolledIntoView {
   display: block;
 }
 
-#ov1.notFancy .disabled,
-#ov1.notFancy #userPage .disabled,
-#ov1.notFancy #obContainer .disabled,
-#ov1.notFancy #overlay .disabled,
-#ov1.notFancy #sideBar .disabled,
-#ov1.notFancy #pageNav .disabled,
-#ov1.notFancy #modalHolder .disabled,
-#ov1.notFancy #messageModal .disabled,
-#ov1.notFancy #statusBar .disabled {
+#ov1.minEffects .disabled,
+#ov1.minEffects #userPage .disabled,
+#ov1.minEffects #obContainer .disabled,
+#ov1.minEffects #overlay .disabled,
+#ov1.minEffects #sideBar .disabled,
+#ov1.minEffects #pageNav .disabled,
+#ov1.minEffects #modalHolder .disabled,
+#ov1.minEffects #messageModal .disabled,
+#ov1.minEffects #statusBar .disabled {
   opacity: 0.2 !important;
 }
 
-#ov1.notFancy .disabled2,
-#ov1.notFancy #userPage .disabled2,
-#ov1.notFancy #obContainer .disabled2,
-#ov1.notFancy #overlay .disabled2,
-#ov1.notFancy #sideBar .disabled2,
-#ov1.notFancy #pageNav .disabled2,
-#ov1.notFancy #modalHolder .disabled2,
-#ov1.notFancy #messageModal .disabled2,
-#ov1.notFancy #statusBar .disabled2 {
+#ov1.minEffects .disabled2,
+#ov1.minEffects #userPage .disabled2,
+#ov1.minEffects #obContainer .disabled2,
+#ov1.minEffects #overlay .disabled2,
+#ov1.minEffects #sideBar .disabled2,
+#ov1.minEffects #pageNav .disabled2,
+#ov1.minEffects #modalHolder .disabled2,
+#ov1.minEffects #messageModal .disabled2,
+#ov1.minEffects #statusBar .disabled2 {
   opacity: 0.7 !important;
 }
 
+#ov1.minEffects .nsfw {
+  background: #000 !important;
+}
+
 /* add a shadow and a glow, so modal close buttons are still barely visible if the user picks a bad color */
 #ov1 .js-closeIndexModal [class *= "ion-"]:before,
 #ov1 #userPage .js-closeIndexModal [class *= "ion-"]:before,
 #ov1 #obContainer .js-closeIndexModal [class *= "ion-"]:before,
 #ov1 #modalHolder .js-closeIndexModal [class *= "ion-"]:before,
 #ov1 #messageModal .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.notFancy .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.notFancy #userPage .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.notFancy #obContainer .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.notFancy #modalHolder .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.notFancy #messageModal .js-closeIndexModal [class *= "ion-"]:before,
+#ov1.minEffects .js-closeIndexModal [class *= "ion-"]:before,
+#ov1.minEffects #userPage .js-closeIndexModal [class *= "ion-"]:before,
+#ov1.minEffects #obContainer .js-closeIndexModal [class *= "ion-"]:before,
+#ov1.minEffects #modalHolder .js-closeIndexModal [class *= "ion-"]:before,
+#ov1.minEffects #messageModal .js-closeIndexModal [class *= "ion-"]:before,
 #ov1 .js-modal-close [class *= "ion-"]:before,
 #ov1 #userPage .js-modal-close [class *= "ion-"]:before,
 #ov1 #obContainer .js-modal-close [class *= "ion-"]:before,
 #ov1 #modalHolder .js-modal-close [class *= "ion-"]:before,
 #ov1 #messageModal .js-modal-close [class *= "ion-"]:before,
-#ov1.notFancy .js-modal-close [class *= "ion-"]:before,
-#ov1.notFancy #userPage .js-modal-close [class *= "ion-"]:before,
-#ov1.notFancy #obContainer .js-modal-close [class *= "ion-"]:before,
-#ov1.notFancy #modalHolder .js-modal-close [class *= "ion-"]:before,
-#ov1.notFancy #messageModal .js-modal-close [class *= "ion-"]:before,
+#ov1.minEffects .js-modal-close [class *= "ion-"]:before,
+#ov1.minEffects #userPage .js-modal-close [class *= "ion-"]:before,
+#ov1.minEffects #obContainer .js-modal-close [class *= "ion-"]:before,
+#ov1.minEffects #modalHolder .js-modal-close [class *= "ion-"]:before,
+#ov1.minEffects #messageModal .js-modal-close [class *= "ion-"]:before,
 #ov1 #modalHolder .js-closeBuyWizardModal [class *= "ion-"]:before {
   text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 2px rgba(255,255,255, 1) !important;
 }

js/start.js

@@ -256,8 +256,8 @@ $(window).bind('hashchange', function(){
 });
 
 //set fancy styles class
-if (localStorage.getItem('notFancy') == "true"){
-  $html.addClass('notFancy');
+if (localStorage.getItem('minEffects') == "true"){
+  $html.addClass('minEffects');
 }
 
 //prevent dragging a file to the window from loading that file

js/templates/settings.html

@@ -1181,9 +1181,9 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
                 <div class="fieldItem flexRow">
                   <div class="flexRow">
                     <div class="flexCol-4">
-                      <input type="radio" class="fieldItem" id="fancyStylesYes" name="notFancy" value="true" />
+                      <input type="radio" class="fieldItem" id="fancyStylesYes" name="minEffects" value="true" />
                       <label for="fancyStylesYes" class="radioLabel"><%= polyglot.t('Yes') %></label>
-                      <input type="radio" class="fieldItem" id="fancyStylesNo" name="notFancy" value="false" checked/>
+                      <input type="radio" class="fieldItem" id="fancyStylesNo" name="minEffects" value="false" checked/>
                       <label for="fancyStylesNo" class="radioLabel"><%= polyglot.t('No') %></label>
                     </div>
                     <div class="flexCol-8">

js/templates/transactionModal.html

@@ -18,7 +18,7 @@ <h2 class="ion-android-close clickable"></h2>
         <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
       </div>
     </div>
-    <div class="colorWhiteForce positionBottom width100 padding12 notFancyDarkBackground">
+    <div class="colorWhiteForce positionBottom width100 padding12 minEffectsDarkBackground">
       <div class="fontSize16">Order #<%- ob.orderID %></div>
       <div class="fontSize14 textOpacity75 marginTop2">
         <%= polyglot.t('transactions.OrderStatus'+ob.status) %>

js/templates/userPage.html

@@ -62,7 +62,7 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
   </div>
 
   <div class="shadow-inner1 user-page-header js-userPageHeader">
-    <div class="rowItem positionBottom width100 padding0 paddingLeft20 notFancyDarkBackground">
+    <div class="rowItem positionBottom width100 padding0 paddingLeft20 minEffectsDarkBackground">
       <div class="table">
         <div>
           <div class="thumbnail thumbnail-large js-userPageAvatar"

js/views/settingsVw.js

@@ -57,7 +57,7 @@ module.exports = pageVw.extend({
     'click #moderatorNo': 'hideModeratorFeeHolder',
     'click .js-shutDownServer': 'shutdownServer',
     'keyup #moderatorFeeInput': 'keypressFeeInput',
-    'click #advancedForm input[name="notFancy"]': 'toggleFancyStyles',
+    'click #advancedForm input[name="minEffects"]': 'toggleFancyStyles',
     'click #advancedForm input[name="useTestnet"]': 'toggleTestnet',
     'change #advancedForm input[name="appBarStyle"]': 'changeAppBarStyle',
     'blur input': 'validateInput',
@@ -437,14 +437,14 @@ module.exports = pageVw.extend({
         notifications = user.notifications,
         moderatorStatus = this.model.get('page').profile.moderator,
         vendorStatus = this.model.get('page').profile.vendor,
-        fancyStatus = window.localStorage.getItem('notFancy'),
+        fancyStatus = window.localStorage.getItem('minEffects'),
         smtp_notifications = user.smtp_notifications == 1;
 
     this.$("#pageForm").find("input[name=nsfw]").val([String(pageNSFW)]);
     generalForm.find("input[name=nsfw][value=" + localStorage.getItem('NSFWFilter') + "]").prop('checked', true);
     generalForm.find("input[name=notifications][value=" + notifications + "]").prop('checked', true);
     this.$("#storeForm").find("input[name=vendor][value=" + vendorStatus + "]").prop('checked', true);
-    advancedForm.find("input[name=notFancy][value=" + fancyStatus + "]").prop('checked', true);
+    advancedForm.find("input[name=minEffects][value=" + fancyStatus + "]").prop('checked', true);
     advancedForm.find("input[name=additionalPaymentData][value=" + localStorage.getItem('AdditionalPaymentData') + "]").prop('checked', true);
     advancedForm.find("input[name=smtp_notifications][value=" + smtp_notifications + "]").prop('checked', true);
     advancedForm.find("input[name=smtp_notifications][value=" + smtp_notifications + "]").prop('checked', true);
@@ -1113,12 +1113,12 @@ module.exports = pageVw.extend({
   toggleFancyStyles: function(){
     var $html = $('html');
 
-    if ($('#advancedForm').find('input[name="notFancy"]').prop('checked')){
-      $html.addClass('notFancy');
-      localStorage.setItem('notFancy', "true");
+    if ($('#advancedForm').find('input[name="minEffects"]').prop('checked')){
+      $html.addClass('minEffects');
+      localStorage.setItem('minEffects', "true");
     } else {
-      $html.removeClass('notFancy');
-      localStorage.setItem('notFancy', "false");
+      $html.removeClass('minEffects');
+      localStorage.setItem('minEffects', "false");
     }
   },
 

js/views/userPageVw.js

@@ -390,11 +390,11 @@ UserPageVw = pageVw.extend({
         self.$backToTop = self.$('.backToTop');
 
         //check if user is blocked
-        if(!self.options.ownPage && isBlocked) {
+        if (!self.options.ownPage && isBlocked) {
           self.hideThisUser("blocked");
         }
 
-        if(!self.options.ownPage && !self.skipNSFWmodal && self.model.get('page').profile.nsfw && !self.showNSFW){
+        if (!self.skipNSFWmodal && self.model.get('page').profile.nsfw && !self.showNSFW){
           self.hideThisUser("nsfw");
         }