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.

Sign up for GitHub

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

Travel Information Slider #458

Merged
merged 6 commits into from
Dec 17, 2024
Merged

Travel Information Slider #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e018fe7
Travel Information Slider
Justinabes007 Dec 13, 2024
0406cff
Updating the slider js and CSS.
krugazul Dec 17, 2024
f273705
Updating the plugin header #369
krugazul Dec 17, 2024
8250fb9
Slider updates
krugazul Dec 17, 2024
3deaa0b
Fixing the travel info read more
krugazul Dec 17, 2024
dc325c5
Added in the travel info pattern
krugazul Dec 17, 2024
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
21 changes: 20 additions & 1 deletion assets/css/scss/_slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,19 @@
.wp-block-query {
.lsx-to-slider {
&.lsx-travel-information-wrapper {
.slick-list {
max-width: 100% !important;
width: 100% !important;
}

.slick-slide {
padding: 0 !important;
margin: 0 10px !important;
}
}
Comment on lines +7 to +11
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 use of !important is generally discouraged in CSS as it increases the specificity of a rule, making it harder to override if needed. It's better to increase specificity in a more controlled way, such as by using more specific selectors or by structuring your CSS so that the most specific rules are declared last.

- .slick-slide {
-   padding: 0 !important;
-   margin: 0 10px !important;
- }
+ .wp-block-query.lsx-to-slider.travel-information .slick-slide {
+   padding: 0;
+   margin: 0 10px;
+ }

Comment on lines +8 to +11
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 use of !important is generally discouraged in CSS as it breaks the natural cascading in your stylesheets. It's better to increase specificity of the selector or rethink your class structure instead.

- .slick-slide {
-   padding: 0 !important;
-   margin: 0 10px !important;
- }
+ .lsx-to-slider.travel-information .slick-slide {
+   padding: 0;
+   margin: 0 10px;
+ }

}

Comment on lines +1 to +13
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 changes made to the .lsx-to-slider class and its child classes are good for improving the layout of the slider. The use of !important is generally discouraged as it can make debugging difficult and increase CSS specificity unnecessarily. However, in this case, it seems necessary to override the styles from the Slick library or other conflicting styles.

- max-width: 100% !important;
- width: 100% !important;
+ max-width: 100%;
+ width: 100%;

.wp-block-query,
.lsx-travel-information-wrapper {
&.lsx-to-slider {
gap: var(--wp--preset--spacing--small) var(--wp--preset--spacing--small);
position: relative;
Expand Down Expand Up @@ -29,7 +44,11 @@
height: 20px;
}
}
}
}

.wp-block-query {
&.lsx-to-slider {
.slick-slide {
Comment on lines +47 to +51
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

Similar to the previous comment, the use of !important should be avoided if possible. If there's no other way to override the styles, then it's acceptable.

- padding: 15px !important;
+ padding: 15px;

padding: 15px !important;
}
Expand Down
149 changes: 24 additions & 125 deletions assets/css/style.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/style.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading