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

verticalList || ImageGallery buttons issue #4099 solved #4105

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

verticalList || ImageGallery buttons issue #4099 solved #4105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d548604
verticalList || ImageGallery buttons issue #4099 solved
sanwalsulehri Jan 23, 2025
46b50fb
verticalList || ImageGallery buttons issue #4099 solved
sanwalsulehri Jan 23, 2025
1cd20fe
verticalList || ImageGallery buttons issue #4099 solved
sanwalsulehri Jan 23, 2025
05b108c
verticalList || ImageGallery buttons issue #4099 solved
sanwalsulehri Jan 23, 2025
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: 14 additions & 19 deletions packages/components/src/ImageGallery/ImageGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,18 @@ interface IState {
}

const NavButton = styled('button')`
background: transparent;
border: 0;
background: white;
border: 3px solid black;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
top: 50%;
transform: translateY(-50%);
height: 55px;
width: 55px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 15px;
`

export const ImageGallery = (props: ImageGalleryProps) => {
Expand Down Expand Up @@ -164,25 +169,20 @@ export const ImageGallery = (props: ImageGalleryProps) => {
<NavButton
aria-label={'Next image'}
style={{
right: 0,
right: 10,
}}
onClick={() =>
setActive(
activeImageIndex + 1 < imageNumber ? activeImageIndex + 1 : 0,
)
}
>
<Icon
glyph="chevron-right"
color="white"
size={60}
marginRight="4px"
/>
<Icon glyph="chevron-right" color="white" size={45} />
</NavButton>
<NavButton
aria-label={'Previous image'}
style={{
left: 0,
left: 10,
}}
onClick={() =>
setActive(
Expand All @@ -192,12 +192,7 @@ export const ImageGallery = (props: ImageGalleryProps) => {
)
}
>
<Icon
glyph="chevron-left"
color="white"
size={60}
marginRight="4px"
/>
<Icon glyph="chevron-left" color="white" size={45} />
</NavButton>
</>
) : null}
Expand Down
52 changes: 52 additions & 0 deletions packages/components/src/VerticalList/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,57 @@
right: 0;
z-index: 1;
height: 100%;
}

/* Set red background for PhotoSwipe navigation buttons */
.pswp__button--arrow--prev {
Copy link
Contributor

Choose a reason for hiding this comment

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

are all these !important necessary?

Copy link
Author

Choose a reason for hiding this comment

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

yes actually

Copy link
Author

Choose a reason for hiding this comment

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

the styling not applied that's why man everything checked no failure you see

Copy link
Author

Choose a reason for hiding this comment

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

@mariojsnunes everything passed mean checked now no failure that's a good news

Copy link
Author

Choose a reason for hiding this comment

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

@mariojsnunes i think now this issue are solved so plz merge and closed this issue😃🎉

Copy link
Author

Choose a reason for hiding this comment

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

any help you want in code or remove anything or solve any issue feel free to tell me i will solved this @mariojsnunes

background: white !important;
border: 3px solid black !important;
position: absolute !important;
top: 54% !important;
height: 55px !important;
width: 55px !important;
left: 15px !important;

cursor: pointer !important;
border-radius: 15px !important;
position: relative;
}

.pswp__button--arrow--next {
background: white !important;
border: 3px solid black !important;
position: absolute !important;
top: 54% !important;
right: 15px !important;
height: 55px !important;
width: 55px !important;

cursor: pointer !important;
border-radius: 15px !important;
position: relative;
}

/* Optional: Change the arrow color */
.pswp__button--arrow--prev svg {
fill: black;
/* Arrow color */
width: 45px !important;
/* Arrow size */
height: 45px !important;
position: absolute !important;
left: 65% !important;
top: 112% !important;
transform: translate(-50%, -50%) !important;
}

.pswp__button--arrow--next svg {
fill: black;
/* Arrow color */
width: 45px !important;
/* Arrow size */
height: 45px !important;
position: absolute !important;
left: -8% !important;
top: 65% !important;
}
12 changes: 8 additions & 4 deletions src/pages/common/Header/Menu/MenuDesktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,18 @@ import { Flex } from 'theme-ui'
import { EnvironmentContext } from '../../EnvironmentContext'

const MenuLink = styled(NavLink)`
padding: 0px ${(props) => props.theme.space[4]}px;
padding: 0px ${(props) => props.theme?.space?.[4] || 16}px;
color: ${'black'};
position: relative;

> div {
z-index: ${(props) => props.theme.zIndex.default};
z-index: ${(props) => props.theme?.zIndex?.default || 1};
position: relative;
&:hover {
opacity: 0.7;
}
}

&.active {
&:after {
content: '';
Expand All @@ -27,11 +29,13 @@ const MenuLink = styled(NavLink)`
display: block;
position: absolute;
bottom: -6px;
background-color: ${(props) => props.theme.colors.accent.base};
background-color: ${(props) =>
props.theme?.colors?.accent?.base || 'blue'};
mask-size: contain;
mask-image: url(\"${MenuCurrent}\");

mask-repeat: no-repeat;
z-index: ${(props) => props.theme.zIndex.level};
z-index: ${(props) => props.theme?.zIndex?.level || 10};
left: 50%;
transform: translateX(-50%);
pointer-events: none;
Expand Down
Loading