bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add btn--back class

Browse Source
This commit is contained in:
Andy Smith
2025-11-13 13:57:36 -06:00
parent 57ec309e91
commit 3d2b649828
13 changed files with 74 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/buttons.css
+17
View File
@@ -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
/* ------------------------------------------------------------------------ */
app/assets/stylesheets/events.css
+2
View File
@@ -3,6 +3,8 @@
/* ------------------------------------------------------------------------ */
.header--events {
--header-button-count: 1;
@media (min-width: 640px) {
--header-actions-width: 7.25rem !important;
}
app/assets/stylesheets/header.css
+17
View File
@@ -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;
}
}
} */
}
app/helpers/boards_helper.rb
+2 -2
View File
@@ -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
app/views/events/index.html.erb
+3 -1
View File
@@ -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 %>
app/views/events/index/_add_board_button.html.erb
+9
View File
@@ -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>
app/views/events/index/_add_card_button.html.erb
-8
View File
@@ -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>
app/views/public/boards/columns/closeds/show.html.erb
+4 -5
View File
@@ -2,11 +2,10 @@
<% 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">&larr;</kbd>
</span>
<%= 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") %>
<strong class="btn--back__label overflow-ellipsis">Back to <%= @board.name %></strong>
<kbd class="txt-x-small hide-on-touch">&larr;</kbd>
<% end %>
</div>
app/views/public/boards/columns/not_nows/show.html.erb
+4 -5
View File
@@ -2,11 +2,10 @@
<% 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">&larr;</kbd>
</span>
<%= 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") %>
<strong class="btn--back__label overflow-ellipsis">Back to <%= @board.name %></strong>
<kbd class="txt-x-small hide-on-touch">&larr;</kbd>
<% end %>
</div>
app/views/public/boards/columns/show.html.erb
+4 -5
View File
@@ -2,11 +2,10 @@
<% 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">&larr;</kbd>
</span>
<%= 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") %>
<strong class="btn--back__label overflow-ellipsis">Back to <%= @column.board.name %></strong>
<kbd class="txt-x-small hide-on-touch">&larr;</kbd>
<% end %>
</div>
app/views/public/boards/columns/streams/show.html.erb
+5 -6
View File
@@ -2,11 +2,10 @@
<% 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">&larr;</kbd>
</span>
<%= 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") %>
<strong class="btn--back__label overflow-ellipsis">Back to <%= @board.name %></strong>
<kbd class="txt-x-small hide-on-touch">&larr;</kbd>
<% end %>
</div>
@@ -31,4 +30,4 @@
<% content_for :footer do %>
<%= render "public/footer" %>
<% end %>
<% end %>
app/views/public/cards/show.html.erb
+3 -5
View File
@@ -14,11 +14,9 @@
<% 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">&larr;</kbd>
</span>
<%= 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 %>
<strong class="btn--back__label overflow-ellipsis">Back to <%= @card.board.name %></strong>
<kbd class="txt-x-small hide-on-touch">&larr;</kbd>
<% end %>
</div>
<% end %>
app/views/webhooks/edit.html.erb
+4 -5
View File
@@ -2,11 +2,10 @@
<% 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">&larr;</kbd>
</span>
<%= link_to @webhook, class: "btn btn--back borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
<%= icon_tag("arrow-left") %>
<strong class="btn--back__label overflow-ellipsis">Back to <%= @page_title %></strong>
<kbd class="txt-x-small hide-on-touch">&larr;</kbd>
<% end %>
</div>
<% end %>