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 %>