@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.header--events {
|
||||
--header-button-count: 1;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
--header-actions-width: 7.25rem !important;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<% @page_title = "Column: Closed" %>
|
||||
<% @page_title = "Column: Done" %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<% @page_title = "Column: Now now" %>
|
||||
<% @page_title = "Column: Not Now" %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
|
||||
@@ -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 %>
|
||||
</h1>
|
||||
|
||||
<%= 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 %>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="header__actions header__actions--end">
|
||||
<div>
|
||||
<%= 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" %>
|
||||
<span class="overflow-ellipsis">Add a board</span>
|
||||
<kbd class="hide-on-touch">B</kbd>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,11 +7,3 @@
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="header__actions header__actions--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" %>
|
||||
<span class="overflow-ellipsis">Add a board</span>
|
||||
<kbd class="hide-on-touch">B</kbd>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
<% @page_title = "Column: Closed" %>
|
||||
<% @page_title = "Column: Done" %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to published_board_url(@board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
|
||||
<span class="flex align-center">
|
||||
<strong class="overflow-ellipsis">Back to <%= @board.name %></strong>
|
||||
<kbd class="txt-x-small hide-on-touch margin-inline-start">←</kbd>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click" %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title divider divider--fade full-width">
|
||||
|
||||
@@ -2,12 +2,7 @@
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to published_board_url(@board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
|
||||
<span class="flex align-center">
|
||||
<strong class="overflow-ellipsis">Back to <%= @board.name %></strong>
|
||||
<kbd class="txt-x-small hide-on-touch margin-inline-start">←</kbd>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click" %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title divider divider--fade full-width">
|
||||
|
||||
@@ -2,12 +2,7 @@
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to published_board_url(@column.board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
|
||||
<span class="flex align-center">
|
||||
<strong class="overflow-ellipsis">Back to <%= @column.board.name %></strong>
|
||||
<kbd class="txt-x-small hide-on-touch margin-inline-start">←</kbd>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= back_link_to @column.board.name, published_board_url(@column.board), "keydown.left@document->hotkey#click" %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title divider divider--fade full-width">
|
||||
|
||||
@@ -2,12 +2,7 @@
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to published_board_url(@board), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
|
||||
<span class="flex align-center">
|
||||
<strong class="overflow-ellipsis">Back to <%= @board.name %></strong>
|
||||
<kbd class="txt-x-small hide-on-touch margin-inline-start">←</kbd>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click" %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title divider divider--fade full-width">
|
||||
@@ -31,4 +26,4 @@
|
||||
|
||||
<% content_for :footer do %>
|
||||
<%= render "public/footer" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -14,12 +14,7 @@
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= 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 %>
|
||||
<span class="overflow-ellipsis flex align-center">
|
||||
<strong>Back to <%= @card.board.name %></strong>
|
||||
<kbd class="txt-x-small margin-inline-start hide-on-touch">←</kbd>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= back_link_to @card.board.name, published_board_url(@card.board), "keydown.left@document->hotkey#click", style: "view-transistion-name: card-board-title;" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
@@ -2,12 +2,7 @@
|
||||
|
||||
<% content_for :header do %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to @webhook, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
|
||||
<span class="overflow-ellipsis flex align-center">
|
||||
<strong>Back to <%= @page_title %></strong>
|
||||
<kbd class="txt-x-small margin-inline-start hide-on-touch">←</kbd>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= back_link_to @page_title, @webhook, "keydown.left@document->hotkey#click" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user