From 88efbbae5f91e9ea160f132a88a371d7b007f7e8 Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Fri, 12 Apr 2019 16:23:47 +0200 Subject: [PATCH] New work page layout (#333) * Work: Shape for cases * Use spaces over tabs, add editorconfig --- .editorconfig | 17 ++ src/ui/components/ShapeCase/component-test.ts | 32 ++++ src/ui/components/ShapeCase/component.ts | 19 ++ src/ui/components/ShapeCase/stylesheet.css | 48 +++++ src/ui/components/ShapeCase/template.hbs | 42 +++++ src/ui/components/Work/template.hbs | 170 +++++++++--------- 6 files changed, 239 insertions(+), 89 deletions(-) create mode 100644 .editorconfig create mode 100644 src/ui/components/ShapeCase/component-test.ts create mode 100644 src/ui/components/ShapeCase/component.ts create mode 100644 src/ui/components/ShapeCase/stylesheet.css create mode 100644 src/ui/components/ShapeCase/template.hbs diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000..d7c6aa843c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,17 @@ +# http://editorconfig.org + +root = true + +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = space +indent_size = 2 + +[*.hbs] +insert_final_newline = false + +[*.{diff,md}] +trim_trailing_whitespace = false \ No newline at end of file diff --git a/src/ui/components/ShapeCase/component-test.ts b/src/ui/components/ShapeCase/component-test.ts new file mode 100644 index 0000000000..088319d4b5 --- /dev/null +++ b/src/ui/components/ShapeCase/component-test.ts @@ -0,0 +1,32 @@ +import hbs from '@glimmer/inline-precompile'; +import { render, setupRenderingTest } from '@glimmer/test-helpers'; + +const { module, test } = QUnit; + +module('Component: ShapeCase', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + /* + * You may pass data into the component through arguments set on the + * `testContext` + * + * For example: + * + * ``` + * this.foo = { foo: '123' }; + * + * await render(hbs``) + * + * // or + * + * this.foo = 'bar'; + * await render(hbs`

{{this.foo}}

`); + * + * assert.dom('p').text('bar'); + * ``` + */ + await render(hbs``); + assert.ok(this.containerElement.querySelector('div')); + }); +}); diff --git a/src/ui/components/ShapeCase/component.ts b/src/ui/components/ShapeCase/component.ts new file mode 100644 index 0000000000..d8a62b9daf --- /dev/null +++ b/src/ui/components/ShapeCase/component.ts @@ -0,0 +1,19 @@ +import Component from '@glimmer/component'; + +export default class ShapeCase extends Component { + public clipId = Math.random().toString(36).substr(2, 5); + + get imageClipStyle() { + const shouldClip = this.args.clipImage || true; + + if (!shouldClip) { + return ''; + } + + return `clip-path: url(#${this.clipId});`; + } + + get shapeStyle() { + return `fill: ${this.args.color || '#007DF6'}` + } +} diff --git a/src/ui/components/ShapeCase/stylesheet.css b/src/ui/components/ShapeCase/stylesheet.css new file mode 100644 index 0000000000..2ac60e7af5 --- /dev/null +++ b/src/ui/components/ShapeCase/stylesheet.css @@ -0,0 +1,48 @@ +@block typography from "../../styles/blocks/typography.block.css"; + +:scope { + position: relative; +} + +.shape { + display: block; + position: relative; + left: 50%; + transform: translate(-50%); + width: 100vw; + height: auto; + margin: -8rem 0 6rem; +} + +.logo { + position: absolute; + top: calc(50vw - 12rem); +} + +.logo-img { + display: block; + height: 4rem; + width: auto; +} + +.floating { + position: absolute; + top: 13rem; + left: 50%; + transform: translate(22rem); +} + +.floating-background { + fill: var(--link-color); +} + +.floating-content { + position: absolute; + top: calc(50% - 21rem); + right: calc(-56.5rem + 100vw); + width: 25rem; + transform: translate(-50%); + text-align: right; + + --link-color: #fff; +} diff --git a/src/ui/components/ShapeCase/template.hbs b/src/ui/components/ShapeCase/template.hbs new file mode 100644 index 0000000000..0fbdfd92bb --- /dev/null +++ b/src/ui/components/ShapeCase/template.hbs @@ -0,0 +1,42 @@ +
+ + + + + + + + + + {{#if @image}} + + + + {{/if}} + +
+
+ + + +
+ + {{if @linkLabel @linkLabel 'Read Case Study'}} + +
+
+ {{#if @logo}} + + {{/if}} + {{yield}} +
+
\ No newline at end of file diff --git a/src/ui/components/Work/template.hbs b/src/ui/components/Work/template.hbs index a3f80b2d6d..307c0018c9 100644 --- a/src/ui/components/Work/template.hbs +++ b/src/ui/components/Work/template.hbs @@ -2,97 +2,38 @@
-
+
+

+ Work +

We have a track record of successful projects for international clients

-
- + +
+
+ +

+ Our latest Case Study +

+

+ Leveraging Trainline's full market potential +

+

+ 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. +

+ + Read Case Study + +
-
-
-
-
-
-

- Case Studies -

-

- We turn ideas into products and help tech teams move faster with confidence, enabling the long-term success of our clients' businesses. -

-
- -
-
-

- Leveraging Trainline's full market potential -

-

- 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. -

- - Read Case Study - -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

-
- -
-
- -
-
-

- Modern online appointment scheduling -

-

- 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. -

- - Read Case Study - -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

-
- -
-
- -
-
-

- A modern UI for an open-source router firmware -

- - Read Case Study - -
-
- -
-
-

- An online travel magazine for global citizens -

- - Read Case Study - -
-
- -
- -
- -
-

@@ -108,7 +49,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
@@ -117,7 +57,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
@@ -126,9 +65,62 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
+
+
+ +

+ Modern online appointment scheduling +

+

+ 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. +

+ + Read Case Study + + +
+
+

+ More Case Studies +

+
+
+
+
+
+

+ A modern UI for an open-source router firmware +

+ + Read Case Study + +
+
+ +
+
+

+ An online travel magazine for global citizens +

+ + Read Case Study + +
+
+ +
+ +
+ +
+