Skip to content

Commit 2ca8fd2

Browse files
sergeibbbsergeibbb
committed
Adds initial layout of scrollable cards
(#4769, #4773, PLG-138)
1 parent ae6e510 commit 2ca8fd2

File tree

4 files changed

+160
-9
lines changed

4 files changed

+160
-9
lines changed

‎src/webviews/apps/welcome/components/feature-card.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,10 @@ export class GlFeatureCard extends LitElement {
2424
2525
.content {
2626
margin-top: 0.5em;
27-
flex: 1;
28-
display: flex;
29-
flex-direction: column;
30-
gap: 0.5em;
27+
display: block;
3128
}
3229
33-
@media (max-width: 640px) {
30+
@media (max-width: 400px) {
3431
:host {
3532
flex-direction: column;
3633
}

‎src/webviews/apps/welcome/components/feature-narrow-card.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { css, html, LitElement } from 'lit';
2+
import { customElement } from 'lit/decorators.js';
3+
import '../../shared/components/button';
4+
import '../../shared/components/code-icon';
5+
6+
declare global {
7+
interface HTMLElementTagNameMap {
8+
'gl-feature-narrow-card': GlFeatureNarrowCard;
9+
}
10+
}
11+
12+
@customElement('gl-feature-narrow-card')
13+
export class GlFeatureNarrowCard extends LitElement {
14+
static override styles = [
15+
css`
16+
:host {
17+
display: flex;
18+
flex-direction: column;
19+
gap: 0.7em;
20+
width: 12em;
21+
min-width: 12em;
22+
text-align: initial;
23+
}
24+
25+
.image ::slotted(img) {
26+
max-height: 2.23em;
27+
border-radius: 0.6em;
28+
}
29+
30+
::slotted(p:last-child) {
31+
margin-top: 0.5em;
32+
}
33+
34+
.content {
35+
display: block;
36+
}
37+
38+
@media (max-width: 400px) {
39+
.content {
40+
margin-left: 0.3em;
41+
margin-right: 0.3em;
42+
}
43+
}
44+
45+
@media (max-width: 300px) {
46+
}
47+
`,
48+
];
49+
50+
override render(): unknown {
51+
return html`
52+
<div class="image">
53+
<slot name="image"></slot>
54+
</div>
55+
<div class="content">
56+
<slot></slot>
57+
</div>
58+
`;
59+
}
60+
}

‎src/webviews/apps/welcome/welcome.css.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const heroGradient = css`
5555
height: 517px;
5656
}
5757
58-
@media (max-width: 640px) {
58+
@media (max-width: 400px) {
5959
.welcome::before {
6060
width: 328px;
6161
height: 273px;
@@ -167,17 +167,33 @@ const cards = css`
167167
}
168168
169169
.card p {
170-
margin: 0.4em 0 0;
170+
margin: 0.5em 0 0;
171171
font-size: var(--card-font-size);
172172
}
173173
174+
.card p:last-child {
175+
margin: 1em 0 0;
176+
}
177+
174178
.card img {
175179
max-width: 100%;
176180
}
177181
`;
178182

183+
const scrollableFeatures = css`
184+
gl-scrollable-features {
185+
display: flex;
186+
gap: 1em;
187+
max-width: 100%;
188+
overflow-x: auto;
189+
overflow-y: hidden;
190+
scrollbar-width: none;
191+
}
192+
`;
193+
179194
export const welcomeStyles = css`
180195
${colorScheme} ${typography}
181196
${heroGradient} ${section} ${header}
197+
${scrollableFeatures}
182198
${cards}
183199
`;

‎src/webviews/apps/welcome/welcome.ts‎

Lines changed: 80 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import '../shared/components/gitlens-logo';
1414
import { welcomeStyles } from './welcome.css';
1515
import './components/feature-carousel';
1616
import './components/feature-card';
17+
import './components/feature-narrow-card';
1718

1819
@customElement('gl-welcome-app')
1920
export class GlWelcomeApp extends GlAppHost<State> {
@@ -84,8 +85,85 @@ export class GlWelcomeApp extends GlAppHost<State> {
8485
<gl-button @click=${() => this.onStartTrial()}>Start GitLens Pro Trial</gl-button>
8586
</div>
8687
87-
<div>
88-
<p>GitLens ${this.state?.version ?? ''} is ready to use!</p>
88+
<div class="section plain">
89+
<h2>You also get these free features</h2>
90+
</div>
91+
92+
<div class="section">
93+
<gl-scrollable-features>
94+
<gl-feature-narrow-card class="card">
95+
<img
96+
slot="image"
97+
src="${this.webroot ?? ''}/media/feature-graph.webp"
98+
alt="Commit Graph"
99+
width="100"
100+
height="100"
101+
/>
102+
<h1>Commit Graph</h1>
103+
<p>Visualize your repository's history and interact with commits</p>
104+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
105+
</gl-feature-narrow-card>
106+
<gl-feature-narrow-card class="card">
107+
<img
108+
slot="image"
109+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
110+
alt="Visual File History"
111+
width="32"
112+
height="32"
113+
/>
114+
<h1>Visual File History</h1>
115+
<p>Track changes to any file over time</p>
116+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
117+
</gl-feature-narrow-card>
118+
<gl-feature-narrow-card class="card">
119+
<img
120+
slot="image"
121+
src="${this.webroot ?? ''}/media/feature-graph.webp"
122+
alt="Commit Graph"
123+
width="100"
124+
height="100"
125+
/>
126+
<h1>Commit Graph</h1>
127+
<p>Visualize your repository's history and interact with commits</p>
128+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
129+
</gl-feature-narrow-card>
130+
<gl-feature-narrow-card class="card">
131+
<img
132+
slot="image"
133+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
134+
alt="Visual File History"
135+
width="32"
136+
height="32"
137+
/>
138+
<h1>Visual File History</h1>
139+
<p>Track changes to any file over time</p>
140+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
141+
</gl-feature-narrow-card>
142+
<gl-feature-narrow-card class="card">
143+
<img
144+
slot="image"
145+
src="${this.webroot ?? ''}/media/feature-graph.webp"
146+
alt="Commit Graph"
147+
width="100"
148+
height="100"
149+
/>
150+
<h1>Commit Graph</h1>
151+
<p>Visualize your repository's history and interact with commits</p>
152+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
153+
</gl-feature-narrow-card>
154+
<gl-feature-narrow-card class="card">
155+
<img
156+
slot="image"
157+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
158+
alt="Visual File History"
159+
width="32"
160+
height="32"
161+
/>
162+
<h1>Visual File History</h1>
163+
<p>Track changes to any file over time</p>
164+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
165+
</gl-feature-narrow-card>
166+
</gl-scrollable-features>
89167
</div>
90168
</div>
91169
`;

0 commit comments

Comments
 (0)