From 00d5c59f727f64d1a6ce39fa46e5b3a7f6481f4d Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 24 Jul 2024 13:42:06 -0500 Subject: [PATCH] Categorize splats --- app/assets/stylesheets/buttons.css | 26 ++++++++++++++++--- app/assets/stylesheets/splats.css | 11 ++++++-- app/controllers/splats_controller.rb | 8 +++--- app/models/categorization.rb | 4 +++ app/models/category.rb | 4 +++ app/models/splat.rb | 4 +-- app/views/splats/_form.html.erb | 10 +++---- app/views/splats/_splat.html.erb | 11 ++++++++ app/views/splats/index.html.erb | 15 +++-------- app/views/splats/show.html.erb | 10 ++----- .../20240724161006_create_categories.rb | 9 +++++++ .../20240724163519_create_categorizations.rb | 10 +++++++ db/schema.rb | 24 ++++++++++++++++- test/fixtures/categories.yml | 7 +++++ test/fixtures/categorizations.yml | 17 ++++++++++++ test/models/categorization_test.rb | 7 +++++ test/models/category_test.rb | 7 +++++ 17 files changed, 147 insertions(+), 37 deletions(-) create mode 100644 app/models/categorization.rb create mode 100644 app/models/category.rb create mode 100644 app/views/splats/_splat.html.erb create mode 100644 db/migrate/20240724161006_create_categories.rb create mode 100644 db/migrate/20240724163519_create_categorizations.rb create mode 100644 test/fixtures/categories.yml create mode 100644 test/fixtures/categorizations.yml create mode 100644 test/models/categorization_test.rb create mode 100644 test/models/category_test.rb 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 @@
- Tag + Category
- <% Splat.tags.keys.each do | tag | %> - + <%= collection_check_boxes(:splat, :category_ids, Category.all, :id, :title) do | category | %> + <%= category.label(class: "btn txt-medium") { category.check_box + tag.span(category.text) } %> <% end %>