From 8bf2397c4aebaa48279d0aaa0f4ea7630e014fd0 Mon Sep 17 00:00:00 2001 From: Adrien Maston Date: Fri, 9 Jan 2026 11:57:16 +0100 Subject: [PATCH] Don't make all buttons bigger on mobile --- app/assets/stylesheets/buttons.css | 13 +++---------- app/helpers/application_helper.rb | 2 +- app/helpers/boards_helper.rb | 2 +- app/helpers/webhooks_helper.rb | 2 +- app/views/boards/show/menu/_columns.html.erb | 2 +- app/views/cards/container/_gild.html.erb | 4 ++-- app/views/cards/container/_image.html.erb | 2 +- app/views/cards/pins/_pin_button.html.erb | 4 ++-- app/views/cards/watches/_watch_button.html.erb | 4 ++-- app/views/notifications/index.html.erb | 2 +- 10 files changed, 15 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 64ea77611..07653e7fa 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -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; } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 946a0900e..9e0a72f81 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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 diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb index a1960b341..4ed22dc03 100644 --- a/app/helpers/boards_helper.rb +++ b/app/helpers/boards_helper.rb @@ -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 diff --git a/app/helpers/webhooks_helper.rb b/app/helpers/webhooks_helper.rb index f3bb077c8..dea0ea9bd 100644 --- a/app/helpers/webhooks_helper.rb +++ b/app/helpers/webhooks_helper.rb @@ -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 diff --git a/app/views/boards/show/menu/_columns.html.erb b/app/views/boards/show/menu/_columns.html.erb index 017527a43..b227b72ef 100644 --- a/app/views/boards/show/menu/_columns.html.erb +++ b/app/views/boards/show/menu/_columns.html.erb @@ -1,5 +1,5 @@
- diff --git a/app/views/cards/container/_gild.html.erb b/app/views/cards/container/_gild.html.erb index 7647a3b4f..a54895a45 100644 --- a/app/views/cards/container/_gild.html.erb +++ b/app/views/cards/container/_gild.html.erb @@ -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" %> Demote to normal (shift+g) <% 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" %> Promote to Golden Ticket (shift+g) <% end %> diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb index 6f0fceea0..87287cafe 100644 --- a/app/views/cards/container/_image.html.erb +++ b/app/views/cards/container/_image.html.erb @@ -5,7 +5,7 @@ <% end %> <% elsif !card.closed? %> <%= form_with model: card, data: { controller: "form" } do |form| %> -