Merge 3aad540 into 1d8d645

blackcandy-org · Sep 5, 2022 · c5d1259 · c5d1259
2 parents 1d8d645 + 3aad540
commit c5d1259
Show file tree

Hide file tree

Showing 47 changed files with 285 additions and 427 deletions.
diff --git a/app/assets/stylesheets/components/_list.scss b/app/assets/stylesheets/components/_list.scss
@@ -35,8 +35,7 @@
   color: transparent;
 }
 
-.c-list__item.is-active *,
-.c-list__item:hover button[type="submit"] * {
+.c-list__item.is-active * {
   color: var(--list-active-color);
 }
 

diff --git a/app/assets/stylesheets/components/_search.scss b/app/assets/stylesheets/components/_search.scss
@@ -1,3 +1,11 @@
+@use "../tools/functions" as *;
+
+.c-search {
+  max-width: 380px;
+  width: 100%;
+  margin: 0 spacing("small");
+}
+
 .c-search .c-loader {
   display: none;
 }

diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
@@ -1,16 +1,37 @@
+@use "../tools/responsive";
 @use "../tools/functions" as *;
 
 .c-table {
+  display: table;
   width: 100%;
-  table-layout: fixed;
+  table-layout: auto;
   text-align: left;
 }
 
-.c-table tr,
+.c-table[role="table"] {
+  display: grid;
+  grid-template-columns: var(--grid-tc);
+  --grid-tc: repeat(5, auto);
+}
+
+.c-table [role="rowgroup"] {
+  display: contents;
+}
+
 .c-table [role="row"] {
+  display: contents;
+}
+
+.c-table tr,
+.c-table [role="columnheader"],
+.c-table [role="cell"] {
   border-bottom: 1px solid var(--table-border-color);
 }
 
+.c-table [role="columnheader"] {
+  font-weight: bold;
+}
+
 .c-table th,
 .c-table td,
 .c-table [role="columnheader"],
@@ -20,16 +41,16 @@
   color: var(--table-color);
 }
 
-.c-table th:first-child,
-.c-table td:first-child,
-.c-table [role="columnheader"]:first-child,
-.c-table [role="cell"]:first-child {
-  padding-left: 0;
+.c-table [role="cell"][span="row"] {
+  grid-column: 1 / -1;
 }
 
-.c-table tbody tr:hover *,
-.c-table tbody tr.is-active *,
-.c-table [role="row"]:hover [role="cell"],
-.c-table [role="row"].is-active [role="cell"] {
-  color: var(--table-active-color);
+@include responsive.media-query using ($breakpoint) {
+  @if $breakpoint == "medium" {
+    .c-table[role="table"][cols\@medium="3"] { --grid-tc: repeat(3, auto); }
+  }
+
+  @if $breakpoint == "small" {
+    .c-table[role="table"][cols\@small="2"] { --grid-tc: repeat(2, auto); }
+  }
 }
diff --git a/app/assets/stylesheets/elements/_content.scss b/app/assets/stylesheets/elements/_content.scss
@@ -50,3 +50,12 @@ hr {
   border-bottom: 0;
   margin: spacing("large") 0;
 }
+
+button[type="submit"] {
+  cursor: pointer;
+
+  &:hover,
+  &:hover * {
+    color: var(--link-active-color);
+  }
+}
diff --git a/app/assets/stylesheets/objects/_flex.scss b/app/assets/stylesheets/objects/_flex.scss
@@ -97,3 +97,7 @@
 .o-flex__item--grow-1 {
   flex-grow: 1;
 }
+
+.o-flex__item--basic-0 {
+  flex-basis: 0;
+}
diff --git a/app/assets/stylesheets/objects/_grid.scss b/app/assets/stylesheets/objects/_grid.scss
@@ -2,100 +2,7 @@
 
 @use "../settings/variables";
 @use "../tools/responsive";
-@use "../tools/functions";
-
-@mixin grid($breakpoint-postfix) {
-  .o-grid[cols#{$breakpoint-postfix}="1"] { --grid-tc: repeat(1, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="2"] { --grid-tc: repeat(2, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="3"] { --grid-tc: repeat(3, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="4"] { --grid-tc: repeat(4, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="5"] { --grid-tc: repeat(5, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="6"] { --grid-tc: repeat(6, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="7"] { --grid-tc: repeat(7, 1fr); }
-  .o-grid[cols#{$breakpoint-postfix}="8"] { --grid-tc: repeat(8, 1fr); }
-
-  /* span=start... */
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="1"] { --grid-cs: 1; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="2"] { --grid-cs: 2; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="3"] { --grid-cs: 3; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="4"] { --grid-cs: 4; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="5"] { --grid-cs: 5; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="6"] { --grid-cs: 6; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="7"] { --grid-cs: 7; }
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}^="8"] { --grid-cs: 8; }
-
-  /* span=...+width, span=...-end */
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+1"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="1"] {
-    --grid-ce: 1;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+2"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-1"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="2"] {
-    --grid-ce: 2;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+3"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-2"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="3"] {
-    --grid-ce: 3;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+4"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-3"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="4"] {
-    --grid-ce: 4;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+5"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-4"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="5"] {
-    --grid-ce: 5;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+6"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-5"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="6"] {
-    --grid-ce: 6;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+7"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-6"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="7"] {
-    --grid-ce: 7;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="+8"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-7"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="8"] {
-    --grid-ce: 8;
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}$="-8"] {
-    --grid-ce: 9;
-  }
-
-  /* connect vars */
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}] {
-    grid-column-end: span var(--grid-ce);
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}*="+"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}*="-"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}*=".."] {
-    grid-column-start: var(--grid-cs);
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}*="-"],
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}*=".."] {
-    grid-column-end: var(--grid-ce);
-  }
-
-  .o-grid > .o-grid__item[span#{$breakpoint-postfix}="row"] {
-    grid-column: 1 / -1;
-  }
-}
+@use "../tools/functions" as *;
 
 .o-grid {
   display: grid !important;
@@ -105,30 +12,78 @@
   --grid-ce: -1; /* column end */
 }
 
-/* o-cell -- cell or column */
 .o-grid > .o-grid__item {
   display: block;
   appearance: none;
 }
 
-.o-grid--justify-items-center {
-  justify-items: center;
+.o-grid--shelf {
+  grid-gap: spacing("medium");
 }
 
-.o-grid--align-items-center {
-  align-items: center;
+.o-grid--list {
+  grid-gap: spacing("small");
+  --grid-tc: repeat(3, 1fr);
 }
 
-.o-grid__item--justify-end {
-  justify-self: end;
+.o-grid > .o-grid__item--row {
+  grid-column: 1 / -1;
 }
 
-@each $name, $value in variables.$spacing {
-  .o-grid--gap-#{$name} {
-    grid-gap: $value;
+@include responsive.media-query using ($breakpoint) {
+  @if $breakpoint == "extra-wide" {
+    .o-grid--shelf {
+      --grid-tc: repeat(7, 1fr);
+    }
   }
-}
 
-@include responsive.media-query using ($breakpoint) {
-  @include grid(functions.breakpoint-postfix($breakpoint));
+  @if $breakpoint == "wide" {
+    .o-grid--shelf {
+      --grid-tc: repeat(6, 1fr);
+    }
+  }
+
+  @if $breakpoint == "extra-large" {
+    .o-grid--shelf {
+      --grid-tc: repeat(5, 1fr);
+    }
+  }
+
+  @if $breakpoint == "large" {
+    .o-grid--shelf {
+      --grid-tc: repeat(4, 1fr);
+    }
+  }
+
+  @if $breakpoint == "medium" {
+    .o-grid--shelf {
+      --grid-tc: repeat(3, 1fr);
+    }
+
+    .o-grid--list {
+      --grid-tc: repeat(2, 1fr);
+    }
+  }
+
+  @if $breakpoint == "small" {
+    .o-grid--shelf {
+      --grid-tc: repeat(2, 1fr);
+    }
+  }
+
+  @if $breakpoint == "extra-small" {
+    .o-grid--shelf {
+      --grid-tc: repeat(3, 1fr);
+    }
+  }
+
+  @if $breakpoint == "narrow" {
+    .o-grid--shelf {
+      --grid-tc: repeat(2, 1fr);
+    }
+
+    .o-grid--list {
+      --grid-tc: repeat(1, 1fr);
+    }
+  }
 }
diff --git a/app/assets/stylesheets/utilities/_border.scss b/app/assets/stylesheets/utilities/_border.scss
@@ -4,6 +4,10 @@
   box-shadow: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;
 }
 
+.u-border-none {
+  border: none !important;
+}
+
 @each $name, $value in variables.$border-radius {
   .u-border-radius-#{$name} {
     border-radius: $value !important;

diff --git a/app/assets/stylesheets/utilities/_sizing.scss b/app/assets/stylesheets/utilities/_sizing.scss
@@ -1,48 +1,25 @@
-@use "../tools/responsive";
 @use "../tools/functions";
 
-@mixin sizing($breakpoint-postfix) {
-  .u-vw-100#{$breakpoint-postfix} {
-    width: 100vw !important;
-  }
-
-  .u-vh-100#{$breakpoint-postfix} {
-    height: 100vh !important;
-  }
-
-  .u-w-100#{$breakpoint-postfix} {
-    width: 100% !important;
-  }
-
-  .u-h-100#{$breakpoint-postfix} {
-    height: 100% !important;
-  }
-
-  .u-h-0#{$breakpoint-postfix} {
-    height: 0 !important;
-  }
-
-  .u-w-0#{$breakpoint-postfix} {
-    width: 0 !important;
-  }
+.u-vw-100 {
+  width: 100vw !important;
+}
 
-  .u-w-15#{$breakpoint-postfix} {
-    width: 15% !important;
-  }
+.u-vh-100 {
+  height: 100vh !important;
+}
 
-  .u-w-25#{$breakpoint-postfix} {
-    width: 25% !important;
-  }
+.u-w-100 {
+  width: 100% !important;
+}
 
-  .u-w-50#{$breakpoint-postfix} {
-    width: 50% !important;
-  }
+.u-h-100 {
+  height: 100% !important;
+}
 
-  .u-w-75#{$breakpoint-postfix} {
-    width: 75% !important;
-  }
+.u-h-0 {
+  height: 0 !important;
 }
 
-@include responsive.media-query using ($breakpoint) {
-  @include sizing(functions.breakpoint-postfix($breakpoint));
+.u-w-0 {
+  width: 0 !important;
 }
diff --git a/app/controllers/albums_controller.rb b/app/controllers/albums_controller.rb
@@ -12,11 +12,6 @@ class AlbumsController < ApplicationController
   def index
     records = Album.includes(:artist).order(:name)
     @pagy, @albums = pagy(records)
-
-    respond_to do |format|
-      format.turbo_stream if params[:page].to_i > 1
-      format.html
-    end
   end
 
   def show