Skip to content

Commit 80387a3

Browse files
BlargianBlargian
authored
Merge pull request #4669 from Blargian/alignment_on_homepage
Styling: fix alignment on homepage
2 parents 3f63019 + e461b07 commit 80387a3

File tree

7 files changed

+118
-56
lines changed

7 files changed

+118
-56
lines changed

‎src/components/IntegrationGrid/IntegrationGrid.tsx‎

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -72,37 +72,60 @@ function IntegrationCard({ integration }: { integration: IntegrationData }) {
7272

7373
const linkTo = getNavigationLink(integration.docsLink, integration.slug);
7474

75+
// Check if this is an external link (not to clickhouse.com/docs)
76+
const isExternalLink = linkTo.startsWith('http') && !linkTo.includes('clickhouse.com/docs');
77+
7578
return (
76-
<Link
77-
to={linkTo}
78-
style={{ textDecoration: 'none', color: 'inherit' }}
79-
>
80-
<CUICard style={{ position: 'relative' }}>
81-
{/* Tier Icon in top right corner */}
82-
{integration.integration_tier && integration.integration_tier !== 'community' && (
83-
<div style={{
84-
position: 'absolute',
85-
top: '12px',
86-
right: '12px',
87-
zIndex: 1,
88-
opacity: 0.7
89-
}}>
90-
{getTierIcon(integration.integration_tier)}
91-
</div>
92-
)}
93-
<CUICard.Body>
94-
<CUICard.Header>
95-
<img
96-
src={getLogoSrc()}
97-
alt={`${integration.integration_title || integration.slug} logo`}
98-
/>
99-
</CUICard.Header>
100-
<CUICard.Footer>
101-
{integration.integration_title}
102-
</CUICard.Footer>
103-
</CUICard.Body>
104-
</CUICard>
105-
</Link>
79+
<div className={styles.cardWrapper}>
80+
<Link
81+
to={linkTo}
82+
style={{ textDecoration: 'none', color: 'inherit' }}
83+
>
84+
<CUICard style={{ position: 'relative' }}>
85+
{/* Tier Icon in top right corner */}
86+
{integration.integration_tier && integration.integration_tier !== 'community' && (
87+
<div style={{
88+
position: 'absolute',
89+
top: '12px',
90+
right: '12px',
91+
zIndex: 1,
92+
opacity: 0.7
93+
}}>
94+
{getTierIcon(integration.integration_tier)}
95+
</div>
96+
)}
97+
<CUICard.Body>
98+
<CUICard.Header>
99+
<img
100+
src={getLogoSrc()}
101+
alt={`${integration.integration_title || integration.slug} logo`}
102+
/>
103+
</CUICard.Header>
104+
<CUICard.Footer>
105+
{integration.integration_title}
106+
</CUICard.Footer>
107+
</CUICard.Body>
108+
</CUICard>
109+
</Link>
110+
{/* External link overlay */}
111+
{isExternalLink && (
112+
<div className={styles.externalLinkOverlay}>
113+
<svg
114+
fill="none"
115+
stroke="currentColor"
116+
viewBox="0 0 24 24"
117+
xmlns="http://www.w3.org/2000/svg"
118+
>
119+
<path
120+
strokeLinecap="round"
121+
strokeLinejoin="round"
122+
strokeWidth={2}
123+
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
124+
/>
125+
</svg>
126+
</div>
127+
)}
128+
</div>
106129
);
107130
}
108131

@@ -630,13 +653,8 @@ function getTierIcon(tier: string, withMargin = false): React.ReactNode {
630653
);
631654
case 'community':
632655
return (
633-
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style={marginStyle}>
634-
<path fillRule="evenodd" clipRule="evenodd" d="M6.22168 4.44463V4.44463C6.22168 3.46263 7.01768 2.66663 7.99968 2.66663V2.66663C8.98168 2.66663 9.77768 3.46263 9.77768 4.44463V4.44463C9.77768 5.42663 8.98168 6.22263 7.99968 6.22263V6.22263C7.01768 6.22196 6.22168 5.42596 6.22168 4.44463Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
635-
<path fillRule="evenodd" clipRule="evenodd" d="M1.91309 11.5553V11.5553C1.91309 10.5733 2.70909 9.77734 3.69109 9.77734V9.77734C4.67309 9.77734 5.46909 10.5733 5.46909 11.5553V11.5553C5.46842 12.5373 4.67309 13.3333 3.69109 13.3333V13.3333C2.70909 13.3333 1.91309 12.5373 1.91309 11.5553Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
636-
<path fillRule="evenodd" clipRule="evenodd" d="M10.5322 11.5553V11.5553C10.5322 10.5733 11.3282 9.77734 12.3102 9.77734V9.77734C13.2922 9.77734 14.0882 10.5733 14.0882 11.5553V11.5553C14.0882 12.5373 13.2922 13.3333 12.3102 13.3333V13.3333C11.3276 13.3333 10.5322 12.5373 10.5322 11.5553H10.5322Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
637-
<path d="M10.5939 11.1134H5.40723" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
638-
<path d="M8.95996 5.94006L11.54 9.96006" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
639-
<path d="M4.45996 9.96006L7.03996 5.94006" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
656+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" style={marginStyle}>
657+
<path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
640658
</svg>
641659
);
642660
default:

‎src/components/IntegrationGrid/styles.module.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,4 +178,44 @@
178178
font-size: 1.1rem;
179179
margin: 0;
180180
}
181+
}
182+
183+
.externalLinkOverlay {
184+
position: absolute;
185+
top: 0;
186+
left: 0;
187+
right: 0;
188+
bottom: 0;
189+
background: rgba(0, 0, 0, 0.15);
190+
backdrop-filter: blur(4px);
191+
-webkit-backdrop-filter: blur(4px);
192+
display: flex;
193+
align-items: center;
194+
justify-content: center;
195+
opacity: 0;
196+
transition: opacity 0.2s ease;
197+
border-radius: 8px;
198+
pointer-events: none;
199+
200+
[data-theme='dark'] & {
201+
background: rgba(255, 255, 255, 0.15);
202+
}
203+
204+
svg {
205+
width: 32px;
206+
height: 32px;
207+
color: white;
208+
209+
[data-theme='dark'] & {
210+
color: var(--ifm-color-emphasis-800);
211+
}
212+
}
213+
}
214+
215+
.cardWrapper {
216+
position: relative;
217+
218+
&:hover .externalLinkOverlay {
219+
opacity: 1;
220+
}
181221
}

‎src/css/home.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@
210210
@media (min-width: 768px) {
211211
flex-direction: row;
212212
padding-top: 2rem;
213-
padding-bottom: 2rem;
213+
padding-bottom: 2.5rem;
214214
padding-right: 2rem;
215215
justify-content: space-between;
216216
}
@@ -231,6 +231,15 @@
231231
}
232232
}
233233

234+
.docs-doc-id-home-page .home-page-section-search p + .home-page-hero-right-search {
235+
margin-top: 0 !important;
236+
}
237+
238+
/* Also target the SearchBar wrapper directly */
239+
.docs-doc-id-home-page .home-page-hero-right-search {
240+
margin-top: 0 !important;
241+
}
242+
234243
.home-page-section:last-of-type {
235244
border-bottom: none;
236245
}

‎src/pages/index.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const Hero = ({children, color}) => {
4949
}}>
5050
<div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning
5151
iconWidth={'24px'}/></div>
52-
<div>Quick Start</div>
52+
<div>Quick start</div>
5353
</div>
5454
<div>Get started with Cloud</div>
5555
</a>
@@ -93,7 +93,7 @@ export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link})
9393
export const SearchClickHouse = ({children, color}) => {
9494
return (
9595
<div className='home-page-section-search'>
96-
<p style={{fontWeight: '600', fontSize: '18px', margin: 'auto', flex: '1'}}>Search documentation</p>
96+
<p style={{fontWeight: '600', fontSize: '18px', marginTop: '1.5rem', flex: '1'}}>Search documentation</p>
9797
<div className='home-page-hero-right-search'>
9898
<SearchBar style="width: 75%"/>
9999
</div>
@@ -175,10 +175,10 @@ export const DeployClickHouse = ({children, color}) => {
175175
<HomePageOptionButton svgIcon={<IconCloud iconWidth='28px'/>}
176176
link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
177177
<HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px'/>}
178-
link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
178+
link='/docs/architecture/introduction'>Node deployment</HomePageOptionButton>
179179
<HomePageOptionButton svgIcon={<IconCluster iconWidth='28px'/>}
180180
link='/docs/architecture/cluster-deployment'>Cluster
181-
Deployment</HomePageOptionButton>
181+
deployment</HomePageOptionButton>
182182
</div>
183183
</div>
184184
)
@@ -199,7 +199,7 @@ export const MoreResources = ({children, color}) => {
199199
link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
200200
<HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px'/>}
201201
link='/docs/getting-started/example-datasets'>Sample
202-
Datasets</HomePageOptionButton>
202+
datasets</HomePageOptionButton>
203203
</div>
204204
</div>
205205
</div>

‎src/theme/Navbar/Content/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,4 @@ export default function NavbarContent() {
105105
</div>
106106
</div>
107107
);
108-
}
108+
}

‎src/theme/badges/CommunityMaintained/index.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,9 @@ import styles from "./styles.module.css"
33

44
const Icon = () => {
55
return (
6-
<div className={styles.CommunityMaintainedIcon} style={{ marginRight: '8px', marginTop: '4px' }}>
7-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
8-
<path fillRule="evenodd" clipRule="evenodd" d="M6.22168 4.44463V4.44463C6.22168 3.46263 7.01768 2.66663 7.99968 2.66663V2.66663C8.98168 2.66663 9.77768 3.46263 9.77768 4.44463V4.44463C9.77768 5.42663 8.98168 6.22263 7.99968 6.22263V6.22263C7.01768 6.22196 6.22168 5.42596 6.22168 4.44463Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
9-
<path fillRule="evenodd" clipRule="evenodd" d="M1.91309 11.5553V11.5553C1.91309 10.5733 2.70909 9.77734 3.69109 9.77734V9.77734C4.67309 9.77734 5.46909 10.5733 5.46909 11.5553V11.5553C5.46842 12.5373 4.67309 13.3333 3.69109 13.3333V13.3333C2.70909 13.3333 1.91309 12.5373 1.91309 11.5553Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
10-
<path fillRule="evenodd" clipRule="evenodd" d="M10.5322 11.5553V11.5553C10.5322 10.5733 11.3282 9.77734 12.3102 9.77734V9.77734C13.2922 9.77734 14.0882 10.5733 14.0882 11.5553V11.5553C14.0882 12.5373 13.2922 13.3333 12.3102 13.3333V13.3333C11.3276 13.3333 10.5322 12.5373 10.5322 11.5553H10.5322Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
11-
<path d="M10.5939 11.1134H5.40723" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
12-
<path d="M8.95996 5.94006L11.54 9.96006" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
13-
<path d="M4.45996 9.96006L7.03996 5.94006" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
6+
<div className={styles.CommunityMaintainedIcon} style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
7+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 256 256">
8+
<path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
149
</svg>
1510
</div>
1611
)

‎src/theme/badges/CommunityMaintained/styles.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
}
1313

1414
.CommunityMaintainedIcon svg path {
15-
fill: #69afff;
16-
stroke: #ffffff;
15+
fill: #ffffff;
16+
stroke: none;
1717
}
1818

1919
.CommunityMaintainedBadge a {
@@ -34,6 +34,6 @@
3434
}
3535

3636
[data-theme="dark"] .CommunityMaintainedIcon svg path {
37-
fill: #69afff;
38-
stroke: #ffffff;
37+
fill: #ffffff;
38+
stroke: none;
3939
}

0 commit comments

Comments
 (0)