Skip to content

Commit

Permalink
Make design look more acceptable on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@SheepTester
SheepTester committed Jan 24, 2024
1 parent 8372fe8 commit 933a651
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 207 deletions.
258 changes: 130 additions & 128 deletions src/components/admin/store/ItemDetailsForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,140 +374,142 @@ const ItemDetailsForm = ({ mode, defaultData, token, collections }: IProps) => {
</li>
</ul>

<table className={style.options}>
<thead>
<tr>
{options.length > 1 && (
<>
<th />
<th>
<input
type="text"
name="category-type"
aria-label="Option type"
placeholder="Size, color, ..."
required
value={optionType}
onChange={e => setOptionType(e.currentTarget.value)}
/>
</th>
</>
)}
<th>Price</th>
<th>Quantity</th>
<th>Percent discount</th>
{options.length > 1 && <th>Remove</th>}
</tr>
</thead>
<tbody>
<Draggable items={options} onReorder={setOptions}>
{(props, option, i) => (
<tr key={option.uuid || i} {...props}>
{options.length > 1 && (
<>
<td>
<BsGripVertical className={`${DRAG_HANDLE} ${style.grip}`} />
</td>
<td>
<input
type="text"
name="category-value"
aria-label={optionType}
required
value={option.value}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i ? { ...option, value: e.currentTarget.value } : option
<div className={style.tableScroller}>
<table className={`${style.options} ${options.length > 1 ? style.multipleOptions : ''}`}>
<thead>
<tr>
{options.length > 1 && (
<>
<th />
<th>
<input
type="text"
name="category-type"
aria-label="Option type"
placeholder="Size, color, ..."
required
value={optionType}
onChange={e => setOptionType(e.currentTarget.value)}
/>
</th>
</>
)}
<th>Price</th>
<th>Quantity</th>
<th>Percent discount</th>
{options.length > 1 && <th>Remove</th>}
</tr>
</thead>
<tbody>
<Draggable items={options} onReorder={setOptions}>
{(props, option, i) => (
<tr key={option.uuid || i} {...props}>
{options.length > 1 && (
<>
<td>
<BsGripVertical className={`${DRAG_HANDLE} ${style.grip}`} />
</td>
<td>
<input
type="text"
name="category-value"
aria-label={optionType}
required
value={option.value}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i ? { ...option, value: e.currentTarget.value } : option
)
)
}
/>
</td>
</>
)}
<td>
<input
type="number"
name="price"
aria-label="Price"
min={0}
value={option.price}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i ? { ...option, price: e.currentTarget.value } : option
)
}
/>
</td>
</>
)}
<td>
<input
type="number"
name="price"
aria-label="Price"
min={0}
value={option.price}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i ? { ...option, price: e.currentTarget.value } : option
)
)
}
/>
</td>
<td>
<input
type="number"
name="quantity"
aria-label="Quantity"
min={0}
value={option.quantity}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i ? { ...option, quantity: e.currentTarget.value } : option
)
)
}
/>
</td>
<td>
<input
type="number"
name="discount-percentage"
aria-label="Percent discount"
min={0}
max={100}
value={option.discountPercentage}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i
? { ...option, discountPercentage: e.currentTarget.value }
: option
}
/>
</td>
<td>
<input
type="number"
name="quantity"
aria-label="Quantity"
min={0}
value={option.quantity}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i ? { ...option, quantity: e.currentTarget.value } : option
)
)
)
}
/>
</td>
{options.length > 1 && (
}
/>
</td>
<td>
<Button
onClick={() => setOptions(options.filter((_, index) => index !== i))}
destructive
>
Remove
</Button>
<input
type="number"
name="discount-percentage"
aria-label="Percent discount"
min={0}
max={100}
value={option.discountPercentage}
onChange={e =>
setOptions(
options.map((option, index) =>
index === i
? { ...option, discountPercentage: e.currentTarget.value }
: option
)
)
}
/>
</td>
)}
</tr>
)}
</Draggable>
</tbody>
<tfoot>
<tr>
<td colSpan={10}>
<Button
onClick={() =>
setOptions([
...options,
{ price: '', quantity: '', discountPercentage: '0', value: '' },
])
}
>
Add option
</Button>
</td>
</tr>
</tfoot>
</table>
{options.length > 1 && (
<td>
<Button
onClick={() => setOptions(options.filter((_, index) => index !== i))}
destructive
>
Remove
</Button>
</td>
)}
</tr>
)}
</Draggable>
</tbody>
<tfoot>
<tr>
<td colSpan={10}>
<Button
onClick={() =>
setOptions([
...options,
{ price: '', quantity: '', discountPercentage: '0', value: '' },
])
}
>
Add option
</Button>
</td>
</tr>
</tfoot>
</table>
</div>

<EventDetailsFormItem error={errors.hidden?.message}>
<label>
Expand Down
Loading

0 comments on commit 933a651

Please sign in to comment.