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

Don't make all buttons bigger on mobile

Browse Source
This commit is contained in:
Adrien Maston
2026-01-09 11:57:16 +01:00
parent 268c6431af
commit 8bf2397c4a
10 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/buttons.css
+3 -10
View File
@@ -107,11 +107,6 @@
> * {
grid-area: 1/1;
}
@media (max-width: 639px) {
--btn-size: 3em;
--icon-size: 70%;
}
}
/* Make a normal button circular on mobile */
@@ -125,7 +120,7 @@
inline-size: var(--btn-size);
kbd,
span:last-of-type {
span:last-of-type:not(.icon) {
display: none;
}
}
@@ -224,17 +219,15 @@
.btn--back {
--btn-border-size: 0;
font-size: var(--text-medium);
@media (max-width: 639px) {
padding: 0.5em;
strong, kbd {
display: none;
}
}
@media (min-width: 640px) {
font-size: var(--text-medium);
.icon--arrow-left {
display: none;
}
app/helpers/application_helper.rb
+1 -1
View File
@@ -11,7 +11,7 @@ module ApplicationHelper
end
def back_link_to(label, url, action, **options)
link_to url, class: "btn btn--back", data: { controller: "hotkey", action: action }, **options do
link_to url, class: "btn btn--back btn--circle-mobile", data: { controller: "hotkey", action: action }, **options do
icon_tag("arrow-left") + tag.strong("Back to #{label}", class: "overflow-ellipsis") + tag.kbd("ESC", class: "txt-x-small hide-on-touch").html_safe
end
end
app/helpers/boards_helper.rb
+1 -1
View File
@@ -4,7 +4,7 @@ module BoardsHelper
end
def link_to_edit_board(board)
link_to edit_board_path(board), class: "btn", data: { controller: "tooltip" } do
link_to edit_board_path(board), class: "btn btn--circle-mobile", data: { controller: "tooltip" } do
icon_tag("settings") + tag.span("Settings for #{board.name}", class: "for-screen-reader")
end
end
app/helpers/webhooks_helper.rb
+1 -1
View File
@@ -24,7 +24,7 @@ module WebhooksHelper
def link_to_webhooks(board, &)
link_to board_webhooks_path(board_id: board),
class: [ "btn", { "btn--reversed": board.webhooks.any? } ],
class: [ "btn btn--circle-mobile", { "btn--reversed": board.webhooks.any? } ],
data: { controller: "tooltip" } do
icon_tag("world") + tag.span("Webhooks", class: "for-screen-reader")
end
app/views/boards/show/menu/_columns.html.erb
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="cards__new-column" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
<button class="btn btn--circle txt-x-small borderless" data-controller="tooltip" data-action="click->dialog#open:stop">
<button class="btn btn--circle btn--circle-mobile txt-x-small borderless" data-controller="tooltip" data-action="click->dialog#open:stop">
<%= icon_tag "add", class: "translucent" %>
<span class="for-screen-reader">Add a column</span>
</button>
app/views/cards/container/_gild.html.erb
+2 -2
View File
@@ -1,10 +1,10 @@
<% if card.golden? %>
<%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
<%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
<%= icon_tag "golden-ticket" %>
<span class="for-screen-reader">Demote to normal (shift+g)</span>
<% end %>
<% else %>
<%= button_to card_goldness_path(card), class: "btn", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
<%= button_to card_goldness_path(card), class: "btn btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
<%= icon_tag "golden-ticket" %>
<span class="for-screen-reader">Promote to Golden Ticket (shift+g)</span>
<% end %>
app/views/cards/container/_image.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
<% end %>
<% elsif !card.closed? %>
<%= form_with model: card, data: { controller: "form" } do |form| %>
<label class="card-perma__image-btn btn input--file" data-controller="tooltip">
<label class="card-perma__image-btn btn input--file btn--circle-mobile" data-controller="tooltip">
<%= icon_tag "picture-add" %>
<span class="for-screen-reader">Add background image</span>
app/views/cards/pins/_pin_button.html.erb
+2 -2
View File
@@ -1,10 +1,10 @@
<div id="<%= dom_id(card, :pin_button) %>">
<% if card.pinned_by? Current.user %>
<%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
<%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
<%= icon_tag "pinned" %> <span class="for-screen-reader">Un-pin this card (shift+p)</span>
<% end %>
<% else %>
<%= button_to card_pin_path(card), class: "btn", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
<%= button_to card_pin_path(card), class: "btn btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
<%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card (shift+p)</span>
<% end %>
<% end %>
app/views/cards/watches/_watch_button.html.erb
+2 -2
View File
@@ -1,11 +1,11 @@
<div id="<%= dom_id(card, :watch_button) %>">
<% if card.watched_by? Current.user %>
<%= button_to card_watch_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
<%= button_to card_watch_path(card), method: :delete, class: "btn btn--reversed btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
<%= icon_tag "bell" %>
<span class="for-screen-reader">Stop watching (shift+n)</span>
<% end %>
<% else %>
<%= button_to card_watch_path(card), class: "btn", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
<%= button_to card_watch_path(card), class: "btn btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
<%= icon_tag "bell-off" %>
<span class="for-screen-reader">Watch this (shift+n)</span>
<% end %>
app/views/notifications/index.html.erb
+1 -1
View File
@@ -9,7 +9,7 @@
<h1 class="header__title"><%= @page_title %></h1>
<div class="header__actions header__actions--end">
<%= link_to notifications_settings_path, class: "btn" do %>
<%= link_to notifications_settings_path, class: "btn btn--circle-mobile" do %>
<%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
<% end %>
</div>