Skip to content

Commit ef69157

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

File tree

4 files changed

+129
-4
lines changed

4 files changed

+129
-4
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export class GlFeatureCard extends LitElement {
3030
gap: 0.5em;
3131
}
3232
33-
@media (max-width: 640px) {
33+
@media (max-width: 400px) {
3434
:host {
3535
flex-direction: column;
3636
}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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: 1em;
20+
width: 12em;
21+
min-width: 12em;
22+
text-align: initial;
23+
}
24+
25+
::slotted(img:first-child) {
26+
max-height: 2.23em;
27+
border: red solid 1px;
28+
}
29+
30+
@media (max-width: 640px) {
31+
}
32+
33+
@media (max-width: 300px) {
34+
}
35+
`,
36+
];
37+
38+
override render(): unknown {
39+
return html`<slot></slot>`;
40+
}
41+
}

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

Lines changed: 13 additions & 1 deletion
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;
@@ -176,8 +176,20 @@ const cards = css`
176176
}
177177
`;
178178

179+
const scrollableFeatures = css`
180+
gl-scrollable-features {
181+
display: flex;
182+
gap: 1em;
183+
max-width: 100%;
184+
overflow-x: auto;
185+
overflow-y: hidden;
186+
scrollbar-width: none;
187+
}
188+
`;
189+
179190
export const welcomeStyles = css`
180191
${colorScheme} ${typography}
181192
${heroGradient} ${section} ${header}
193+
${scrollableFeatures}
182194
${cards}
183195
`;

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

Lines changed: 74 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,79 @@ 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+
src="${this.webroot ?? ''}/media/feature-graph.webp"
97+
alt="Commit Graph"
98+
width="100"
99+
height="100"
100+
/>
101+
<h1>Commit Graph</h1>
102+
<p>Visualize your repository's history and interact with commits</p>
103+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
104+
</gl-feature-narrow-card>
105+
<gl-feature-narrow-card class="card">
106+
<img
107+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
108+
alt="Visual File History"
109+
width="32"
110+
height="32"
111+
/>
112+
<h1>Visual File History</h1>
113+
<p>Track changes to any file over time</p>
114+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
115+
</gl-feature-narrow-card>
116+
<gl-feature-narrow-card class="card">
117+
<img
118+
src="${this.webroot ?? ''}/media/feature-graph.webp"
119+
alt="Commit Graph"
120+
width="100"
121+
height="100"
122+
/>
123+
<h1>Commit Graph</h1>
124+
<p>Visualize your repository's history and interact with commits</p>
125+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
126+
</gl-feature-narrow-card>
127+
<gl-feature-narrow-card class="card">
128+
<img
129+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
130+
alt="Visual File History"
131+
width="32"
132+
height="32"
133+
/>
134+
<h1>Visual File History</h1>
135+
<p>Track changes to any file over time</p>
136+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
137+
</gl-feature-narrow-card>
138+
<gl-feature-narrow-card class="card">
139+
<img
140+
src="${this.webroot ?? ''}/media/feature-graph.webp"
141+
alt="Commit Graph"
142+
width="100"
143+
height="100"
144+
/>
145+
<h1>Commit Graph</h1>
146+
<p>Visualize your repository's history and interact with commits</p>
147+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
148+
</gl-feature-narrow-card>
149+
<gl-feature-narrow-card class="card">
150+
<img
151+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
152+
alt="Visual File History"
153+
width="32"
154+
height="32"
155+
/>
156+
<h1>Visual File History</h1>
157+
<p>Track changes to any file over time</p>
158+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
159+
</gl-feature-narrow-card>
160+
</gl-scrollable-features>
89161
</div>
90162
</div>
91163
`;

0 commit comments

Comments
 (0)