Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Commit of LightBox fixes #453

Merged
merged 1 commit into from
Dec 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -165,15 +165,19 @@
}

.slick-lightbox-close {
right: 32px;
top: 32px;
right: 52px;
top: 35px;
}
Comment on lines +168 to 170
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The positioning of the .slick-lightbox-close has been changed. Ensure that this change doesn't affect other elements that might be positioned relative to it.

-  right: 32px;
-  top: 32px;
+  right: 52px;
+  top: 35px;

.slick-lightbox-close:before{font-size:40px;}

.lsx-to-slider .slick-arrow,
.slick-lightbox-inner .slick-arrow {
background: transparent;
border-radius: 50%;
position:absolute;
top:50%;
border-style: solid;
border-color: #fff;
Comment on lines 173 to +180
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The position:absolute; and top:50%; properties have been added to the .lsx-to-slider .slick-arrow, .slick-lightbox-inner .slick-arrow selectors. Make sure these changes don't disrupt the layout of the page or interfere with other elements.

+  position:absolute;
+  top:50%;

border-width: 2px;
font: 0/0 a;
height: 4rem;
Expand All @@ -184,11 +188,15 @@
transition: border 300ms ease;
width: 4rem;
z-index: 3;
color: white;
}
Comment on lines +191 to 192
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The color property has been added to the arrow selectors. This should improve visibility but ensure it aligns with the overall design theme.

+  color: white;

.slick-prev svg, .slick-next svg{color: white;}

.lsx-to-slider .slick-arrow:before,
.slick-lightbox-inner .slick-arrow:before {
display: block;
font-family: "FontAwesome";
font-family: "slick";
color: white;
Comment on lines +193 to +199
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The font family for the .lsx-to-slider .slick-arrow:before, .slick-lightbox-inner .slick-arrow:before selectors has been changed from "FontAwesome" to "slick". If "slick" is not a defined font-family in your CSS or HTML, this could cause issues.

-  font-family: "FontAwesome";
+  font-family: "slick";

font-size: 3rem;
line-height: 1;
position: absolute;
Expand All @@ -205,13 +213,21 @@
}
.lsx-to-slider .slick-arrow.slick-prev:before,
.slick-lightbox-inner .slick-arrow.slick-prev:before {
content: "\f104";
left: 1.1rem;
content: ''; /* Remove font icon */
background: url('../img/left-arrow-new.svg') no-repeat center center;
width: 40px;
height: 40px;
display: inline-block;
left: 10px;
}
Comment on lines +216 to 222
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The content of the .lsx-to-slider .slick-arrow.slick-prev:before, .slick-lightbox-inner .slick-arrow.slick-prev:before selectors has been replaced with an SVG background. Ensure that the path to the SVG file is correct and that the SVG file exists in the specified location.

-  content: "\f104";
-  left: 1.1rem;
+  content: ''; /* Remove font icon */
+  background: url('../img/left-arrow-new.svg') no-repeat center center;
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+  left: 10px;

.lsx-to-slider .slick-arrow.slick-next:before,
.slick-lightbox-inner .slick-arrow.slick-next:before {
content: "\f105";
left: 1.5rem;
content: ''; /* Remove font icon */
background: url('../img/right-arrow.svg') no-repeat center center;
width: 40px;
height: 40px;
display: inline-block;
left: 12px;
Comment on lines 223 to +230
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The content of the .lsx-to-slider .slick-arrow.slick-next:before, .slick-lightbox-inner .slick-arrow.slick-next:before selectors has been replaced with an SVG background. Ensure that the path to the SVG file is correct and that the SVG file exists in the specified location.

-  content: "\f105";
-  left: 1.5rem;
+  content: ''; /* Remove font icon */
+  background: url('../img/right-arrow.svg') no-repeat center center;
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+  left: 12px;

}

.lsx-to-slider .slick-dots:not(.dropdown-menu) {
Expand Down Expand Up @@ -268,4 +284,5 @@
.lsx-units-wrapper .hidden {
display: none;
}
/*# sourceMappingURL=style.css.map */
/*# sourceMappingURL=style.css.map */

3 changes: 3 additions & 0 deletions assets/img/left-arrow-new.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/img/left-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/img/right-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading