From 00d46fd9e1a65713002321f6d5b006035ccd95e0 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 27 Nov 2024 11:10:18 +0100
Subject: [PATCH] Fix masonry layout #28

---
 src/assets/css/index.css                      |  3 +
 .../css/src/1.5.compositions.masonry.css      | 26 ++++++
 src/assets/css/src/2.blocks.image.css         | 48 +++++++++++
 src/assets/css/src/2.blocks.kanban.css        | 15 ++++
 src/views/Kanban.vue                          | 84 -------------------
 5 files changed, 92 insertions(+), 84 deletions(-)
 create mode 100644 src/assets/css/src/1.5.compositions.masonry.css
 create mode 100644 src/assets/css/src/2.blocks.image.css
 create mode 100644 src/assets/css/src/2.blocks.kanban.css

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index dc5550e..291c380 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -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';
diff --git a/src/assets/css/src/1.5.compositions.masonry.css b/src/assets/css/src/1.5.compositions.masonry.css
new file mode 100644
index 0000000..03bfce3
--- /dev/null
+++ b/src/assets/css/src/1.5.compositions.masonry.css
@@ -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;
+  }
+}
diff --git a/src/assets/css/src/2.blocks.image.css b/src/assets/css/src/2.blocks.image.css
new file mode 100644
index 0000000..b9dafa5
--- /dev/null
+++ b/src/assets/css/src/2.blocks.image.css
@@ -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);
+}
diff --git a/src/assets/css/src/2.blocks.kanban.css b/src/assets/css/src/2.blocks.kanban.css
new file mode 100644
index 0000000..032f24a
--- /dev/null
+++ b/src/assets/css/src/2.blocks.kanban.css
@@ -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);
+}
diff --git a/src/views/Kanban.vue b/src/views/Kanban.vue
index aa9579a..8910895 100644
--- a/src/views/Kanban.vue
+++ b/src/views/Kanban.vue
@@ -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>