diff --git a/Gemfile b/Gemfile index 76e597abd..1699e8a74 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/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index e327e8150..932efb262 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; @@ -119,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; + & { @@ -284,6 +283,10 @@ inset: 0; position: absolute; z-index: -1; + + .windshield & { + z-index: 1; + } } .bubble__perma { @@ -292,15 +295,22 @@ max-inline-size: 100%; } -.bubble__tags{ +.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/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/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; 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/comments.css b/app/assets/stylesheets/comments.css index 3d61ff712..cea321310 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,21 @@ } } +.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; + min-block-size: calc(3lh + (2 * var(--comment-padding-block))); + } +} + .comment--mine { flex-direction: row-reverse; margin-inline: auto 0; @@ -64,17 +75,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 +91,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/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/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/_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/_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 %> 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 %>
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 %> + +
+ +
+ +
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/comments/_new.html.erb b/app/views/comments/_new.html.erb index b3e65fd87..c95c3fdf3 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.markdown_area :body, class: "input border border-radius", required: true, placeholder: new_comment_placeholder(bubble) %> - <%= form.button class: "btn btn--reversed center" do %> + <%= form.markdown_area :body, class: "input comment__input", required: true, 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 %> 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 %>