Compact Marketplace Feature

css/compact-marketplace.scss

@@ -0,0 +1,75 @@
+// Release Thumbnails
+.relative.block.shrink-0,
+img.rounded,
+.relative.block[class*="180px"].shrink-0 svg {
+  width: 120px !important;
+  height: 120px !important;
+}
+
+.flex.flex-col.items-start {
+  flex-direction: column !important;
+}
+
+// Padding on each listing
+.border-brand-border01.flex.flex-col.border-solid[class*="py-[24px]"] {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+// Sidebar width
+[class*="w-[277px]"] {
+  width: 200px !important;
+}
+// Listings width
+.w-full[class*="max-w-[987px]"] {
+  max-width: 1062px !important;
+}
+
+.brand-button.w-full.brand-button-secondary {
+  font-size: 12px !important;
+}
+
+.brand-select {
+  padding: 4px 20px 4px 12px !important;
+}
+
+.brand-button,
+.brand-input {
+  padding: 4px 8px !important;
+  height: 35px !important;
+}
+
+// Applied Filters
+.bg-brand-pill [class*="text-[13px]"] {
+  font-size: 12px !important;
+}
+
+[class*="h-[40px]"][class*="w-[40px]"] {
+  height: 35px !important;
+  width: 35px !important;
+}
+
+[class*="top-[11px]"] {
+  top: 6px !important;
+}
+// Add To Cart Buttons
+.bg-brand-green700,
+.bg-brand-secondaryMain {
+  height: 32px !important;
+}
+// Item price
+.text-right .text-2xl {
+  font-size: 1.3rem !important;
+}
+
+// seller name
+p.text-brand-textSecondary .brand-item-copy-link {
+  font-weight: bold;
+  font-size: 15px !important;
+}
+li p.text-brand-textSecondary.brand-item-copy.flex.items-center {
+  margin-bottom: .25rem !important;
+}
+
+h1.text-2xl {
+  font-size: 1.25rem !important;
+}

css/dark-theme.scss

@@ -6986,7 +6986,7 @@
     }
   }
 
-  /////////////
+  // Shop My Wants
   .text-brand-textDisabled01 {
     opacity: .35;
   }
@@ -7098,6 +7098,10 @@
     }
   }
 
+  .bg-brand-buttonEnabled01 {
+    background-color: var(--button-blue) !important;
+  }
+
   .bg-brand-buttonDisabled {
     background: var(--borders) !important;
 
@@ -7164,6 +7168,30 @@
     border-bottom-color: var(--main-bg-color) !important;
   }
 
+  [class*="bg-[#EEF1E2]"] {
+    background-color: var(--alert-accept-bg) !important;
+  }
+
+  [class*="bg-[#FFF2EF]"] {
+    background-color: var(--alert-error-bg) !important;
+
+    p {
+      color: var(--alert-error-text) !important;
+    }
+  }
+
+  [class*="text-[#58661C]"] p,
+  [class*="text-[#58661C]"] {
+    color: var(--in-collection-bg) !important;
+  }
+  [class*="text-[#58661C]"] svg path {
+    fill: var(--in-collection-bg) !important;
+  }
+
+  .border-b-brand-border01 {
+    border-bottom-color: var(--borders) !important;
+  }
+
   .border-brand-green800 {
     border-color: var(--button-green-border) !important;
   }
@@ -7220,6 +7248,10 @@
     background: var(--policy-indeterminate) !important;
   }
 
+  [class*="bg-black/50"] {
+    background-color: var(--box-shadow-dark) !important;
+  }
+
   .bg-condition-mint {
     background: var(--mint) !important;
   }

css/popup/learn.css

@@ -287,6 +287,15 @@ select {
   text-transform: none;
 }
 
+.info-wrap span.announcement {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  color: #ffc154;
+  font-weight: bold;
+  text-transform: uppercase;
+  display: block;
+}
+
 .info-wrap span.feature {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

html/learn.html

@@ -45,6 +45,9 @@ <h1>Discogs Enhancer</h1>
       <div class="info-wrap">
         <!-- updates -->
         <div class="updates tab-content">
+          <div style="margin-bottom: 2rem;">
+            <p><span class="announcement">Announcement:</span>Many features no longer work with the new Shop My Wants Marketplace. It will take a significant amount of work to get things back in order. <a href="https://www.discogs.com/group/thread/1133832" target="_blank">I've written a post in the DE group with more details.</a> Please take a moment to read it and give feedback if you like. Thank you!</p>
+          </div>
           <div class="news-item new-features">
             <!-- new features appended here -->
           </div>
@@ -213,6 +216,17 @@ <h2 id="compactArtist">Compact Artist & Label Pages</h2>
       <figcaption>Feature enabled</figcaption>
     </div>
 
+    <!-- Compact Marketplace Page -->
+    <div class="feature-block">
+      <h2 id="compactMarketplace">Compact Marketplace</h2>
+      <p>Reduces the image size, white space, button size, and font sizes on the new Shop My Wants page. You can toggle this feature on/off and see the effects without having to refresh the page.</p>
+
+      <img src="../img/learn/compact-marketplace-before.webp" class="max-width" />
+      <figcaption>Default Layout</figcaption>
+      <img src="../img/learn/compact-marketplace-after.webp" class="max-width mt-3" />
+      <figcaption>Feature enabled</figcaption>
+    </div>
+
     <!-- Confirm Before Removing Items -->
     <div class="feature-block">
       <h2 id="confirm-before-removing">Confirm Before Removing Items</h2>

html/popup.html

@@ -151,6 +151,30 @@ <h2>&#x26A0;&#xFE0F; &nbsp;&nbsp;&nbsp; Extension Issues &nbsp;&nbsp;&nbsp; &#x2
       </div> <!-- /.help -->
     </div>
 
+    <!-- Compact Marketplace Pages -->
+    <div class="toggle-group">
+      <p class="label">Compact Marketplace</p>
+      <div class="meta hide">Compact Marketplace shop my wants items white space size smaller</div>
+
+      <div class="onoffswitch">
+        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleCompactMarketplace" checked>
+        <label class="onoffswitch-label" for="toggleCompactMarketplace">
+          <span class="onoffswitch-inner"></span>
+          <span class="onoffswitch-switch"></span>
+        </label>
+      </div>
+
+      <div class="help compactMarketplace">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" color="#384047"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+        <div class="help-bubble">
+          <div class="help-text">
+            Reduces the image size, white space, buttons, and font sizes on the new Shop My Wants page.
+          </div>
+          <div class="arrow-right stroke"></div><div class="arrow-right"></div>
+        </div>
+      </div> <!-- /.help -->
+    </div>
+
     <!-- Confirm before removing -->
     <div class="toggle-group">
       <p class="label">Confirm Before Removing Items</p>

js/extension/background.js

@@ -24,6 +24,7 @@ let prefs = {
   confirmBeforeRemoving: false,
   collectionBoxFix: false,
   compactArtist: false,
+  compactMarketplace: false,
   converter: true,
   darkTheme: false,
   darkThemeVariant: '',

js/extension/features/navbar-shortcuts.js

@@ -23,7 +23,7 @@
   const FORUM_URL = '/forum';
   const GROUPS_URL = '/group';
   const INVENTORY_URL = '/sell/manage';
-  const ITEMSIWANT_URL = `/sell/mywants${itemsIWant}`;
+  const ITEMSIWANT_URL = `/shop/mywants${itemsIWant}`;
   const LISTANITEM_URL = '/sell';
   const ORDERS_URL = '/sell/orders';
   const PROFILE_URL = `/user/${username}`;

js/extension/features/toggle-compact-marketplace.js

@@ -0,0 +1,16 @@
+/**
+ *
+ * Discogs Enhancer
+ *
+ * @author: Matthew Salcido
+ * @website: http://www.msalcido.com
+ * @github: https://github.com/salcido
+ *
+ */
+
+ (function () {
+
+  let link = document.getElementById('compactMarketplaceCss');
+
+  if ( link ) { link.disabled = !link.disabled; }
+}());

js/extension/user-preferences.js

@@ -387,6 +387,17 @@ appendFragment([resourceLibrary])
 
       elems.push(compact_artist_css);
 
+      // compact-artist.scss
+      let compact_marketplace_css = document.createElement('link');
+
+      compact_marketplace_css.rel = 'stylesheet';
+      compact_marketplace_css.type = 'text/css';
+      compact_marketplace_css.href = chrome.runtime.getURL('css/compact-marketplace.css');
+      compact_marketplace_css.id = 'compactMarketplaceCss';
+      compact_marketplace_css.disabled = !prefs.compactMarketplace;
+
+      elems.push(compact_marketplace_css);
+
       // baoi-fields.css
       let baoi_css = document.createElement('link');
 

js/popup/change-log.js

@@ -2,15 +2,15 @@ module.exports = {
   current: [
     {
       features: [{
-        name: 'Utility: Backup / Restore',
-        description: 'Introducing a new utility feature for backing up and restoring your Discogs Enhancer configuration. This will allow you to migrate your preferences to separate browsers or restore a specific configuration.',
-        link: '#backupRestore'
+        name: 'Compact Marketplace',
+        description: 'Compact Marketplace reduces the image sizes, white space, buttons, and font sizes on the new Shop My Wants page.',
+        link: '#compactMarketplace'
       }],
       removedFeatures: [],
       updates: [
         {
           name: 'Enhancement',
-          description: 'More Dark Theme updates for the new Edit Master Release feature and new Collection Fields layout.'
+          description: 'More Dark Theme updates for the new Create Master Release feature.'
         },
       ],
       thanks: ['Massive thank you to Joel Yauk for their generous donation!'],

js/popup/popup-logic/features/compact-marketplace.js

@@ -0,0 +1,27 @@
+/**
+ * Compact Marketplace
+ */
+
+ import { applySave, getTabId } from '../utils';
+
+ // ========================================================
+ // toggleCompactMarketplace
+ // ========================================================
+ /**
+  * Toggles the compact marketplace css on the Shop my wants page
+  * @method   toggleCompactMarketplace
+  * @param    {Object}     event [The event object]
+  * @return   {undefined}
+  */
+ export async function toggleCompactMarketplace(event) {
+
+   let tabId = await getTabId();
+
+   chrome.scripting.executeScript({
+     target: { tabId: tabId },
+     func: () => {
+      let link = document.getElementById('compactMarketplaceCss');
+      if ( link ) { link.disabled = !link.disabled; }
+     }
+   }, () => { applySave(null, event); });
+ }

js/popup/popup-logic/popup.js

@@ -14,6 +14,7 @@ require('../../../css/popup/popup.scss');
 import * as absoluteDate from './features/absolute-date.js';
 import * as baoiFields from './features/baoi-fields.js';
 import * as compactArtist from './features/compact-artist.js';
+import * as compactMarketplace from './features/compact-marketplace.js';
 import * as contextualMenus from './features/contextual-menus.js';
 import * as linksInTabs from './features/links-in-new-tabs.js';
 import * as navbarShortcuts from './features/navbar-shortcuts.js';
@@ -80,6 +81,7 @@ window.addEventListener('load', () => {
       toggleBlockBuyers = document.getElementById('toggleBlockBuyers'),
       toggleBlockSellers = document.getElementById('toggleBlockSellers'),
       toggleCompactArtist = document.getElementById('toggleCompactArtist'),
+      toggleCompactMarketplace = document.getElementById('toggleCompactMarketplace'),
       toggleCollectionBoxFix = document.getElementById('toggleCollectionBoxFix'),
       toggleConfirmBeforeRemoving = document.getElementById('toggleConfirmBeforeRemoving'),
       toggleConverter = document.getElementById('toggleConverter'),
@@ -287,6 +289,7 @@ window.addEventListener('load', () => {
   toggleBlockBuyers.addEventListener('change', triggerSave);
   toggleBlockSellers.addEventListener('change', triggerSave);
   toggleCompactArtist.addEventListener('change', compactArtist.toggleCompactArtist);
+  toggleCompactMarketplace.addEventListener('change', compactMarketplace.toggleCompactMarketplace);
   toggleCollectionBoxFix.addEventListener('change', triggerSave);
   toggleConfirmBeforeRemoving.addEventListener('change', triggerSave);
   toggleConverter.addEventListener('change', triggerSave);
@@ -486,6 +489,7 @@ window.addEventListener('load', () => {
       toggleBlockSellers.checked = prefs.blockSellers;
       toggleCollectionBoxFix.checked = prefs.collectionBoxFix;
       toggleCompactArtist.checked = prefs.compactArtist;
+      toggleCompactMarketplace.checked = prefs.compactMarketplace;
       toggleConfirmBeforeRemoving.checked = prefs.confirmBeforeRemoving;
       toggleConverter.checked = prefs.converter;
       toggleDarkTheme.checked = prefs.darkTheme;

js/popup/popup-logic/utils.js

@@ -43,6 +43,7 @@ export function applySave(message, event, currencyTarget = 'currency') {
         blockSellers: document.getElementById('toggleBlockSellers').checked,
         collectionBoxFix: document.getElementById('toggleCollectionBoxFix').checked,
         compactArtist: document.getElementById('toggleCompactArtist').checked,
+        compactMarketplace: document.getElementById('toggleCompactMarketplace').checked,
         confirmBeforeRemoving: document.getElementById('toggleConfirmBeforeRemoving').checked,
         converter: document.getElementById('toggleConverter').checked,
         darkTheme: document.getElementById('toggleDarkTheme').checked,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discogs-enhancer",
-  "version": "3.11.2",
+  "version": "3.12.0",
   "description": "A web extension that adds useful functionality to Discogs.com! https://www.discogs-enhancer.com",
   "main": "index.js",
   "scripts": {

webpack.config.js

@@ -146,6 +146,12 @@ module.exports = () => {
               return sass.renderSync({ file: filePath }).css.toString();
             },
           },
+          {
+            from: 'css/compact-marketplace.scss', to: 'css/compact-marketplace.css',
+            transform(content, filePath) {
+              return sass.renderSync({ file: filePath }).css.toString();
+            },
+          },
           {
             from: 'css',
             to: 'css',