Update lookbook markers and helper overlay #488
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting
| <div class="lookbook-image position-relative d-inline-block"> | ||
| {if isset($block.settings.image.url) && $block.settings.image.url} | ||
| <img src="{$block.settings.image.url}" alt="{$block.settings.title|escape:'htmlall':'UTF-8'}" class="img-fluid w-100" loading="lazy"> | ||
| {/if} | ||
| {if isset($block.states) && $block.states} | ||
| {foreach from=$block.states item=state} | ||
| {if isset($state.product.id) && $state.product.id} | ||
| <button type="button" class="btn btn-light rounded-circle lookbook-marker position-absolute" style="top:{$state.top|default:'0%'|escape:'htmlall'};left:{$state.left|default:'0%'|escape:'htmlall'};transform:translate(-50%,-50%);" data-product-id="{$state.product.id}"> | ||
| <button type="button" class="lookbook-marker position-absolute" style="top:{$state.top|default:'0%'|escape:'htmlall'};left:{$state.left|default:'0%'|escape:'htmlall'};transform:translate(-50%,-50%);" data-product-id="{$state.product.id}"> | ||
| <span class="visually-hidden">{l s='View product' mod='everblock'}</span> | ||
| </button> | ||
| {/if} | ||
| {/foreach} | ||
| {/if} | ||
| </div> | ||
| <div class="lookbook-helper" role="note"> | ||
| <span class="lookbook-helper-icon" aria-hidden="true"> | ||
| <svg class="lookbook-helper-svg" width="20" height="20" viewBox="0 0 20 20" focusable="false" aria-hidden="true"> | ||
| <path d="M5 2.5a1 1 0 0 0-1 1v10.042a1 1 0 0 0 1.707.707l2.586-2.586 2.48 4.96a1 1 0 0 0 1.342.447l1.856-.928a1 1 0 0 0 .447-1.342l-2.48-4.96 3.293.658A1 1 0 0 0 16 8.52V3.5a1 1 0 0 0-1-1H5z" fill="currentColor"/> | ||
| </svg> | ||
| </span> | ||
| <span class="lookbook-helper-text">{l s='Cliquez sur un point pour voir le produit' mod='everblock'}</span> | ||
| <div class="lookbook-helper" role="note"> | ||
| <span class="lookbook-helper-icon" aria-hidden="true"> | ||
| <svg class="lookbook-helper-svg" width="24" height="24" viewBox="0 0 24 24" focusable="false" aria-hidden="true"> | ||
| <path d="M12 2a1 1 0 0 1 1 1v9.25l.586-.586a2 2 0 0 1 3.414 1.414v2.5A5.5 5.5 0 0 1 11.5 21H9a5 5 0 0 1-5-5v-3.586l-1.293 1.293a1 1 0 0 1-1.414-1.414l3.75-3.75A1 1 0 0 1 6.75 9H9V5a1 1 0 0 1 2 0V3a1 1 0 0 1 1-1zm-6 9.5a.5.5 0 0 0-.5.5v5a3.5 3.5 0 0 0 3.5 3.5h2.5a3.5 3.5 0 0 0 3.5-3.5v-2.5a1 1 0 0 0-1.707-.707l-1.586 1.586A1 1 0 0 1 11 15v-5a1 1 0 0 0-2 0v1.5a.5.5 0 0 1-.5.5H9a1 1 0 0 0-.707.293l-2.25 2.25A1 1 0 0 1 4 14.5v-3z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/> | ||
| </svg> | ||
| </span> | ||
| <span class="lookbook-helper-text">{l s='Cliquez sur un point pour voir le produit' mod='everblock'}</span> | ||
| </div> |
There was a problem hiding this comment.
[P1] Helper overlay blocks markers near image bottom
The helper note is now rendered inside .lookbook-image and positioned absolutely with bottom: 0 and a positive z-index. Because half of the helper’s height overlaps the image, any marker placed toward the lower portion of the picture (e.g., a state with top around 80–100%) is now covered and cannot be clicked—the helper element captures the pointer events. Previously the helper sat outside the image so marker hit areas were never obscured. Consider keeping the helper outside or lowering its stacking/pointer behavior so markers remain interactable.
Useful? React with 👍 / 👎.
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68d53d62983c8322b6c84dd315e4ed7a