« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/static
diff options
context:
space:
mode:
Diffstat (limited to 'src/static')
-rw-r--r--src/static/css/features.css19
-rw-r--r--src/static/css/miscellany.css21
-rw-r--r--src/static/js/client/css-compatibility-assistant.js28
-rw-r--r--src/static/js/client/index.js2
4 files changed, 4 insertions, 66 deletions
diff --git a/src/static/css/features.css b/src/static/css/features.css
index f5842704..c25f669c 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -629,8 +629,7 @@
     border-radius: 0 0 4px 4px;
   }
 
-  .cover-artwork:has(.image-details),
-  .cover-artwork.has-image-details {
+  .cover-artwork:has(.image-details) {
     border-radius: 0 0 6px 6px;
   }
 
@@ -664,8 +663,7 @@
     border-color: var(--dim-color);
   }
 
-  .cover-artwork:not(:has(.image-details)),
-  .cover-artwork:not(.has-image-details) {
+  .cover-artwork:not(:has(.image-details)) {
     /* Hacky: `overflow: hidden` hides tag tooltips, so it can't be applied
      * if we've got tags/details visible. But it's okay, because we only
      * need to apply it if it *doesn't* - that's when the rounded border
@@ -1035,6 +1033,7 @@
 
   .grid-item .image-container {
     width: 100%;
+    aspect-ratio: 1 / 1;
   }
 
   .grid-item .image {
@@ -1316,11 +1315,6 @@
     overflow: hidden;
   }
 
-  .square .image-link {
-    width: 100%;
-    height: 100%;
-  }
-
   .image-inner-area {
     position: relative;
     width: 100%;
@@ -1340,11 +1334,6 @@
     object-fit: cover;
   }
 
-  .square .image {
-    width: 100%;
-    height: 100%;
-  }
-
   .image-link .image {
     display: block;
     max-width: 100%;
@@ -1633,7 +1622,7 @@
   }
 
   #image-overlay-image-layout {
-    display: block;
+    display: flex;
     position: relative;
     max-height: 100%;
     margin: 4px 3px;
diff --git a/src/static/css/miscellany.css b/src/static/css/miscellany.css
index 6f60767d..9eb44004 100644
--- a/src/static/css/miscellany.css
+++ b/src/static/css/miscellany.css
@@ -1,24 +1,3 @@
-/* Squares */
-
-@layer layout {
-  .square {
-    position: relative;
-    width: 100%;
-  }
-
-  .square::after {
-    content: "";
-    display: block;
-    padding-bottom: 100%;
-  }
-
-  .square-content {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}
-
 /* Utility spans */
 
 @layer print {
diff --git a/src/static/js/client/css-compatibility-assistant.js b/src/static/js/client/css-compatibility-assistant.js
deleted file mode 100644
index 37b0645a..00000000
--- a/src/static/js/client/css-compatibility-assistant.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {stitchArrays} from '../../shared-util/sugar.js';
-
-export const info = {
-  id: 'cssCompatibilityAssistantInfo',
-
-  coverArtworks: null,
-  coverArtworkImageDetails: null,
-};
-
-export function getPageReferences() {
-  info.coverArtworks =
-    Array.from(document.querySelectorAll('.cover-artwork'));
-
-  info.coverArtworkImageDetails =
-    info.coverArtworks
-      .map(artwork => artwork.querySelector('.image-details'));
-}
-
-export function mutatePageContent() {
-  stitchArrays({
-    coverArtwork: info.coverArtworks,
-    imageDetails: info.coverArtworkImageDetails,
-  }).forEach(({coverArtwork, imageDetails}) => {
-      if (imageDetails) {
-        coverArtwork.classList.add('has-image-details');
-      }
-    });
-}
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index 6862b4ad..65254b10 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -6,7 +6,6 @@ import * as artTagGalleryFilterModule from './art-tag-gallery-filter.js';
 import * as artTagNetworkModule from './art-tag-network.js';
 import * as artistExternalLinkTooltipModule from './artist-external-link-tooltip.js';
 import * as artistRollingWindowModule from './artist-rolling-window.js';
-import * as cssCompatibilityAssistantModule from './css-compatibility-assistant.js';
 import * as datetimestampTooltipModule from './datetimestamp-tooltip.js';
 import * as draggedLinkModule from './dragged-link.js';
 import * as expandableGridSectionModule from './expandable-grid-section.js';
@@ -32,7 +31,6 @@ export const modules = [
   artTagNetworkModule,
   artistExternalLinkTooltipModule,
   artistRollingWindowModule,
-  cssCompatibilityAssistantModule,
   datetimestampTooltipModule,
   draggedLinkModule,
   expandableGridSectionModule,