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

Add hide-scrollbar utility and use on card titles

Browse Source
This commit is contained in:
Andy Smith
2025-11-20 11:03:10 -06:00
parent 3469965f7a
commit 7fe2ea203d
6 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
-7
View File
@@ -18,7 +18,6 @@
--progress-max-cards: 20;
--progress-max-height: 50dvh;
-ms-overflow-style: none; /* Hide x-scrollbar on Edge */
container-type: inline-size;
display: grid;
gap: var(--column-gap);
@@ -29,12 +28,6 @@
overflow-y: hidden;
padding-block-end: var(--column-width-collapsed);
position: relative;
scrollbar-width: none; /* Hide x-scrollbar on FF */
/* Hide x-scrollbar on Chrome/Safari/Opera */
&::-webkit-scrollbar {
display: none;
}
/* When it has something expanded */
&:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) {
app/assets/stylesheets/utilities.css
+10
View File
@@ -249,4 +249,14 @@
display: unset;
}
}
.hide-scrollbar {
-ms-overflow-style: none; /* Edge */
scrollbar-width: none; /* FF */
/* Chrome/Safari/Opera */
&::-webkit-scrollbar {
display: none;
}
}
}
app/views/boards/show/_columns.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<%= tag.div class: "card-columns", data: {
<%= tag.div class: "card-columns hide-scrollbar", data: {
controller: "collapsible-columns drag-and-drop drag-and-strum",
drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
app/views/cards/container/_title.html.erb
+1 -1
View File
@@ -20,7 +20,7 @@
<h1 class="card__title">
<%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %>
<%= form.text_area :title, placeholder: "Name it…",
class: "card-field__title input input--textarea hide-focus-ring full-width borderless txt-align-start autoresize__textarea",
class: "card-field__title autoresize__textarea input input--textarea full-width borderless txt-align-start hide-focus-ring hide-scrollbar",
autofocus: card.title.blank?, rows: 1,
data: { autoresize_target: "textarea", action: "input->autoresize#resize auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent" } %>
<% end %>
app/views/cards/edit.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
data: { controller: "autoresize form local-save", local_save_key_value: "card-#{@card.id}", action: "turbo:submit-end->local-save#submit" } do |form| %>
<h1 class="card__title flex align-start gap-half">
<%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %>
<%= form.text_area :title, class: "card-field__title input input--textarea hide-focus-ring full-width borderless txt-align-start autoresize__textarea",
<%= form.text_area :title, class: "card-field__title autoresize__textarea input input--textarea full-width borderless txt-align-start hide-focus-ring hide-scrollbar",
required: true, autofocus: true, placeholder: "Name it…", rows: 1,
data: { autoresize_target: "textarea", action: "input->autoresize#resize keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %>
<% end %>
app/views/public/boards/show/_columns.html.erb
+1 -1
View File
@@ -1,5 +1,5 @@
<%= turbo_frame_tag :cards_container do %>
<div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-board-value="<%= board.id %>" data-collapsible-columns-collapsed-class="is-collapsed" data-collapsible-columns-no-transitions-class="no-transitions">
<div class="card-columns hide-scrollbar" data-controller="collapsible-columns" data-collapsible-columns-board-value="<%= board.id %>" data-collapsible-columns-collapsed-class="is-collapsed" data-collapsible-columns-no-transitions-class="no-transitions">
<div class="card-columns__left">
<%= render "public/boards/show/not_now", board: board %>