TO - Additional Info Read More JS #457
Conversation
Styling fixes to slider Block Additional Info Read More JS
Justinabes007
added
[Type] Enhancement
|
Warning CodeRabbit GitHub Action detectedThe repository is using both CodeRabbit Pro and CodeRabbit Open Source (via GitHub Actions), which is not recommended as it may lead to duplicate comments and extra noise. Please remove the CodeRabbit GitHub Action. 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 update introduces enhancements to the user interface, improving readability and interaction. Changes include a "Read More" toggle for long content sections, visual upgrades to the slider block, and new styles for additional information sections. The code also sees performance optimizations and layout adjustments for better mobile and desktop experiences. 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 (2)
- assets/css/style.css (2)
- assets/js/src/custom.js (1)
Files ignored due to filter (2)
- assets/img/left-arrow-dark.svg
- assets/img/right-arrow-dark.svg
Review comments generated (7)
- Review: 2
- LGTM: 5
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.
assets/css/style.css
Outdated
| .facilities-list li::marker{display:none;} | ||
| .facilities-list{padding-left:0!important;} | ||
|
|
||
| .facilities-list li { | ||
| margin-left: 10px; | ||
| list-style: none; /* Remove default list marker */ | ||
| position: relative; /* Position for pseudo-element */} | ||
|
|
||
| .facilities-list li::before{ | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 50%; | ||
| transform: translateY(-50%); /* Center the icon vertically */ | ||
| width: 20px; /* Adjust the size of the tick icon */ | ||
| height: 20px; | ||
| background-image: url('../img/tick.svg'); /* Replace with the path to your tick.svg */ | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| left:-28px | ||
| } |
There was a problem hiding this comment.
There is a minor issue with the CSS property left being declared twice for .facilities-list li::before. The second declaration will override the first one. If this is not intentional, you should remove the redundant declaration.
.facilities-list li::before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* Center the icon vertically */
width: 20px; /* Adjust the size of the tick icon */
height: 20px;
background-image: url('../img/tick.svg'); /* Replace with the path to your tick.svg */
background-size: contain;
background-repeat: no-repeat;
-371: left:-28px
+371: /* left:-28px */ // Commented out as it seems to be a duplicate
}| paragraphs.forEach(function (p) { | ||
| const text = p.innerText.trim(); | ||
|
|
||
| if (text.split(' ').length > 30) { // Check if paragraph exceeds 30 words | ||
| const fullText = p.innerText.trim(); | ||
| const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...'; | ||
| p.innerHTML = `<span class="truncated-text">${truncatedText}</span><span class="full-text" style="display: none;">${fullText}</span>`; | ||
|
|
||
| // Create Read More button | ||
| const readMoreBtn = document.createElement('span'); | ||
| readMoreBtn.textContent = ' Read More'; | ||
| readMoreBtn.classList.add('read-more-btn'); | ||
| p.appendChild(readMoreBtn); | ||
|
|
||
| // Create Read Less button | ||
| const readLessBtn = document.createElement('span'); | ||
| readLessBtn.textContent = ' Read Less'; | ||
| readLessBtn.classList.add('read-less-btn'); | ||
| p.appendChild(readLessBtn); | ||
|
|
||
| // Add functionality to toggle text | ||
| readMoreBtn.addEventListener('click', function () { | ||
| p.querySelector('.truncated-text').style.display = 'none'; | ||
| p.querySelector('.full-text').style.display = 'inline'; | ||
| readMoreBtn.style.display = 'none'; | ||
| readLessBtn.style.display = 'inline'; | ||
| }); | ||
|
|
||
| readLessBtn.addEventListener('click', function () { | ||
| p.querySelector('.truncated-text').style.display = 'inline'; | ||
| p.querySelector('.full-text').style.display = 'none'; | ||
| readMoreBtn.style.display = 'inline'; | ||
| readLessBtn.style.display = 'none'; | ||
| }); | ||
| } |
There was a problem hiding this comment.
The logic for creating "Read More" and "Read Less" buttons is directly manipulating the DOM inside a loop. This could lead to performance issues if there are many paragraphs on the page. It would be more efficient to use event delegation, where you attach an event listener to a parent element and handle events from its child elements based on the event's target.
Here's how you can refactor this code:
- paragraphs.forEach(function (p) {
- const text = p.innerText.trim();
- if (text.split(' ').length > 30) { // Check if paragraph exceeds 30 words
- const fullText = p.innerText.trim();
- const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...';
- p.innerHTML = `<span class="truncated-text">${truncatedText}</span><span class="full-text" style="display: none;">${fullText}</span>`;
-
- // Create Read More button
- const readMoreBtn = document.createElement('span');
- readMoreBtn.textContent = ' Read More';
- readMoreBtn.classList.add('read-more-btn');
- p.appendChild(readMoreBtn);
-
- // Create Read Less button
- const readLessBtn = document.createElement('span');
- readLessBtn.textContent = ' Read Less';
- readLessBtn.classList.add('read-less-btn');
- p.appendChild(readLessBtn);
-
- // Add functionality to toggle text
- readMoreBtn.addEventListener('click', function () {
- p.querySelector('.truncated-text').style.display = 'none';
- p.querySelector('.full-text').style.display = 'inline';
- readMoreBtn.style.display = 'none';
- readLessBtn.style.display = 'inline';
- });
-
- readLessBtn.addEventListener('click', function () {
- p.querySelector('.truncated-text').style.display = 'inline';
- p.querySelector('.full-text').style.display = 'none';
- readMoreBtn.style.display = 'inline';
- readLessBtn.style.display = 'none';
- });
- }
-});
+ document.querySelector('.additional-info .wp-block-group.content').addEventListener('click', function (event) {
+ if (event.target.matches('.read-more-btn')) {
+ const p = event.target.parentNode;
+ p.querySelector('.truncated-text').style.display = 'none';
+ p.querySelector('.full-text').style.display = 'inline';
+ p.querySelector('.read-more-btn').style.display = 'none';
+ p.querySelector('.read-less-btn').style.display = 'inline';
+ } else if (event.target.matches('.read-less-btn')) {
+ const p = event.target.parentNode;
+ p.querySelector('.truncated-text').style.display = 'inline';
+ p.querySelector('.full-text').style.display = 'none';
+ p.querySelector('.read-more-btn').style.display = 'inline';
+ p.querySelector('.read-less-btn').style.display = 'none';
+ }
+ });
There was a problem hiding this comment.
Files selected (2)
- assets/css/style.scss (1)
- assets/js/src/custom.js (3)
Files skipped from review due to trivial changes (1)
- assets/css/style.scss
Review comments generated (4)
- Review: 4
- LGTM: 0
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.
| @@ -208,7 +208,7 @@ if ( window.location.hash ) { | |||
| draggable: false, | |||
| infinite: true, | |||
| swipe: false, | |||
| dots: true, | |||
| dots: false, | |||
There was a problem hiding this comment.
The change from dots: true to dots: false disables the display of dots for navigation in the slider. If this is intentional and aligns with the design requirements, then it's fine. However, if you still need the dots for navigation, you should revert this change.
- dots: false,
+ dots: true,| breakpoint: 1028, | ||
| settings: { | ||
| slidesToShow: 2, | ||
| slidesToScroll: 1, | ||
| draggable: false, | ||
| arrows: true, | ||
| swipe: false, | ||
| draggable: true, | ||
| arrows: false, | ||
| swipe: true, | ||
| dots: true, | ||
| } | ||
| }, | ||
| { | ||
| breakpoint: lsx_to_params.slickSlider.mobile.breakpoint, | ||
| breakpoint: 782, | ||
| settings: { | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| draggable: true, | ||
| arrows: false, | ||
| swipe: true, | ||
| dots: true, |
There was a problem hiding this comment.
The changes made here are mostly related to responsive design. The breakpoints have been changed and some settings have been altered for different screen sizes. As long as these changes align with your design requirements and have been tested across different devices and screen sizes, they look good.
| document.addEventListener('DOMContentLoaded', function () { | ||
| const paragraphs = document.querySelectorAll('.additional-info .wp-block-group.content p'); | ||
|
|
||
| paragraphs.forEach(function (p) { | ||
| const text = p.innerText.trim(); | ||
|
|
||
| if (text.split(' ').length > 30) { // Check if paragraph exceeds 30 words | ||
| const fullText = p.innerText.trim(); | ||
| const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...'; | ||
| p.innerHTML = `<span class="truncated-text">${truncatedText}</span><span class="full-text" style="display: none;">${fullText}</span>`; | ||
|
|
||
| // Create Read More button | ||
| const readMoreBtn = document.createElement('span'); | ||
| readMoreBtn.textContent = ' Read More'; | ||
| readMoreBtn.classList.add('read-more-btn'); | ||
| p.appendChild(readMoreBtn); | ||
|
|
||
| // Create Read Less button | ||
| const readLessBtn = document.createElement('span'); | ||
| readLessBtn.textContent = ' Read Less'; | ||
| readLessBtn.classList.add('read-less-btn'); | ||
| p.appendChild(readLessBtn); | ||
|
|
||
| // Add functionality to toggle text | ||
| readMoreBtn.addEventListener('click', function () { | ||
| p.querySelector('.truncated-text').style.display = 'none'; | ||
| p.querySelector('.full-text').style.display = 'inline'; | ||
| readMoreBtn.style.display = 'none'; | ||
| readLessBtn.style.display = 'inline'; | ||
| }); | ||
|
|
||
| readLessBtn.addEventListener('click', function () { | ||
| p.querySelector('.truncated-text').style.display = 'inline'; | ||
| p.querySelector('.full-text').style.display = 'none'; | ||
| readMoreBtn.style.display = 'inline'; | ||
| readLessBtn.style.display = 'none'; | ||
| }); | ||
| } | ||
| }); | ||
| }); |
There was a problem hiding this comment.
This new code block adds a "Read More" / "Read Less" functionality to paragraphs that exceed 30 words. It seems to be well implemented, creating two buttons and toggling visibility between the truncated and full text versions of the paragraph. However, there are a few points to consider:
-
Performance: Querying the DOM and manipulating it inside a loop can be costly in terms of performance. Consider using DocumentFragment to minimize reflows and repaints.
-
Accessibility: Ensure that the 'Read More' and 'Read Less' buttons are accessible, i.e., can be tabbed to and activated using keyboard only. You might want to use
<button>elements instead of<span>for better semantics and built-in accessibility features. -
Security: Directly injecting text into HTML using innerHTML can expose your site to Cross-Site Scripting (XSS) attacks if the text content is user-supplied or can be manipulated by users. If the text content is static and cannot be manipulated by users, this isn't an issue.
Here's a revised version of the code considering these points:
document.addEventListener('DOMContentLoaded', function () {
const paragraphs = document.querySelectorAll('.additional-info .wp-block-group.content p');
const fragment = document.createDocumentFragment();
paragraphs.forEach(function (p) {
const text = p.innerText.trim();
if (text.split(' ').length > 30) { // Check if paragraph exceeds 30 words
const fullText = p.innerText.trim();
const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...';
p.textContent = '';
const truncatedSpan = document.createElement('span');
truncatedSpan.className = 'truncated-text';
truncatedSpan.textContent = truncatedText;
const fullTextSpan = document.createElement('span');
fullTextSpan.className = 'full-text';
fullTextSpan.style.display = 'none';
fullTextSpan.textContent = fullText;
const readMoreBtn = document.createElement('button');
readMoreBtn.textContent = ' Read More';
readMoreBtn.classList.add('read-more-btn');
const readLessBtn = document.createElement('button');
readLessBtn.textContent = ' Read Less';
readLessBtn.classList.add('read-less-btn');
readLessBtn.style.display = 'none';
readMoreBtn.addEventListener('click', function () {
truncatedSpan.style.display = 'none';
fullTextSpan.style.display = 'inline';
readMoreBtn.style.display = 'none';
readLessBtn.style.display = 'inline';
});
readLessBtn.addEventListener('click', function () {
truncatedSpan.style.display = 'inline';
fullTextSpan.style.display = 'none';
readMoreBtn.style.display = 'inline';
readLessBtn.style.display = 'none';
});
fragment.appendChild(truncatedSpan);
fragment.appendChild(fullTextSpan);
fragment.appendChild(readMoreBtn);
fragment.appendChild(readLessBtn);
p.appendChild(fragment);
}
});
});| }); | ||
| }); | ||
|
|
||
| } )( jQuery, window, document ); |
There was a problem hiding this comment.
The absence of a newline at the end of a file can cause issues with some tools that expect or require it. It's generally considered good practice to always end a file with a newline.
- } )( jQuery, window, document );
+ } )( jQuery, window, document );
+
There was a problem hiding this comment.
Please copy your code changes into the 2 relevant files, slider changes here.
https://github.com/lightspeedwp/tour-operator/blob/additional-info-read-more/assets/css/scss/_slider.scss
and ive added another files for anything else like the fast facts and facilities css.
https://github.com/lightspeedwp/tour-operator/blob/additional-info-read-more/assets/css/scss/_additional.scss
There was a problem hiding this comment.
Files selected (2)
- assets/css/scss/_additional.scss (1)
- assets/css/scss/_slider.scss (1)
Review comments generated (6)
- Review: 2
- LGTM: 4
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.
assets/css/scss/_slider.scss
Outdated
| .slick-dots:not(.dropdown-menu) { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| height: auto; | ||
| justify-content: center; | ||
| list-style: none; | ||
| margin: 2rem 0 0; | ||
| padding: 0; | ||
|
|
||
| & > li { | ||
| line-height: 1; | ||
| padding: 5px; | ||
|
|
||
| & > button { | ||
| background: transparent; | ||
| border-style: solid; | ||
| border-width: 1px; | ||
| font: 0/0 a; | ||
| height: 12px; | ||
| transition: all 300ms ease-in-out; | ||
| width: 4rem; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
The styling for .slick-dots:not(.dropdown-menu) and its child elements seems to be repeated at lines 194-217. This repetition increases the file size and makes the code harder to maintain. Consider removing the duplicate code.
- .slick-dots:not(.dropdown-menu) {
- align-items: center;
- display: flex;
- flex-flow: row wrap;
- height: auto;
- justify-content: center;
- list-style: none;
- margin: 2rem 0 0;
- padding: 0;
-
- & > li {
- line-height: 1;
- padding: 5px;
-
- & > button {
- background: transparent;
- border-style: solid;
- border-width: 1px;
- font: 0/0 a;
- height: 12px;
- transition: all 300ms ease-in-out;
- width: 4rem;
- }
- }
- }
assets/css/scss/_slider.scss
Outdated
| .wp-block-query.lsx-to-slider{ | ||
| .slick-arrow { | ||
| background: transparent; | ||
| border-radius: 50%; | ||
| position: absolute; | ||
| top: 50%; | ||
| border-style: solid; | ||
| border-color: #fff; | ||
| border-width: 2px; | ||
| font: 0/0 a; | ||
| height: 4rem; | ||
| margin-top: calc((2.25rem - 17px) / 2); | ||
| padding: 0; | ||
| text-shadow: none; | ||
| transform: translateY(-50%); | ||
| transition: border 300ms ease; | ||
| width: 4rem; | ||
| z-index: 3; | ||
| color: white; | ||
|
|
||
| &:before { | ||
| display: block; | ||
| font-family: "slick"; | ||
| color: white; | ||
| font-size: 3rem; | ||
| line-height: 1; | ||
| position: absolute; | ||
| text-rendering: auto; | ||
| top: 47%; | ||
| transform: translateY(-50%); | ||
| transition: color 300ms ease; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| &.slick-disabled { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| &.slick-prev { | ||
| &:before { | ||
| content: ''; /* Remove font icon */ | ||
| background: url('../../img/left-arrow-new.svg') no-repeat center center; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 10px; | ||
| } | ||
| } | ||
|
|
||
| &.slick-next { | ||
| &:before { | ||
| content: ''; /* Remove font icon */ | ||
| background: url('../../img/right-arrow.svg') no-repeat center center; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 12px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .slick-dots:not(.dropdown-menu) { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| height: auto; | ||
| justify-content: center; | ||
| list-style: none; | ||
| margin: 2rem 0 0; | ||
| padding: 0; | ||
|
|
||
| & > li { | ||
| line-height: 1; | ||
| padding: 5px; | ||
|
|
||
| & > button { | ||
| background: transparent; | ||
| border-style: solid; | ||
| border-width: 1px; | ||
| font: 0/0 a; | ||
| height: 12px; | ||
| transition: all 300ms ease-in-out; | ||
| width: 4rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .slick-arrow { | ||
| &.slick-prev { | ||
| left: -4rem; | ||
| } | ||
| &.slick-next { | ||
| right: -4rem; | ||
| } | ||
| } | ||
|
|
||
| &.slider-disabled { | ||
| overflow: hidden; | ||
| } |
There was a problem hiding this comment.
The styling for .wp-block-query.lsx-to-slider and its child elements is identical to the styling for .lsx-to-slider, .slick-lightbox-inner and its child elements (lines 4-66). This repetition increases the file size and makes the code harder to maintain. Consider using a single selector that matches both cases.
- /* Slick Slider Arrows and Lightbox styles */
- .wp-block-query.lsx-to-slider{
- .slick-arrow {
- background: transparent;
- border-radius: 50%;
- position: absolute;
- top: 50%;
- border-style: solid;
- border-color: #fff;
- border-width: 2px;
- font: 0/0 a;
- height: 4rem;
- margin-top: calc((2.25rem - 17px) / 2);
- padding: 0;
- text-shadow: none;
- transform: translateY(-50%);
- transition: border 300ms ease;
- width: 4rem;
- z-index: 3;
- color: white;
-
- &:before {
- display: block;
- font-family: "slick";
- color: white;
- font-size: 3rem;
- line-height: 1;
- position: absolute;
- text-rendering: auto;
- top: 47%;
- transform: translateY(-50%);
- transition: color 300ms ease;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- &.slick-disabled {
- cursor: not-allowed;
- }
-
- &.slick-prev {
- &:before {
- content: ''; /* Remove font icon */
- background: url('../../img/left-arrow-new.svg') no-repeat center center;
- width: 40px;
- height: 40px;
- display: inline-block;
- left: 10px;
- }
- }
-
- &.slick-next {
- &:before {
- content: ''; /* Remove font icon */
- background: url('../../img/right-arrow.svg') no-repeat center center;
- width: 40px;
- height: 40px;
- display: inline-block;
- left: 12px;
- }
- }
- }
-
- .slick-dots:not(.dropdown-menu) {
- align-items: center;
- display: flex;
- flex-flow: row wrap;
- height: auto;
- justify-content: center;
- list-style: none;
- margin: 2rem 0 0;
- padding: 0;
-
- & > li {
- line-height: 1;
- padding: 5px;
-
- & > button {
- background: transparent;
- border-style: solid;
- border-width: 1px;
- font: 0/0 a;
- height: 12px;
- transition: all 300ms ease-in-out;
- width: 4rem;
- }
- }
- }
-
- .slick-arrow {
- &.slick-prev {
- left: -4rem;
- }
- &.slick-next {
- right: -4rem;
- }
- }
-
- &.slider-disabled {
- overflow: hidden;
- }
- }
There was a problem hiding this comment.
Files selected (3)
- assets/css/scss/_slider.scss (1)
- assets/css/style.css (6)
- assets/css/style.scss (1)
Files skipped from review due to trivial changes (1)
- assets/css/style.scss
Review comments generated (25)
- Review: 7
- LGTM: 18
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.
| .slick-arrow { | ||
| cursor: pointer; | ||
| border-color: #000 !important; | ||
| height: 30px; | ||
| width: 30px; | ||
|
|
||
| .lsx-to-slider, | ||
| .slick-lightbox-inner { | ||
| .slick-arrow { | ||
| background: transparent; | ||
| border-radius: 50%; | ||
| border-style: solid; | ||
| border-width: 2px; | ||
| font: 0/0 a; | ||
| height: 4rem; | ||
| margin-top: calc((2.25rem - 17px) / 2); | ||
| padding: 0; | ||
| text-shadow: none; | ||
| transform: translateY(-50%); | ||
| transition: border 300ms ease; | ||
| width: 4rem; | ||
| z-index: 3; | ||
|
|
||
| &:before { | ||
| display: block; | ||
| font-family: 'FontAwesome'; | ||
| font-size: 3rem; | ||
| line-height: 1; | ||
| position: absolute; | ||
| text-rendering: auto; | ||
| top: 47%; | ||
| transform: translateY(-50%); | ||
| transition: color 300ms ease; | ||
|
|
||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
| &:before { | ||
| border-color: #000 !important; | ||
| height: 30px; | ||
| width: 30px; | ||
| } | ||
|
|
||
| &.slick-disabled { cursor: not-allowed; } | ||
| &.slick-prev:before { | ||
| background: url('../img/left-arrow-dark.svg') no-repeat center center; | ||
| width: 20px; | ||
| left: 3px; | ||
| height: 20px; | ||
| } | ||
|
|
||
| &.slick-prev { | ||
| &:before { | ||
| content: '\f104'; | ||
| left: 1.1rem; | ||
| &.slick-next:before { | ||
| background: url('../img/right-arrow-dark.svg') no-repeat center center; | ||
| width: 20px; | ||
| left: 3px; | ||
| height: 20px; | ||
| } | ||
| } |
There was a problem hiding this comment.
The use of !important in CSS is generally discouraged as it breaks the natural cascading in your stylesheets. It's better to increase specificity of the selector or rethink your class structure instead.
-8: border-color: #000 !important;
-13: border-color: #000 !important;
+8: border-color: #000;
+13: border-color: #000;| .lsx-to-slider, | ||
| .slick-lightbox-inner { | ||
| .slick-arrow { | ||
| background: transparent; | ||
| border-radius: 50%; | ||
| position: absolute; | ||
| top: 50%; | ||
| border-style: solid; | ||
| border-color: #fff; | ||
| border-width: 2px; | ||
| font: 0/0 a; | ||
| height: 4rem; | ||
| margin-top: calc((2.25rem - 17px) / 2); | ||
| padding: 0; | ||
| text-shadow: none; | ||
| transform: translateY(-50%); | ||
| transition: border 300ms ease; | ||
| width: 4rem; | ||
| z-index: 3; | ||
| color: white; | ||
|
|
||
| &:before { | ||
| display: block; | ||
| font-family: "slick"; | ||
| color: white; | ||
| font-size: 3rem; | ||
| line-height: 1; | ||
| position: absolute; | ||
| text-rendering: auto; | ||
| top: 47%; | ||
| transform: translateY(-50%); | ||
| transition: color 300ms ease; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
| } |
There was a problem hiding this comment.
The use of !important in CSS is generally discouraged as it breaks the natural cascading in your stylesheets. It's better to increase specificity of the selector or rethink your class structure instead.
-34: padding: 15px !important;
+34: padding: 15px;| .lsx-to-slider, | ||
| .slick-lightbox-inner { | ||
| .slick-arrow { | ||
| &.slick-disabled { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| &.slick-prev { | ||
| &:before { | ||
| content: ''; /* Remove font icon */ | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 10px; | ||
| } | ||
| } | ||
|
|
||
| &.slick-next { | ||
| &:before { | ||
| content: ''; /* Remove font icon */ | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 12px; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
The use of content: ''; /* Remove font icon */ seems to be a workaround for removing the font icon. If you don't want to display the content, consider using a different approach such as changing the visibility or display property.
| .facilities-list li::marker { | ||
| display: none; | ||
| } | ||
|
|
||
| .facilities-list { | ||
| padding-left: 0 !important; | ||
| } | ||
|
|
||
| .facilities-list li { | ||
| margin-left: 10px; | ||
| list-style: none; /* Remove default list marker */ | ||
| position: relative; /* Position for pseudo-element */ | ||
| } | ||
|
|
||
| .facilities-list li::before { | ||
| content: ""; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 50%; | ||
| transform: translateY(-50%); /* Center the icon vertically */ | ||
| width: 20px; /* Adjust the size of the tick icon */ | ||
| height: 20px; | ||
| background-image: url("../../img/tick.svg"); /* Replace with the path to your tick.svg */ | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| left: -28px; | ||
| } |
There was a problem hiding this comment.
The path to the tick.svg file is hardcoded. This could lead to issues if the file structure changes or if the CSS file is used in a different context where the relative path is different. Consider making this path configurable or absolute.
- background-image: url("../../img/tick.svg"); /* Replace with the path to your tick.svg */
+ background-image: var(--tick-icon-path, url("../../img/tick.svg")); /* Replace with the path to your tick.svg */|
|
||
| .slick-prev svg, | ||
| .slick-next svg { | ||
| color: white; | ||
| } | ||
|
|
||
| .lsx-to-slider .slick-arrow.slick-disabled, | ||
| .slick-lightbox-inner .slick-arrow.slick-disabled { | ||
| cursor: not-allowed; | ||
| } | ||
| .lsx-to-slider .slick-arrow.slick-prev:before, | ||
| .slick-lightbox-inner .slick-arrow.slick-prev:before { | ||
| content: ''; /* Remove font icon */ | ||
| background: url('../img/left-arrow-new.svg') no-repeat center center; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 10px; | ||
| content: ""; /* Remove font icon */ | ||
| 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: ''; /* Remove font icon */ | ||
| background: url('../img/right-arrow.svg') no-repeat center center; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 12px; | ||
| content: ""; /* Remove font icon */ | ||
| width: 40px; | ||
| height: 40px; | ||
| display: inline-block; | ||
| left: 12px; |
There was a problem hiding this comment.
In line 342 and 349, you're setting the width and height of the arrow icons to 40px, but in lines 274 and 280, you've set them to 20px. Make sure these values are consistent across your codebase to avoid visual inconsistencies.
- width: 40px;
- height: 40px;
+ width: 20px;
+ height: 20px;|
|
||
| .lsx-itinerary-wrapper .hidden, | ||
| .lsx-units-wrapper .hidden { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
This rule seems to be redundant as it's identical to the one above it (lines 407-409). Consider removing it to keep your CSS clean and maintainable.
- .lsx-itinerary-wrapper .hidden,
- .lsx-units-wrapper .hidden {
- display: none;
- }| .lsx-units-wrapper .hidden { | ||
| display: none; | ||
| } | ||
| /*# sourceMappingURL=style.css.map */ |
There was a problem hiding this comment.
It's a good practice to end your files with a newline. This can prevent potential parsing errors and improves compatibility across different tools and systems.
- /*# sourceMappingURL=style.css.map */
+ /*# sourceMappingURL=style.css.map */
+ 
Summary of Changes:
left-arrow-dark.svgandright-arrow-dark.svg).Summary by CodeRabbit