diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 9f1092f82..6e535a767 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -73,11 +73,11 @@ --z-events-column-header: 1; --z-events-day-header: 3; --z-flash: 12; - --z-nav: 11; --z-popup: 10; --z-terminal: 20; --z-tray: 21; - --z-tooltip: 30; + --z-nav: 30; + --z-tooltip: 40; /* OKLCH colors: Fixed */ --lch-black: 0% 0 0; diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index bf6d8df4a..5e5dad254 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -16,6 +16,7 @@ font-family: var(--font-sans); interpolate-size: allow-keywords; line-height: 1.375; + max-inline-size: 100vw; scroll-behavior: auto; text-rendering: optimizeLegibility; text-size-adjust: none; diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 5a5c910d1..458cdf46a 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -199,6 +199,26 @@ } } + .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) { + .icon--arrow-left { + display: none; + } + } + } + /* Button groups /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index da9b9b15c..30c9a7ae2 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -45,8 +45,7 @@ min-block-size: 20lh; } - /* Hide on small, fat-finger touch devices */ - @media (hover: none) and (pointer: coarse) and (max-width: 519px) { + @media (max-width: 519px) { display: none; } } @@ -748,7 +747,7 @@ padding-inline: 3vw; /* Hide on larger devices with cursors */ - @media (hover: hover) and (min-width: 520px) { + @media (min-width: 520px) { display: none; } 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/application_helper.rb b/app/helpers/application_helper.rb index fc37d1635..e4f5b4945 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -15,4 +15,10 @@ module ApplicationHelper return File.read(file_path).html_safe if File.exist?(file_path) "(not found)" end + + def back_link_to(label, url, action, **options) + link_to url, class: "btn btn--back", data: { controller: "hotkey", action: action }, **options do + icon_tag("arrow-left") + tag.strong("Back to #{label}", class: "overflow-ellipsis") + tag.kbd("←", class: "txt-x-small hide-on-touch").html_safe + end + end end diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb index 3fde0d2ad..54c09a407 100644 --- a/app/helpers/boards_helper.rb +++ b/app/helpers/boards_helper.rb @@ -1,9 +1,6 @@ module BoardsHelper def link_back_to_board(board) - link_to board, class: "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 - end + back_link_to board.name, board, "keydown.left@document->hotkey#click click->turbo-navigation#backIfSamePath" end def link_to_edit_board(board) diff --git a/app/views/boards/columns/closeds/show.html.erb b/app/views/boards/columns/closeds/show.html.erb index a67c45c3b..412d15183 100644 --- a/app/views/boards/columns/closeds/show.html.erb +++ b/app/views/boards/columns/closeds/show.html.erb @@ -1,4 +1,4 @@ -<% @page_title = "Column: Closed" %> +<% @page_title = "Column: Done" %> <% content_for :header do %>
diff --git a/app/views/boards/columns/not_nows/show.html.erb b/app/views/boards/columns/not_nows/show.html.erb index 379d92dea..04ef7dd2e 100644 --- a/app/views/boards/columns/not_nows/show.html.erb +++ b/app/views/boards/columns/not_nows/show.html.erb @@ -1,4 +1,4 @@ -<% @page_title = "Column: Now now" %> +<% @page_title = "Column: Not Now" %> <% content_for :header do %>
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..260eaa70b 100644 --- a/app/views/public/boards/columns/closeds/show.html.erb +++ b/app/views/public/boards/columns/closeds/show.html.erb @@ -1,13 +1,8 @@ -<% @page_title = "Column: Closed" %> +<% @page_title = "Column: Done" %> <% 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 %> - - - <% end %> + <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click" %>

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..38961b509 100644 --- a/app/views/public/boards/columns/not_nows/show.html.erb +++ b/app/views/public/boards/columns/not_nows/show.html.erb @@ -2,12 +2,7 @@ <% 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 %> - - - <% end %> + <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click" %>

diff --git a/app/views/public/boards/columns/show.html.erb b/app/views/public/boards/columns/show.html.erb index e23e4e370..772789685 100644 --- a/app/views/public/boards/columns/show.html.erb +++ b/app/views/public/boards/columns/show.html.erb @@ -2,12 +2,7 @@ <% 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 %> - - - <% end %> + <%= back_link_to @column.board.name, published_board_url(@column.board), "keydown.left@document->hotkey#click" %>

diff --git a/app/views/public/boards/columns/streams/show.html.erb b/app/views/public/boards/columns/streams/show.html.erb index 0a75e1179..337f37e8f 100644 --- a/app/views/public/boards/columns/streams/show.html.erb +++ b/app/views/public/boards/columns/streams/show.html.erb @@ -2,12 +2,7 @@ <% 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 %> - - - <% end %> + <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click" %>

@@ -31,4 +26,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..a3fc7ffcc 100644 --- a/app/views/public/cards/show.html.erb +++ b/app/views/public/cards/show.html.erb @@ -14,12 +14,7 @@ <% 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 %> - - - <% end %> + <%= back_link_to @card.board.name, published_board_url(@card.board), "keydown.left@document->hotkey#click", style: "view-transistion-name: card-board-title;" %>
<% end %> diff --git a/app/views/webhooks/edit.html.erb b/app/views/webhooks/edit.html.erb index 26196e90c..70e9fa34e 100644 --- a/app/views/webhooks/edit.html.erb +++ b/app/views/webhooks/edit.html.erb @@ -2,12 +2,7 @@ <% 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 %> - - - <% end %> + <%= back_link_to @page_title, @webhook, "keydown.left@document->hotkey#click" %>
<% end %>