From ac238493d09a5e36e17e0bae2abb8e95da01ccf5 Mon Sep 17 00:00:00 2001 From: Kylie Meli Date: Wed, 30 Jul 2025 16:47:27 -0400 Subject: [PATCH 1/5] updating to max-height instead and some other fixes --- .../Assets/image-carousel.ts | 7 +++ .../Assets/markdown/image-carousel.css | 55 +++++++++---------- .../Myst/Directives/DirectiveHtmlRenderer.cs | 2 +- .../Directives/Image/ImageCarouselBlock.cs | 12 ++-- .../Directives/Image/ImageCarouselView.cshtml | 17 +++--- .../Image/ImageCarouselViewModel.cs | 2 +- .../Directives/ImageCarouselTests.cs | 26 ++++----- 7 files changed, 64 insertions(+), 57 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/image-carousel.ts b/src/Elastic.Documentation.Site/Assets/image-carousel.ts index 3f3a4b163..bcaa6333c 100644 --- a/src/Elastic.Documentation.Site/Assets/image-carousel.ts +++ b/src/Elastic.Documentation.Site/Assets/image-carousel.ts @@ -18,6 +18,13 @@ class ImageCarousel { this.slides = Array.from( this.container.querySelectorAll('.carousel-slide') ) + + // Don't initialize if no slides + if (this.slides.length === 0) { + console.warn('No carousel slides found') + return + } + this.indicators = Array.from( this.container.querySelectorAll('.carousel-indicator') ) diff --git a/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css b/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css index 1a5480e42..7a2deada5 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css @@ -2,13 +2,11 @@ position: relative; width: 100%; margin: 2rem 0; - overflow: hidden; } .carousel-track { width: 100%; position: relative; - min-height: 200px; } .carousel-slide { @@ -27,19 +25,22 @@ } .carousel-image-reference { - display: block; + display: flex; + justify-content: center; + align-items: center; } .carousel-image-reference img { - width: 100%; + max-width: 100%; height: auto; display: block; + box-sizing: border-box; + margin: 0 auto; } .carousel-control { position: absolute; - top: 50%; - transform: translateY(-50%); + top: 100px; /* Fixed distance from top */ background-color: rgba(0, 0, 0, 0.5); border: none; color: white; @@ -92,38 +93,34 @@ background-color: black; } -/* Fixed height carousel styles */ -.carousel-container[data-fixed-height] .carousel-track { - min-height: auto; - overflow: hidden; +/* Max height carousel styles */ +.carousel-container[data-max-height] { + padding-bottom: 40px; /* Space for indicators */ } -.carousel-container[data-fixed-height] .carousel-slide { - height: 100%; - top: 0; - left: 0; +.carousel-container[data-max-height] .carousel-track { + max-height: var(--carousel-max-height); + overflow: hidden; } -.carousel-container[data-fixed-height] .carousel-slide[data-active='true'] { - position: relative; - height: 100%; - top: auto; - left: auto; +.carousel-container[data-max-height] .carousel-image-reference img { + max-height: var(--carousel-max-height); + width: auto; + height: auto; + display: block; + margin: 0 auto; } -.carousel-container[data-fixed-height] .carousel-image-reference { - height: 100%; - display: flex; - align-items: center; - justify-content: center; +/* Auto height carousel styles - images at natural size */ +.carousel-container[data-auto-height] { + padding-bottom: 40px; /* Space for indicators */ } -.carousel-container[data-fixed-height] .carousel-image-reference img { - width: auto; - height: 100%; +.carousel-container[data-auto-height] .carousel-image-reference img { max-width: 100%; - object-fit: contain; - object-position: center; + height: auto; + display: block; + margin: 0 auto; } @media (max-width: 768px) { .carousel-control { diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs index 4c8a6e2d6..e11b5a91a 100644 --- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs +++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs @@ -138,7 +138,7 @@ private static void WriteImageCarousel(HtmlRenderer renderer, ImageCarouselBlock Target = img.Target, ImageUrl = img.ImageUrl }).ToList(), - FixedHeight = block.FixedHeight + MaxHeight = block.MaxHeight }); RenderRazorSlice(slice, renderer); } diff --git a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs index c5597c4ff..60e3fc5a4 100644 --- a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs +++ b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs @@ -14,7 +14,7 @@ public class ImageCarouselBlock(DirectiveBlockParser parser, ParserContext conte { public List Images { get; } = []; public string? Id { get; set; } - public string? FixedHeight { get; set; } + public string? MaxHeight { get; set; } public override string Directive => "carousel"; @@ -22,15 +22,15 @@ public override void FinalizeAndValidate(ParserContext context) { // Parse options Id = Prop("id"); - FixedHeight = Prop("fixed-height"); + MaxHeight = Prop("max-height"); - // Validate fixed-height option - if (!string.IsNullOrEmpty(FixedHeight)) + // Validate max-height option + if (!string.IsNullOrEmpty(MaxHeight)) { var validHeights = new[] { "auto", "small", "medium" }; - if (!validHeights.Contains(FixedHeight.ToLower())) + if (!validHeights.Contains(MaxHeight.ToLower())) { - this.EmitWarning($"Invalid fixed-height value '{FixedHeight}'. Valid options are: auto, small, medium. Defaulting to 'auto'."); + this.EmitWarning($"Invalid max-height value '{MaxHeight}'. Valid options are: auto, small, medium. Defaulting to 'auto'."); } } diff --git a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml index 1d59c6d78..f1a457c9d 100644 --- a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml +++ b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml @@ -1,25 +1,28 @@ @inherits RazorSlice @{ // Convert semantic height values to pixel values - string? pixelHeight = Model.FixedHeight?.ToLower() switch + var maxHeightValue = Model.MaxHeight?.ToLower(); + string? pixelHeight = maxHeightValue switch { "small" => "350px", "medium" => "750px", - "auto" or null or "" => null, + "auto" => "none", // Auto means no max-height constraint + null or "" => null, _ => null // Default to none for invalid values }; - var hasFixedHeight = !string.IsNullOrEmpty(pixelHeight); - var trackStyle = hasFixedHeight ? $"height: {pixelHeight};" : ""; + var hasMaxHeight = !string.IsNullOrEmpty(pixelHeight) && maxHeightValue != null; + var containerStyle = hasMaxHeight ? $"--carousel-max-height: {pixelHeight};" : ""; + var dataAttribute = maxHeightValue == "auto" ? "data-auto-height" : (hasMaxHeight ? "data-max-height" : ""); } -
-
+
+
@for (int i = 0; i < Model.Images.Count; i++) { var image = Model.Images[i];
- @(image.Alt ?? + @(image.Alt ??
} diff --git a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselViewModel.cs index d241aa472..314aa162c 100644 --- a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselViewModel.cs +++ b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselViewModel.cs @@ -11,5 +11,5 @@ namespace Elastic.Markdown.Myst.Directives.Image; public class ImageCarouselViewModel : DirectiveViewModel { public required List Images { get; init; } - public string? FixedHeight { get; init; } + public string? MaxHeight { get; init; } } diff --git a/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs b/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs index f2d142fe3..afa38e8ec 100644 --- a/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs +++ b/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs @@ -13,7 +13,7 @@ namespace Elastic.Markdown.Tests.Directives; public class ImageCarouselBlockTests(ITestOutputHelper output) : DirectiveTest(output, """ :::{carousel} -:fixed-height: medium +:max-height: medium ```{image} img/image1.png :alt: First image @@ -38,7 +38,7 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) [Fact] public void ParsesCarouselProperties() { - Block!.FixedHeight.Should().Be("medium"); + Block!.MaxHeight.Should().Be("medium"); } [Fact] @@ -62,7 +62,7 @@ public void AllImagesFoundSoNoErrorIsEmitted() public class ImageCarouselWithSmallHeightTests(ITestOutputHelper output) : DirectiveTest(output, """ :::{carousel} -:fixed-height: small +:max-height: small ```{image} img/small.png :alt: Small image @@ -75,9 +75,9 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) => fileSystem.AddFile(@"docs/img/small.png", ""); [Fact] - public void ParsesSmallFixedHeight() + public void ParsesSmallMaxHeight() { - Block!.FixedHeight.Should().Be("small"); + Block!.MaxHeight.Should().Be("small"); Collector.Diagnostics.Count.Should().Be(0); } } @@ -85,7 +85,7 @@ public void ParsesSmallFixedHeight() public class ImageCarouselWithAutoHeightTests(ITestOutputHelper output) : DirectiveTest(output, """ :::{carousel} -:fixed-height: auto +:max-height: auto ```{image} img/auto.png :alt: Auto height image @@ -98,9 +98,9 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) => fileSystem.AddFile(@"docs/img/auto.png", ""); [Fact] - public void ParsesAutoFixedHeight() + public void ParsesAutoMaxHeight() { - Block!.FixedHeight.Should().Be("auto"); + Block!.MaxHeight.Should().Be("auto"); Collector.Diagnostics.Count.Should().Be(0); } } @@ -108,7 +108,7 @@ public void ParsesAutoFixedHeight() public class ImageCarouselWithInvalidHeightTests(ITestOutputHelper output) : DirectiveTest(output, """ :::{carousel} -:fixed-height: large +:max-height: large ```{image} img/invalid.png :alt: Invalid height image @@ -121,15 +121,15 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) => fileSystem.AddFile(@"docs/img/invalid.png", ""); [Fact] - public void WarnsOnInvalidFixedHeight() + public void WarnsOnInvalidMaxHeight() { - Block!.FixedHeight.Should().Be("large"); + Block!.MaxHeight.Should().Be("large"); Collector.Diagnostics.Should().HaveCount(1) .And.OnlyContain(d => d.Severity == Severity.Warning); var warning = Collector.Diagnostics.First(); - warning.Message.Should().Contain("Invalid fixed-height value 'large'"); + warning.Message.Should().Contain("Invalid max-height value 'large'"); warning.Message.Should().Contain("Valid options are: auto, small, medium"); } } @@ -171,7 +171,7 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) => [Fact] public void ParsesMinimalCarousel() { - Block!.FixedHeight.Should().BeNull(); + Block!.MaxHeight.Should().BeNull(); Block!.Images.Should().HaveCount(1); Block!.Images[0].Alt.Should().Be("Minimal carousel"); Collector.Diagnostics.Count.Should().Be(0); From d97d67c372aeb0b1d412121b74d138d3e4dea8e1 Mon Sep 17 00:00:00 2001 From: Kylie Meli Date: Wed, 30 Jul 2025 17:03:36 -0400 Subject: [PATCH 2/5] updating from auto to none, and some placement of the control fixes --- .../Assets/markdown/image-carousel.css | 22 +++++++++++++++---- .../Directives/Image/ImageCarouselBlock.cs | 4 ++-- .../Directives/Image/ImageCarouselView.cshtml | 6 ++--- .../Directives/ImageCarouselTests.cs | 8 +++---- 4 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css b/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css index 7a2deada5..dab2e57d0 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css @@ -40,7 +40,6 @@ .carousel-control { position: absolute; - top: 100px; /* Fixed distance from top */ background-color: rgba(0, 0, 0, 0.5); border: none; color: white; @@ -93,6 +92,21 @@ background-color: black; } +/* Small carousel styles */ +.carousel-container[data-max-height][style*="350px"] .carousel-control { + top: 150px; +} + +/* Medium carousel styles */ +.carousel-container[data-max-height][style*="750px"] .carousel-control { + top: 200px; +} + +/* None (no max-height) carousel styles */ +.carousel-container[data-none-height] .carousel-control { + top: 500px; +} + /* Max height carousel styles */ .carousel-container[data-max-height] { padding-bottom: 40px; /* Space for indicators */ @@ -111,12 +125,12 @@ margin: 0 auto; } -/* Auto height carousel styles - images at natural size */ -.carousel-container[data-auto-height] { +/* None height carousel styles - images at natural size */ +.carousel-container[data-none-height] { padding-bottom: 40px; /* Space for indicators */ } -.carousel-container[data-auto-height] .carousel-image-reference img { +.carousel-container[data-none-height] .carousel-image-reference img { max-width: 100%; height: auto; display: block; diff --git a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs index 60e3fc5a4..7cc77c998 100644 --- a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs +++ b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs @@ -27,10 +27,10 @@ public override void FinalizeAndValidate(ParserContext context) // Validate max-height option if (!string.IsNullOrEmpty(MaxHeight)) { - var validHeights = new[] { "auto", "small", "medium" }; + var validHeights = new[] { "none", "small", "medium" }; if (!validHeights.Contains(MaxHeight.ToLower())) { - this.EmitWarning($"Invalid max-height value '{MaxHeight}'. Valid options are: auto, small, medium. Defaulting to 'auto'."); + this.EmitWarning($"Invalid max-height value '{MaxHeight}'. Valid options are: none, small, medium. Defaulting to 'none'."); } } diff --git a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml index f1a457c9d..b6d08271e 100644 --- a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml +++ b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml @@ -6,14 +6,14 @@ { "small" => "350px", "medium" => "750px", - "auto" => "none", // Auto means no max-height constraint + "none" => "none", // None means no max-height constraint null or "" => null, _ => null // Default to none for invalid values }; - var hasMaxHeight = !string.IsNullOrEmpty(pixelHeight) && maxHeightValue != null; + var hasMaxHeight = !string.IsNullOrEmpty(pixelHeight) && maxHeightValue != null && maxHeightValue != "none"; var containerStyle = hasMaxHeight ? $"--carousel-max-height: {pixelHeight};" : ""; - var dataAttribute = maxHeightValue == "auto" ? "data-auto-height" : (hasMaxHeight ? "data-max-height" : ""); + var dataAttribute = maxHeightValue == "none" ? "data-none-height" : (hasMaxHeight ? "data-max-height" : ""); }
diff --git a/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs b/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs index afa38e8ec..ece33a3cd 100644 --- a/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs +++ b/tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs @@ -85,7 +85,7 @@ public void ParsesSmallMaxHeight() public class ImageCarouselWithAutoHeightTests(ITestOutputHelper output) : DirectiveTest(output, """ :::{carousel} -:max-height: auto +:max-height: none ```{image} img/auto.png :alt: Auto height image @@ -98,9 +98,9 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) => fileSystem.AddFile(@"docs/img/auto.png", ""); [Fact] - public void ParsesAutoMaxHeight() + public void ParsesNoneMaxHeight() { - Block!.MaxHeight.Should().Be("auto"); + Block!.MaxHeight.Should().Be("none"); Collector.Diagnostics.Count.Should().Be(0); } } @@ -130,7 +130,7 @@ public void WarnsOnInvalidMaxHeight() var warning = Collector.Diagnostics.First(); warning.Message.Should().Contain("Invalid max-height value 'large'"); - warning.Message.Should().Contain("Valid options are: auto, small, medium"); + warning.Message.Should().Contain("Valid options are: none, small, medium"); } } From 7d086b164c62dcc6dc47295a573e4dc8953388f4 Mon Sep 17 00:00:00 2001 From: Kylie Meli Date: Wed, 30 Jul 2025 17:26:18 -0400 Subject: [PATCH 3/5] auto position controls --- .../Assets/image-carousel.ts | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/src/Elastic.Documentation.Site/Assets/image-carousel.ts b/src/Elastic.Documentation.Site/Assets/image-carousel.ts index bcaa6333c..cde1e81d9 100644 --- a/src/Elastic.Documentation.Site/Assets/image-carousel.ts +++ b/src/Elastic.Documentation.Site/Assets/image-carousel.ts @@ -33,6 +33,7 @@ class ImageCarousel { this.initializeSlides() this.setupEventListeners() + this.positionControls() } private initializeSlides(): void { @@ -132,6 +133,64 @@ class ImageCarousel { (window.innerWidth || document.documentElement.clientWidth) ) } + + private positionControls(): void { + if (!this.prevButton || !this.nextButton) return + + // Wait for images to load before positioning + const images = Array.from(this.container.querySelectorAll('img')) + if (images.length === 0) return + + let loadedCount = 0 + const totalImages = images.length + + const positionAfterLoad = () => { + loadedCount++ + if (loadedCount === totalImages) { + this.calculateControlPosition() + } + } + + images.forEach(img => { + if (img.complete) { + positionAfterLoad() + } else { + img.addEventListener('load', positionAfterLoad) + img.addEventListener('error', positionAfterLoad) // Handle failed loads + } + }) + } + + private calculateControlPosition(): void { + if (!this.prevButton || !this.nextButton) return + + const images = Array.from(this.container.querySelectorAll('img')) + let minHeight = Infinity + + // Find the smallest image height among all images + images.forEach(img => { + const height = img.offsetHeight + if (height > 0 && height < minHeight) { + minHeight = height + } + }) + + // Position controls at 40% the height of the smallest image + // But ensure a minimum distance from the top (50px) and don't go below 80% of the smallest image + if (minHeight !== Infinity && minHeight > 0) { + const fortyPercentHeight = Math.floor(minHeight * 0.4) + const minTop = 50 // Minimum 50px from top + const maxTop = Math.floor(minHeight * 0.8) // Maximum 80% down the smallest image + + const controlTop = Math.max(minTop, Math.min(fortyPercentHeight, maxTop)) + + this.prevButton.style.top = `${controlTop}px` + this.nextButton.style.top = `${controlTop}px` + + // Debug logging (remove in production) + console.log(`Carousel controls positioned: minHeight=${minHeight}px, controlTop=${controlTop}px`) + } + } } // Export function to initialize carousels From 2a6e4547d7d8c38666db3a5e049de58f8f79f1a3 Mon Sep 17 00:00:00 2001 From: Kylie Meli Date: Thu, 31 Jul 2025 10:18:28 -0400 Subject: [PATCH 4/5] switched to opening a modal if clicked then a new tab to be consistent with regular image --- docs/syntax/images.md | 4 +- .../Assets/image-carousel.ts | 32 ++++++++-- .../Assets/markdown/image-carousel.css | 64 ++++++++++++------- .../Directives/Image/ImageCarouselView.cshtml | 22 ++++++- 4 files changed, 89 insertions(+), 33 deletions(-) diff --git a/docs/syntax/images.md b/docs/syntax/images.md index 8c04f5bbd..ebcafdcb6 100644 --- a/docs/syntax/images.md +++ b/docs/syntax/images.md @@ -131,7 +131,7 @@ The image carousel directive builds upon the image directive. ::::{carousel} :id: nested-carousel-example -:fixed-height: small ## small, medium, auto (auto is default if fixed-height is not specified) +:max-height: small ## small, medium, none (none is default if max-height is not specified) :::{image} images/apm.png :alt: First image description @@ -148,7 +148,7 @@ The image carousel directive builds upon the image directive. ::::{carousel} :id: nested-carousel-example -:fixed-height: small +:max-height: small :::{image} images/apm.png :alt: First image description diff --git a/src/Elastic.Documentation.Site/Assets/image-carousel.ts b/src/Elastic.Documentation.Site/Assets/image-carousel.ts index cde1e81d9..d623eaa0a 100644 --- a/src/Elastic.Documentation.Site/Assets/image-carousel.ts +++ b/src/Elastic.Documentation.Site/Assets/image-carousel.ts @@ -68,6 +68,23 @@ class ImageCarousel { indicator.addEventListener('click', () => this.goToSlide(index)) }) + // Handle image clicks for modal + this.slides.forEach(slide => { + const imageLink = slide.querySelector('.carousel-image-reference') + if (imageLink) { + imageLink.addEventListener('click', (e) => { + e.preventDefault() + const modalId = imageLink.getAttribute('data-modal-id') + if (modalId) { + const modal = document.getElementById(modalId) + if (modal) { + modal.style.display = 'flex' + } + } + }) + } + }) + // Keyboard navigation document.addEventListener('keydown', (e) => { if (!this.isInViewport()) return @@ -202,7 +219,15 @@ export function initImageCarousel(): void { carousels.forEach((carouselElement) => { const carousel = carouselElement as HTMLElement - // Get the existing track + // Skip if carousel already has slides (server-rendered) + const existingSlides = carousel.querySelectorAll('.carousel-slide') + if (existingSlides.length > 0) { + // Just initialize the existing carousel + new ImageCarousel(carousel) + return + } + + // Get the existing track for dynamic carousels let track = carousel.querySelector('.carousel-track') if (!track) { track = document.createElement('div') @@ -210,11 +235,6 @@ export function initImageCarousel(): void { carousel.appendChild(track) } - // Clean up any existing slides - this prevents duplicates - const existingSlides = Array.from( - track.querySelectorAll('.carousel-slide') - ) - // Find all image links that might be related to this carousel const section = findSectionForCarousel(carousel) if (!section) return diff --git a/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css b/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css index dab2e57d0..e19cce1ec 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css @@ -28,13 +28,17 @@ display: flex; justify-content: center; align-items: center; + text-decoration: none; +} + +.carousel-image-reference::after { + display: none !important; } .carousel-image-reference img { max-width: 100%; height: auto; display: block; - box-sizing: border-box; margin: 0 auto; } @@ -60,11 +64,11 @@ } .carousel-prev { - left: 10px; + left: 0; } .carousel-next { - right: 10px; + right: 0; } .carousel-indicators { @@ -92,21 +96,6 @@ background-color: black; } -/* Small carousel styles */ -.carousel-container[data-max-height][style*="350px"] .carousel-control { - top: 150px; -} - -/* Medium carousel styles */ -.carousel-container[data-max-height][style*="750px"] .carousel-control { - top: 200px; -} - -/* None (no max-height) carousel styles */ -.carousel-container[data-none-height] .carousel-control { - top: 500px; -} - /* Max height carousel styles */ .carousel-container[data-max-height] { padding-bottom: 40px; /* Space for indicators */ @@ -120,9 +109,6 @@ .carousel-container[data-max-height] .carousel-image-reference img { max-height: var(--carousel-max-height); width: auto; - height: auto; - display: block; - margin: 0 auto; } /* None height carousel styles - images at natural size */ @@ -130,11 +116,41 @@ padding-bottom: 40px; /* Space for indicators */ } -.carousel-container[data-none-height] .carousel-image-reference img { - max-width: 100%; +/* Override modal styles for image carousels */ +.modal .modal-content { + max-width: 95vw !important; + max-height: 95vh !important; + width: auto !important; + height: auto !important; + padding: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +.modal .modal-content img { + max-width: 95vw; + max-height: 95vh; + width: auto; height: auto; + object-fit: contain; display: block; - margin: 0 auto; +} + +/* Ensure the close button is visible */ +.modal .modal-close { + background: rgba(0, 0, 0, 0.7); + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + top: -20px; + right: -20px; +} + +.modal .modal-close a { + color: white; } @media (max-width: 768px) { .carousel-control { diff --git a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml index b6d08271e..37907892f 100644 --- a/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml +++ b/src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml @@ -21,7 +21,7 @@ { var image = Model.Images[i];
- + @(image.Alt ??
@@ -52,3 +52,23 @@
}
+ +@* Add modal for each image *@ +@for (int i = 0; i < Model.Images.Count; i++) +{ + var image = Model.Images[i]; + +} From dd8116cf1de364292448ad7f6047584a95c87d3e Mon Sep 17 00:00:00 2001 From: Kylie Meli Date: Thu, 31 Jul 2025 10:37:57 -0400 Subject: [PATCH 5/5] prettier fixes --- .../Assets/image-carousel.ts | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/image-carousel.ts b/src/Elastic.Documentation.Site/Assets/image-carousel.ts index d623eaa0a..340152398 100644 --- a/src/Elastic.Documentation.Site/Assets/image-carousel.ts +++ b/src/Elastic.Documentation.Site/Assets/image-carousel.ts @@ -18,13 +18,13 @@ class ImageCarousel { this.slides = Array.from( this.container.querySelectorAll('.carousel-slide') ) - + // Don't initialize if no slides if (this.slides.length === 0) { console.warn('No carousel slides found') return } - + this.indicators = Array.from( this.container.querySelectorAll('.carousel-indicator') ) @@ -69,7 +69,7 @@ class ImageCarousel { }) // Handle image clicks for modal - this.slides.forEach(slide => { + this.slides.forEach((slide) => { const imageLink = slide.querySelector('.carousel-image-reference') if (imageLink) { imageLink.addEventListener('click', (e) => { @@ -168,7 +168,7 @@ class ImageCarousel { } } - images.forEach(img => { + images.forEach((img) => { if (img.complete) { positionAfterLoad() } else { @@ -185,7 +185,7 @@ class ImageCarousel { let minHeight = Infinity // Find the smallest image height among all images - images.forEach(img => { + images.forEach((img) => { const height = img.offsetHeight if (height > 0 && height < minHeight) { minHeight = height @@ -198,14 +198,19 @@ class ImageCarousel { const fortyPercentHeight = Math.floor(minHeight * 0.4) const minTop = 50 // Minimum 50px from top const maxTop = Math.floor(minHeight * 0.8) // Maximum 80% down the smallest image - - const controlTop = Math.max(minTop, Math.min(fortyPercentHeight, maxTop)) - + + const controlTop = Math.max( + minTop, + Math.min(fortyPercentHeight, maxTop) + ) + this.prevButton.style.top = `${controlTop}px` this.nextButton.style.top = `${controlTop}px` - + // Debug logging (remove in production) - console.log(`Carousel controls positioned: minHeight=${minHeight}px, controlTop=${controlTop}px`) + console.log( + `Carousel controls positioned: minHeight=${minHeight}px, controlTop=${controlTop}px` + ) } } }