diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index dc89a877c..770e2437f 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -4,10 +4,11 @@
.btn {
--transition: 300ms ease;
+ --btn-border-radius: 2em;
align-items: center;
background-color: var(--btn-background, var(--color-bg));
- border-radius: var(--btn-border-radius, 2em);
+ border-radius: var(--btn-border-radius);
border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
color: var(--btn-color, var(--color-ink));
cursor: pointer;
@@ -69,8 +70,8 @@
}
/* With radios and checkboxes */
- &:has(input[type=radio], input[type=checkbox]) {
- :is(input[type=radio], input[type=checkbox]) {
+ &:has(input[type=radio]) {
+ :is(input[type=radio]) {
appearance: none;
block-size: calc(var(--btn-size) - var(--outline-size));
border-radius: var(--btn-border-radius);
@@ -86,6 +87,25 @@
}
}
+ &:has(input[type=checkbox]) {
+ position: relative;
+
+ :is(input[type=checkbox]) {
+ appearance: none;
+ border-radius: var(--btn-border-radius);
+ cursor: pointer;
+ display: flex;
+ inset: 0;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ }
+
+ img.checked {
+ display: none;
+ }
+ }
+
&:has(input:checked) {
--btn-background: var(--color-ink);
--btn-color: var(--color-ink-reversed);
diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css
index 80155e028..69df04e2f 100644
--- a/app/assets/stylesheets/splats.css
+++ b/app/assets/stylesheets/splats.css
@@ -1,3 +1,7 @@
+:root {
+ --splat-size: 30vw;
+}
+
.windshield {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
@@ -10,9 +14,8 @@
.splat {
--hover-size: 0;
- --splat-color: red;
+ --splat-color: var(--color-ink);
--splat-rotate: 20deg;
- --splat-size: 30vw;
aspect-ratio: 1;
block-size: var(--splat-size);
@@ -25,6 +28,10 @@
> * {
grid-area: 1/1;
}
+
+ .splat__perma & {
+ --splat-size: 50cqi !important;
+ }
}
.splat__date {
diff --git a/app/controllers/splats_controller.rb b/app/controllers/splats_controller.rb
index 2ee68961a..787e98952 100644
--- a/app/controllers/splats_controller.rb
+++ b/app/controllers/splats_controller.rb
@@ -28,11 +28,11 @@ class SplatsController < ApplicationController
end
private
- def splat_params
- params.require(:splat).permit(:title, :body, :color)
- end
-
def set_splat
@splat = Splat.find(params[:id])
end
+
+ def splat_params
+ params.require(:splat).permit(:title, :body, :color, category_ids: [])
+ end
end
diff --git a/app/models/categorization.rb b/app/models/categorization.rb
new file mode 100644
index 000000000..ebf51a5df
--- /dev/null
+++ b/app/models/categorization.rb
@@ -0,0 +1,4 @@
+class Categorization < ApplicationRecord
+ belongs_to :splat
+ belongs_to :category
+end
diff --git a/app/models/category.rb b/app/models/category.rb
new file mode 100644
index 000000000..bd7a63a92
--- /dev/null
+++ b/app/models/category.rb
@@ -0,0 +1,4 @@
+class Category < ApplicationRecord
+ has_many :categorizations
+ has_many :splats, through: :categorizations
+end
diff --git a/app/models/splat.rb b/app/models/splat.rb
index 7415ccfab..46aea9375 100644
--- a/app/models/splat.rb
+++ b/app/models/splat.rb
@@ -1,6 +1,6 @@
class Splat < ApplicationRecord
- attribute :tag, :string
+ has_many :categorizations
+ has_many :categories, through: :categorizations, dependent: :destroy
enum :color, %w[ dodgerblue limegreen tomato mediumorchid ].index_by(&:itself), suffix: true, default: :dodgerblue
- enum :tag, %w[ Product UI Web Mobile Feature Support iOS Android ].index_by(&:itself), suffix: true
end
diff --git a/app/views/splats/_form.html.erb b/app/views/splats/_form.html.erb
index 238cdca21..a4bc3df66 100644
--- a/app/views/splats/_form.html.erb
+++ b/app/views/splats/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_with model: splat, class: "flex flex-column gap" do | form | %>
+<%= form_with model: splat, class: "flex flex-column gap full-width" do | form | %>
<%= form.label :title, class: "flex flex-column justify-start align-start" do %>
<%= form.text_field :title, class: "input full-width", required: true, placeholder: "Name it…" %>
<% end %>
@@ -18,13 +18,11 @@