Jason Zimdars
907c5512e3
* main: Render tags and users in menu, filter them Don't add reserved bubble space to all columns in larger viewports Don't allow horizontal scrolling on the body element Fix the space reserved for bubbles in card columns
50 lines
6.6 KiB
Plaintext
50 lines
6.6 KiB
Plaintext
<nav class="align-start">
|
|
<header class="flex flex-inline flex-column center flex-shrink">
|
|
<div class="card-filter--collection flex-inline flex-column align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside keydown.esc->dialog#close">
|
|
<%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal shadow",
|
|
data: {
|
|
action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
|
|
controller: "hotkey" } do %>
|
|
<svg fill="none" height="275" viewBox="0 0 202 275" width="202" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="m201 258c0 11.159-44.772 16-100 16-55.2285 0-100-4.841-100-16s44.7715-16 100-16c55.228 0 100 4.841 100 16z" fill="var(--color-ink)" opacity=".08"/>
|
|
<path clip-rule="evenodd" d="m144.805 2.24222c2.294-1.843841 5.681-1.617368 7.696.56152 2.014 2.17904 1.917 5.51121-.174 7.57326l-.209.1953-.012.0117c-.009.0075-.022.0181-.039.0332-.035.0309-.087.078-.156.1397-.138.1235-.344.309-.614.5508-.54.484-1.336 1.1979-2.353 2.1152-2.033 1.835-4.952 4.4821-8.487 7.7256-7.073 6.4897-16.602 15.357-26.441 24.8759-2.543 2.4612-4.066 5.7749-4.269 9.2891-.383 6.654-.719 11.235-1.012 17.6885 27.89.2759 50.213 1.9831 62.831 3.1963l2.598.2558.018.002c7.816.8155 13.555 7.8838 12.741 15.4687l.001.001c-3.418 33.6092-7.351 63.0722-10.988 87.6142.005.178.001.359-.012.54-.03.417-.11.819-.228 1.203-3.37 24.477-6.469 42.647-8.652 56.28-2.231 13.914-13.656 24.673-28.256 25.45h-.011c-24.343 1.247-48.8273 1.346-73.2036.126l-2.3589-.122c-14.5946-.782-26.0187-11.539-28.2492-25.453-2.1836-13.632-5.2839-31.801-8.6543-56.276-.1189-.385-.1974-.789-.2278-1.208-.0133-.182-.0178-.363-.013-.542-3.6384-24.542-7.5712-54.004-10.9942-87.6112l.0009-.001c-.814-7.5854 4.9246-14.6542 12.7413-15.4697l.0179-.002c12.5608-1.2701 37.7453-3.3397 69.6834-3.4824.3004-6.6424.644-11.4215 1.0396-18.2793.3592-6.2258 3.0569-12.1147 7.5909-16.5019 9.93-9.6079 19.535-18.5451 26.654-25.0772 3.561-3.2672 6.504-5.93628 8.557-7.78905 1.027-.9262 1.831-1.64876 2.38-2.14063.274-.24594.485-.43526.628-.56249.07-.06313.124-.111.161-.14356.018-.01633.033-.02867.043-.03711.004-.00412.007-.00855.01-.01074l.003-.00195.001-.00098zm-43.801 180.81978c-19.4 0-36.6494.529-49.0474 1.058-5.7553.246-10.4622.491-13.8495.684 3.0876 22.131 5.9039 38.413 7.9281 51.05l.0726.422c1.6067 8.833 8.807 15.28 17.7176 15.757l2.319.12c22.4196 1.123 44.9546 1.111 67.4046.099l4.644-.225c9.05-.486 16.331-7.128 17.781-16.173 2.024-12.637 4.838-28.919 7.925-51.05-3.387-.193-8.094-.438-13.849-.684-12.398-.529-29.647-1.058-49.046-1.058zm-3.9481-99.0874c-31.2286.1604-55.8254 2.1836-68.0558 3.42-1.5771.1659-2.8714 1.698-2.7906 3.2392l.0119.1494.005.0489c3.2299 31.7109 6.9166 59.5089 10.3775 83.0379.0293-.002.0589-.003.0885-.005 3.4785-.201 8.5176-.468 14.7777-.735 11.3621-.485 26.7597-.968 44.1622-1.054-.0045-.387-.0095-.861-.015-1.42-.017-1.739-.0366-4.292-.0487-7.56-.0243-6.536-.0177-13.933.1084-25.385.1704-15.474.5585-32.713 1.3789-53.7364zm11.2131.0235c-.826 21.0519-1.215 38.3339-1.386 53.8319-.125 11.393-.133 18.735-.109 25.226.012 3.245.032 5.777.049 7.495.006.614.011 1.125.016 1.527 17.212.092 32.437.571 43.698 1.052 6.26.267 11.3.534 14.779.735.029.002.057.003.086.005 3.46-23.529 7.146-51.326 10.372-83.037l.005-.0498c.176-1.5891-1.149-3.2156-2.776-3.3886-11.793-1.1922-35.083-3.1168-64.734-3.3965z" fill="var(--color-ink)" fill-rule="evenodd"/>
|
|
<path d="m101.001 183.062c19.505 0 36.849.529 49.315 1.058 5.786.246 10.519.491 13.924.684-3.103 22.131-5.933 38.413-7.968 51.05-1.458 9.045-8.779 15.687-17.879 16.173l-4.669.225c-22.573 1.012-45.231 1.024-67.7731-.099l-2.3317-.12c-8.9591-.477-16.199-6.924-17.8145-15.757l-.073-.422c-2.0352-12.637-4.867-28.919-7.9714-51.05 3.4057-.193 8.1386-.438 13.9252-.684 12.4657-.529 29.8098-1.058 49.3155-1.058z" fill="#68abe9"/>
|
|
<path d="m56.6279 193.649c2.9632-.313 5.6326 1.728 6.0947 4.602l.0376.281.2601 2.344c1.2836 11.298 2.3362 16.481 4.1927 23.957.6454 2.598.9475 4.032 1.2977 5.222.0161.055.0326.106.0475.155.8538.102 2.113.162 4.2422.244 11.6052.444 23.1581.591 34.6066.001 3.073-.159 5.693 2.172 5.854 5.206.16 3.033-2.2 5.621-5.272 5.779-11.9181.615-23.8417.456-35.6199.005-2.1972-.084-4.2851-.159-5.9622-.427-1.7844-.284-3.9749-.903-5.7881-2.707-1.6614-1.653-2.3709-3.704-2.807-5.186-.4338-1.474-.8976-3.572-1.4193-5.673-1.9779-7.965-3.1089-13.606-4.441-25.321l-.269-2.427-.0238-.282c-.1652-2.905 2.0059-5.459 4.9692-5.773z" fill="var(--color-ink-inverted)" opacity=".15"/>
|
|
</svg>
|
|
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
|
|
<% end %>
|
|
|
|
<%= tag.dialog class:"fizzy-dialog filter popup popup--animated panel flex-column align-start fill-white",
|
|
data: {
|
|
action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
|
|
controller: "filter navigable-list",
|
|
dialog_target: "dialog",
|
|
navigable_list_focus_on_selection_value: false,
|
|
navigable_list_actionable_items_value: true } do %>
|
|
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
|
|
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
|
|
<%= render "events/filter/header" %>
|
|
<% if Current.user.collections.many? %>
|
|
<menu contents>
|
|
<%= render "cards/show/collections" %>
|
|
</menu>
|
|
<% end %>
|
|
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Tags</strong>
|
|
<div class="flex flex-column max-width popup__list full-width">
|
|
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
|
|
</div>
|
|
|
|
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">People</strong>
|
|
<div class="flex flex-column max-width popup__list full-width">
|
|
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
|
|
</div>
|
|
|
|
<% if platform.desktop? %>
|
|
<footer class="popup__footer txt-small txt-align-center full-width">
|
|
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
|
|
</footer>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</header>
|
|
</nav> |