From 5505010e14bede33a692a656515bd6ca106103f2 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Feb 2025 11:06:19 -0500
Subject: added x and y margins for card view.

---
 src/client/views/PropertiesView.tsx                      |  2 +-
 src/client/views/collections/CollectionCardDeckView.scss |  7 +++++++
 src/client/views/collections/CollectionCardDeckView.tsx  | 13 ++++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index bed96f600..8e043baee 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -152,7 +152,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         return this.selectedDoc?.isGroup;
     }
     @computed get isStack() {
-        return [CollectionViewType.Masonry, CollectionViewType.Multicolumn, CollectionViewType.Multirow, CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Carousel].includes(
+        return [CollectionViewType.Masonry, CollectionViewType.Multicolumn, CollectionViewType.Multirow, CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Card, CollectionViewType.Carousel].includes(
             this.selectedDoc?.type_collection as CollectionViewType
         );
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index 06dd4627f..e6cc398af 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -9,6 +9,7 @@
         display: flex;
         transform-origin: top left;
         align-items: center;
+        position: relative;
     }
 
     button {
@@ -33,6 +34,12 @@
 .collectionCardView-cardSizeDragger {
     position: absolute;
     top: 0;
+    width: 28px;
+    height: 28px;
+    > svg {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .no-card-span {
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index d7f4251f3..94f85d429 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -127,7 +127,7 @@ export class CollectionCardView extends CollectionSubView() {
      */
     @computed get fitContentScale() {
         const length = Math.min(this.childDocsNoInk.length, this._maxRowCount);
-        return (this.childPanelWidth() * length) / this._props.PanelWidth();
+        return (this.childPanelWidth() * length) / (this._props.PanelWidth() - 2 * this.xMargin);
     }
 
     @computed get nativeScaling() {
@@ -138,6 +138,10 @@ export class CollectionCardView extends CollectionSubView() {
         return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth()));
     }
 
+    @computed get yMargin() {
+        return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
+    }
+
     @computed get cardDeckWidth() {
         return this._props.PanelWidth() - 2 * this.xMargin;
     }
@@ -403,8 +407,8 @@ export class CollectionCardView extends CollectionSubView() {
         setupMoveUpEvents(
             this,
             e,
-            (emove: PointerEvent, down: number[], delta: number[]) => {
-                this.layoutDoc._cardWidth = Math.max(10, delta[0] < 0 ? Math.floor(this.cardWidth + delta[0]) : Math.ceil(this.cardWidth + delta[0]));
+            (emove: PointerEvent) => {
+                this.layoutDoc._cardWidth = Math.max(10, this.ScreenToLocalBoxXf().transformPoint(emove.clientX, 0)[0] - this.xMargin);
                 return false;
             },
             action(() => {
@@ -509,6 +513,8 @@ export class CollectionCardView extends CollectionSubView() {
                 style={{
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
+                    paddingLeft: this.xMargin,
+                    paddingRight: this.xMargin,
                 }}>
                 <div
                     className="collectionCardView-inner"
@@ -516,6 +522,7 @@ export class CollectionCardView extends CollectionSubView() {
                         transform: `scale(${1 / fitContentScale})`,
                         height: `${100 * fitContentScale}%`,
                         width: `${100 * fitContentScale}%`,
+                        top: this.yMargin,
                     }}>
                     <div
                         className="collectionCardView-cardwrapper"
-- 
cgit v1.2.3-70-g09d2