From 226d65bc6757966264a2b09fffa265a27699276e Mon Sep 17 00:00:00 2001 From: Kai Date: Mon, 20 Dec 2021 10:47:49 -0500 Subject: [PATCH] Fix collage section product and collection card image size (#1014) * Add theme level grid setting (#885) * adjust featured blog grid * ajust collage grid gap * adjust featured collection grid * update blog page grid * add settings, css variables and update grid class * Fix multicolumn vertical spacing * address reviewer feedback * Settings popup and drawer (#865) * Add media settings to non-card non-textbox elements (#893) * Text boxes global settings setup (#889) * Text boxes global settings setup * Add global sections settings (#891) * Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing * Global settings - buttons, inputs (#844) Buttons + inputs * Added back section settings tmeporarily (#899) * Add global settings cards (#886) * Add settings to schema * Edit template * Add styles * Use decimal for border-radius * Refactor markup * Adjust styles for product card * Add styles * Add settings * Update setting and CSS variable names * Update cards for search results * Clean up CSS * Update product card placeholder * Fix visual bugs. Adjust shadow setting min * Update markup for collection list cards * Update hover styles * Adjust collection arrow * Adjust collection arrow * Rename snippet for product card. Create snippet for collection card * Remove separate placeholder for product card * Adjustments for image ratio * Add support for auto height for collage * Clean up CSS * Fix typo * Fix pick up availability 'Unavailable' (#855) * Fix pick up availability 'Unavailable' * reuse similar check used in the same file * Remove redundant section settings * Update 1 translation file (#866) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Product image seo (#812) * Version bump to 2.4.0 (#884) * Add translation strings for en * Adjust styles * Update snippets/card-product.liquid * Adjust settings organization * Update layout/theme.liquid Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * Remove redundant padding * Address feedback - Clean up unused CSS * Fix interaction with border and background * Fix collage * Adjust price layout * Adjust price layout Co-authored-by: Ludo Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * update secondary button background color (#903) * Clean up popup drawer feed (#902) * Revert global section settings (#911) * Move vert spacing and remove other section settings * Include collage * Remove text box padding setting (#912) * Image with text section - Apply global textbox and media settings (#918) * Enable textbox settings for image with text section. Clean up CSS * Update from Shopify for theme dawn/apply-settings-image-with-text Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/apply-settings-image-with-text" This reverts commit 7dea1d2bb6a4d21f28895065ae5a70e8560fca01. * Add back bottom margin * Remove redundant media query Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> * Split popup and drawer settings (#917) * Split popup and drawer settings * Align naming * Update global setting range values (#954) * Update setting ranges and options for Buttons, Inputs, Layout, Media, Content containers * Fix typo * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Reorder settings. Adjust mobile grid range and defaults * Update settings naming Co-authored-by: melissaperreault * Fix section vertical spacing (#976) * Fix rich text margins for bg-1 * Remove section level spacing CSS * Update and clean up spacing naming conventions * Clean up * Fix spacing for special consecutive sections with no heading * Remove comment * Update collapse grid naming * Update behaviour of special collapsing sections * Fix bugs * Remove product-grip bottom margin * Adjust setting range. Set image-with-text as collapsible section * Update from Shopify for theme dawn/fix-section-vertical-spacing Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/fix-section-vertical-spacing" This reverts commit a0771e57ae4c697a101d6fc45092e0b112f64ccd. * Adapt consistent spacing for all sections. Remove special cases * Revert usage of section spacing for elements other than sections * Edit settings names and order for spacing. Add mobile vertical section spacing setting * Revert value for margin-bottom * Revert additional padding * Revert additional padding * Revert heading logic * Revert heading logic * Revert heading logic * Address feedback * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault * Update config/settings_schema.json Co-authored-by: melissaperreault Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault * Refactor collage * Update BEM for video modal * Adjust image spacing for mobile * Clean up * Set grip gap to global setting values * Fix collage focus states * Revert block order in liquid * Revert block order in liquid * Update file name * Add special case for single product/collection card * Remove ratios * Remove single video case * Update auto height setting for product and collection cards * Move card shadow to pseudo element (#1012) * Move product/card media shadows to pseudo element (#1013) * Add variant pills settings (#1005) * Add and update settings and copy * add css for variant pill settings * Image with text border/corner/shadow updates (#1003) * Collapse borders/corners and prevent shadow overlap * Revamp approach * Address media-only borders case * Adjust conditional * Prevent transparent borders from occupying physical space * Revert border width change * Clean up * Adjust implementation for card height extend * Adjust implementation for card height extend * Fix focus and clickable area for video which includes padding * Address PR comment. Fix 2 item mobile collage * Add position relative to collage-card for shadows * Update mobile collage layout * Use minmax to prevent grid expansion beyond viewport Co-authored-by: Martina Marien Co-authored-by: Sofia Matulis Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Ludo Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault --- assets/collage.css | 506 ++++++------------------------- assets/component-card.css | 15 + assets/component-modal-video.css | 102 +++++++ assets/section-main-product.css | 2 +- sections/collage.liquid | 245 ++++++--------- snippets/card-collection.liquid | 3 +- snippets/card-product.liquid | 5 +- 7 files changed, 296 insertions(+), 582 deletions(-) create mode 100644 assets/component-modal-video.css diff --git a/assets/collage.css b/assets/collage.css index 8a02d821d03..02fdd5f714b 100644 --- a/assets/collage.css +++ b/assets/collage.css @@ -5,492 +5,158 @@ .collage { display: grid; - row-gap: var(--grid-mobile-vertical-spacing); - column-gap: var(--grid-mobile-horizontal-spacing); } -.collage--mobile { - grid-template-columns: repeat(2, 1fr); -} - -@media screen and (min-width: 750px) { - .collage { - grid-template-columns: 1fr 1fr 1fr; - row-gap: var(--grid-desktop-vertical-spacing); - column-gap: var(--grid-desktop-horizontal-spacing); - } -} - -.collage-card { - position: relative; - border: 0.1rem solid rgba(var(--color-foreground), 0.08); -} - -.collage-card.collage-collection { - border: none; -} - -.collage-card:only-child { - grid-column: 1; +.collage__item > * { width: 100%; } @media screen and (max-width: 749px) { - .collage--mobile .collage-card--left, - .collage--mobile .collage-card--right { - grid-column: 1/ 3; - } - - .collage--mobile .collage-card:first-child:nth-last-child(2) { - grid-column: 1/ 2; - } - - .collage--mobile .collage-card:nth-child(2):last-child { - grid-column: 2/ 3; - } -} - -@media screen and (min-width: 750px) { - .collage-card--left:not(:only-child), - .collage-card--right:not(:only-child) { - min-height: 40rem; - } - - .collage-card--left:nth-last-child(3), - .collage-card--right:nth-child(3) { - grid-row: 1/ 3; - } - - .collage-card--left:nth-last-child(2), - .collage-card--left:nth-last-child(3) { - grid-column: 1 / span 2; - } - - .collage-card--right:nth-child(2), - .collage-card--right:nth-child(3) { - grid-column: 2 / span 2; - } - - .collage-card--right { - grid-column: 2/ 3; + .collage { + grid-column-gap: var(--grid-mobile-horizontal-spacing); + grid-row-gap: var(--grid-mobile-vertical-spacing); } - .collage-card:only-child { - grid-column: 1 / span 3; - max-width: 100%; + .collage--mobile { + grid-template-columns: repeat(2, minmax(0, 1fr)); } -} -.collage-card .card, -.collage-card:not(:only-child) .deferred-media { - height: 100%; -} - -.collage-content.deferred-media__poster:focus { - outline-offset: 0.3rem; -} - -.collage-video.collage-card--left .collage-content, -.collage-video.collage-card--right .collage-content { - position: absolute; -} - -.collage-video noscript .collage-content { - width: 100%; -} - -@media screen and (min-width: 750px) { - .collage-video .collage-content { - position: absolute; + .collage--mobile .collage__item--left:nth-child(3n - 2) { + grid-column: span 2; } -} -@media screen and (max-width: 749px) { - .collage-card--left .deferred-media--placeholder, - .collage-card--right .deferred-media--placeholder, - .collage-video-placeholder { - padding-bottom: 25rem; + .collage--mobile .collage__item--left:nth-child(3n - 2):nth-last-child(2) { + grid-column: span 1; } -} - -.collage-card iframe { - width: 100%; - height: 100%; - position: absolute; - background-color: rgba(var(--color-foreground), 0.03); - border: 0; -} - -.collage-card .card:hover { - box-shadow: none; -} - -.collage-content, -.collage-content.card, -.collage-content.media, -.collage-card__no-image { - display: flex; - flex-direction: column; - height: 100%; -} - -.collage-content { - justify-content: center; -} - -.collage-content h3 { - margin: 0; - word-break: break-word; -} -.collage-card.collage-product:only-child { - max-width: 73rem; - justify-self: center; -} - -.collage-product .collage-card__no-image { - flex: 1; - justify-content: center; - align-items: center; - overflow: hidden; -} - -.collage-card__description { - overflow: hidden; -} - -.card .icon-wrap.collage-card__arrow { - display: none; -} - -.collage-card--left:not(.collage-product) .media > .collage-card__image, -.collage-card--right:not(.collage-product) .media > .collage-card__image { - position: inherit; -} - -@media screen and (max-width: 749px) { - .collage:not(.collage--mobile) .collage-card__no-image { - min-height: 25rem; + .collage--mobile .collage__item--left:nth-child(3n) { + grid-column-start: 2; } - .collage-card__no-image.card__text-spacing { - padding: 2rem; + .collage--mobile .collage__item--right:nth-child(3n - 2) { + grid-column-start: 1; } - .collage-card--left .collage-card__no-image h3, - .collage-card--right .collage-card__no-image h3 { - font-size: calc(var(--font-heading-scale) * 3rem); + .collage--mobile .collage__item--right:nth-child(3n - 2):last-child { + grid-column: span 2; } - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card__description { - display: none; + .collage--mobile .collage__item--right:nth-child(3n - 1) { + grid-column-start: 2; } - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card__arrow { - display: inline-block; + .collage--mobile .collage__item--right:nth-child(3n) { + grid-column: 1 / span 2; } } -.collage-card--left .collage-card__no-image, -.collage-card--right .collage-card__no-image, -.collage-card--left .placeholder-svg, -.collage-card--right .placeholder-svg { - min-height: 25rem; -} - @media screen and (min-width: 750px) { - .collage-card--left .collage-card__no-image, - .collage-card--right .collage-card__no-image, - .collage-card--left .placeholder-svg, - .collage-card--right .placeholder-svg { - min-height: 40rem; - } - - .collage-card__no-image h3 { - font-size: calc(var(--font-heading-scale) * 3rem); - } -} - -.collage-card__image-wrapper { - flex: 1; -} - -.collage-card__image-wrapper.media--hover-effect img { - will-change: transform; -} - -.collage-card__image-wrapper > * { - width: 100%; - height: 100%; -} - -@media screen and (max-width: 749px) { - .collage--mobile - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card__image-wrapper { - padding-bottom: 100%; - } - - .collage:not(.collage--mobile) .media > .collage-card__image { - position: inherit; + .collage { + grid-auto-flow: column; + grid-column-gap: var(--grid-desktop-horizontal-spacing); + grid-row-gap: var(--grid-desktop-vertical-spacing); + grid-template-columns: repeat(3, minmax(0, 1fr)); } - .collage:not(.collage--mobile) - .collage-product.collage-card--left - .collage-card__image, - .collage:not(.collage--mobile) - .collage-product.collage-card--right - .collage-card__image { - position: absolute; + .collage__item--left:nth-child(3n - 2) { + grid-column: 1 / span 2; + grid-row: span 2; } - - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card-spacing - .collage-card__image-wrapper, - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card-spacing.collage-card__image-wrapper { - padding-bottom: 0; - flex: 0 auto; + + .collage__item--left:nth-child(3n - 2):last-child { + grid-column: 1 / span 3; } - .collage--mobile - .collage-card--left - + .collage-card:last-child - .collage-card__image-wrapper, - .collage--mobile.collage--right - .collage-card:first-child:nth-last-child(2) - .collage-card__image-wrapper { - padding-bottom: 0; - flex: 1; + .collage__item--left:nth-child(3n - 1), + .collage__item--left:nth-child(3n) { + grid-column-start: 3; } - .collage--mobile - .collage-card--left - + .collage-card:last-child - .collage-card-spacing - .collage-card__image, - .collage--mobile.collage--right - .collage-card:first-child:nth-last-child(2) - .collage-card-spacing - .collage-card__image { - object-fit: contain; - position: absolute; - height: 100%; + .collage__item--left:nth-child(3n - 1):last-child { + grid-row: span 2; } - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card-spacing - .collage-card__image { - position: inherit; - height: auto; + .collage__item--right:nth-child(3n - 2) { + grid-column: 1 / span 1; + grid-row: span 1; } -} - -@media screen and (min-width: 750px) { - .collage-card--left - + .collage-card:last-child - .collage-card-spacing - .collage-card__image-wrapper, - .collage--right - .collage-card:first-child:nth-last-child(2) - .collage-card-spacing - .collage-card__image-wrapper { - padding-bottom: 100%; - flex: 0 0 auto; + + .collage__item--right:nth-child(3n - 2):last-child { + grid-column: 1 / span 3; } -} -.collage-card-spacing:not(.collage-card__image-wrapper), -.collage-card-spacing > img { - padding: 2rem; -} - -.collage-card-spacing iframe, -.collage-video.collage-card--left .collage-card-spacing .collage-content, -.collage-video.collage-card--right .collage-card-spacing .collage-content { - width: calc(100% - 4rem); - height: calc(100% - 4rem); -} - -.collage-card-spacing .card__text-spacing { - padding: 0; -} - -.collage-card-spacing .collage-content__info { - margin: 1.5rem 0 0; -} - -@media screen and (min-width: 750px) { - .collage-card-spacing:not(.collage-card__image-wrapper), - .collage-card-spacing > img { - padding: 3rem; + .collage__item--right:nth-child(3n - 1) { + grid-column-start: 1; } - .collage-card-spacing iframe, - .collage-video.collage-card--left .collage-card-spacing .collage-content, - .collage-video.collage-card--right .collage-card-spacing .collage-content { - width: calc(100% - 6rem); - height: calc(100% - 6rem); + .collage__item--right:nth-child(3n-1):last-child { + grid-column: span 2; } - .collage-card-spacing .collage-content__info { - margin: 1.8rem 0 0; + .collage__item--right:nth-child(3n) { + grid-column: 2 / span 2; + grid-row: span 2; } - .collage-card:not(.collage-card--left):not(.collage-card--right) - .collage-card-spacing - img { - object-fit: contain; + .collage__item--collection:only-child, + .collage__item--product:only-child { + justify-self: center; + max-width: 73rem; + width: 100%; } } -.collage-product__badge { +.collage-card { + background: rgb(var(--color-background)); + border-radius: var(--media-radius); + border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); + height: 100%; position: relative; } -.collage-content__info { - margin: 1.5rem 2rem; -} - -.card-information__wrapper.collage-content__info { - margin: 0; - padding: 1.5rem 2rem; -} - -@media screen and (min-width: 750px) { - .collage-content__info { - margin: 2rem 3.5rem; - } - - .card-information__wrapper.collage-content__info { - padding: 2rem 3.5rem; - } -} - -/* Video modal testing */ -.collage-video__modal.collage-video__modal { - box-sizing: border-box; - opacity: 0; - position: fixed; - visibility: hidden; +.collage-card:after { + border-radius: var(--media-radius); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-foreground), var(--media-shadow-opacity)); + content: ''; + position: absolute; + width: calc(var(--media-border-width) * 2 + 100%); + height: calc(var(--media-border-width) * 2 + 100%); + top: calc(var(--media-border-width) * -1); + left: calc(var(--media-border-width) * -1); z-index: -1; - margin: 0 auto; - top: 0; - left: 0; - overflow: auto; - width: 100%; - background: rgba(var(--color-foreground), 0.2); - height: 100%; -} - -.collage-video__modal[open].collage-video__modal[open] { - opacity: 1; - visibility: visible; - z-index: 101; } -.collage-video__modal-content { - background-color: rgb(var(--color-background)); - overflow: auto; +.collage-card .media { + border-radius: calc(var(--media-radius) - var(--media-border-width)); height: 100%; - margin: 0; - width: 100%; - position: absolute; - padding: 0; + overflow: hidden; } -.collage-video__modal-toggle { - background-color: rgb(var(--color-background)); - border: 0.1rem solid rgba(var(--color-foreground), 0.1); - border-radius: 50%; - color: rgba(var(--color-foreground), 0.55); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: fixed; - padding: 1.2rem; - z-index: 2; - top: 2rem; - right: 0.5rem; - width: 4rem; - margin: 0 0 0 auto; +.collage-card .deferred-media { + height: 100%; + overflow: visible; } -@media screen and (min-width: 750px) { - .collage-video__modal-toggle { - right: 4.8rem; - top: 3.5rem; - } +.collage-card__link { + display: block; + height: 100%; } -@media screen and (min-width: 990px) { - .collage-video__modal-toggle { - right: 4.3rem; - top: 3rem; - } +.collage-card .deferred-media__poster { + background-color: transparent; + border: 0; } -.collage-video__modal-toggle .icon { - height: auto; - margin: 0; - width: 2.2rem; +.collage-card .deferred-media__poster:focus { + outline-offset: 0.3rem; } -.collage-video__modal-content-info { - width: calc(100% - 1rem); - height: calc(100% - 6rem); - margin: 0 auto; - padding-top: 8rem; +.collage .collage-card-spacing { + padding: 2rem; } @media screen and (min-width: 750px) { - .collage-video__modal-content-info { - width: calc(100% - 9.6rem); - height: calc(100% - 7.5rem); - padding-top: 9.5rem; - } -} - -@media screen and (min-width: 990px) { - .collage-video__modal-content-info { - width: calc(100% - 8.6rem); - height: calc(100% - 7rem); - padding-top: 9rem; + .collage .collage-card-spacing { + padding: 3rem; } } - -.collage-video__modal-video, -.collage-video__modal-video iframe { - width: 100%; - height: 100%; -} - -.collage-video__modal-video iframe { - position: static; -} - -.collage-card:not(.collage-product, .collage-collection) { - border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); - border-radius: var(--media-radius); - background: rgb(var(--color-background)); -} - -.collage-card:not(.collage-product, .collage-collection):after { - border-radius: var(--media-radius); - box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-foreground), var(--media-shadow-opacity)); - content: ''; - position: absolute; - width: calc(var(--media-border-width) * 2 + 100%); - height: calc(var(--media-border-width) * 2 + 100%); - top: calc(var(--media-border-width) * -1); - left: calc(var(--media-border-width) * -1); - z-index: -1; -} - -.collage-card:not(.collage-product, .collage-collection) .media { - border-radius: calc(var(--media-radius) - var(--media-border-width)); - overflow: hidden; -} diff --git a/assets/component-card.css b/assets/component-card.css index ccb6c1d1cf0..e6bc102fbf2 100644 --- a/assets/component-card.css +++ b/assets/component-card.css @@ -217,6 +217,21 @@ display: none; } +.card--extend-height { + height: 100%; +} + +.card--extend-height.card--standard.card--text, +.card--extend-height.card--media { + display: flex; + flex-direction: column; +} + +.card--extend-height.card--standard.card--text .card__inner, +.card--extend-height.card--media .card__inner { + flex-grow: 1; +} + .card .icon-wrap { margin-left: 0.8rem; white-space: nowrap; diff --git a/assets/component-modal-video.css b/assets/component-modal-video.css new file mode 100644 index 00000000000..19a8d6babe8 --- /dev/null +++ b/assets/component-modal-video.css @@ -0,0 +1,102 @@ +.modal-video { + background: rgba(var(--color-foreground), 0.2); + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0 auto; + opacity: 0; + overflow: auto; + position: fixed; + top: 0; + visibility: hidden; + width: 100%; + z-index: -1; +} + +.modal-video[open] { + opacity: 1; + visibility: visible; + z-index: 101; +} + +.modal-video__content { + background-color: rgb(var(--color-background)); + height: 100%; + margin: 0; + overflow: auto; + padding: 0; + position: absolute; + width: 100%; +} + +.modal-video__toggle { + align-items: center; + background-color: rgb(var(--color-background)); + border-radius: 50%; + border: 0.1rem solid rgba(var(--color-foreground), 0.1); + color: rgba(var(--color-foreground), 0.55); + cursor: pointer; + display: flex; + justify-content: center; + margin: 0 0 0 auto; + padding: 1.2rem; + position: fixed; + right: 0.5rem; + top: 2rem; + width: 4rem; + z-index: 2; +} + +@media screen and (min-width: 750px) { + .modal-video__toggle { + right: 4.8rem; + top: 3.5rem; + } +} + +@media screen and (min-width: 990px) { + .modal-video__toggle { + right: 4.3rem; + top: 3rem; + } +} + +.modal-video__toggle .icon { + height: auto; + margin: 0; + width: 2.2rem; +} + +.modal-video__content-info { + height: calc(100% - 6rem); + margin: 0 auto; + padding-top: 8rem; + width: calc(100% - 1rem); +} + +@media screen and (min-width: 750px) { + .modal-video__content-info { + height: calc(100% - 7.5rem); + padding-top: 9.5rem; + width: calc(100% - 9.6rem); + } +} + +@media screen and (min-width: 990px) { + .modal-video__content-info { + height: calc(100% - 7rem); + padding-top: 9rem; + width: calc(100% - 8.6rem); + } +} + +.modal-video__video, +.modal-video__video iframe { + height: 100%; + width: 100%; +} + +.modal-video__video iframe { + position: static; + border: 0; +} diff --git a/assets/section-main-product.css b/assets/section-main-product.css index 697fb312221..aab6dfcb2fe 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -1101,4 +1101,4 @@ a.product__text { content: ""; display: block; padding-bottom: 100%; -} \ No newline at end of file +} diff --git a/sections/collage.liquid b/sections/collage.liquid index 291e2bd7ce4..928f9c98bbd 100644 --- a/sections/collage.liquid +++ b/sections/collage.liquid @@ -1,6 +1,7 @@ {{ 'collage.css' | asset_url | stylesheet_tag }} {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} +{{ 'component-modal-video.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { @@ -18,158 +19,56 @@ -
+

{{ section.settings.heading | escape }}

-
+
{%- for block in section.blocks -%} - - {% liquid - assign focus_card_left = false - if section.settings.desktop_layout == 'left' and forloop.first - assign focus_card_left = true - elsif section.settings.desktop_layout == 'right' and forloop.last - assign focus_card_right = true - endif - %} - {%- case block.type -%} - {%- when 'image' -%} -
-
- {%- if block.settings.image != blank -%} - {{ block.settings.image.alt | escape }} - {%- else -%} - {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder collage-card__image' }} - {%- endif -%} -
-
- {%- when 'product'-%} -
-
- {% render 'card-product', - card_product: block.settings.product, - media_aspect_ratio: 'auto', - show_secondary_image: block.settings.second_image - %} +
+ {%- case block.type -%} + {%- when 'image' -%} +
+
+ {%- if block.settings.image != blank -%} + {{ block.settings.image.alt | escape }} + {%- else -%} + {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }} + {%- endif -%} +
-
- {%- when 'collection'-%} -
+ {%- when 'product'-%} + {% render 'card-product', + card_product: block.settings.product, + media_aspect_ratio: 'adapt', + show_secondary_image: block.settings.second_image, + extend_height: true + %} + {%- when 'collection'-%} {% render 'card-collection', card_collection: block.settings.collection, - media_aspect_ratio: 'auto', - columns: 2 - %} -
- {%- when 'video' -%} -
- - {%- if section.blocks.size == 1 -%} - - - - - {%- else -%} - -
-
- - -