Merge pull request #256 from salcido/compact-artist-pages

Compact Artist Pages

css/compact-artist.scss

@@ -0,0 +1,63 @@
+// Smaller padding on facets
+div[class*="creditsFacetsContainer_"],
+div[class*="facetsContainer_"] {
+  button[class*="facets_"] {
+    p[class*="facet"] {
+      padding: 10px 8px 10px 32px !important;
+    }
+    p[class*="subFacets_"] {
+      padding-bottom: 0 !important;
+    }
+  }
+
+  // Smaller font sizes on facets
+  button[class*="superFacets_"] {
+    p:first-of-type {
+      font-size: 16px !important;
+    }
+  }
+  button[class*="facets_"] {
+    p[class*="facet_"] {
+      font-size: 14px !important;
+    }
+  }
+}
+
+
+// Smaller images / padding on release rows
+table[class*="releases_"] {
+  tr[class*="textWithCoversRow_"] {
+    td {
+      padding: .25em !important;
+    }
+    img,
+    div[class*="fallback_"] {
+      width: 50px !important;
+      height: 50px !important;
+    }
+  }
+  tr[class*="textOnlyRow_"] {
+    td {
+      padding: .25em !important;
+    }
+
+    button[class*="versionsButton_"] {
+      margin-top: 4px !important;
+      margin-bottom: 4px !important;
+    }
+  }
+}
+
+div[class*="releasesGrid_"] {
+  tr[class*="textWithCoversRow_"] {
+    grid-template-columns: 70px 2fr 1fr 1fr .7fr .3fr .5fr .5fr !important;
+
+    button[class*="versionsButton_"] {
+      margin-top: 4px !important;
+      margin-bottom: 4px !important;
+    }
+  }
+  div[class*="textWithCovers_"] {
+    gap: 4px !important;
+  }
+}

css/dark-theme.scss

@@ -5639,6 +5639,10 @@
       background: var(--headers) !important;
     }
 
+    button[class*="facetSelected_"] {
+      background: var(--headers) !important;
+    }
+
     button[class*="facetSelected_"] span[class*="subFacetTotalCounts_"] {
       background: var(--black) !important;
     }
@@ -5678,6 +5682,21 @@
       button[class*="versionsButton_"] {
         background: var(--headers) !important;
       }
+
+      td[class*="versionsTextWithCoversRow_"] {
+        border-bottom: 1px solid var(--borders) !important;
+      }
+
+      &[class*="versions_"] {
+        background: var(--box-shadow-light) !important;
+      }
+    }
+
+    td[class*="actionstd_"],
+    span[class*="actionstd_"] {
+      ul li:hover {
+        background: var(--row-even) !important;
+      }
     }
 
     div[class*="versions_"] {

html/learn.html

@@ -196,6 +196,12 @@ <h2 id="blockSellers">Block Sellers</h2>
       <p><em>Note:</em> This feature will not track seller username changes so if a seller changes their username, you will have to add the new username to the blocklist.</p>
     </div>
 
+    <!-- Feature Name -->
+    <div class="feature-block">
+      <h2 id="compactArtist">Compact Artist Pages</h2>
+      <p>Reduces the overall white space around the release images and the filter side bar on Artist pages. You can toggle this feature on/off and see the effects without having to refresh the page.</p>
+    </div>
+
     <!-- Confirm Before Removing Items -->
     <div class="feature-block">
       <h2 id="confirm-before-removing">Confirm Before Removing Items</h2>
@@ -441,10 +447,10 @@ <h2 id="force-dashboard">Dashboard Link</h2>
       <p>Clicking the Discogs logo in the header will take you to your Dashboard when this is enabled. When this feature is enabled the Dashboard icon in the nav will be hidden.</p>
     </div>
 
+    <!-- Full Width Pages -->
     <div class="feature-block">
-      <!-- Feature Name -->
       <h2 id="fullWidthPages">Full Width Pages</h2>
-      <p>Makes the Collection, Wantlist, Order, Orders, and Inventory pages expand to the width of the browser. This effectively reverts the recent change that forces a fixed width on these pages.</p>
+      <p>Makes the Collection, Wantlist, Order, Orders, Purchases, and Inventory pages expand to the width of the browser. This effectively reverts the recent change that forces a fixed width on these pages.</p>
 
     </div>
 

html/popup.html

@@ -100,6 +100,30 @@ <h2>&#x1F44B; Heads up!</h2>
       </div> <!-- /.help -->
     </div>
 
+    <!-- Compact Artist Pages -->
+    <div class="toggle-group">
+      <p class="label">Compact Artist Pages</p>
+      <div class="meta hide">Compact Artist Pages white space size smaller</div>
+
+      <div class="onoffswitch">
+        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleCompactArtist" checked>
+        <label class="onoffswitch-label" for="toggleCompactArtist">
+          <span class="onoffswitch-inner"></span>
+          <span class="onoffswitch-switch"></span>
+        </label>
+      </div>
+
+      <div class="help compactArtist">
+        <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 and font sizes on the new Artist page layout.
+          </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>
@@ -619,7 +643,7 @@ <h2>&#x1F44B; Heads up!</h2>
         <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">
-            Makes the Collection, Wantlist, Orders, and Inventory pages expand to the width of the browser.
+            Makes the Collection, Wantlist, Orders, Purchases, and Inventory pages expand to the width of the browser.
           </div>
           <div class="arrow-right stroke"></div><div class="arrow-right"></div>
         </div>

js/extension/background.js

@@ -23,6 +23,7 @@ let prefs = {
   blockSellers: true,
   confirmBeforeRemoving: false,
   collectionUi: false,
+  compactArtist: false,
   converter: true,
   darkTheme: false,
   darkThemeVariant: '',

js/extension/features/full-width-pages.js

@@ -9,7 +9,7 @@
  */
 
  rl.ready(() => {
-  if ( rl.pageIs('collection', 'wantlist', 'order', 'orders', 'inventory') ) {
+  if ( rl.pageIs('collection', 'wantlist', 'order', 'orders', 'inventory', 'purchases') ) {
     document.querySelector('body').classList.add('no_width_limit');
   }
 });

js/extension/features/toggle-compact-artist.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('compactArtistCss');
+
+  if ( link ) { link.disabled = !link.disabled; }
+}());

js/extension/user-preferences.js

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

js/popup/change-log.js

@@ -2,9 +2,9 @@ module.exports = {
   current: [
     {
       features: [{
-        name: 'Full Width Pages',
-        description: 'Makes the Collection, Wantlist, Orders, and Inventory pages expand to the width of the browser. I threw this together real quick so please let me know if there are other pages that should be included. Also if you can think of a better name than "Full Width Pages"!',
-        link: '#fullWidthPages',
+        name: 'Compact Artist Pages',
+        description: 'Reduces the overall white space around the release images and the filter side bar on Artist pages. You can toggle this feature on/off and see the effects without having to refresh the page.',
+        link: '#compactArtist',
       }],
       removedFeatures: [],
       updates: [

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

@@ -0,0 +1,24 @@
+/**
+ * Compact Artist Pages
+ */
+
+ import { applySave, getTabId } from '../utils';
+
+ // ========================================================
+ // toggleCompactArtist
+ // ========================================================
+ /**
+  * Toggles the compact artist css on the Artist page
+  * @method   toggleCompactArtist
+  * @param    {Object}     event [The event object]
+  * @return   {undefined}
+  */
+ export async function toggleCompactArtist(event) {
+
+   let tabId = await getTabId();
+
+   chrome.scripting.executeScript({
+     target: {tabId: tabId},
+     files: ['js/extension/features/toggle-compact-artist.js']
+   }, () => { applySave(null, event); });
+ }

js/popup/popup-logic/popup.js

@@ -13,6 +13,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 contextualMenus from './features/contextual-menus.js';
 import * as linksInTabs from './features/links-in-new-tabs.js';
 import * as darkTheme from './features/dark-theme.js';
@@ -78,6 +79,7 @@ window.addEventListener('load', () => {
       toggleBaoiFields = document.getElementById('toggleBaoiFields'),
       toggleBlockBuyers = document.getElementById('toggleBlockBuyers'),
       toggleBlockSellers = document.getElementById('toggleBlockSellers'),
+      toggleCompactArtist = document.getElementById('toggleCompactArtist'),
       toggleCollectionUi = document.getElementById('toggleCollectionUi'),
       toggleConfirmBeforeRemoving = document.getElementById('toggleConfirmBeforeRemoving'),
       toggleConverter = document.getElementById('toggleConverter'),
@@ -277,6 +279,7 @@ window.addEventListener('load', () => {
   toggleBaoiFields.addEventListener('change', baoiFields.toggleBAOIfields);
   toggleBlockBuyers.addEventListener('change', triggerSave);
   toggleBlockSellers.addEventListener('change', triggerSave);
+  toggleCompactArtist.addEventListener('change', compactArtist.toggleCompactArtist);
   toggleCollectionUi.addEventListener('change', triggerSave);
   toggleConfirmBeforeRemoving.addEventListener('change', triggerSave);
   toggleConverter.addEventListener('change', triggerSave);
@@ -463,6 +466,7 @@ window.addEventListener('load', () => {
       toggleBlockBuyers.checked = prefs.blockBuyers;
       toggleBlockSellers.checked = prefs.blockSellers;
       toggleCollectionUi.checked = prefs.collectionUi;
+      toggleCompactArtist.checked = prefs.compactArtist;
       toggleConfirmBeforeRemoving.checked = prefs.confirmBeforeRemoving;
       toggleConverter.checked = prefs.converter;
       toggleDarkTheme.checked = prefs.darkTheme;

js/popup/popup-logic/utils.js

@@ -42,6 +42,7 @@ export function applySave(message, event, currencyTarget = 'currency') {
         blockBuyers: document.getElementById('toggleBlockBuyers').checked,
         blockSellers: document.getElementById('toggleBlockSellers').checked,
         collectionUi: document.getElementById('toggleCollectionUi').checked,
+        compactArtist: document.getElementById('toggleCompactArtist').checked,
         confirmBeforeRemoving: document.getElementById('toggleConfirmBeforeRemoving').checked,
         converter: document.getElementById('toggleConverter').checked,
         darkTheme: document.getElementById('toggleDarkTheme').checked,

manifest.json

@@ -3,7 +3,7 @@
   "name": "Discogs Enhancer",
   "short_name": "Discogs Enhancer",
   "description": "Adds a dark theme, block sellers, price comparisons, currency converter, configurable quick search, & more to Discogs!",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "author": "Matthew Salcido",
   "homepage_url": "https://www.discogs-enhancer.com",
   "action": {

package.json

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

readme.md

@@ -6,7 +6,7 @@
 <p align="center">
   <img src="https://github.com/salcido/discogs-enhancer/actions/workflows/main.yml/badge.svg">
   <a href="https://chrome.google.com/webstore/detail/discogs-enhancer/fljfmblajgejeicncojogelbkhbobejn">
-    <img src="https://img.shields.io/badge/Users-8.4k-brightgreen" alt="Chrome Web Store">
+    <img src="https://img.shields.io/badge/Users-8.6k-brightgreen" alt="Chrome Web Store">
   </a>
   <a href="https://chrome.google.com/webstore/detail/discogs-enhancer/fljfmblajgejeicncojogelbkhbobejn">
     <img src="https://img.shields.io/badge/Rating-4.85%2F5-blue" alt="Chrome Web Store">

webpack.config.js

@@ -91,6 +91,12 @@ module.exports = {
           return result.css.toString();
         }
       },
+      { from: 'css/compact-artist.scss', to: 'css/compact-artist.css',
+        transform(content, path) {
+          let result = sass.renderSync({ file: path });
+          return result.css.toString();
+        }
+      },
       {
         from: 'css',
         to: 'css',