фиксы верстки слайдера

maxcom · Jan 5, 2025 · e722c11 · e722c11
1 parent 8092264
commit e722c11
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/main/webapp/WEB-INF/tags/topic.tag b/src/main/webapp/WEB-INF/tags/topic.tag
@@ -114,17 +114,32 @@
 
     <c:if test="${not empty preparedMessage.additionalImages}">
       <c:if test="${imageSlider}">
-        <div class="slider-parent">
-          <div class="swiffy-slider slider-indicators-round slider-indicators-outside">
+        <div class="slider-parent" style="width: var(--slider-parent-width); width: min(var(--slider-parent-width), calc(90vh * ${preparedMessage.image.mediumInfo.width} / ${preparedMessage.image.mediumInfo.height}))">
+          <div class="swiffy-slider slider-indicators-round slider-indicators-outside slider-item-ratio slider-item-ratio-contain"
+               style="--swiffy-slider-item-ratio: ${preparedMessage.image.mediumInfo.width}/${preparedMessage.image.mediumInfo.height}">
             <div class="slider-container">
-              <lor:image title="${preparedMessage.message.title}" image="${preparedMessage.image}" enableSchema="true"
-                         preparedMessage="${preparedMessage}" showImage="true" sizes="${sizes}"
-                         enableEdit="${messageMenu.topicEditable && showImageDelete && not preparedMessage.section.imagepost}"/>
+              <a href="${preparedMessage.image.fullName}">
+                <img
+                  src="${preparedMessage.image.mediumName}"
+                  alt="<l:title>${preparedMessage.message.title}</l:title>"
+                  srcset="${preparedMessage.image.srcset}"
+                  sizes="${sizes}"
+                  style="max-width: 100%; height: auto"
+                  ${preparedMessage.image.loadingCode}
+                  ${preparedMessage.image.mediumInfo.code}>
+              </a>
 
               <c:forEach var="image" items="${preparedMessage.additionalImages}">
-                <lor:image title="${preparedMessage.message.title}" image="${image}" enableSchema="true"
-                           preparedMessage="${preparedMessage}" showImage="true" sizes="${sizes}"
-                           enableEdit="${messageMenu.topicEditable && showImageDelete}"/>
+                <a href="${image.fullName}">
+                  <img
+                    src="${image.mediumName}"
+                    alt="<l:title>${preparedMessage.message.title}</l:title>"
+                    srcset="${image.srcset}"
+                    sizes="${sizes}"
+                    style="max-width: 100%; height: auto; max-height: 100%; top: 50%; transform: translateY(-50%)"
+                    ${image.loadingCode}
+                    ${image.mediumInfo.code}>
+                </a>
               </c:forEach>
             </div>
 

diff --git a/src/main/webapp/js/lor.js b/src/main/webapp/js/lor.js
@@ -524,7 +524,7 @@ $(document).ready(function() {
 
   $script.ready('plugins', function () {
     if (window.matchMedia("(min-width: 70em)").matches) {
-      $(".swiffy-slider").addClass("slider-nav-outside-expand");
+      $(".swiffy-slider").addClass("slider-nav-outside-expand").addClass("slider-nav-visible");
     }
 
     $(".slider-indicators a").attr('href', 'javascript:;');

diff --git a/src/main/webapp/sass/_common.scss b/src/main/webapp/sass/_common.scss
@@ -818,6 +818,8 @@ figure.medium-image {
 
 .slider-parent {
   margin: 1em auto;
+
+  --slider-parent-width: 100%;
 }
 
 @include respond-to(desktops) {
@@ -826,7 +828,7 @@ figure.medium-image {
   }
 
   .slider-parent {
-    width: 80%;
+    --slider-parent-width: 80%;
   }
 }