entity_image: extend enlargeInModal to all withLink=false

inventaire · Nov 7, 2024 · fe57ee5 · fe57ee5
1 parent 43dad03
commit fe57ee5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/app/modules/entities/components/entity_image.svelte b/app/modules/entities/components/entity_image.svelte
@@ -10,7 +10,6 @@
   export let size = 300
   export let withLink = false
   export let noImageCredits = false
-  export let enlargeInModal = false
 
   const { image, uri } = entity
   const { url } = image
@@ -21,17 +20,6 @@
     creditsUrl = image.credits.url
     creditsText = image.credits.text
   }
-  if (enlargeInModal) {
-    withLink = true
-  }
-
-  function onImageClick (e) {
-    if (enlargeInModal) {
-      showModal = true
-    } else {
-      loadInternalLink(e)
-    }
-  }
 
   const entityUrl = `/entity/${uri}`
 </script>
@@ -42,12 +30,18 @@
   {#if withLink}
     <a
       href={entityUrl}
-      on:click={e => onImageClick(e)}
+      on:click={loadInternalLink}
     >
       <ImageDiv {url} {size} />
     </a>
   {:else}
-    <ImageDiv {url} {size} />
+    <button
+      class="zoom-in"
+      on:click={() => showModal = true}
+      title={i18n('Enlarge image')}
+    >
+      <ImageDiv {url} {size} />
+    </button>
   {/if}
   {#if creditsText && !noImageCredits}
     <p class="photo-credits">
@@ -73,6 +67,9 @@
 
 <style lang="scss">
   @import "#general/scss/utils";
+  .zoom-in{
+    cursor: zoom-in;
+  }
   .photo-credits{
     margin: 0;
     font-size: 0.8em;

diff --git a/app/modules/entities/components/layouts/edition.svelte b/app/modules/entities/components/layouts/edition.svelte
@@ -35,9 +35,8 @@
       {#if image.url}
         <EntityImage
           {entity}
-          size={300}
+          size={200}
           noImageCredits={true}
-          enlargeInModal={true}
         />
       {/if}
       <div class="info-wrapper">
@@ -82,7 +81,7 @@
     margin-block-end: 1em;
     :global(.entity-image){
       padding-inline-end: 1em;
-      max-inline-size: 12em;
+      inline-size: 12em;
     }
   }
   .info-wrapper{