From 3d2b6498282913ecb17d75c4d09ec11bc4c04e51 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 13 Nov 2025 13:57:36 -0600 Subject: [PATCH] Add btn--back class --- app/assets/stylesheets/buttons.css | 17 +++++++++++++++++ app/assets/stylesheets/events.css | 2 ++ app/assets/stylesheets/header.css | 17 +++++++++++++++++ app/helpers/boards_helper.rb | 4 ++-- app/views/events/index.html.erb | 4 +++- .../events/index/_add_board_button.html.erb | 9 +++++++++ .../events/index/_add_card_button.html.erb | 8 -------- .../public/boards/columns/closeds/show.html.erb | 9 ++++----- .../boards/columns/not_nows/show.html.erb | 9 ++++----- app/views/public/boards/columns/show.html.erb | 9 ++++----- .../public/boards/columns/streams/show.html.erb | 11 +++++------ app/views/public/cards/show.html.erb | 8 +++----- app/views/webhooks/edit.html.erb | 9 ++++----- 13 files changed, 74 insertions(+), 42 deletions(-) create mode 100644 app/views/events/index/_add_board_button.html.erb diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 5a5c910d1..e69295f3e 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -199,6 +199,23 @@ } } + .btn--back { + @media (max-width: 639px) { + padding: 0.5em; + + kbd, + .btn--back__label { + display: none; + } + } + + @media (min-width: 640px) { + .icon--arrow-left { + display: none; + } + } + } + /* Button groups /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index 06eaaa15c..20fb53217 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -3,6 +3,8 @@ /* ------------------------------------------------------------------------ */ .header--events { + --header-button-count: 1; + @media (min-width: 640px) { --header-actions-width: 7.25rem !important; } diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css index be5448991..46a345d3c 100644 --- a/app/assets/stylesheets/header.css +++ b/app/assets/stylesheets/header.css @@ -91,4 +91,21 @@ margin-inline-end: 0.8ch; } } + + /* Optional class to stack header actions on small screens + /* ------------------------------------------------------------------------ */ + + /* .header--mobile-actions-stack { + @media (max-width: 639px) { + grid-template-columns: 1fr 1fr; + grid-template-areas: + "menu menu" + "actions-start actions-end" + "title title"; + + .header__title { + margin-block-start: 0.25rem; + } + } + } */ } diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb index 3fde0d2ad..2de839990 100644 --- a/app/helpers/boards_helper.rb +++ b/app/helpers/boards_helper.rb @@ -1,8 +1,8 @@ module BoardsHelper def link_back_to_board(board) - link_to board, class: "btn borderless txt-medium", + link_to board, class: "btn--back btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click click->turbo-navigation#backIfSamePath" } do - tag.span(tag.strong("Back to #{board.name}", class: "overflow-ellipsis") + tag.kbd("←", class: "txt-x-small margin-inline-start hide-on-touch"), class: "flex align-center").html_safe + icon_tag("arrow-left") + tag.strong("Back to #{board.name}", class: "btn--back__label overflow-ellipsis") + tag.kbd("←", class: "txt-x-small hide-on-touch").html_safe end end diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb index 8f0e659e7..95545d536 100644 --- a/app/views/events/index.html.erb +++ b/app/views/events/index.html.erb @@ -1,5 +1,5 @@ <% @page_title = "Home" %> -<% @header_class = "header--events" %> +<% @header_class = "header--events header--mobile-actions-stack" %> <%= render "cards/broadcasts", filter: @filter %> @@ -14,6 +14,8 @@ <%= render "events/index/filter", user_filtering: @user_filtering %> <% end %> + + <%= render "events/index/add_board_button", user_filtering: @user_filtering %> <% end %> <%= tag.div id: "activity", class: "events", data: { controller: "pagination", pagination_paginate_on_intersection_value: true } do %> diff --git a/app/views/events/index/_add_board_button.html.erb b/app/views/events/index/_add_board_button.html.erb new file mode 100644 index 000000000..3af54a792 --- /dev/null +++ b/app/views/events/index/_add_board_button.html.erb @@ -0,0 +1,9 @@ +
+
+ <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.b@document->hotkey#click" } do %> + <%= icon_tag "board", class: "show-on-touch" %> + Add a board + B + <% end %> +
+
diff --git a/app/views/events/index/_add_card_button.html.erb b/app/views/events/index/_add_card_button.html.erb index 028407b79..59390375b 100644 --- a/app/views/events/index/_add_card_button.html.erb +++ b/app/views/events/index/_add_card_button.html.erb @@ -7,11 +7,3 @@ <% end %> <% end %> - -
- <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.b@document->hotkey#click" } do %> - <%= icon_tag "board", class: "show-on-touch" %> - Add a board - B - <% end %> -
diff --git a/app/views/public/boards/columns/closeds/show.html.erb b/app/views/public/boards/columns/closeds/show.html.erb index b3212aa81..5d2f334e2 100644 --- a/app/views/public/boards/columns/closeds/show.html.erb +++ b/app/views/public/boards/columns/closeds/show.html.erb @@ -2,11 +2,10 @@ <% content_for :header do %>
- <%= link_to published_board_url(@board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> - - Back to <%= @board.name %> - ← - + <%= link_to published_board_url(@board), class: "btn btn--back borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> + <%= icon_tag("arrow-left") %> + Back to <%= @board.name %> + ← <% end %>
diff --git a/app/views/public/boards/columns/not_nows/show.html.erb b/app/views/public/boards/columns/not_nows/show.html.erb index d6ceb0da5..0e95875c6 100644 --- a/app/views/public/boards/columns/not_nows/show.html.erb +++ b/app/views/public/boards/columns/not_nows/show.html.erb @@ -2,11 +2,10 @@ <% content_for :header do %>
- <%= link_to published_board_url(@board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> - - Back to <%= @board.name %> - ← - + <%= link_to published_board_url(@board), class: "btn btn--back borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> + <%= icon_tag("arrow-left") %> + Back to <%= @board.name %> + ← <% end %>
diff --git a/app/views/public/boards/columns/show.html.erb b/app/views/public/boards/columns/show.html.erb index e23e4e370..2323dbda2 100644 --- a/app/views/public/boards/columns/show.html.erb +++ b/app/views/public/boards/columns/show.html.erb @@ -2,11 +2,10 @@ <% content_for :header do %>
- <%= link_to published_board_url(@column.board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> - - Back to <%= @column.board.name %> - ← - + <%= link_to published_board_url(@column.board), class: "btn btn--back borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> + <%= icon_tag("arrow-left") %> + Back to <%= @column.board.name %> + ← <% end %>
diff --git a/app/views/public/boards/columns/streams/show.html.erb b/app/views/public/boards/columns/streams/show.html.erb index 0a75e1179..46894ba34 100644 --- a/app/views/public/boards/columns/streams/show.html.erb +++ b/app/views/public/boards/columns/streams/show.html.erb @@ -2,11 +2,10 @@ <% content_for :header do %>
- <%= link_to published_board_url(@board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> - - Back to <%= @board.name %> - ← - + <%= link_to published_board_url(@board), class: "btn btn--back borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> + <%= icon_tag("arrow-left") %> + Back to <%= @board.name %> + ← <% end %>
@@ -31,4 +30,4 @@ <% content_for :footer do %> <%= render "public/footer" %> -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/public/cards/show.html.erb b/app/views/public/cards/show.html.erb index b6446ea7b..223253ac3 100644 --- a/app/views/public/cards/show.html.erb +++ b/app/views/public/cards/show.html.erb @@ -14,11 +14,9 @@ <% content_for :header do %>
- <%= link_to published_board_url(@card.board), class: "btn borderless txt-medium", style: "view-transistion-name: card-board-title;", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> - - Back to <%= @card.board.name %> - ← - + <%= link_to published_board_url(@card.board), class: "btn btn--back borderless txt-medium", style: "view-transistion-name: card-board-title;", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> + Back to <%= @card.board.name %> + ← <% end %>
<% end %> diff --git a/app/views/webhooks/edit.html.erb b/app/views/webhooks/edit.html.erb index 26196e90c..b0727fff3 100644 --- a/app/views/webhooks/edit.html.erb +++ b/app/views/webhooks/edit.html.erb @@ -2,11 +2,10 @@ <% content_for :header do %>
- <%= link_to @webhook, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> - - Back to <%= @page_title %> - ← - + <%= link_to @webhook, class: "btn btn--back borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %> + <%= icon_tag("arrow-left") %> + Back to <%= @page_title %> + ← <% end %>
<% end %>