Skip to content

Commit

Permalink
Merge pull request #12 from jo-gross/fix/mobile
Browse files Browse the repository at this point in the history 
Some mobile optimisation and daisyui fixes
  • Loading branch information
@jo-gross
jo-gross authored Nov 16, 2023
2 parents ce19b2c + b4b7b39 commit 8694753
Show file tree
Hide file tree
Showing 14 changed files with 232 additions and 208 deletions.
1 change: 1 addition & 0 deletions components/UploadDropZone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export function UploadDropZone(props: UploadDropZoneProps) {
type="file"
name="file"
className="hidden"
capture="environment"
accept={'image/*'}
onChange={(event) => {
const file = event?.target?.files;
Expand Down
98 changes: 51 additions & 47 deletions components/cocktails/CocktailRecipeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,16 +401,18 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<>{errors.price && touched.price && errors.price}</> *
</span>
</label>
<div className={'input-group w-full'}>
<div className={'join w-full'}>
<input
type="number"
className={`input input-bordered w-full ${errors.price && touched.price && 'input-error'}`}
className={`input join-item input-bordered w-full ${
errors.price && touched.price && 'input-error'
}`}
name="price"
onChange={handleChange}
onBlur={handleBlur}
value={values.price ?? undefined}
/>
<span className={'btn-secondary'}>
<span className={'btn btn-secondary join-item'}>
<FaEuroSign />
</span>
</div>
Expand Down Expand Up @@ -815,11 +817,11 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
key={`form-recipe-step-${step.id}-ingredient-${ingredient.id}`}
className={'flex flex-row space-x-2'}
>
<div className={'input-group input-group-vertical w-min'}>
<div className={'join join-vertical w-min'}>
<button
type={'button'}
disabled={indexIngredient == 0}
className={'btn btn-square btn-outline btn-xs'}
className={'btn btn-square btn-outline join-item btn-xs'}
onClick={() => {
const value = values.steps[indexStep].ingredients[indexIngredient];
const reorderedGroups = (values.steps as CocktailRecipeStepFull[])[
Expand All @@ -843,7 +845,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
!(values.steps[indexStep].ingredients.length > 1) ||
indexIngredient == values.steps[indexStep].ingredients.length - 1
}
className={'btn btn-square btn-outline btn-xs'}
className={'btn btn-square btn-outline join-item btn-xs'}
onClick={() => {
const value = values.steps[indexStep].ingredients[indexIngredient];
const reorderedGroups = (values.steps as CocktailRecipeStepFull[])[
Expand All @@ -864,11 +866,11 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
</div>
<div
key={`form-recipe-step${step.id}-ingredient-${ingredient.id}`}
className={'input-group flex w-full flex-row'}
className={'join flex w-full flex-row'}
>
<select
name={`steps.${indexStep}.ingredients.${indexIngredient}.ingredientId`}
className={`flex-8 select select-bordered w-full min-w-[20%] ${
className={`flex-8 join-item select select-bordered w-full min-w-[20%] ${
((errors.steps as StepError[])?.[indexStep] as any)?.ingredients?.[
indexIngredient
]?.ingredientId && 'select-error'
Expand Down Expand Up @@ -909,14 +911,14 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<input
type="number"
name={`steps.${indexStep}.ingredients.${indexIngredient}.amount`}
className={'input input-bordered w-20 flex-auto md:w-40'}
className={'input join-item input-bordered w-20 flex-auto md:w-40'}
onChange={handleChange}
onBlur={handleBlur}
value={values.steps[indexStep].ingredients[indexIngredient].amount}
/>
<select
name={`steps.${indexStep}.ingredients.${indexIngredient}.unit`}
className={`select select-bordered max-w-[20%] md:max-w-none ${
className={`join-item select select-bordered max-w-[20%] md:max-w-none ${
((errors.steps as StepError[])?.[indexStep] as any)?.ingredients?.[
indexIngredient
]?.unit
Expand All @@ -939,7 +941,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
</select>
<button
type={'button'}
className={'btn btn-square btn-error w-8'}
className={'btn btn-square btn-error join-item w-8'}
disabled={values.steps[indexStep].ingredients.length == 1}
onClick={() =>
modalContext.openModal(
Expand Down Expand Up @@ -1041,11 +1043,11 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
className={'flex flex-row space-x-2 rounded-xl border border-neutral p-4'}
>
<div className={'flex flex-none items-center'}>
<div className={'input-group input-group-vertical'}>
<div className={'join join-vertical'}>
<button
type={'button'}
disabled={indexGarnish == 0}
className={'btn btn-square btn-outline btn-xs'}
className={'btn btn-square btn-outline join-item btn-xs'}
onClick={() => {
const value = values.garnishes[indexGarnish];
const reorderedGroups = (values.garnishes as CocktailRecipeGarnishFull[]).filter(
Expand All @@ -1066,7 +1068,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
<button
type={'button'}
disabled={!(values.garnishes.length > 1) || indexGarnish == values.garnishes.length - 1}
className={'btn btn-square btn-outline btn-xs'}
className={'btn btn-square btn-outline join-item btn-xs'}
onClick={() => {
const value = values.garnishes[indexGarnish];
const reorderedGroups = (values.garnishes as CocktailRecipeGarnishFull[]).filter(
Expand All @@ -1086,8 +1088,8 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
</button>
</div>
</div>
<div className={'flex flex-col'}>
<div className={'flex-1'}>
<div className={'flex-2 grid w-full grid-cols-1 md:grid-cols-2'}>
<div className={''}>
<label className={'label'}>
<span className={'label-text'}>Garnitur</span>
<span className={'label-text-alt text-error'}>
Expand Down Expand Up @@ -1146,40 +1148,42 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
/>
</label>
</div>
<div className={''}>
<label className={'label'}>
<span className={'label-text'}>Zusätzliche Beschreibung</span>
<span className={'label-text-alt text-error'}>
{/*{errors.garnishDescription && touched.garnishDescription && errors.garnishDescription}*/}
</span>
</label>
<textarea
value={values.garnishes[indexGarnish].description}
name={`garnishes.${indexGarnish}.description`}
className={
'textarea textarea-bordered h-24 w-full'
// ${
// errors.garnishDescription && touched.garnishDescription && 'textarea-error'
// }`
}
onChange={handleChange}
onBlur={handleBlur}
/>
</div>
</div>
<div className={'flex-1'}>
<label className={'label'}>
<span className={'label-text'}>Zusätzliche Beschreibung</span>
<span className={'label-text-alt text-error'}>
{/*{errors.garnishDescription && touched.garnishDescription && errors.garnishDescription}*/}
</span>
</label>
<textarea
value={values.garnishes[indexGarnish].description}
name={`garnishes.${indexGarnish}.description`}
className={
'textarea textarea-bordered h-24 w-full'
// ${
// errors.garnishDescription && touched.garnishDescription && 'textarea-error'
// }`
<div
className={'btn btn-square btn-error btn-sm'}
onClick={() =>
modalContext.openModal(
<DeleteConfirmationModal
spelling={'REMOVE'}
entityName={'die Garnitur'}
onApprove={() => removeGarnish(indexGarnish)}
/>,
)
}
onChange={handleChange}
onBlur={handleBlur}
/>
</div>
<div
className={'btn btn-square btn-error btn-sm'}
onClick={() =>
modalContext.openModal(
<DeleteConfirmationModal
spelling={'REMOVE'}
entityName={'die Garnitur'}
onApprove={() => removeGarnish(indexGarnish)}
/>,
)
}
>
<FaTrashAlt />
>
<FaTrashAlt />
</div>
</div>
</div>
))}
Expand Down
6 changes: 3 additions & 3 deletions components/garnishes/GarnishForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,17 +152,17 @@ export function GarnishForm(props: GarnishFormProps) {
<span>*</span>
</span>
</label>
<div className={'input-group'}>
<div className={'join'}>
<input
type={'number'}
placeholder={'Preis'}
className={`input input-bordered ${errors.price && touched.price && 'input-error'} w-full`}
className={`input join-item input-bordered ${errors.price && touched.price && 'input-error'} w-full`}
value={values.price}
onChange={handleChange}
onBlur={handleBlur}
name={'price'}
/>
<span className={'btn-secondary'}>€</span>
<span className={'btn btn-secondary join-item'}>€</span>
</div>
</div>
<div className={'col-span-2'}>
Expand Down
14 changes: 8 additions & 6 deletions components/glasses/GlassForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,34 +132,36 @@ export function GlassForm(props: GlassFormProps) {
<span>*</span>
</span>
</label>
<div className={'input-group'}>
<div className={'join'}>
<input
type={'number'}
placeholder={'Deposit'}
className={`input input-bordered w-full ${errors.deposit && touched.deposit && 'input-error'}}`}
className={`input join-item input-bordered w-full ${
errors.deposit && touched.deposit && 'input-error'
}}`}
value={values.deposit}
onChange={handleChange}
onBlur={handleBlur}
name={'deposit'}
/>
<span className={'btn-secondary'}>€</span>
<span className={'btn btn-secondary join-item'}>€</span>
</div>
</div>
<div className={'form-control'}>
<label className={'label'}>
<span className={'label-text'}>Volumen</span>
</label>
<div className={'input-group'}>
<div className={'join'}>
<input
type={'number'}
placeholder={'38cl'}
className={'input input-bordered w-full'}
className={'input join-item input-bordered w-full'}
value={values.volume}
onChange={handleChange}
onBlur={handleBlur}
name={'volume'}
/>
<span className={'btn-secondary'}>cl</span>
<span className={'btn btn-secondary join-item'}>cl</span>
</div>
</div>
<div className={'form-control'}>
Expand Down
26 changes: 16 additions & 10 deletions components/ingredients/IngredientForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,17 +182,19 @@ export function IngredientForm(props: IngredientFormProps) {
<span>*</span>
</span>
</label>
<div className={'input-group'}>
<div className={'join'}>
<input
type={'number'}
placeholder={'price'}
className={`input input-bordered w-full ${errors.price && touched.price && 'input-error'}`}
className={`input join-item input-bordered w-full ${
errors.price && touched.price && 'input-error'
}`}
value={values.price}
onChange={handleChange}
onBlur={handleBlur}
name={'price'}
/>
<span className={'btn-secondary'}>€</span>
<span className={'btn btn-secondary join-item'}>€</span>
</div>
</div>
<div className={'form-control'}>
Expand All @@ -205,18 +207,20 @@ export function IngredientForm(props: IngredientFormProps) {
<span>*</span>
</span>
</label>
<div className={'input-group'}>
<div className={'join'}>
<input
type={'number'}
placeholder={'38cl'}
className={`input input-bordered w-full ${errors.volume && touched.volume && 'input-error'}`}
className={`input join-item input-bordered w-full ${
errors.volume && touched.volume && 'input-error'
}`}
value={values.volume}
onChange={handleChange}
onBlur={handleBlur}
name={'volume'}
/>
<select
className={`select select-bordered ${errors.unit && 'select-error'}`}
className={`join-item select select-bordered ${errors.unit && 'select-error'}`}
onChange={handleChange}
onBlur={handleBlur}
name={'unit'}
Expand All @@ -231,7 +235,7 @@ export function IngredientForm(props: IngredientFormProps) {
</div>
</div>
<div>
Preis/{values.unit}: {(values.price / values.volume).toFixed(2)}€
Preis/{values.unit}: {(values.price ?? 0 / values.volume ?? 0).toFixed(2)}€
</div>
<div>
<label className={'label'}>
Expand Down Expand Up @@ -303,18 +307,20 @@ export function IngredientForm(props: IngredientFormProps) {
</span>
</span>
</label>
<div className={'input-group'}>
<div className={'join'}>
<input
type={'text'}
placeholder={''}
className={`input input-bordered w-full ${errors.link && touched.link && 'input-error'}`}
className={`input join-item input-bordered w-full ${
errors.link && touched.link && 'input-error'
}`}
onChange={handleChange}
onBlur={handleBlur}
value={values.link}
name={'link'}
/>
<button
className={`btn btn-primary ${values.fetchingExternalData ? 'loading' : ''}`}
className={`btn btn-primary join-item ${values.fetchingExternalData ? 'loading' : ''}`}
type={'button'}
disabled={
!(
Expand Down
Loading

0 comments on commit 8694753

Please sign in to comment.