Skip to content

Commit

Permalink
SWED-2249 style mobile playbook
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldenraphti
goldenraphti committed Oct 6, 2023
1 parent bccf849 commit f569cee
Show file tree
Hide file tree
Showing 45 changed files with 248 additions and 58 deletions.
85 changes: 70 additions & 15 deletions src/App/Playbook/content/DesignVision/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const VisionStatement = () => (
To create simple, intuitive design that wows you with an unbeatable
experience.
</p>
<div className="container px-0 mt-4">
<div className="container px-sm-0 mt-4">
<div className="row">
<div className="col-md-4">
<h3>Contextual</h3>
Expand Down Expand Up @@ -66,28 +66,47 @@ const ChunkyFriendly = () => (
design, enhancing usability and readability.
</p>

<div className="container px-0 playbook playbook-mozaic">
<div className="row">
<div
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-none d-sm-flex">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
</div>
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
</div>
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-3.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
<div className="row d-sm-none">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
</div>
</div>
</div>
Expand All @@ -106,7 +125,7 @@ const BoldTypography = () => (
and highly contrasting title.
</p>

<div className="container px-0 playbook">
<div className="container px-sm-0 playbook">
<div
className="row ratio-responsive-row d-flex justify-content-between mx-0"
style={{ "--row-height": 163, "--row-width": 702 }}
Expand Down Expand Up @@ -157,38 +176,38 @@ const DelicateLines = () => (
and not be in focus, we only use the thin lines. When we want it to stand
out, we combine it with larger solid shapes or type.
</p>
<div className="container px-0 playbook">
<div className="container px-sm-0 playbook">
<div className="grid-row delicate-lines">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-3.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-4.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-5.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-6.png`}
alt="Playbook illustration"
loading="lazy"
/>
loading="lazy"
</div>
</div>
</section>
Expand All @@ -202,7 +221,7 @@ const Rounded = () => (
information and serving you what you need. The UI should reflect this
friendliness, and does so with rounded corners and soft shapes.
</p>
<div className="container px-0 playbook">
<div className="container px-sm-0 playbook d-none d-sm-flex">
<div
className="row ratio-responsive-row d-flex justify-content-between mx-0"
style={{ "--row-height": 174, "--row-width": 710 }}
Expand Down Expand Up @@ -241,6 +260,42 @@ const Rounded = () => (
</div>
</div>
</div>
<div className="container px-0 playbook d-sm-none">
<div className="row ratio-responsive-row d-flex justify-content-between mx-0">
<div className="col-12 px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-1.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-5 object-fit-cover px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-2.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-5 object-fit-cover px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-3.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-12 px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-4.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
</div>
</div>
</section>
);

Expand Down
113 changes: 92 additions & 21 deletions src/App/Playbook/content/Profiles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const HowToUse = () => (
const DesignProfiles = () => (
<section className="mt-5">
<h2 id="design-profiles">The design profiles:</h2>
<div className="container px-0">
<div className="container px-sm-0">
<div className="row">
<div className="col">
<img
Expand Down Expand Up @@ -98,22 +98,38 @@ const Content = () => (
</p>
<div className="container px-5">
<figure>
<div className="row mt-5 playbook-mozaic">
<div className="col-sm px-0">
<div
className="row mt-5 playbook-mozaic align-items-stretch"
style={{ radius: "2px" }}
>
<div className="col-sm-6 px-0">
<img
className="w-100 shift-right-1"
className="w-100 shift-right-1 h-100 object-fit-cover"
src={`${basename}img/documentation/playbook/playbook-profiles-content-1.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
</div>
<div className="col-sm px-0 d-flex flex-column">
<img
className="w-100 shift-left-1"
src={`${basename}img/documentation/playbook/playbook-profiles-content-2.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
<div className="col-sm-6 px-0 d-flex flex-column">
<video
playsInline
autoPlay
muted
loop
width={278}
height={152}
poster={`${basename}img/documentation/playbook/playbook-profiles-content-2.avif`}
className="w-100 h-100 object-fit-cover"
>
<source
src={`${basename}img/documentation/playbook/playbook-profiles-content-2-av1.mp4`}
type="video/mp4; codecs=av01.0.05M.08,opus"
/>
<source
src={`${basename}img/documentation/playbook/playbook-profiles-content-2.mp4`}
type="video/mp4"
/>
</video>
</div>
</div>
<figcaption className="text-center mt-2">
Expand All @@ -122,15 +138,15 @@ const Content = () => (
</figure>
<figure>
<div className="row mt-5 justify-content-between">
<div className="col-sm-8 pl-0">
<div className="col-8 pl-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-profiles-content-3.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
</div>
<div className="col-sm-3 pr-0">
<div className="col-3 pr-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-profiles-content-4.png`}
Expand Down Expand Up @@ -167,14 +183,27 @@ const LightUI = () => (
</p>
<div className="container px-5">
<figure>
<div className="row mt-5 justify-content-center">
<div className="col-sm-3 px-0">
<img
className=""
src={`${basename}img/documentation/playbook/playbook-profiles-lightui-1.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
<div className="row">
<div className="col-sm">
<video
playsInline
autoPlay
muted
loop
style={{ aspectRatio: "16 / 9" }}
height={399}
width={710}
poster={`${basename}img/documentation/playbook/playbook-showroom-1.avif`}
>
<source
src={`${basename}img/documentation/playbook/playbook-showroom-1-av1.mp4`}
type="video/mp4; codecs=av01.0.05M.08,opus"
/>
<source
src={`${basename}img/documentation/playbook/playbook-showroom-1.mp4`}
type="video/mp4"
/>
</video>
</div>
</div>
<figcaption className="text-center mt-2">
Expand Down Expand Up @@ -257,6 +286,48 @@ const ExpertUI = () => (
<figcaption className="text-center mt-2">Merchant portal</figcaption>
</figure>
</div>
<div className="container px-5">
<figure>
<div
className="row mt-5 justify-content-center"
style={{ "--row": "10px" }}
>
<div className="col-6 col-sm-3">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-1.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
</div>
<div className="col-6 col-sm-3">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-2.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
</div>
<div className="col-6 col-sm-3 mt-4 mt-sm-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-3.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
</div>
<div className="col-6 col-sm-3 mt-4 mt-sm-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-4.png`}
alt="illustration swedbankpay playbook profiles"
loading="lazy"
/>
</div>
</div>
<figcaption className="text-center mt-2">PaybyLink</figcaption>
</figure>
</div>
</section>
);

Expand Down
Loading

0 comments on commit f569cee

Please sign in to comment.