Browse Source

fix: repair the music page (waypoint shim, charts-on-load, badges, album grid)

- js/music.js: Waypoints (from the dropped scripts.js) is gone — shim
  $.fn.waypoint to run each callback immediately, so the last.fm Chart.js graphs
  render on page load and the AmplitudeJS radio player + amplitude_config are no
  longer halted mid-file.
- css/styles.scss: re-add the bootstrap 'badge' import (last.fm stat counts use
  .badge; it had been cut from the subset). Correct the stale 'dropped' comment.
- style.css: fix the album wall — .albums is now flex-wrap and each .album is a
  fixed 150px card with a square (aspect-ratio 1/1, object-fit cover) cover, so
  the varying last.fm art sizes can't break the grid.
windhamdavid 1 week ago
parent
commit
9e38996b11
4 changed files with 13 additions and 6 deletions
  1. 6 4
      css/styles.scss
  2. 0 0
      js/music.js
  3. 7 2
      style.css
  4. 0 0
      v4-style.min.css

+ 6 - 4
css/styles.scss

@@ -56,11 +56,12 @@ $enable-negative-margins: true;
 /***********************************************************
 /***********************************************************
 ########## Bootstrap 5 — subset to used parts #############
 ########## Bootstrap 5 — subset to used parts #############
    Dropped (unused in the theme): dropdown, button-group,
    Dropped (unused in the theme): dropdown, button-group,
-   accordion, breadcrumb, pagination, badge, alert, progress,
-   toasts, modal, tooltip, popover, spinners, placeholders.
+   accordion, breadcrumb, progress, toasts, modal, tooltip,
+   popover, spinners, placeholders.
    Kept: grid + carousel + nav/navbar + forms/buttons + tables
    Kept: grid + carousel + nav/navbar + forms/buttons + tables
-   + list-group + card + the utilities API. (offcanvas nav is now
-   self-contained CSS via :target — see .dw-offcanvas in Overrides.)
+   + list-group + card + pagination + alert + badge (last.fm stat
+   counts) + the utilities API. (offcanvas nav is now self-contained
+   CSS via :target — see .dw-offcanvas in Overrides.)
    (Was the full ~200 KB framework.)
    (Was the full ~200 KB framework.)
 ************************************************************/
 ************************************************************/
 
 
@@ -81,6 +82,7 @@ $enable-negative-margins: true;
 @import '../node_modules/bootstrap/scss/pagination';
 @import '../node_modules/bootstrap/scss/pagination';
 @import '../node_modules/bootstrap/scss/alert';
 @import '../node_modules/bootstrap/scss/alert';
 @import '../node_modules/bootstrap/scss/list-group';
 @import '../node_modules/bootstrap/scss/list-group';
+@import '../node_modules/bootstrap/scss/badge';
 @import '../node_modules/bootstrap/scss/close';
 @import '../node_modules/bootstrap/scss/close';
 @import '../node_modules/bootstrap/scss/carousel';
 @import '../node_modules/bootstrap/scss/carousel';
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/helpers';

File diff suppressed because it is too large
+ 0 - 0
js/music.js


+ 7 - 2
style.css

@@ -1076,6 +1076,9 @@ h1#now {
 ==============================================*/
 ==============================================*/
 .albums {
 .albums {
   position: relative;
   position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
 }
 .albums:after {
 .albums:after {
   content: "";
   content: "";
@@ -1083,7 +1086,7 @@ h1#now {
   clear: both;
   clear: both;
 }
 }
 .album {
 .album {
-  float: left;
+  width: 150px;
   height: auto;
   height: auto;
   position: relative;
   position: relative;
   font-size: 12px;
   font-size: 12px;
@@ -1096,7 +1099,9 @@ h1#now {
 }
 }
 .album img {
 .album img {
   width: 100%;
   width: 100%;
-  height: auto;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  display: block;
 }
 }
 .album h1, .album h2, .album h3 {
 .album h1, .album h2, .album h3 {
   font-size: 13px;
   font-size: 13px;

File diff suppressed because it is too large
+ 0 - 0
v4-style.min.css


Some files were not shown because too many files changed in this diff