Skip to content

Commit dd40ae3

Browse files
jkutnerjkutner
authored
Merge pull request #143 from mun2025/fix-registery-page
Fixing UI for the Registry Page
2 parents 324b481 + 2a01e61 commit dd40ae3

File tree

3 files changed

+117
-85
lines changed

3 files changed

+117
-85
lines changed

‎app/javascript/components/App.scss‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,18 @@ $theme-colors: (
1010

1111
@import "~bootstrap/scss/bootstrap";
1212

13-
html {
14-
font-size: 1rem;
15-
}
16-
17-
@include media-breakpoint-up(sm) {
18-
html {
19-
font-size: 1.2rem;
20-
}
21-
}
22-
23-
@include media-breakpoint-up(md) {
24-
html {
25-
font-size: 1.4rem;
26-
}
13+
body {
14+
font-family: 'Source Sans Pro', sans-serif;
15+
color: $blue-dark;
16+
font-weight: 400;
17+
font-size: 1.1rem;
18+
line-height: 1.5;
19+
min-width: 320px;
2720
}
2821

29-
@include media-breakpoint-up(lg) {
30-
html {
31-
font-size: 1.4rem;
32-
}
22+
// Keep fontsize consistent for all the screen sizes
23+
html {
24+
font-size: 1rem;
3325
}
3426

3527
.App {
@@ -59,4 +51,4 @@ html {
5951

6052
.App-link {
6153
color: #61dafb;
62-
}
54+
}

‎app/javascript/components/Home.tsx‎

Lines changed: 104 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -10,73 +10,112 @@ import Search from "./search/Search";
1010
import Footer from "./common/Footer";
1111

1212

13-
class App extends React.Component<{match: {params: any}}>{
14-
render(){
15-
const {sL} = this.props.match.params;
16-
17-
return (
18-
<div className="App">
19-
<Header />
20-
<Search />
21-
<Jumbotron fluid>
13+
class App extends React.Component<{ match: { params: any } }> {
14+
render() {
15+
const { sL } = this.props.match.params;
16+
17+
return (
18+
<div className="App">
19+
<Header />
20+
<Search />
21+
<Jumbotron fluid>
22+
<Container>
23+
<h2>Buildpack Registry</h2>
24+
<p>
25+
Centralized registry for community buildpacks
26+
</p>
27+
</Container>
28+
</Jumbotron>
29+
<Container className='my-5'>
30+
<Row className="align-items-start">
31+
<Col md="8" lg="8">
32+
<p className='text-left'>
33+
<i>The Buildpack Registry</i> is a comprehensive collection of submitted buildpacks. A central <b>ecosystem</b> used to interact with buildpacks and discover details such as supported stacks, licensing, contributor information, and <b>versioning</b>.
34+
</p>
35+
<p className='text-left'>
36+
Join the community and find out how to help. <a href='https://slack.buildpacks.io/'>Reach out</a> on Slack to learn how!
37+
</p>
38+
</Col>
39+
<Col md="4" lg="4" className="d-flex justify-content-center align-items-center" >
40+
<Image src={logo} fluid
41+
style={{
42+
width: 'auto',
43+
height: '100%',
44+
maxHeight: '250px',
45+
padding: '0',
46+
margin: '0',
47+
position: 'relative',
48+
bottom: '80px'
49+
}}
50+
/>
51+
</Col>
52+
</Row>
53+
</Container>
2254
<Container>
23-
<h1>Buildpack Registry</h1>
24-
<p>
25-
Centralized registry for community buildpacks
26-
</p>
55+
<Row>
56+
<CardDeck>
57+
<Card style={{ border: 'none' }}>
58+
<Card.Title className='my-2'>Discovery</Card.Title>
59+
<Card.Img
60+
variant="top"
61+
className="mx-auto p-4"
62+
src={searchIcon}
63+
style={{
64+
maxWidth: '150px',
65+
height: 'auto',
66+
objectFit: 'contain'
67+
}}
68+
/>
69+
<Card.Body>
70+
<Card.Text>
71+
Searchable compendium of community published buildpacks
72+
</Card.Text>
73+
</Card.Body>
74+
</Card>
75+
<Card style={{ border: 'none' }}>
76+
<Card.Title className='my-2'>Versioning</Card.Title>
77+
<Card.Img
78+
variant="top"
79+
className="mx-auto p-4"
80+
src={versionIcon}
81+
style={{
82+
maxWidth: '150px',
83+
height: 'auto',
84+
objectFit: 'contain'
85+
}}
86+
/>
87+
<Card.Body>
88+
<Card.Text>
89+
Track a buildpack's available versions
90+
</Card.Text>
91+
</Card.Body>
92+
</Card>
93+
<Card style={{ border: 'none' }}>
94+
<Card.Title className='my-2'>Compatibility</Card.Title>
95+
<Card.Img
96+
variant="top"
97+
className="mx-auto p-4"
98+
src={checkIcon}
99+
style={{
100+
maxWidth: '150px',
101+
height: 'auto',
102+
objectFit: 'contain'
103+
}}
104+
/>
105+
<Card.Body>
106+
<Card.Text>
107+
Inspect a buildpack’s supported stacks and requirements
108+
</Card.Text>
109+
</Card.Body>
110+
</Card>
111+
</CardDeck>
112+
</Row>
113+
27114
</Container>
28-
</Jumbotron>
29-
<Container className='my-5'>
30-
<Row>
31-
<Col md="8">
32-
<p className='text-left'>
33-
<i>The Buildpack Registry</i> is a comprehensive collection of submitted buildpacks. A central <b>ecosystem</b> used to interact with buildpacks and discover details such as supported stacks, licensing, contributor information and <b>versioning</b>.
34-
</p>
35-
<p className='text-left'>
36-
Join the community and find out how to help. <a href='https://slack.buildpacks.io/'>Reach out</a> on slack to learn how!
37-
</p>
38-
</Col>
39-
<Col md="4">
40-
<Image src={logo} fluid />
41-
</Col>
42-
</Row>
43-
</Container>
44-
<Container>
45-
<Row>
46-
<CardDeck>
47-
<Card style={{border: 'none'}}>
48-
<Card.Title className='my-2'>Discovery</Card.Title>
49-
<Card.Img variant="top" className="mx-auto p-4" src={searchIcon} />
50-
<Card.Body>
51-
<Card.Text>
52-
Searchable compendium of community published buildpacks
53-
</Card.Text>
54-
</Card.Body>
55-
</Card>
56-
<Card style={{border: 'none'}}>
57-
<Card.Title className='my-2'>Versioning</Card.Title>
58-
<Card.Img variant="top" className="mx-auto p-4" src={versionIcon} />
59-
<Card.Body>
60-
<Card.Text>
61-
Track a buildpack's available versions
62-
</Card.Text>
63-
</Card.Body>
64-
</Card>
65-
<Card style={{border: 'none'}}>
66-
<Card.Title className='my-2'>Compatibility</Card.Title>
67-
<Card.Img variant="top" className="mx-auto p-4" src={checkIcon} />
68-
<Card.Body>
69-
<Card.Text>
70-
Inspect a builpack’s supported stacks and requirements
71-
</Card.Text>
72-
</Card.Body>
73-
</Card>
74-
</CardDeck>
75-
</Row>
76-
</Container>
77-
<Footer />
78-
</div>
79-
);}
115+
<Footer />
116+
</div>
117+
);
118+
}
80119
}
81120

82121
export default App;

‎app/javascript/components/colors.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
$pink: #DF0A6B;
2-
$blue: #47529E;
2+
$blue: #47529E;
3+
$blue-dark: #242960;

0 commit comments

Comments
 (0)