Commit of LightBox fixes #453
Conversation
Justinabes007
added
[Type] Bug
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
WalkthroughThis changeset introduces a series of style enhancements to the LightBox component in our application. It includes adjustments to positions, styles, and the addition of SVG icons. The update also replaces some font icons with custom SVG backgrounds for better visual appeal. Changes
Uplevel your code reviews with CodeRabbit ProCodeRabbit ProIf you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Files selected (1)
- assets/css/style.css (4)
Files ignored due to filter (3)
- assets/img/left-arrow-new.svg
- assets/img/left-arrow.svg
- assets/img/right-arrow.svg
Review comments generated (8)
- Review: 6
- LGTM: 2
Tips
Chat with 
CodeRabbit Bot (@coderabbitai)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging
@coderabbitaiin a reply.
Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.
Pausing incremental reviews
- Add
@coderabbitai: ignoreanywhere in the PR description to pause further reviews from the bot.
| right: 52px; | ||
| top: 35px; | ||
| } |
There was a problem hiding this comment.
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;| .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; |
There was a problem hiding this comment.
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%;| color: white; | ||
| } |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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";| content: ''; /* Remove font icon */ | ||
| background: url('../img/left-arrow-new.svg') no-repeat center center; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 10px; | ||
| } |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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;
Gallery Tour Operator Light Box fixes.
Adjusted CSS and included SVG icons:
Display before:
Display After CSS added:
Summary by CodeRabbit