football2801
d31698e7b3
CI / test (push) Has been cancelled
StickerCanvas was being passed contextOrientation (the target device's orientation), so the final composited.jpg was always sized to the device's aspect — even when the user toggled the crop tool to a different orientation. A landscape crop on a portrait device would produce a 1600x960 cropped blob, then the StickerCanvas would re-render it into a 960x1600 frame, visibly stretching the image into portrait dimensions and saving it that way. UploadView now derives an effectiveOrientation that prefers the user's chosen crop orientation (uploadStore.cropOrientation) and falls back to the device's orientation only before the crop step has run. The StickerCanvas honors that. Also adds a temporary debug log in the upload controller to verify the cropOrientation form field is arriving and being persisted — recent uploads have NULL cropOrientation despite the frontend sending it, and this log will make the next upload's payload visible. Will remove once diagnosed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 lines
5.5 KiB
CSS
2 lines
5.5 KiB
CSS
.crop-editor[data-v-85d7731b]{touch-action:none;background:#000;flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.crop-editor__canvas[data-v-85d7731b]{touch-action:none;cursor:grab;flex:1;min-height:0;display:block}.crop-editor__canvas[data-v-85d7731b]:active{cursor:grabbing}.crop-editor__top[data-v-85d7731b]{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:12px}.crop-editor__label[data-v-85d7731b]{color:#fff;font-size:var(--text-xs);letter-spacing:.04em;background:#0009;border-radius:999px;padding:4px 12px;font-weight:700}.crop-editor__orient[data-v-85d7731b]{pointer-events:auto;background:#0009;border-radius:999px;gap:4px;padding:4px;display:flex}.crop-editor__orient-btn[data-v-85d7731b]{color:#ffffffa6;cursor:pointer;width:36px;height:32px;transition:background var(--duration-fast), color var(--duration-fast);background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;display:flex}.crop-editor__orient-btn--active[data-v-85d7731b]{color:#000;background:#fff}.crop-editor__mismatch[data-v-85d7731b]{pointer-events:auto;background:var(--color-warning,#f59e0b);color:#fff;font-size:var(--text-xs);border-radius:999px;align-items:center;gap:6px;max-width:100%;padding:6px 12px;font-weight:600;line-height:1.3;display:flex}.crop-editor__mismatch svg[data-v-85d7731b]{flex-shrink:0}.crop-editor__actions[data-v-85d7731b]{padding:var(--space-4);justify-content:center;display:flex;position:absolute;bottom:0;left:0;right:0}.crop-editor__use-btn[data-v-85d7731b]{width:100%;max-width:320px}.sticker-tray__cats[data-v-7eada75b]{gap:var(--space-2);padding-bottom:var(--space-3);scrollbar-width:none;display:flex;overflow-x:auto}.sticker-tray__cats[data-v-7eada75b]::-webkit-scrollbar{display:none}.sticker-tray__cat[data-v-7eada75b]{border:1.5px solid var(--color-border);font-size:var(--text-sm);white-space:nowrap;cursor:pointer;color:var(--color-text-muted);transition:all var(--duration-fast);background:0 0;border-radius:999px;padding:6px 14px;font-weight:600}.sticker-tray__cat--active[data-v-7eada75b]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-fg)}.sticker-tray__grid[data-v-7eada75b]{gap:var(--space-2);grid-template-columns:repeat(5,1fr);display:grid}.sticker-tray__item[data-v-7eada75b]{padding:var(--space-2) var(--space-1);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast);background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;display:flex}.sticker-tray__item[data-v-7eada75b]:active{background:var(--color-surface-2)}.sticker-tray__emoji[data-v-7eada75b]{font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:36px;line-height:1}.sticker-tray__label[data-v-7eada75b]{color:var(--color-text-muted);text-align:center;font-size:10px;font-weight:600;line-height:1.2}.sticker-canvas[data-v-fb52db70]{background:#111;flex-direction:column;flex:1;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.sticker-canvas[data-v-fb52db70] .konvajs-content{flex-shrink:0}.sticker-canvas__delete[data-v-fb52db70]{top:var(--space-3);right:var(--space-3);cursor:pointer;color:#fff;z-index:10;background:#c81e1ed9;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:absolute}.sticker-canvas__bar[data-v-fb52db70]{align-items:center;gap:var(--space-3);height:72px;padding:0 var(--space-4);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;position:absolute;bottom:0;left:0;right:0}.sticker-canvas__add-btn[data-v-fb52db70]{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1.5px solid var(--color-border);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;white-space:nowrap;background:0 0;font-weight:600;display:flex}.sticker-canvas__next-btn[data-v-fb52db70]{min-width:96px;margin-left:auto}.upload-view[data-v-e0d95da1]{z-index:100;background:var(--color-bg);flex-direction:column;display:flex;position:fixed;inset:0}.upload-view__header[data-v-e0d95da1]{height:56px;padding:0 var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;align-items:center;display:flex;position:relative}.upload-view__back[data-v-e0d95da1]{cursor:pointer;width:40px;height:40px;color:var(--color-text);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:-8px;display:flex}.upload-view__step-label[data-v-e0d95da1]{font-size:var(--text-base);color:var(--color-text);font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.upload-view__skip[data-v-e0d95da1]{font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer;padding:var(--space-2) 0;background:0 0;border:none;margin-left:auto;font-weight:600}.upload-view__stage[data-v-e0d95da1]{flex:1;min-height:0}.upload-view__done[data-v-e0d95da1]{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-5);text-align:center;flex-direction:column;flex:1;display:flex}.upload-view__done-icon[data-v-e0d95da1]{font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:64px;line-height:1}.upload-view__done-title[data-v-e0d95da1]{font-size:var(--text-xl);font-weight:700}.upload-view__done-sub[data-v-e0d95da1]{font-size:var(--text-sm);color:var(--color-text-muted);max-width:260px;line-height:1.5}.upload-view__done-btn[data-v-e0d95da1]{width:100%;max-width:320px}
|