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/collections/CollectionCardDeckView.scss |  7 +++++++
 src/client/views/collections/CollectionCardDeckView.tsx  | 13 ++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections')

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