bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide keyboard shortcuts on touch devices

Browse Source
This commit is contained in:
Jason Zimdars
2025-11-04 16:34:28 -06:00
parent 1c5abbae2f
commit 08df019ce6
7 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/utilities.css
+14
View File
@@ -233,4 +233,18 @@
.hide-focus-ring {
--focus-ring-size: 0;
}
.hide-on-touch {
@media (any-hover: none) {
display: none;
}
}
.show-on-touch {
display: none;
@media (any-hover: none) {
display: unset;
}
}
}
app/views/bar/_bar.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="flex justify-center bar__placeholder" data-bar-target="buttonsContainer">
<%= tag.button class: "btn btn--plain", data: {
controller: "hotkey", action: "bar#search keydown.k@document->hotkey#click" } do %>
<span class="display-contents">Search <% if platform.desktop? -%><kbd>K</kbd><% end %></span>
<span class="display-contents">Search <kbd class="hide-on-touch">K</kbd></span>
<% end %>
</div>
app/views/columns/show/_add_card_button.html.erb
+2 -1
View File
@@ -1,7 +1,8 @@
<div class="collection-tools card">
<%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } }, data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
<%= icon_tag "add", class: "show-on-touch" %>
<span>Add a card</span>
<kbd>C</kbd>
<kbd class="hide-on-touch">C</kbd>
<% end %>
<hr class="separator--horizontal full-width" aria-hidden="true">
app/views/events/index/_add_card_button.html.erb
+2 -1
View File
@@ -1,8 +1,9 @@
<div class="header__actions header__actions--start">
<% if collection = user_filtering.single_collection_or_first %>
<%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
<%= icon_tag "add", class: "show-on-touch" %>
<span>Add a card</span>
<kbd>C</kbd>
<kbd class="hide-on-touch">C</kbd>
<% end %>
<% end %>
</div>
app/views/my/menus/_button.html.erb
+1 -1
View File
@@ -4,5 +4,5 @@
controller: "hotkey" } do %>
<span><%= image_tag "logo.png" %></span>
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
<kbd class="kbd txt-xx-small margin-inline-start">J</kbd>
<kbd class="kbd txt-xx-small margin-inline-start hide-on-touch">J</kbd>
<% end %>
app/views/my/pins/_tray.html.erb
+1 -1
View File
@@ -14,7 +14,7 @@
<button class="tray__toggle" data-action="dialog#toggle keydown.p@document->hotkey#click" data-controller="hotkey" aria-label="Toggle pins stack" aria-haspopup="true">
<div class="tray__toggle-btn txt-uppercase btn btn--reversed txt-x-small center full-width">
<%= icon_tag "pinned" %>
<span class="tray__toggle-text">Pinned <% if platform.desktop? -%><kbd>P</kbd><% end %></span>
<span class="tray__toggle-text">Pinned <kbd class="hide-on-touch">P</kbd></span>
</div>
</button>
</section>
app/views/notifications/_tray.html.erb
+1 -1
View File
@@ -42,7 +42,7 @@
<button class="tray__toggle" data-action="dialog#toggle keydown.n@document->hotkey#click" data-controller="hotkey" aria-label="Toggle notifications stack" aria-haspopup="true">
<div class="tray__toggle-btn txt-uppercase btn btn--reversed txt-x-small center full-width">
<%= icon_tag "bell" %>
<span class="tray__toggle-text">Notifications <% if platform.desktop? -%><kbd>N</kbd><% end %></span>
<span class="tray__toggle-text">Notifications <kbd class="hide-on-touch">N</kbd></span>
</div>
</button>
</section>