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

Merge pull request #604 from basecamp/mobile-columns

Browse Source 
Mobile columns
This commit is contained in:
Andy Smith
2025-06-12 15:25:51 -05:00
committed by GitHub
parent 9e7c185736 2f8b929702
commit 80f801dae4
6 changed files with 117 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+104 -45
View File
@@ -1,66 +1,73 @@
@layer components {
/* Coluns
/* -------------------------------------------------------------------------- */
/* Columns
/* ------------------------------------------------------------------------ */
/* Card contents are resized via container queries. We're using #main here as
the primary container so all cards have the same container reference */
#main:has(.card-columns) {
--cards-gap: min(2cqi, 1rem);
--gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
--reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap));
--bubble-gap: 0.5rem;
--bubble-size: 4rem;
container-type: inline-size;
max-inline-size: 1400px;
@media (max-width: 639px) {
--bubble-gap: -0.5rem;
--bubble-size: 3rem;
--reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap));
}
}
.card-columns {
--bubble-size: 4rem;
--bubble-gap: 0.5rem;
display: grid;
grid-template-columns: repeat(2, 50%);
margin: auto;
max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2);
max-inline-size: 100%;
position: relative;
&:before {
background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
background: var(--gradient-border);
block-size: 1px;
content: "";
display: block;
inline-size: calc(100% + 1.2em);
inset: 0 -0.6em 100% -0.6em;
position: absolute;
}
.cards:first-child {
padding-inline-end: var(--cards-gap);
position: relative;
&:after {
background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas));
block-size: calc(100% + 1.2em);
content: "";
display: block;
inline-size: 1px;
inset: -0.6em 0 -0.6em 100%;
position: absolute;
}
}
.cards:last-child {
padding-inline-start: var(--cards-gap);
@media (min-width: 640px) {
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
/* Cards
/* -------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */
.cards {
--cards-gap: 2cqi;
align-items: center;
align-items: stretch;
display: flex;
flex-direction: column;
gap: var(--cards-gap);
justify-content: start;
padding-block: calc(var(--cards-gap) * 0.75);
padding: 0 var(--reserved-bubble-space) var(--cards-gap) var(--cards-gap);
position: relative;
/* Make sure filter dialogs don't end up behind sticky headers */
&:has([open]) {
z-index: 3;
}
&:first-child {
@media (min-width: 640px) {
border-inline-end: 1px solid var(--color-ink-lighter);
padding-inline: var(--reserved-bubble-space) var(--cards-gap);
}
}
@media (max-width: 639px) {
padding-block-end: calc(var(--cards-gap) * 2);
padding-inline-start: var(--reserved-bubble-space);
}
.card {
--block-space: 1em;
@@ -90,7 +97,7 @@
.workflow-stage:not(.workflow-stage--current) {
opacity: 0;
transition: opacity 0.2s ease-in-out;
@media (any-hover: hover) {
.card:hover & {
opacity: 1;
@@ -98,7 +105,7 @@
}
}
}
@media (any-hover: hover) {
.card:hover & {
img:not([src=""]) {
@@ -110,12 +117,38 @@
}
}
/* Column elements
/* ------------------------------------------------------------------------ */
.cards__heading {
display: inline-flex;
background-color: var(--color-canvas);
display: flex;
font-size: var(--text-medium);
inline-size: 100%;
inset-block-start: 0;
justify-content: center;
text-transform: uppercase;
margin-block-start: 1px;
margin-inline: calc(-1 * var(--cards-gap) + 1px);
padding-block: var(--cards-gap);
position: sticky;
z-index: 2;
&, button {
font-weight: bold;
text-transform: uppercase;
}
button {
--hover-size: 0;
inline-size: auto;
margin-inline-start: 2em;
padding: 0 2em 0 0;
}
dialog {
font-weight: normal;
text-transform: none;
}
}
/* Considering
@@ -175,8 +208,21 @@
}
}
/* Doing
/* ------------------------------------------------------------------------ */
@media (max-width: 639px) {
.cards--doing:before {
background: var(--gradient-border);
block-size: 1px;
content: "";
inset: 0 0 auto;
position: absolute;
}
}
/* Closed
/* -------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */
.cards--closed {
justify-content: center;
@@ -187,22 +233,35 @@
position: relative;
&:before {
background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
background: var(--gradient-border);
block-size: 1px;
content: "";
display: block;
inline-size: calc(100% + 1.2em);
inset: 0 -0.6em 100% -0.6em;
position: absolute;
}
.card {
inline-size: calc((100% - var(--cards-gap) * 2) / 3);
@media (max-width: 639px) {
flex-direction: column;
padding-inline: var(--reserved-bubble-space);
}
@media (max-width: 960px) {
.cards__heading {
min-inline-size: 100%;
@media (max-width: 639px) {
margin-inline-end: calc(-1 * var(--cards-gap));
}
}
.card {
@media (min-width: 640px) {
inline-size: calc((100% - var(--cards-gap)) / 2);
}
@media (min-width: 960px) {
inline-size: calc((100% - var(--cards-gap) * 2) / 3);
}
&:nth-of-type(7) {
margin-block-start: var(--cards-gap);
}
app/assets/stylesheets/card-filters.css
-34
View File
@@ -1,34 +0,0 @@
@layer components {
.card-filter--column {
> button {
--hover-size: 0;
inline-size: auto;
padding: 0 2em 0 0;
margin-inline-start: 2em;
}
}
.card-filter--sorting {
inset: auto 50% -4em;
margin-inline-start: -1em;
position: absolute;
transform: translateX(-50%);
#header:has(&) {
position: relative;
z-index: 1;
}
}
.card-count__selector {
inset: 0.5cqi 0.5cqi auto auto;
position: absolute;
text-align: start;
z-index: 1;
.popup {
inset: 1em 1em auto auto;
}
}
}
app/assets/stylesheets/cards.css
+2
View File
@@ -66,7 +66,9 @@
gap: var(--inline-space-half);
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline-start: calc(-1 * var(--card-padding-inline));
max-inline-size: 100%;
min-inline-size: 0;
overflow: hidden;
}
.card__collection {
app/views/cards/display/_preview.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<% cache cacheable_preview_parts_for(card) do %>
<%= card_article_tag card, class: "card" do %>
<div class="flex gap">
<div class="flex flex-column flex-item-grow">
<div class="flex flex-column flex-item-grow max-inline-size">
<header class="card__header">
<%= render "cards/display/preview/collection", card: card %>
<%= render "cards/display/preview/tags", card: card %>
app/views/cards/index/_closure_filter.html.erb
+3 -5
View File
@@ -1,8 +1,6 @@
<div class="card-filter--column full-width position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
<strong class="overflow-ellipsis">
Recently closed
</strong>
<div class="cards__heading" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
Recently closed
</button>
<dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"
app/views/cards/index/_workflow_filter.html.erb
+7 -9
View File
@@ -1,12 +1,10 @@
<div class="card-filter--column flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
<strong class="overflow-ellipsis">
<% if filter.stages.any? %>
<%= filter.stages.map(&:name).to_sentence %>
<% else %>
Doing
<% end %>
</strong>
<div class="cards__heading cards__filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
<% if filter.stages.any? %>
<%= filter.stages.map(&:name).to_sentence %>
<% else %>
Doing
<% end %>
</button>
<dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"