football2801
78405b644d
CI / test (push) Has been cancelled
Two complaints, one root cause: the FrameCard was floating in the slide with a min-height-padded preview, so (1) photos got top/bottom gray bars instead of fitting their container, and (2) there was a fat empty gap between the card body and the bottom nav. Restructured the large card to flex-fill its slide: - preview hugs the photo's intrinsic aspect ratio (img with width:100% height:auto); no min-height, no aspect-ratio override → no letterbox - card body has flex:1, info pinned at top, Add Photo button pinned at bottom via margin-top:auto and width:100% - HomeView main / single-card / carousel all flex:1 down through the layout so the slide gets the full available height - empty-state placeholder still reserves the device's aspect so the card doesn't jump while images load Result: the photo fills its container left/right with no bars; the body absorbs all remaining space below, with the action button always sitting just above the bottom nav. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 line
1.6 KiB
JavaScript
1 line
1.6 KiB
JavaScript
import{_ as e,d as t,g as n,j as r,k as i,l as a,o,p as s,pt as c,t as l,u,v as d,z as f}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{n as p,t as m}from"./BaseBottomSheet-CXcLrct9.js";var h={class:`device-picker__list`},g=[`checked`,`onChange`],_={class:`device-picker__name`},v={class:`device-picker__orientation`},y=l(d({__name:`DevicePicker`,props:{modelValue:{type:Boolean},devices:{},selected:{},uploading:{type:Boolean}},emits:[`update:modelValue`,`update:selected`,`confirm`],setup(l,{emit:d}){let y=l,b=d;function x(e){y.selected.includes(e)?b(`update:selected`,y.selected.filter(t=>t!==e)):b(`update:selected`,[...y.selected,e])}let S=a(()=>{let e=y.selected.length;return e===0?`Add to frame`:`Add to ${e} frame${e>1?`s`:``}`});return(a,d)=>(i(),t(m,{"model-value":l.modelValue,label:`Choose frames`,"onUpdate:modelValue":d[1]||=e=>a.$emit(`update:modelValue`,e)},{default:f(()=>[d[2]||=u(`h2`,{class:`device-picker__title`},`Add to frames`,-1),d[3]||=u(`p`,{class:`device-picker__sub`},`Choose which frames will show this photo.`,-1),u(`div`,h,[(i(!0),s(o,null,r(l.devices,e=>(i(),s(`label`,{key:e.id,class:`device-picker__row`},[u(`input`,{type:`checkbox`,class:`device-picker__check`,checked:l.selected.includes(e.id),onChange:t=>x(e.id)},null,40,g),u(`span`,_,c(e.name),1),u(`span`,v,c(e.orientation),1)]))),128))]),e(p,{variant:`primary`,class:`device-picker__confirm`,disabled:l.selected.length===0||l.uploading,onClick:d[0]||=e=>a.$emit(`confirm`)},{default:f(()=>[n(c(l.uploading?`Uploading…`:S.value),1)]),_:1},8,[`disabled`])]),_:1},8,[`model-value`]))}}),[[`__scopeId`,`data-v-a6466fa5`]]);export{y as t}; |