diff --git a/Gemfile.lock b/Gemfile.lock index df65ec675..36d9f87f6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -345,7 +345,7 @@ GEM nio4r (~> 2.0) raabro (1.4.0) racc (1.8.1) - rack (3.1.15) + rack (3.1.16) rack-contrib (2.5.0) rack (< 4) rack-session (2.1.1) diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index a0a5385f9..d2cc8db94 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -131,16 +131,30 @@ --column-gap: 0.7ch; --panel-border-color: transparent; --panel-border-radius: 0.2em; - --panel-padding: 0.6em 1.2em 0.6em 0.6em; + --panel-padding: 0.6em; --panel-size: auto; margin: var(--inline-space); + overflow: clip; position: relative; - /* z-index: 1; */ @media (max-width: 639px) { --panel-size: 100%; } + + .card__collection { + background-color: transparent; + color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + font-size: 0.7em; + margin: calc(var(--panel-padding) * -0.5) 0 var(--panel-padding) var(--panel-padding); + padding: 0; + } + + .card__collection-name { + border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas)); + color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + margin: 0 0 0 calc(var(--inline-space) * 0.75); + } } .event--golden { @@ -194,6 +208,19 @@ text-transform: uppercase; } + .event__icon { + display: grid; + margin: -0.3em -0.3em auto auto; + place-content: center; + + .icon { + background-color: var(--card-color); + block-size: 1em; + inline-size: 1em; + grid-area: 1 / 1; + } + } + .event__timestamp { align-self: start; display: grid; @@ -207,21 +234,4 @@ font-size: 1.1em; line-height: 1.2; } - - .event__icon { - aspect-ratio: 1; - background-color: var(--card-color); - block-size: 1.7em; - border-radius: 1.7em; - inline-size: 1.7em; - display: grid; - place-content: center; - margin-inline-end: -0.75em; - - .icon { - block-size: 1.1em; - inline-size: 1.1em; - grid-area: 1 / 1; - } - } } diff --git a/app/assets/stylesheets/flash.css b/app/assets/stylesheets/flash.css index 8eaddb0aa..e94a1ce80 100644 --- a/app/assets/stylesheets/flash.css +++ b/app/assets/stylesheets/flash.css @@ -1,10 +1,11 @@ @layer components { .flash { display: flex; - inline-size: 100%; - inset: var(--block-space) auto auto auto; + inset-block-start: var(--block-space); + inset-inline-start: 50%; justify-content: center; position: fixed; + transform: translate(-50%); z-index: 6; } diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index 8715b8165..d7f442114 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -2,7 +2,6 @@ module AccessesHelper def access_menu_tag(collection, &) tag.menu class: [ "flex flex-column gap-half unpad margin-none txt-medium", { "toggler--toggled": collection.all_access? } ], data: { controller: "filter toggle-class", - filter_active_class: "filter--active", filter_selected_class: "selected", toggle_class_toggle_class: "toggler--toggled" }, & end diff --git a/app/helpers/entropy_helper.rb b/app/helpers/entropy_helper.rb index 2d7ed1c25..83fcf30be 100644 --- a/app/helpers/entropy_helper.rb +++ b/app/helpers/entropy_helper.rb @@ -1,6 +1,6 @@ module EntropyHelper def entropy_auto_close_options - [ 3, 7, 11, 30, 90, 365 ] + [ 3, 7, 30, 90, 365, 11 ] end def entropy_bubble_options_for(card) diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb index 3d1372252..6b4ffd47d 100644 --- a/app/helpers/events_helper.rb +++ b/app/helpers/events_helper.rb @@ -108,7 +108,7 @@ module EventsHelper when "card_assigned" "assigned" when "card_unassigned" - "remove-med" + "minus" when "card_staged" "bolt" when "card_unstaged" diff --git a/app/javascript/controllers/knob_controller.js b/app/javascript/controllers/knob_controller.js index 0ca225750..66b3e0d56 100644 --- a/app/javascript/controllers/knob_controller.js +++ b/app/javascript/controllers/knob_controller.js @@ -18,6 +18,7 @@ export default class extends Controller { set #index(index) { this.fieldTarget.style.setProperty("--knob-index", `${index}`); this.sliderTarget.value = index + this.#optionForIndex(index).checked = true } get #selectedOption() { @@ -26,10 +27,6 @@ export default class extends Controller { }) } - set #value(index) { - this.#optionForIndex(index).checked = true - } - #optionForIndex(index) { return this.optionTargets.find(option => { return option.dataset.index === index; diff --git a/app/views/accounts/_user.html.erb b/app/views/accounts/_user.html.erb index 2964451b5..123b2553e 100644 --- a/app/views/accounts/_user.html.erb +++ b/app/views/accounts/_user.html.erb @@ -1,4 +1,4 @@ -
+
  • <%= avatar_tag user, class: "flex-item-no-shrink" %> @@ -22,4 +22,4 @@ <%= icon_tag "minus" %> Remove <%= user.name %> from the account <% end %> -
    • + diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index cf8db2ff4..550715545 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -1,7 +1,14 @@
    People on the account <%= render "accounts/invite" %> -
    - <%= render partial: "accounts/user", collection: users %> + +
    +
    + +
    + +
    + <%= render partial: "accounts/user", collection: users %> +
    diff --git a/app/views/collections/_access_toggle.erb b/app/views/collections/_access_toggle.erb index 06609a1fe..066227fb6 100644 --- a/app/views/collections/_access_toggle.erb +++ b/app/views/collections/_access_toggle.erb @@ -1,4 +1,4 @@ -
  • +
  • <%= avatar_tag user %>
    diff --git a/app/views/collections/edit/_users.html.erb b/app/views/collections/edit/_users.html.erb index 926bfce21..36e75e2dd 100644 --- a/app/views/collections/edit/_users.html.erb +++ b/app/views/collections/edit/_users.html.erb @@ -21,11 +21,9 @@ - <% if User.active.count > 20 %> -
    - -
    - <% end %> +
    + +
    <%= access_toggles_for selected_users, selected: true %> diff --git a/app/views/events/event/_layout.html.erb b/app/views/events/event/_layout.html.erb index 7ac860790..0a3fd11f8 100644 --- a/app/views/events/event/_layout.html.erb +++ b/app/views/events/event/_layout.html.erb @@ -1,19 +1,18 @@ <%= link_to event.notifiable_target, - class: "event event--#{ event.action } #{ "event--golden" if event.card.golden? && card.doing? } panel center center-block flex-inline align-start justify-start gap position-relative", + class: "event event--#{ event.action } #{ "event--golden" if event.card.golden? && card.doing? } panel center center-block flex-inline align-start justify-start position-relative", style: "--card-color: #{ card.closed? ? "var(--color-card-complete)" : card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas)); color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); border: 1px solid color-mix(in srgb, var(--card-color) 20%, var(--color-canvas))", data: { related_element_target: "related", related_element_group_value: card.id, action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %> -
    - <%= avatar_image_tag(event.creator) %> -
    - -
    -
    - - <%= event_action_sentence(event) %> - +
    +
    +
    + <%= card.id %> + + <%= event.collection.name %> + +
    <% if event_column(event) == 2 %> @@ -22,8 +21,18 @@ <% end %>
    - <%= yield %> +
    +
    + <%= avatar_image_tag(event.creator) %> +
    - <%= card.id %> · <%= event.collection.name %> +
    + + <%= event_action_sentence(event) %> + + + <%= yield %> +
    +
    <% end %>