Compact Collection Header

.github/workflows/main.yml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.13]
+        node-version: [20]
 
     steps:
     - uses: actions/checkout@v3

css/dark-theme.scss

@@ -6368,16 +6368,16 @@
 
     button[class*="_secondary"] {
       border: 1px solid var(--borders) !important;
-      background: var(--input-bg) !important;
+      background: var(--button-secondary) !important;
       div {
         color: var(--text-normal) !important;
       }
 
 
       &:hover {
-        background: var(--black) !important;
+        background: var(--button-secondary-hover) !important;
         div {
-          color: var(--white) !important;
+          color: var(--black) !important;
         }
       }
     }
@@ -6405,16 +6405,16 @@
 
     button[class*="_secondary"] {
       border: 1px solid var(--borders) !important;
-      background: var(--input-bg) !important;
-
+      background: var(--button-secondary) !important;
       div {
         color: var(--text-normal) !important;
       }
 
+
       &:hover {
-        background: var(--black) !important;
+        background: var(--button-secondary-hover) !important;
         div {
-          color: var(--white) !important;
+          color: var(--black) !important;
         }
       }
 
@@ -6528,7 +6528,7 @@
   }
 
   .MuiDataGrid-row.Mui-selected {
-    background-color: var(--modified-cart-bg) !important;
+    background-color: var(--history-hover) !important;
   }
 
   .MuiMenuItem-root.MuiMenuItem-gutters:hover {
@@ -6547,7 +6547,7 @@
     }
 
     .MuiDataGrid-row:hover {
-      background: var(--history-highlight) !important;
+      background: var(--input-bg) !important;
     }
 
     .Mui-checked svg path,

html/learn.html

@@ -213,6 +213,17 @@ <h2 id="compactArtist">Compact Artist & Label Pages</h2>
       <figcaption>Feature enabled</figcaption>
     </div>
 
+    <!-- Compact Collection Header -->
+    <div class="feature-block">
+      <h2 id="compactCollection">Compact Collection Header</h2>
+      <p>Reduces the overall white space in the header section of the Collection page, removes the top pagination navigation links, reduces font sizes, and moves some UI elements around in order to mimic the old Collection page layout.</p>
+
+      <img src="../img/learn/compact-collection-before.jpg" class="max-width" />
+      <figcaption>Default Layout</figcaption>
+      <img src="../img/learn/compact-collection-after.jpg" 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>
@@ -469,22 +480,6 @@ <h2 id="inventory-ratings">Inventory Ratings</h2>
       <p>To set a value, click on the feature name to open the submenu. Enter the minimum rating value a release should exceed in order to be tagged in red. Then turn the option on and refresh your page.</p>
     </div>
 
-    <!-- Inventory Scanner -->
-    <div class="feature-block">
-      <h2 id="inventoryScanner">Inventory Scanner</h2>
-      <p>The Inventory Scanner is a feature for Sellers that will scan a single page of <a href="https://www.discogs.com/sell/manage" target="_blank">your inventory</a> and mark any release that is a set percentage below the median Marketplace price.</p>
-      <p><b>Note:</b> I have only tested this with listings in USD. If you use a different currency and have issues please let me know!</p>
-      <img src="../img/learn/inventory-scanner.jpg" class="max-width"/>
-
-      <p>You can set the set the percentage threshold in the popup - it can be any value between 0 and 99:</p>
-      <img src="../img/learn/inventory-scanner-ui.png" class="max-width"/>
-
-      <p>Then view <a href="https://www.discogs.com/sell/manage" target="_blank">your inventory</a> and click "Scan Inventory". The scanner will comb through your items from top to bottom and mark any items that are below the median value with a green flag:</p>
-      <img src="../img/learn/inventory-scanner-flag.png" class="max-width"/>
-
-      <p>Shoutout to TheMightyChew for suggesting this feature!</p>
-    </div>
-
     <!-- Large BAOI Fields -->
     <div class="feature-block">
       <h2 id="baoiFields">Large BAOI Fields</h2>
@@ -1067,6 +1062,7 @@ <h2 id="thanks">Thank You</h2>
         <li class="contributor">ToastyMallows</li>
         <li class="donor">Tobias B.</li>
         <li class="donor">Transferwise</li>
+        <li class="donor">VegetableVillage</li>
         <li class="donor">Victor S.</li>
         <li class="donor">Willem</li>
         <li class="donor">William B.</li>

html/popup.html

@@ -148,6 +148,30 @@ <h2>&#x1F44B; Heads up!</h2>
       </div> <!-- /.help -->
     </div>
 
+    <!-- Compact Collection -->
+    <div class="toggle-group">
+      <p class="label">Compact Collection Header</p>
+      <div class="meta hide">Compact Collection Pages white space size smaller</div>
+
+      <div class="onoffswitch">
+        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleCompactCollection" checked>
+        <label class="onoffswitch-label" for="toggleCompactCollection">
+          <span class="onoffswitch-inner"></span>
+          <span class="onoffswitch-switch"></span>
+        </label>
+      </div>
+
+      <div class="help compactCollection">
+        <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 white space, font sizes, and rearranges UI elements on the Collection header.
+          </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>
@@ -684,42 +708,6 @@ <h2>&#x1F44B; Heads up!</h2>
       </div>
     </div>
 
-    <!-- Inventory Scanner -->
-    <div class="toggle-group inventory-scanner-wrap has-options">
-      <p class="label" title="Click to display options">
-        <span class="arrow">&rsaquo;&nbsp;</span>
-        Inventory Scanner
-        <span class="saved-value disabled"></span>
-        <span class="status"></span>
-      </p>
-      <div class="meta hide">inventory scanner seller marketplace items sale compare prices</div>
-
-      <div class="inventory-scanner hide" id="inventoryScanner">
-        <div class="threshold-value">
-          <label for="thresholdValue">Percent below median:</label>
-          <input type="number" id="thresholdValue" step="1" max="99" maxlength="2" placeholder="25">
-        </div>
-        <div class="onoffswitch">
-          <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleInventoryScanner" checked>
-          <label class="onoffswitch-label" for="toggleInventoryScanner">
-            <span class="onoffswitch-inner"></span>
-            <span class="onoffswitch-switch"></span>
-          </label>
-        </div>
-
-        <div class="help inventoryScanner">
-          <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">
-              Scans your inventory and marks any items that are priced below the median Marketplace value.
-              <span class="learn-more"></span>
-            </div>
-            <div class="arrow-right stroke"></div><div class="arrow-right"></div>
-          </div>
-        </div> <!-- /.help -->
-      </div>
-    </div>
-
     <!-- BAOI Fields -->
     <div class="toggle-group">
       <p class="label">Large B.A.O.I. Fields</p>

js/extension/background.js

@@ -24,6 +24,7 @@ let prefs = {
   confirmBeforeRemoving: false,
   collectionBoxFix: false,
   compactArtist: false,
+  compactCollection: false,
   converter: true,
   darkTheme: false,
   darkThemeVariant: '',
@@ -46,7 +47,6 @@ let prefs = {
   hideMinMaxColumns: false,
   highlightMedia: true,
   inventoryRatings: false,
-  inventoryScanner: false,
   notesCount: true,
   quickSearch: false,
   quickSearchTracklists: false,
@@ -112,7 +112,6 @@ let featureDefaults = {
         },
       favoriteList: { list: [] },
       filterPrices: { minimum: 0, maximum: 100 },
-      inventoryScanner: { threshold: 20 },
       linksInTabs: {
           artists: false,
           collection: false,

js/extension/features/compact-collection-header.js

@@ -0,0 +1,68 @@
+
+rl.ready(() => {
+
+  if ( rl.pageIs('collection') ) {
+
+    let rules = /*css*/`
+        #collection-stats {
+          display: flex;
+          margin-top: .5rem;
+        }
+        #collection-stats header {
+          margin-right: 2rem;
+        }
+
+        [class*="content_"] {
+          margin-top: 1rem;
+        }
+        [class*="itemTitle_"] {
+          font-size: .875rem;
+        }
+        [class*="itemData_"] {
+          line-height: 16px;
+        }
+        [class*="viewAndShow_"]{
+          width: 250px !important;
+        }
+        [class*="horizontalLinks_"] ul {
+          padding: 0 .5rem;
+        }
+
+        [class*="format_item_"],
+        [class*="released_"],
+        [class*="folderActionBtn_"],
+        [class*="markup_"],
+        .MuiSelect-select,
+        .MuiTypography-labelSmall,
+        .MuiDataGrid-cell--withRenderer,
+        .MuiDataGrid-cellContent {
+          font-size: 13px !important;
+        }
+    `;
+    rl.attachCss('collection-page', rules);
+
+    let collectionItems = 'div[class*="MuiDataGrid-cell--withRenderer"]';
+
+    rl.waitForElement(collectionItems).then(() => {
+
+      setTimeout(() => {
+        let layoutBtns = document.querySelector('div[class*="viewAndShow_"]'),
+            bulkActionsRow = document.querySelector('[class*="collectionControls_"]');
+
+        // Don't run when viewing someone else's collection
+        if (!bulkActionsRow) return;
+        // Relocate Layout buttons
+        bulkActionsRow.insertAdjacentElement('beforeend', layoutBtns);
+        document.querySelector('[class*="pagerAndViewContainer_"]').style.display = 'none';
+
+        let manageBtns = document.querySelector('div[class*="pageHeadLinks_"]'),
+            navButtons = document.querySelector('nav[class*="horizontalLinks_"]');
+
+        // Relocate Manage / Export links
+        navButtons.insertAdjacentElement('beforeend', manageBtns);
+        document.querySelector('[class*="pageNameAndLinks_"]').style.display = 'none';
+      }, 100);
+    });
+  }
+});
+