From 2465de186fd8277fc0c635a6108df17847637226 Mon Sep 17 00:00:00 2001 From: Mike Dalessio Date: Wed, 4 Dec 2024 17:35:05 -0500 Subject: [PATCH 01/12] dep: bump rails to edge --- Gemfile | 2 +- Gemfile.lock | 185 ++++++++++++++++++++++++++------------------------- 2 files changed, 96 insertions(+), 91 deletions(-) diff --git a/Gemfile b/Gemfile index c70e1eb17..785e0dac9 100644 --- a/Gemfile +++ b/Gemfile @@ -1,7 +1,7 @@ source "https://rubygems.org" ruby file: ".ruby-version" -gem "rails", ">= 8.0.0.rc1" +gem "rails", github: "rails/rails", branch: "main" # Assets & front end gem "importmap-rails" diff --git a/Gemfile.lock b/Gemfile.lock index fccbac836..07f589da6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -9,32 +9,34 @@ GIT stimulus-rails (>= 1.2) turbo-rails (>= 1.2) -GEM - remote: https://rubygems.org/ +GIT + remote: https://github.com/rails/rails.git + revision: 91d456366638ac6c3f6dec38670c8ada5e7c69b1 + branch: main specs: - actioncable (8.0.0.rc1) - actionpack (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + actioncable (8.1.0.alpha) + actionpack (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) nio4r (~> 2.0) websocket-driver (>= 0.6.1) zeitwerk (~> 2.6) - actionmailbox (8.0.0.rc1) - actionpack (= 8.0.0.rc1) - activejob (= 8.0.0.rc1) - activerecord (= 8.0.0.rc1) - activestorage (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + actionmailbox (8.1.0.alpha) + actionpack (= 8.1.0.alpha) + activejob (= 8.1.0.alpha) + activerecord (= 8.1.0.alpha) + activestorage (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) mail (>= 2.8.0) - actionmailer (8.0.0.rc1) - actionpack (= 8.0.0.rc1) - actionview (= 8.0.0.rc1) - activejob (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + actionmailer (8.1.0.alpha) + actionpack (= 8.1.0.alpha) + actionview (= 8.1.0.alpha) + activejob (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) mail (>= 2.8.0) rails-dom-testing (~> 2.2) - actionpack (8.0.0.rc1) - actionview (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + actionpack (8.1.0.alpha) + actionview (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) nokogiri (>= 1.8.5) rack (>= 2.2.4) rack-session (>= 1.0.1) @@ -42,35 +44,35 @@ GEM rails-dom-testing (~> 2.2) rails-html-sanitizer (~> 1.6) useragent (~> 0.16) - actiontext (8.0.0.rc1) - actionpack (= 8.0.0.rc1) - activerecord (= 8.0.0.rc1) - activestorage (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + actiontext (8.1.0.alpha) + actionpack (= 8.1.0.alpha) + activerecord (= 8.1.0.alpha) + activestorage (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) globalid (>= 0.6.0) nokogiri (>= 1.8.5) - actionview (8.0.0.rc1) - activesupport (= 8.0.0.rc1) + actionview (8.1.0.alpha) + activesupport (= 8.1.0.alpha) builder (~> 3.1) erubi (~> 1.11) rails-dom-testing (~> 2.2) rails-html-sanitizer (~> 1.6) - activejob (8.0.0.rc1) - activesupport (= 8.0.0.rc1) + activejob (8.1.0.alpha) + activesupport (= 8.1.0.alpha) globalid (>= 0.3.6) - activemodel (8.0.0.rc1) - activesupport (= 8.0.0.rc1) - activerecord (8.0.0.rc1) - activemodel (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + activemodel (8.1.0.alpha) + activesupport (= 8.1.0.alpha) + activerecord (8.1.0.alpha) + activemodel (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) timeout (>= 0.4.0) - activestorage (8.0.0.rc1) - actionpack (= 8.0.0.rc1) - activejob (= 8.0.0.rc1) - activerecord (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) + activestorage (8.1.0.alpha) + actionpack (= 8.1.0.alpha) + activejob (= 8.1.0.alpha) + activerecord (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) marcel (~> 1.0) - activesupport (8.0.0.rc1) + activesupport (8.1.0.alpha) base64 benchmark (>= 0.3) bigdecimal @@ -83,12 +85,38 @@ GEM securerandom (>= 0.3) tzinfo (~> 2.0, >= 2.0.5) uri (>= 0.13.1) + rails (8.1.0.alpha) + actioncable (= 8.1.0.alpha) + actionmailbox (= 8.1.0.alpha) + actionmailer (= 8.1.0.alpha) + actionpack (= 8.1.0.alpha) + actiontext (= 8.1.0.alpha) + actionview (= 8.1.0.alpha) + activejob (= 8.1.0.alpha) + activemodel (= 8.1.0.alpha) + activerecord (= 8.1.0.alpha) + activestorage (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) + bundler (>= 1.15.0) + railties (= 8.1.0.alpha) + railties (8.1.0.alpha) + actionpack (= 8.1.0.alpha) + activesupport (= 8.1.0.alpha) + irb (~> 1.13) + rackup (>= 1.0.0) + rake (>= 12.2) + thor (~> 1.0, >= 1.2.2) + zeitwerk (~> 2.6) + +GEM + remote: https://rubygems.org/ + specs: addressable (2.8.7) public_suffix (>= 2.0.2, < 7.0) ast (2.4.2) base64 (0.2.0) bcrypt (3.1.20) - benchmark (0.3.0) + benchmark (0.4.0) bigdecimal (3.1.8) bootsnap (1.18.4) msgpack (~> 1.2) @@ -108,7 +136,7 @@ GEM concurrent-ruby (1.3.4) connection_pool (2.4.1) crass (1.0.6) - date (3.3.4) + date (3.4.1) debug (1.9.2) irb (~> 1.10) reline (>= 0.3.8) @@ -122,14 +150,14 @@ GEM actionpack (>= 6.0.0) activesupport (>= 6.0.0) railties (>= 6.0.0) - io-console (0.7.2) + io-console (0.8.0) irb (1.14.1) rdoc (>= 4.0.0) reline (>= 0.4.2) json (2.7.2) language_server-protocol (3.17.0.3) - logger (1.6.1) - loofah (2.22.0) + logger (1.6.2) + loofah (2.23.1) crass (~> 1.0.2) nokogiri (>= 1.12.0) mail (2.8.1) @@ -140,9 +168,9 @@ GEM marcel (1.0.4) matrix (0.4.2) mini_mime (1.1.5) - minitest (5.25.1) + minitest (5.25.4) msgpack (1.7.3) - net-imap (0.5.0) + net-imap (0.5.1) date net-protocol net-pop (0.1.2) @@ -151,18 +179,18 @@ GEM timeout net-smtp (0.5.0) net-protocol - nio4r (2.7.3) - nokogiri (1.16.7-aarch64-linux) + nio4r (2.7.4) + nokogiri (1.16.8-aarch64-linux) racc (~> 1.4) - nokogiri (1.16.7-arm-linux) + nokogiri (1.16.8-arm-linux) racc (~> 1.4) - nokogiri (1.16.7-arm64-darwin) + nokogiri (1.16.8-arm64-darwin) racc (~> 1.4) - nokogiri (1.16.7-x86-linux) + nokogiri (1.16.8-x86-linux) racc (~> 1.4) - nokogiri (1.16.7-x86_64-darwin) + nokogiri (1.16.8-x86_64-darwin) racc (~> 1.4) - nokogiri (1.16.7-x86_64-linux) + nokogiri (1.16.8-x86_64-linux) racc (~> 1.4) parallel (1.26.3) parser (3.3.5.0) @@ -176,7 +204,8 @@ GEM activesupport (>= 7.0.0) rack railties (>= 7.0.0) - psych (5.1.2) + psych (5.2.1) + date stringio public_suffix (6.0.1) puma (6.4.3) @@ -187,44 +216,21 @@ GEM rack (>= 3.0.0) rack-test (2.1.0) rack (>= 1.3) - rackup (2.1.0) + rackup (2.2.1) rack (>= 3) - webrick (~> 1.8) - rails (8.0.0.rc1) - actioncable (= 8.0.0.rc1) - actionmailbox (= 8.0.0.rc1) - actionmailer (= 8.0.0.rc1) - actionpack (= 8.0.0.rc1) - actiontext (= 8.0.0.rc1) - actionview (= 8.0.0.rc1) - activejob (= 8.0.0.rc1) - activemodel (= 8.0.0.rc1) - activerecord (= 8.0.0.rc1) - activestorage (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) - bundler (>= 1.15.0) - railties (= 8.0.0.rc1) rails-dom-testing (2.2.0) activesupport (>= 5.0.0) minitest nokogiri (>= 1.6) - rails-html-sanitizer (1.6.0) + rails-html-sanitizer (1.6.1) loofah (~> 2.21) - nokogiri (~> 1.14) - railties (8.0.0.rc1) - actionpack (= 8.0.0.rc1) - activesupport (= 8.0.0.rc1) - irb (~> 1.13) - rackup (>= 1.0.0) - rake (>= 12.2) - thor (~> 1.0, >= 1.2.2) - zeitwerk (~> 2.6) + nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0) rainbow (3.1.1) rake (13.2.1) - rdoc (6.7.0) + rdoc (6.8.1) psych (>= 4.0.0) regexp_parser (2.9.2) - reline (0.5.10) + reline (0.5.12) io-console (~> 0.5) rexml (3.3.8) rqrcode (2.2.0) @@ -261,7 +267,7 @@ GEM rubocop-rails ruby-progressbar (1.13.0) rubyzip (2.3.2) - securerandom (0.3.1) + securerandom (0.4.0) selenium-webdriver (4.25.0) base64 (~> 0.2) logger (~> 1.4) @@ -286,23 +292,22 @@ GEM sqlite3 (2.1.0-x86_64-linux-musl) stimulus-rails (1.3.4) railties (>= 6.0.0) - stringio (3.1.1) + stringio (3.1.2) thor (1.3.2) thruster (0.1.8) thruster (0.1.8-aarch64-linux) thruster (0.1.8-arm64-darwin) thruster (0.1.8-x86_64-darwin) thruster (0.1.8-x86_64-linux) - timeout (0.4.1) + timeout (0.4.2) turbo-rails (2.0.11) actionpack (>= 6.0.0) railties (>= 6.0.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) unicode-display_width (2.6.0) - uri (0.13.1) - useragent (0.16.10) - webrick (1.8.2) + uri (1.0.2) + useragent (0.16.11) websocket (1.2.11) websocket-driver (0.7.6) websocket-extensions (>= 0.1.0) @@ -337,7 +342,7 @@ DEPENDENCIES importmap-rails propshaft puma (>= 5.0) - rails (>= 8.0.0.rc1) + rails! rqrcode rubocop-rails-omakase selenium-webdriver @@ -352,4 +357,4 @@ RUBY VERSION ruby 3.3.5p100 BUNDLED WITH - 2.5.21 + 2.5.23 From a95aa1ea97c808d0f068c2d82411d51b1c25d541 Mon Sep 17 00:00:00 2001 From: Mike Dalessio Date: Wed, 4 Dec 2024 17:42:38 -0500 Subject: [PATCH 02/12] dep: bump rexml to address dependabot alert - https://github.com/basecamp/fizzy/security/dependabot/8 - https://www.ruby-lang.org/en/news/2024/10/28/redos-rexml-cve-2024-49761/ --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index 07f589da6..028c374e8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -232,7 +232,7 @@ GEM regexp_parser (2.9.2) reline (0.5.12) io-console (~> 0.5) - rexml (3.3.8) + rexml (3.3.9) rqrcode (2.2.0) chunky_png (~> 1.0) rqrcode_core (~> 1.0) From 792a862e9fef6c19717f11d0012a05e1a88e7b4b Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 2 Dec 2024 14:34:44 -0600 Subject: [PATCH 03/12] Fix that bubbles could collapse in some situations --- app/assets/stylesheets/bubbles.css | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index e327e8150..4e7e9935c 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -29,7 +29,6 @@ color: var(--bubble-color, currentColor); container-type: inline-size; display: grid; - max-inline-size: 100%; place-items: center; position: relative; transition: 0.2s ease; From a8e24ffdda69121846bb8a20f157adefa6faf30b Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 2 Dec 2024 16:31:16 -0600 Subject: [PATCH 04/12] Adjust position now that bubbles won't be so vertical --- app/assets/stylesheets/bubbles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 4e7e9935c..9b3a42b16 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -118,7 +118,7 @@ &.bubble__assignee { aspect-ratio: 1; font-size: 4.5cqi; - inset: 6cqb auto auto -2cqi; + inset: 6cqb auto auto -5cqi; padding: 0.2em; + & { From 259bb4d8c311167a75883cc630135b677f13b9c6 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 4 Dec 2024 17:26:30 -0600 Subject: [PATCH 05/12] Style pop-up UI for selecting assignments and tags --- app/assets/stylesheets/comboboxes.css | 40 ++++++++++++++++--- app/assets/stylesheets/panels.css | 2 +- app/views/bubbles/_color.html.erb | 2 +- .../bubbles/sidebar/_assignment.html.erb | 27 ++++++++----- app/views/bubbles/sidebar/_tag.html.erb | 27 ++++++++----- 5 files changed, 73 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/comboboxes.css b/app/assets/stylesheets/comboboxes.css index 5c474ea59..78758c989 100644 --- a/app/assets/stylesheets/comboboxes.css +++ b/app/assets/stylesheets/comboboxes.css @@ -9,12 +9,42 @@ turbo-frame { display: inline; } +} - .hw-combobox__main__wrapper { - background-color: var(--color-ink-reversed); - } +.hw-combobox__input { + --hover-size: 0; - .hw-combobox__input { - background-color: var(--color-ink-reversed); + min-inline-size: 15ch; + padding: 0 calc(var(--hw-handle-offset-right) * 2) 0 0; +} + +.hw-combobox__main__wrapper { + --hw-combobox-width: auto; + + accent-color: var(--input-accent-color, var(--color-ink)); + background-color: var(--input-background, transparent); + border-radius: var(--input-border-radius, 0.5em); + border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark)); + color: var(--input-color, var(--color-ink)); + font-size: max(16px, 1em); + line-height: inherit; + padding: var(--input-padding, 0.2em 0.6em); +} + +.combox-popup { + --panel-border-color: var(--bubble-color); + --panel-border-radius: 2em; + --panel-border-size: 2px; + --panel-padding: 0.4em 1em; + --panel-size: auto; + + inline-size: auto !important; + inset: -2px auto auto 0; + max-inline-size: var(--panel-size) !important; + position: absolute; + z-index: 2; + + &[open] { + display: flex; } } diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css index edc47b9cd..5109cab91 100644 --- a/app/assets/stylesheets/panels.css +++ b/app/assets/stylesheets/panels.css @@ -1,6 +1,6 @@ .panel { background-color: var(--color-bg); - border: 1px solid var(--panel-border-color, var(--color-subtle)); + border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle)); color: var(--color-ink); border-radius: var(--panel-border-radius, 1em); inline-size: var(--panel-size, 60ch); diff --git a/app/views/bubbles/_color.html.erb b/app/views/bubbles/_color.html.erb index 7a55c281b..9239d1ada 100644 --- a/app/views/bubbles/_color.html.erb +++ b/app/views/bubbles/_color.html.erb @@ -1,5 +1,5 @@
- diff --git a/app/views/bubbles/sidebar/_assignment.html.erb b/app/views/bubbles/sidebar/_assignment.html.erb index 2236cb639..fa858aa99 100644 --- a/app/views/bubbles/sidebar/_assignment.html.erb +++ b/app/views/bubbles/sidebar/_assignment.html.erb @@ -1,12 +1,21 @@ -
- +
+
+ - <%= form_with url: bucket_bubble_assignment_toggles_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %> - <%= form.combobox :assignee_id, users, required: true, - render_in: { partial: "bubbles/users/listbox_option", as: :user, locals: { bubble: bubble } }, - data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %> - <% end %> -
+ + <%= form_with url: bucket_bubble_assignment_toggles_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %> + <%= form.combobox :assignee_id, users, required: true, + render_in: { partial: "bubbles/users/listbox_option", as: :user, locals: { bubble: bubble } }, + data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %> + <% end %> + +
+ +
+ +
diff --git a/app/views/bubbles/sidebar/_tag.html.erb b/app/views/bubbles/sidebar/_tag.html.erb index c367be378..c292733ef 100644 --- a/app/views/bubbles/sidebar/_tag.html.erb +++ b/app/views/bubbles/sidebar/_tag.html.erb @@ -1,12 +1,21 @@ -
- +
+
+ - <%= form_with url: bucket_bubble_tagging_toggles_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %> - <%= form.combobox :tag_id, tags, required: true, name_when_new: "tag_title", - render_in: { partial: "bubbles/tags/listbox_option", as: :tag, locals: { bubble: bubble } }, - data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %> - <% end %> -
+ + <%= form_with url: bucket_bubble_tagging_toggles_path(bubble.bucket, bubble), class: "min-width", data: { controller: "form" } do |form| %> + <%= form.combobox :tag_id, tags, required: true, name_when_new: "tag_title", + render_in: { partial: "bubbles/tags/listbox_option", as: :tag, locals: { bubble: bubble } }, + data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %> + <% end %> + +
+ +
+ + From 245e2ea3bd6853f6c2b951d6cfd409c33ae6d69e Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 4 Dec 2024 17:42:47 -0600 Subject: [PATCH 06/12] Ensure tags don't affect the bubble shape or spill out of the container --- app/assets/stylesheets/bubbles.css | 7 +++++++ app/assets/stylesheets/utilities.css | 4 ++-- app/views/bubbles/_bubble.html.erb | 2 +- app/views/bubbles/_tags.html.erb | 6 ++++-- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 9b3a42b16..148384d85 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -292,14 +292,21 @@ } .bubble__tags{ + --row-gap: 0; + font-size: var(--text-small); margin-block-start: 0.3cqb; + max-inline-size: 75cqi; .bubble__perma & { font-size: var(--text-medium); } } +.bubble__tag { + max-inline-size: 75cqi; +} + .bubble__title { -webkit-line-clamp: var(--lines, 5); -webkit-box-orient: vertical; diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 61aab22a4..60de39c8d 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -69,8 +69,8 @@ } .gap-half { - column-gap: var(--inline-space-half); - row-gap: var(--block-space-half); + column-gap: var(--column-gap, var(--inline-space-half)); + row-gap: var(--row-gap, var(--block-space-half)); } /* Sizing */ diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb index 0078e865d..09d680c94 100644 --- a/app/views/bubbles/_bubble.html.erb +++ b/app/views/bubbles/_bubble.html.erb @@ -11,7 +11,7 @@ <% end %> -
+
<%= render "bubbles/tags", bubble: bubble %>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb index 1783d87f3..c38e63103 100644 --- a/app/views/bubbles/_tags.html.erb +++ b/app/views/bubbles/_tags.html.erb @@ -1,4 +1,6 @@ <% bubble.tags.each do |tag| %> - <%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])), - class: "btn btn--plain fill-transparent", style: "color: #{bubble.color}" %> + <%= link_to bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])), + class: "bubble__tag btn btn--plain fill-transparent min-width", style: "color: #{bubble.color}" do %> + <%= tag.hashtag %> + <% end %> <% end %> From 23b936010f6e64d1cae40518b87e8ef98c6381a0 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 4 Dec 2024 17:58:14 -0600 Subject: [PATCH 07/12] Deal with truncation in the list layout, too --- app/assets/stylesheets/bubbles.css | 2 +- app/views/bubbles/list/_bubble.html.erb | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 148384d85..737d522fa 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -291,7 +291,7 @@ max-inline-size: 100%; } -.bubble__tags{ +.bubble__tags { --row-gap: 0; font-size: var(--text-small); diff --git a/app/views/bubbles/list/_bubble.html.erb b/app/views/bubbles/list/_bubble.html.erb index fe135da9f..cb514292c 100644 --- a/app/views/bubbles/list/_bubble.html.erb +++ b/app/views/bubbles/list/_bubble.html.erb @@ -2,12 +2,12 @@ data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
-
+
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap min-width" do %> <%= bubble.title %> <% end %> -
+
<%= render "bubbles/tags", bubble: bubble %>
From c84e1b4685bcbbfda93679767a17fe2fdda693b7 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 5 Dec 2024 11:46:33 -0600 Subject: [PATCH 08/12] Ensure bubbles are clickable anyplace in windshield --- app/assets/stylesheets/bubbles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 737d522fa..932efb262 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -283,6 +283,10 @@ inset: 0; position: absolute; z-index: -1; + + .windshield & { + z-index: 1; + } } .bubble__perma { From e2372fae93d4ddb54119800c6adbdf1cfa92bf06 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 5 Dec 2024 15:39:48 -0600 Subject: [PATCH 09/12] Same style as combobox pop-ups --- app/assets/stylesheets/colors.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css index caa52e4fa..0be8c4ee4 100644 --- a/app/assets/stylesheets/colors.css +++ b/app/assets/stylesheets/colors.css @@ -65,7 +65,9 @@ } .color-picker { + --panel-border-color: var(--bubble-color); --panel-border-radius: 2em; + --panel-border-size: 2px; --panel-padding: 0.5em 0.7em; --panel-size: auto; From 4d383c7a772389165bb98e93aebad2e09d8cb31b Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 6 Dec 2024 17:01:25 -0600 Subject: [PATCH 10/12] Improve comment form design --- app/assets/stylesheets/comments.css | 35 ++++++++++++++++------------- app/views/comments/_new.html.erb | 15 +++++-------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 3d61ff712..80440f4c5 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -15,10 +15,6 @@ max-inline-size: 66ch; margin-block: var(--comment-padding-block); margin-inline: 0 auto; - - textarea { - padding: var(--comment-padding-block) var(--comment-padding-inline); - } } .comment__avatar { @@ -57,6 +53,22 @@ } } +.comment__input { + --input-border-color: var(--color-subtle); + + line-height: inherit; + min-block-size: calc(4lh + (2 * var(--comment-padding-block))); + min-inline-size: 100%; + padding-block: var(--comment-padding-block); + padding-inline: calc(var(--comment-padding-inline) + calc((1lh - 1ex) / 2)); + + @supports (field-sizing: content) { + field-sizing: content; + max-block-size: calc(5lh + (2 * var(--comment-padding-block))); + min-block-size: calc(3lh + (2 * var(--comment-padding-block))); + } +} + .comment--mine { flex-direction: row-reverse; margin-inline: auto 0; @@ -64,17 +76,11 @@ .comment__author { flex-direction: row-reverse; } +} - .input { - &::placeholder { - color: var(--color-ink); - opacity: 0.5; - } - - &::selection { - background-color: var(--color-selected-dark); - } - } +.comment__submit { + position: absolute; + inset: auto 0.5em 0.5em auto; } .comment__timestamp { @@ -86,6 +92,5 @@ color: var(--bubble-color); font-weight: 600; gap: 0.5ch; - /* margin-block: calc(var(--comment-padding-block) * -1); */ padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline); } diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb index 3a8073403..b24034dd8 100644 --- a/app/views/comments/_new.html.erb +++ b/app/views/comments/_new.html.erb @@ -1,14 +1,9 @@ -
-
<%= Current.user.initials %>
- -
-
- <%= Current.user.name %> -
-
+
+
+
<%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width", data: { controller: "form", action: "keydown.meta+enter->form#submit" } do |form| %> - <%= form.text_area :body, class: "input border border-radius", required: true, rows: 4, placeholder: new_comment_placeholder(bubble) %> - <%= form.button class: "btn btn--reversed center" do %> + <%= form.text_area :body, class: "input comment__input", required: true, rows: 3, placeholder: new_comment_placeholder(bubble) %> + <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-end txt-small" do %> <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %> Save <% end %> From 12927292267ece8659cbdae9ffd81550487ec2a5 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 6 Dec 2024 17:05:12 -0600 Subject: [PATCH 11/12] Actually, no need for a max-size, just let it grow --- app/assets/stylesheets/comments.css | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 80440f4c5..cea321310 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -64,7 +64,6 @@ @supports (field-sizing: content) { field-sizing: content; - max-block-size: calc(5lh + (2 * var(--comment-padding-block))); min-block-size: calc(3lh + (2 * var(--comment-padding-block))); } } From f8f320d76c3f0f2319515fba5b34d92c8047eadd Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 6 Dec 2024 17:21:34 -0600 Subject: [PATCH 12/12] Adjust position of settings buttons --- app/assets/stylesheets/buckets.css | 5 ++--- app/views/buckets/_bucket.html.erb | 6 +++--- app/views/filters/_filter.html.erb | 4 ++-- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/buckets.css b/app/assets/stylesheets/buckets.css index 976f305d5..eb412bf7a 100644 --- a/app/assets/stylesheets/buckets.css +++ b/app/assets/stylesheets/buckets.css @@ -19,10 +19,9 @@ padding: var(--gap); } -.bucket__edit-btn { +.bucket__button { position: absolute; - inset-block-end: 0; - inset-inline-end: 0; + inset: calc((var(--btn-size) * -1) - 2cqi) 1cqi auto auto; } .bucket__windshield { diff --git a/app/views/buckets/_bucket.html.erb b/app/views/buckets/_bucket.html.erb index ac6c37231..e0893f351 100644 --- a/app/views/buckets/_bucket.html.erb +++ b/app/views/buckets/_bucket.html.erb @@ -1,5 +1,5 @@ <% cache bucket do %> -
  • +
  • <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "border border-radius margin-block-end-half windshield__container flex justify-center align-center position-relative" do %>
    <% bucket.bubbles.ordered_by_activity.limit(10).each do |bubble| %> @@ -10,12 +10,12 @@
    <% end %> -
    +
    <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "txt-ink flex flex-column" do %> <%= bucket.name %> <% end %> - <%= link_to edit_bucket_path(bucket), class: "btn txt-small" do %> + <%= link_to edit_bucket_path(bucket), class: "btn txt-small bucket__button" do %> <%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %> Settings for <%= bucket.name %> <% end %> diff --git a/app/views/filters/_filter.html.erb b/app/views/filters/_filter.html.erb index fbbfca942..b19b749ea 100644 --- a/app/views/filters/_filter.html.erb +++ b/app/views/filters/_filter.html.erb @@ -10,11 +10,11 @@
    <% end %> -
    +
    <%= link_to bubbles_path(**filter.to_params), class: "txt-ink" do %> <%= image_tag "filter.svg", aria: { hidden: true }, size: 30, class: "flex-inline", style: "vertical-align: bottom" %> <%= filter.summary %> <% end %> - <%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %> + <%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative bucket__button", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %> <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %> Delete <% end %>