Merge branch 'release/0.1.5'

.nvmrc

@@ -0,0 +1 @@
+v14.18.0

CHANGELOG.md

@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.5] - 2023-06-06
+### Security
+- update all dependencies JavaScript
+
+### Removed
+- remove image aspect --ratio - Games-of-Switzerland/swissgamesgarden#130
+
 ## [0.1.4] - 2023-04-05
 ### Changed
 - update job of Robin François - Games-of-Switzerland/swissgamesgarden#122
@@ -54,7 +61,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - update changelog following 'keep a changelog'
 
-[Unreleased]: https://github.com/Games-of-Switzerland/gos-website/compare/0.1.4...HEAD
+[Unreleased]: https://github.com/Games-of-Switzerland/gos-website/compare/0.1.5...HEAD
+[0.1.5]: https://github.com/Games-of-Switzerland/gos-website/compare/0.1.4...0.1.5
 [0.1.4]: https://github.com/Games-of-Switzerland/gos-website/compare/0.1.3...0.1.4
 [0.1.3]: https://github.com/Games-of-Switzerland/gos-website/compare/0.1.2...0.1.3
 [0.1.2]: https://github.com/Games-of-Switzerland/gos-website/compare/0.1.1...0.1.2

VERSION

@@ -1 +1 @@
-0.1.4
+0.1.5

src/components/Game/Detail/GameDetail.jsx

@@ -40,10 +40,6 @@ const GameDetail = ({game}) => {
       ? [['downscale_330x660']]
       : [['downscale_675x500', 'downscale_1350x1000']];
 
-  // sources={[['3x2_330x220', '3x2_660x440']]}
-  //       ratio={2 / 3}
-  //       defaultSize="3x2_330x220"
-
   const renderImages = (imgs = images.data, className) =>
     imgs.map(image => (
       <Image

src/components/Game/Teaser/GameTeaser.jsx

@@ -25,7 +25,6 @@ const GameTeaser = ({game}) => {
         image={teaserPicture}
         alt={title}
         sources={[['3x2_330x220', '3x2_660x440']]}
-        ratio={2 / 3}
         defaultSize="3x2_330x220"
         className="flex-grow"
       />

src/components/Image.jsx

@@ -46,40 +46,23 @@ const getImageType = image => {
 const Image = ({
   image,
   alt,
-  style,
   sources = [],
-  ratio,
   className,
   defaultSize = 'downscale_675x500',
 }) => {
   const [loaded, setLoaded] = useState(false);
   const imageType = getImageType(image);
 
-  const {width, height} = image.meta || image;
-  const imgRatio = height / width;
-
-  const wrapperStyle = {
-    '--ratio': `${(ratio || imgRatio) * 100}%`,
-  };
-
-  style = {
-    ...style,
-    minWidth: `min(100%, ${IMG_MIN_WIDTH}px)`,
-    maxWidth: `min(100%, ${width}px)`,
-    maxHeight: `min(${IMG_MAX_HEIGHT}px, ${height}px)`,
-  };
-
   return (
-    <div className={className} style={style}>
+    <div className={className}>
       {image ? (
-        <div className="picture picture-ratio" style={wrapperStyle}>
+        <div className="picture">
           {!loaded && (
             <img
               className="picture-placeholder"
               alt=""
               src={image.links.placeholder_30x30.href}
               aria-hidden="true"
-              style={style}
             />
           )}
           <picture>
@@ -95,7 +78,6 @@ const Image = ({
               src={image.links[defaultSize].href || image.href}
               alt={alt}
               loading="lazy"
-              style={style}
               onLoad={() => setLoaded(true)}
               className="w-full"
             />

src/styles/_img.css

@@ -1,20 +1,7 @@
-.picture {
-  @apply relative overflow-hidden;
-
-  picture {
-    @apply absolute inset-0 h-full w-full;
-  }
+.picture picture {
+  @apply h-full w-full;
 }
 
 .picture-placeholder {
   @apply w-full h-full;
 }
-
-.picture-ratio {
-  @apply h-0;
-  padding-top: var(--ratio, 0);
-
-  .picture-placeholder {
-    @apply absolute inset-0;
-  }
-}