studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Fix masonry layout #28

Browse source
This commit is contained in:
Timothée Goguely 2024-11-27 11:10:18 +01:00
parent 497d8a2758
commit 00d46fd9e1
5 changed files with 92 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/assets/css/index.css
View file

@ -12,6 +12,7 @@
@import 'src/1.2.compositions.grid.css';
@import 'src/1.3.compositions.flex-columns.css';
@import 'src/1.4.compositions.with-sidebar.css';
@import 'src/1.5.compositions.masonry.css';
/* BLOCKS */
@import 'src/2.blocks.badge.css';
@ -19,6 +20,8 @@
@import 'src/2.blocks.card.css';
@import 'src/2.blocks.dialog.css';
@import 'src/2.blocks.header.css';
@import 'src/2.blocks.image.css';
@import 'src/2.blocks.kanban.css';
@import 'src/2.blocks.pill.css';
@import 'src/2.blocks.pdf-viewer.css';
@import 'src/2.blocks.project.css';

26
src/assets/css/src/1.5.compositions.masonry.css Normal file
View file

@ -0,0 +1,26 @@
/* MASONRY COMPOSITION */
.masonry > * {
margin-bottom: var(--space-16);
width: 100%;
}
.masonry > *:only-child {
column-span: all;
transform: translateY(50%);
}
@media (min-width: 40rem) {
.masonry {
column-count: 2;
}
}
@media (min-width: 65rem) {
.masonry {
column-count: 3;
}
}
@media (min-width: 90rem) {
.masonry {
column-count: 4;
}
}

48
src/assets/css/src/2.blocks.image.css Normal file
View file

@ -0,0 +1,48 @@
/* IMAGE BLOCK */
.image {
border-radius: var(--rounded-2xl);
overflow: hidden;
position: relative;
cursor: pointer;
}
.image.has-description::after {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: var(--icon-color, currentColor);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 1rem;
mask-image: var(--icon-description);
position: absolute;
top: 1.25rem;
right: 1.25rem;
}
.image[aria-selected="true"] {
outline: 2px solid var(--color-focus-ring);
}
.image[aria-selected="true"]::after {
content: attr(data-count);
position: absolute;
top: var(--space-12);
right: var(--space-12);
border-radius: 50%;
color: var(--color-white);
font-weight: 700;
background: var(--color-grey-800);
display: grid;
place-items: center;
text-align: center;
width: 1.5rem;
height: 1.5rem;
}
.image .tag {
position: absolute;
top: var(--space-12);
left: var(--space-12);
}

15
src/assets/css/src/2.blocks.kanban.css Normal file
View file

@ -0,0 +1,15 @@
/* KANBAN BLOCK */
.kanban {
--header-height: 2.25rem; /* 36px */
--header-bg-color: var(--color-grey-200);
--header-title-bg-color: var(--color-grey-700);
--gap: var(--gutter);
position: relative;
display: flex;
gap: var(--gap);
overflow-x: auto;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter);
height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 3.25rem);
}

84
src/views/Kanban.vue
View file

@ -68,88 +68,4 @@ function openDialog(targetStepSlug) {
position: absolute;
right: calc(-0.75rem);
}
/* Masonry */
.kanban .masonry > * {
margin-bottom: var(--space-16);
}
.kanban .masonry > *:only-child {
column-span: all;
transform: translateY(50%);
}
@media (min-width: 40rem) {
.kanban .masonry {
column-count: 2;
}
}
@media (min-width: 65rem) {
.kanban .masonry {
column-count: 3;
}
}
@media (min-width: 90rem) {
.kanban .masonry {
column-count: 4;
}
}
/* Image */
.image {
border-radius: var(--rounded-2xl);
overflow: hidden;
position: relative;
cursor: pointer;
}
.image.has-description::after {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: var(--icon-color, currentColor);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 1rem;
mask-image: var(--icon-description);
position: absolute;
top: 1.25rem;
right: 1.25rem;
}
.image[aria-selected="true"] {
outline: 2px solid var(--color-focus-ring);
}
.image[aria-selected="true"]::after {
content: attr(data-count);
position: absolute;
top: var(--space-12);
right: var(--space-12);
border-radius: 50%;
color: var(--color-white);
font-weight: 700;
background: var(--color-grey-800);
display: grid;
place-items: center;
text-align: center;
width: 1.5rem;
height: 1.5rem;
}
.image .tag {
position: absolute;
top: var(--space-12);
left: var(--space-12);
}
/* Kanban */
.kanban {
--header-height: 2.25rem; /* 36px */
--header-bg-color: var(--color-grey-200);
--header-title-bg-color: var(--color-grey-700);
--gap: var(--gutter);
position: relative;
display: flex;
gap: var(--gap);
overflow-x: auto;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter);
height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 3.25rem);
}
</style>