Skip to content

Commit 88efbba

Browse files
pichflmarcoow
pichfl
authored and
marcoow
committed
New work page layout (mainmatter#333)
* Work: Shape for cases * Use spaces over tabs, add editorconfig
1 parent d9e9e88 commit 88efbba

File tree

6 files changed

+239
-89
lines changed

6 files changed

+239
-89
lines changed

‎.editorconfig

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# http://editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
indent_style = space
11+
indent_size = 2
12+
13+
[*.hbs]
14+
insert_final_newline = false
15+
16+
[*.{diff,md}]
17+
trim_trailing_whitespace = false

‎src/ui/components/ShapeCase/component-test.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import hbs from '@glimmer/inline-precompile';
2+
import { render, setupRenderingTest } from '@glimmer/test-helpers';
3+
4+
const { module, test } = QUnit;
5+
6+
module('Component: ShapeCase', function (hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function (assert) {
10+
/*
11+
* You may pass data into the component through arguments set on the
12+
* `testContext`
13+
*
14+
* For example:
15+
*
16+
* ```
17+
* this.foo = { foo: '123' };
18+
*
19+
* await render(hbs`<ShapeCase @foo={{this.foo}} />`)
20+
*
21+
* // or
22+
*
23+
* this.foo = 'bar';
24+
* await render(hbs`<p>{{this.foo}}</p>`);
25+
*
26+
* assert.dom('p').text('bar');
27+
* ```
28+
*/
29+
await render(hbs`<ShapeCase />`);
30+
assert.ok(this.containerElement.querySelector('div'));
31+
});
32+
});

‎src/ui/components/ShapeCase/component.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Component from '@glimmer/component';
2+
3+
export default class ShapeCase extends Component {
4+
public clipId = Math.random().toString(36).substr(2, 5);
5+
6+
get imageClipStyle() {
7+
const shouldClip = this.args.clipImage || true;
8+
9+
if (!shouldClip) {
10+
return '';
11+
}
12+
13+
return `clip-path: url(#${this.clipId});`;
14+
}
15+
16+
get shapeStyle() {
17+
return `fill: ${this.args.color || '#007DF6'}`
18+
}
19+
}

‎src/ui/components/ShapeCase/stylesheet.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@block typography from "../../styles/blocks/typography.block.css";
2+
3+
:scope {
4+
position: relative;
5+
}
6+
7+
.shape {
8+
display: block;
9+
position: relative;
10+
left: 50%;
11+
transform: translate(-50%);
12+
width: 100vw;
13+
height: auto;
14+
margin: -8rem 0 6rem;
15+
}
16+
17+
.logo {
18+
position: absolute;
19+
top: calc(50vw - 12rem);
20+
}
21+
22+
.logo-img {
23+
display: block;
24+
height: 4rem;
25+
width: auto;
26+
}
27+
28+
.floating {
29+
position: absolute;
30+
top: 13rem;
31+
left: 50%;
32+
transform: translate(22rem);
33+
}
34+
35+
.floating-background {
36+
fill: var(--link-color);
37+
}
38+
39+
.floating-content {
40+
position: absolute;
41+
top: calc(50% - 21rem);
42+
right: calc(-56.5rem + 100vw);
43+
width: 25rem;
44+
transform: translate(-50%);
45+
text-align: right;
46+
47+
--link-color: #fff;
48+
}

‎src/ui/components/ShapeCase/template.hbs

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<figure>
2+
<svg class="shape" height="900" viewBox="0 0 1800 900" width="1800" xmlns="http://www.w3.org/2000/svg">
3+
<defs>
4+
<clipPath id={{this.clipId}}>
5+
<path
6+
d="m840.577137 0 862.961153 498.230855-231.96152 401.769145h-512.153907l-862.9611537-498.230855 231.9615247-401.769145z"
7+
fill-rule="evenodd"
8+
></path>
9+
</clipPath>
10+
</defs>
11+
<g style="clip-path: url(#{{this.clipId}});">
12+
<rect x="0" y="0" width="100%" height="100%" style={{this.shapeStyle}}></rect>
13+
</g>
14+
{{#if @image}}
15+
<g style={{this.imageClipStyle}}>
16+
<image x="0" y="0" xlink:href="{{@image}}" width="100%" height="100%"></image>
17+
</g>
18+
{{/if}}
19+
</svg>
20+
<figcaption>
21+
<div class="floating">
22+
<svg class="shape" height="900" viewBox="0 0 1800 900" width="1800" xmlns="http://www.w3.org/2000/svg">
23+
<path
24+
d="m840.577137 0 862.961153 498.230855-231.96152 401.769145h-512.153907l-862.9611537-498.230855 231.9615247-401.769145z"
25+
fill-rule="evenodd"
26+
class="floating-background"
27+
></path>
28+
</svg>
29+
<div class="floating-content">
30+
<a href="{{@link}}" data-internal>
31+
{{if @linkLabel @linkLabel 'Read Case Study'}}
32+
</a>
33+
</div>
34+
</div>
35+
{{#if @logo}}
36+
<div class="logo">
37+
<img class="logo-img" src="{{@logo}}" alt="" />
38+
</div>
39+
{{/if}}
40+
{{yield}}
41+
</figcaption>
42+
</figure>

‎src/ui/components/Work/template.hbs

Lines changed: 81 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,38 @@
22
<div class="contents">
33
<div class="container">
44
<Navigation />
5-
<div class="header-block">
5+
<header class="header-block">
6+
<p class="typography.small-text">
7+
Work
8+
</p>
69
<h1 class="typography.display">
710
We have a track record of successful projects for international clients
811
</h1>
9-
</div>
10-
<!--page-header-->
12+
</header>
13+
</div>
14+
<div class="container">
15+
<ShapeCase
16+
@color="#90E9D4"
17+
@image="/assets/images/trainline-comp.jpg"
18+
@logo="/assets/images/logos/trainline.svg"
19+
@link="#"
20+
@linkLabel="Read about Trainline"
21+
>
22+
<h2 class="typography.small-text">
23+
Our latest Case Study
24+
</h2>
25+
<h3 class="typography.headline-2">
26+
Leveraging Trainline's full market potential
27+
</h3>
28+
<p class="typography.body-text">
29+
Trainline is Europe’s leading independent rail and coach platform. We worked with them to deliver a high-performance mobile web app, along with an improved engineering process, enabling Trainline to achieve their business goals for years to come.
30+
</p>
31+
<a href="#" data-internal>
32+
Read Case Study
33+
</a>
34+
</ShapeCase>
1135
</div>
12-
<!--container-->
1336
<div class="container">
14-
<div class="main-block">
15-
<div class="main-block.content-full-width">
16-
<div class="main-block.content-item">
17-
<div class="main-block.content-heading">
18-
<h2 class="typography.headline-1">
19-
Case Studies
20-
</h2>
21-
<p class="typography.lead">
22-
We turn ideas into products and help tech teams move faster with confidence, enabling the long-term success of our clients' businesses.
23-
</p>
24-
</div>
25-
<!--heading-->
26-
<div class="main-block.content-section">
27-
<div class="main-block.content-section-item">
28-
<h3 class="typography.headline-2">
29-
Leveraging Trainline's full market potential
30-
</h3>
31-
<p class="typography.body-text">
32-
Trainline is Europe’s leading independent rail and coach platform. We worked with them to deliver a high-performance mobile web app, along with an improved engineering process, enabling Trainline to achieve their business goals for years to come.
33-
</p>
34-
<a href="#" class="typography.arrow-link" data-internal>
35-
Read Case Study
36-
</a>
37-
<div class="main-block.body-image">
38-
<img class="fluid-image.image" src="/assets/images/trainline-comp.jpg" />
39-
<p class="main-block.body-image-caption">
40-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
41-
</p>
42-
</div>
43-
<!--body-image-->
44-
</div>
45-
</div>
46-
<!--section-->
47-
<div class="main-block.content-section">
48-
<div class="main-block.content-section-item">
49-
<h3 class="typography.headline-2">
50-
Modern online appointment scheduling
51-
</h3>
52-
<p class="typography.body-text">
53-
When Timify decided it was time to re-engineer their existing product, they trusted us to bring them into the future. We added engineering capacity and technology expertise to Timify's internal team and helped to build a solid foundation that enabled them to iterate fast and launch on-schedule, without sacrificing quality.
54-
</p>
55-
<a href="#" class="typography.arrow-link" data-internal>
56-
Read Case Study
57-
</a>
58-
<div class="main-block.body-image">
59-
<img class="fluid-image.image" src="/assets/images/trainline-comp.jpg" />
60-
<p class="main-block.body-image-caption">
61-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
62-
</p>
63-
</div>
64-
<!--body-image-->
65-
</div>
66-
</div>
67-
<!--section-->
68-
<div class="main-block.content-section">
69-
<div class="main-block.content-section-item">
70-
<h3 class="typography.headline-2">
71-
A modern UI for an open-source router firmware
72-
</h3>
73-
<a href="#" class="typography.arrow-link" data-internal>
74-
Read Case Study
75-
</a>
76-
</div>
77-
</div>
78-
<!--section-->
79-
<div class="main-block.content-section">
80-
<div class="main-block.content-section-item">
81-
<h3 class="typography.headline-2">
82-
An online travel magazine for global citizens
83-
</h3>
84-
<a href="#" class="typography.arrow-link" data-internal>
85-
Read Case Study
86-
</a>
87-
</div>
88-
</div>
89-
<!--section-->
90-
</div>
91-
<!--content-item-->
92-
</div>
93-
<!--content-->
94-
</div>
95-
<!--main-block-->
9637
<div class="grid-block">
9738
<div class="grid-block.heading">
9839
<h2 class="typography.headline-1">
@@ -108,7 +49,6 @@
10849
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
10950
</p>
11051
</div>
111-
<!--item-->
11252
<div class="grid-block.item">
11353
<div class="grid-block.image-wrapper">
11454
<img class="grid-block.image" src="/assets/images/logos/timify.svg" />
@@ -117,7 +57,6 @@
11757
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
11858
</p>
11959
</div>
120-
<!--item-->
12160
<div class="grid-block.item">
12261
<div class="grid-block.image-wrapper">
12362
<img class="grid-block.image" src="/assets/images/logos/cardstack.svg" />
@@ -126,9 +65,62 @@
12665
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
12766
</p>
12867
</div>
129-
<!--item-->
13068
</div>
13169
</div>
70+
</div>
71+
<div class="container">
72+
<ShapeCase
73+
@color="#90E9D4"
74+
@image="/assets/images/trainline-comp.jpg"
75+
@link="#"
76+
@linkLabel="Read about Trainline"
77+
>
78+
<h3 class="typography.headline-2">
79+
Modern online appointment scheduling
80+
</h3>
81+
<p class="typography.body-text">
82+
When Timify decided it was time to re-engineer their existing product, they trusted us to bring them into the future. We added engineering capacity and technology expertise to Timify's internal team and helped to build a solid foundation that enabled them to iterate fast and launch on-schedule, without sacrificing quality.
83+
</p>
84+
<a href="#" data-internal>
85+
Read Case Study
86+
</a>
87+
</ShapeCase>
88+
</div>
89+
<div class="container">
90+
<h2 class="typography.headline-1">
91+
More Case Studies
92+
</h2>
93+
<div class="main-block">
94+
<div class="main-block.content-full-width">
95+
<div class="main-block.content-item">
96+
<div class="main-block.content-section">
97+
<div class="main-block.content-section-item">
98+
<h3 class="typography.headline-2">
99+
A modern UI for an open-source router firmware
100+
</h3>
101+
<a href="#" data-internal>
102+
Read Case Study
103+
</a>
104+
</div>
105+
</div>
106+
<!--section-->
107+
<div class="main-block.content-section">
108+
<div class="main-block.content-section-item">
109+
<h3 class="typography.headline-2">
110+
An online travel magazine for global citizens
111+
</h3>
112+
<a href="#" data-internal>
113+
Read Case Study
114+
</a>
115+
</div>
116+
</div>
117+
<!--section-->
118+
</div>
119+
<!--content-item-->
120+
</div>
121+
<!--content-->
122+
</div>
123+
<!--main-block-->
132124
<!--grid-block-->
133125
</div>
134126
<div class="container">

0 commit comments

Comments
 (0)