diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index ec90b8e58..86a4a86cb 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -92,29 +92,25 @@ display: none; } - .card__background { - .card:has(& img:not([src=""])) { - .card__content, - .card__meta, - .workflow-stage:not(.workflow-stage--current) { - opacity: 0; - transition: opacity 0.2s ease-in-out; + .card:has(.card__background img:not([src=""])) { + .card__content, + .card__meta, + .workflow-stage:not(.workflow-stage--current) { + opacity: 0; + transition: opacity 0.2s ease-in-out; - @media (any-hover: hover) { - .card:hover & { + @media (any-hover: hover) { + .card:hover & { opacity: 1; } - } } } + } - @media (any-hover: hover) { - .card:hover & { - img:not([src=""]) { - filter: blur(3px) brightness(1.2); - opacity: 0.2; - } - } + @media (any-hover: hover) { + .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) { + filter: blur(3px) brightness(1.2); + opacity: 0.2; } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 1f2c4b84b..1efff8c97 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -308,11 +308,11 @@ position: absolute; rotate: 5deg; transform-origin: top right; + } - .card:has(&), - .card-perma:has(&) { - --card-color: var(--color-card-complete) !important; - } + .card:has(.card__closed), + .card-perma:has(.card__closed) { + --card-color: var(--color-card-complete) !important; } .card__closed-title { diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index 5b621bbf9..c16447eaa 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -3,11 +3,14 @@ position: relative; view-transition-name: "filters"; z-index: var(--z-popup); + } - #header:has(&) { - position: relative; - z-index: var(--z-popup); - } + #header:has(.filters) { + position: relative; + z-index: var(--z-popup); + } + + .filters { .btn { --btn-border-color: var(--color-ink-medium); diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css index 2d5bc40a9..d8b5a2a43 100644 --- a/app/assets/stylesheets/header.css +++ b/app/assets/stylesheets/header.css @@ -14,7 +14,6 @@ "actions-start title actions-end"; max-inline-size: 100dvw; padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--main-padding); - view-transition-name: header; /* Change the grid size depending on how many buttons are present */ &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; } diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 1a9afd70a..e0ca57536 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -60,13 +60,11 @@ cursor: pointer; opacity: 0; } + } - &:focus, - &:focus-visible { - .input--file:has(&) { - outline: 0.15rem solid var(--color-selected-dark); - } - } + &:has(input[type="file"]:focus), + &:has(input[type="file"]:focus-visible) { + outline: 0.15rem solid var(--color-selected-dark); } &:is(.avatar) { diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index e9c3bcbaf..186bfa53e 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -31,16 +31,16 @@ --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); } - #header:has(&) { - position: relative; - z-index: var(--z-nav); - } - .card & { inline-size: 260px; } } + #header:has(.popup) { + position: relative; + z-index: var(--z-nav); + } + .popup__footer { background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index b5ca20116..f1e0fc6d4 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -50,11 +50,12 @@ margin-inline: auto; max-block-size: 32rem; object-fit: contain; + } - /* Links should hug media contained within */ - a:has(&) { - display: inline-block; - } + /* Links should hug media contained within */ + a:has(img), + a:has(video) { + display: inline-block; } /* Avoid extra space due to empty paragraphs */ diff --git a/app/controllers/cards_controller.rb b/app/controllers/cards_controller.rb index 8c7af5074..f440fba85 100644 --- a/app/controllers/cards_controller.rb +++ b/app/controllers/cards_controller.rb @@ -8,7 +8,7 @@ class CardsController < ApplicationController enable_collection_filtering only: :index - PAGE_SIZE = 50 + PAGE_SIZE = 25 def index @considering = page_and_filter_for @filter.with(engagement_status: "considering"), per_page: PAGE_SIZE diff --git a/app/controllers/my/menus_controller.rb b/app/controllers/my/menus_controller.rb new file mode 100644 index 000000000..a81705df3 --- /dev/null +++ b/app/controllers/my/menus_controller.rb @@ -0,0 +1,7 @@ +class My::MenusController < ApplicationController + include FilterScoped + + def show + fresh_when @user_filtering + end +end diff --git a/app/helpers/time_helper.rb b/app/helpers/time_helper.rb index 99ece604c..53fa055b5 100644 --- a/app/helpers/time_helper.rb +++ b/app/helpers/time_helper.rb @@ -1,6 +1,6 @@ module TimeHelper def local_datetime_tag(datetime, style: :time, **attributes) # Render empty space to ensure it takes height until the local time is loaded via JS - tag.time " ".html_safe, **attributes, datetime: datetime.iso8601, data: { local_time_target: style, action: "turbo:morph-element->local-time#refreshTarget" } + tag.time " ".html_safe, **attributes, datetime: datetime.to_i, data: { local_time_target: style, action: "turbo:morph-element->local-time#refreshTarget" } end end diff --git a/app/javascript/controllers/local_time_controller.js b/app/javascript/controllers/local_time_controller.js index 69693a107..d38420332 100644 --- a/app/javascript/controllers/local_time_controller.js +++ b/app/javascript/controllers/local_time_controller.js @@ -1,5 +1,5 @@ import { Controller } from "@hotwired/stimulus" -import { differenceInDays } from "helpers/date_helpers" +import { differenceInDays, secondsToDate } from "helpers/date_helpers" const DEFAULT_LOCALE = "en-US" @@ -89,7 +89,7 @@ export default class extends Controller { } #formatTime(formatter, target) { - const dt = new Date(target.getAttribute("datetime")) + const dt = secondsToDate(parseInt(target.getAttribute("datetime"))) target.innerHTML = formatter.format(dt) target.title = this.datetimeFormatter.format(dt) } diff --git a/app/javascript/helpers/date_helpers.js b/app/javascript/helpers/date_helpers.js index 529b2968e..b8d9855f4 100644 --- a/app/javascript/helpers/date_helpers.js +++ b/app/javascript/helpers/date_helpers.js @@ -9,3 +9,7 @@ export function signedDifferenceInDays(fromDate, toDate) { export function beginningOfDay(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()) } + +export function secondsToDate(seconds) { + return new Date(seconds * 1000) +} diff --git a/app/views/filters/_menu.html.erb b/app/views/filters/_menu.html.erb index ec8920940..8c34c4841 100644 --- a/app/views/filters/_menu.html.erb +++ b/app/views/filters/_menu.html.erb @@ -1,43 +1,13 @@ -<% cache user_filtering do %> - diff --git a/app/views/my/menus/show.html.erb b/app/views/my/menus/show.html.erb new file mode 100644 index 000000000..05a50c290 --- /dev/null +++ b/app/views/my/menus/show.html.erb @@ -0,0 +1,31 @@ +<%= turbo_frame_tag "my_menu", target: "_top" do %> +
+ <%= text_field_tag :search, nil, + type: "search", + role: "combobox", + placeholder: "Filter…", + class: "input input--transparent txt-small", + autofocus: true, + autocorrect: "off", + autocomplete: "off", + aria: { activedescendant: "" }, + data: { + "1p-ignore": "true", + filter_target: "input", + navigable_list_target: "input", + action: "input->filter#filter" } %> + +
+ + <%= render "filters/menu/hotkeys" %> + <%= render "filters/menu/custom", user_filtering: @user_filtering %> + <%= render "filters/menu/collections", user_filtering: @user_filtering %> + <%= render "filters/menu/tags", user_filtering: @user_filtering %> + <%= render "filters/menu/users", user_filtering: @user_filtering %> + <%= render "filters/menu/places", user_filtering: @user_filtering %> + + <%= render "filters/menu/shortcut_notice" %> +<% end %> diff --git a/config/routes.rb b/config/routes.rb index 147027b82..505bcf240 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -124,6 +124,7 @@ Rails.application.routes.draw do namespace :my do resources :pins resource :timezone + resource :menu end namespace :prompts do