Skip to content

Fix 340 #32

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

Merged
merged 9 commits into from
Oct 24, 2024
Merged

Fix 340 #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7cc68d0
fix: Make the CCIP responsive
markshenouda Oct 22, 2024
9ee7008
fix: CSS responsiveness
markshenouda Oct 23, 2024
727568b
fix: typo
markshenouda Oct 23, 2024
8fed7c6
fix: minor css issues
markshenouda Oct 23, 2024
ccc4922
fix: use client:load instead of client:only
markshenouda Oct 23, 2024
77641e2
fix: table padding
markshenouda Oct 23, 2024
526ef34
fix: token grid
markshenouda Oct 23, 2024
9f1dccb
fix: hero paddings
markshenouda Oct 23, 2024
159133c
Revert the percentage width
Zelig880 Oct 24, 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
2 changes: 1 addition & 1 deletion src/components/CCIP/Cards/NetworkCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: flex;
padding: var(--space-6x);
gap: var(--space-3x);

width: 100%;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--space-1x);
Expand Down
11 changes: 9 additions & 2 deletions src/components/CCIP/Cards/TokenCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.token-card__container {
display: flex;
width: 137px;
height: 124px;
width: 100%;
height: 110px;
margin: 0 auto;
flex-direction: column;
align-items: center;
text-align: center;
Expand Down Expand Up @@ -38,3 +39,9 @@
text-overflow: ellipsis; /* Add ellipsis (…) when the text is truncated */
width: 200px; /* Adjust the width as needed */
}

@media (min-width: 992px) {
.token-card__container {
height: 124px;
}
}
29 changes: 20 additions & 9 deletions src/components/CCIP/Chain/Chain.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,20 @@ const searchLanes = getSearchLanes({ environment })

<CcipLayout frontmatter={entry.data} {headings} environment={environment}>
<Drawer client:only="react" />
<ChainHero chains={networks} tokens={allTokens} network={network} environment={environment} lanes={searchLanes} />
<ChainHero
chains={networks}
tokens={allTokens}
network={network}
environment={environment}
lanes={searchLanes}
client:load
/>
<section class="layout">
<div>
<Table
environment={environment}
lanes={lanes}
client:only="react"
client:load
explorerUrl={network.explorerUrl}
sourceNetwork={{
name: network.name,
Expand All @@ -78,18 +85,17 @@ const searchLanes = getSearchLanes({ environment })
<style scoped="false">
.layout {
--gutter: var(--space-6x);
--doc-padding: 2rem;
--doc-padding: var(--space-6x);
margin: var(--space-8x) auto;
display: grid;
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
gap: var(--gutter);
padding: var(--doc-padding);
}

.ccip-heading {
display: flex;
padding-bottom: var(--space-4x);
border-bottom: 1px solid var(--gray-200);
margin-bottom: var(--space-6x);
justify-content: space-between;
}
Expand All @@ -110,13 +116,13 @@ const searchLanes = getSearchLanes({ environment })
.networks__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8x);
gap: var(--space-2x);
}

.tokens__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8x);
grid-template-columns: 32% 32% 32%;
Copy link

Choose a reason for hiding this comment

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

why use the percentage instead than the FR?

Copy link
Member Author

Choose a reason for hiding this comment

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

Well the grid doesn't respect the page width I tried to force it but it didn't work

Here is the current result
Screenshot 2024-10-23 at 4 23 35 PM

Here is the result with 1fr 1fr 1fr
Screenshot 2024-10-23 at 4 24 43 PM

So the 32% is the perfect percentage to make the grid looks good in almost every mobile screen size, we are still using 1fr for the desktop

Screen.Recording.2024-10-23.at.4.30.38.PM.mp4

Copy link

Choose a reason for hiding this comment

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

I do not have your results. For me using fr works fine:
image

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh I tried it as well and it didn't make the same issue, probably it was a problem with the layout and I fixed it while modifying it

Copy link

Choose a reason for hiding this comment

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

I found out what this is. It is a bug with "display: contents" that is applied when using Astro islands. I reverted it back to 32%

gap: var(--space-2x);
}

@media (min-width: 50em) {
Expand All @@ -127,6 +133,7 @@ const searchLanes = getSearchLanes({ environment })

@media (min-width: 992px) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-24x);
}
Expand All @@ -142,5 +149,9 @@ const searchLanes = getSearchLanes({ environment })
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--space-4x);
}

.ccip-heading {
border-bottom: 1px solid var(--gray-200);
}
}
</style>
50 changes: 36 additions & 14 deletions src/components/CCIP/ChainHero/ChainHero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,10 @@
}

.ccip-chain-hero__content {
--gutter: var(--space-10x);
--doc-padding: 2rem;
--gutter: var(--space-6x);
--doc-padding: var(--space-6x);
gap: var(--gutter);
padding-left: var(--space-4x);
padding-right: var(--space-4x);
padding-top: var(--space-10x);
padding-bottom: var(--space-10x);
padding: var(--space-6x);
margin: 0 auto;
display: flex;
flex-direction: column;
Expand All @@ -54,19 +51,20 @@

.ccip-chain-hero__top {
display: flex;
flex-direction: column-reverse;
Copy link

Choose a reason for hiding this comment

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

Not sure if it is this page, but side padding still too small here:
image

justify-content: space-between;
align-items: center;
gap: var(--space-16x);
align-items: start;
gap: var(--space-6x);
}

.ccip-chain-hero__chainSearch {
width: 358px;
width: 100%;
}

.ccip-chain-hero__details {
display: grid;
gap: var(--space-4x);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: var(--space-6x);
grid-template-columns: 1fr;
}

.ccip-chain-hero__details__label {
Expand All @@ -76,18 +74,20 @@
font-weight: 600;
font-size: 14px;
line-height: 22px;
padding-bottom: var(--space-4x);
padding-bottom: var(--space-2x);
color: var(--gray-500);
}

.ccip-chain-hero__feeTokens__list {
display: flex;
align-items: center;
gap: var(--space-20x);
align-items: start;
flex-direction: column;
gap: var(--space-4x);
}

.ccip-chain-hero__feeTokens__item {
display: flex;

align-items: center;
gap: var(--space-2x);
color: var(--gray-900);
Expand Down Expand Up @@ -137,7 +137,29 @@
}

@media (min-width: 992px) {
.ccip-chain-hero__top {
flex-direction: row;
gap: var(--space-16x);
align-items: center;
}

.ccip-chain-hero__chainSearch {
width: 358px;
}

.ccip-chain-hero__details {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: var(--space-4x);
}

.ccip-chain-hero__feeTokens__list {
align-items: center;
flex-direction: row;
gap: var(--space-20x);
}

.ccip-chain-hero__content {
--gutter: var(--space-10x);
grid-template-columns: 1fr 1fr;
padding-left: var(--space-10x);
padding-right: var(--space-10x);
Expand Down
21 changes: 18 additions & 3 deletions src/components/CCIP/ChainHero/LaneDetailsHero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.lane-details-hero {
background-color: var(--gray-100);
padding: var(--space-4x) var(--space-6x);
padding: var(--space-6x);
border-bottom: 1px solid var(--gray-200);
}

Expand All @@ -15,15 +15,20 @@

.lane-details-hero__networks {
display: flex;
align-items: center;
flex-direction: column;
align-items: start;
gap: var(--space-6x);

font-style: normal;
font-weight: var(--font-weight-medium);
font-size: 28px;
margin: var(--space-10x) 0;
}

.lane-details-hero__networks svg {
transform: rotate(90deg);
margin-left: var(--space-4x);
}

.lane-details-hero__network {
display: flex;
align-items: center;
Expand Down Expand Up @@ -63,4 +68,14 @@
.lane-details-hero__details {
grid-template-columns: 1fr 2fr;
}

.lane-details-hero__networks {
flex-direction: row;
align-items: center;
}

.lane-details-hero__networks svg {
transform: rotate(0deg);
margin-left: 0;
}
}
1 change: 1 addition & 0 deletions src/components/CCIP/Drawer/Drawer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@

.drawer__content {
overflow-y: auto;
height: 100%;
}

.drawer__open .drawer__container {
Expand Down
2 changes: 1 addition & 1 deletion src/components/CCIP/Drawer/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ function Drawer() {
</svg>
</button>

{typeof $drawerContent === "function" ? $drawerContent() : $drawerContent}
<div>{typeof $drawerContent === "function" ? $drawerContent() : $drawerContent}</div>
</div>
</div>
</div>
Expand Down
Loading