mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-04 00:47:02 +01:00
automatic cropping of images
This commit is contained in:
1 parent
e3ff27ab09
commit
b6d3db3404
5 files changed
+50
-41
No files matched your search
@@ -123,8 +123,9 @@ const CategoryList: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: 2,
|
||||
bgcolor: 'background.default',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
@@ -132,10 +133,11 @@ const CategoryList: React.FC = () => {
|
||||
component="img"
|
||||
src={flavor.image_url}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
transition: 'transform 0.5s ease',
|
||||
'&:hover': { transform: 'scale(1.1)' }
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@@ -230,8 +232,9 @@ const CategoryList: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: 2,
|
||||
bgcolor: 'background.default',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
@@ -239,10 +242,11 @@ const CategoryList: React.FC = () => {
|
||||
component="img"
|
||||
src={flavor.image_url}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
transition: 'transform 0.5s ease',
|
||||
'&:hover': { transform: 'scale(1.1)' }
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -132,8 +132,9 @@ const Dashboard: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: 0.5,
|
||||
bgcolor: 'background.default',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 1,
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
@@ -142,9 +143,9 @@ const Dashboard: React.FC = () => {
|
||||
component="img"
|
||||
src={rating.flavor_image}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@@ -206,8 +207,9 @@ const Dashboard: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: 0.5,
|
||||
bgcolor: 'background.default',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 1,
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
@@ -216,9 +218,9 @@ const Dashboard: React.FC = () => {
|
||||
component="img"
|
||||
src={flavor.image_url}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -90,8 +90,9 @@ const PublicProfile: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: 1,
|
||||
bgcolor: 'background.default',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 1,
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
@@ -100,9 +101,9 @@ const PublicProfile: React.FC = () => {
|
||||
component="img"
|
||||
src={rating.flavor_image}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -93,8 +93,9 @@ const CategoryFlavors: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: 3,
|
||||
bgcolor: 'background.default',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
@@ -102,13 +103,12 @@ const CategoryFlavors: React.FC = () => {
|
||||
component="img"
|
||||
src={flavor.image_url}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
transition: 'transform 0.5s ease',
|
||||
'&:hover': { transform: 'scale(1.1)' }
|
||||
}}
|
||||
className="product-image"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -161,18 +161,20 @@ const FlavorDetail: React.FC = () => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'action.hover',
|
||||
p: { xs: 4, md: 6 }
|
||||
bgcolor: 'background.default',
|
||||
borderRight: { md: '1px solid' },
|
||||
borderBottom: { xs: '1px solid', md: 'none' },
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={flavor.image_url}
|
||||
sx={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
filter: 'drop-shadow(0px 12px 24px rgba(0,0,0,0.15))'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
Reference in new issue
Block a user