Skip to content

Commit

Permalink
Introduce new Landing Page layout
Browse files Browse the repository at this point in the history
  • Loading branch information
lmuntaner committed Jun 28, 2024
1 parent 3f049ec commit 44f5580
Show file tree
Hide file tree
Showing 6 changed files with 301 additions and 12 deletions.
35 changes: 25 additions & 10 deletions src/frontend/src/components/authenticateBox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import { promptUserNumber } from "./promptUserNumber";

import { DerEncodedPublicKey } from "@dfinity/agent";
import copyJson from "./authenticateBox.json";
import { landingPage } from "./landingPage";

/** Template used for rendering specific authentication screens. See `authnScreens` below
* for meaning of "firstTime", "useExisting" and "pick". */
Expand Down Expand Up @@ -562,12 +563,22 @@ export const authnPages = (i18n: I18n, props: AuthnTemplates) => {
const templates = authnTemplates(i18n, props);

return {
firstTime: (opts: Parameters<typeof templates.firstTime>[0]) =>
page(templates.firstTime(opts)),
firstTime: (
opts: Parameters<typeof templates.firstTime>[0],
// TODO: remove this parameter once the landing page is ready.
landingPageTemplate: boolean = false
) =>
// TODO: Use the landing page template always when ready.
page(templates.firstTime(opts), landingPageTemplate),
useExisting: (opts: Parameters<typeof templates.useExisting>[0]) =>
page(templates.useExisting(opts)),
pick: (opts: Parameters<typeof templates.pick>[0]) =>
page(templates.pick(opts)),
pick: (
opts: Parameters<typeof templates.pick>[0],
// TODO: remove this parameter once the landing page is ready.
landingPageTemplate: boolean = false
) =>
// TODO: Use the landing page template always when ready.
page(templates.pick(opts), landingPageTemplate),
};
};

Expand Down Expand Up @@ -615,12 +626,16 @@ export const authnScreens = (i18n: I18n, props: AuthnTemplates) => {
};

// Wrap the template with header & footer and render the page
const page = (slot: TemplateResult) => {
const template = mainWindow({
slot: html` <!-- The title is hidden but used for accessibility -->
<h1 data-page="authenticate" class="is-hidden">Internet Identity</h1>
${slot}`,
});
const page = (slot: TemplateResult, landingPageTemplate: boolean = false) => {
const template = landingPageTemplate
? landingPage({
slot,
})
: mainWindow({
slot: html` <!-- The title is hidden but used for accessibility -->
<h1 data-page="authenticate" class="is-hidden">Internet Identity</h1>
${slot}`,
});
const container = document.getElementById("pageContent") as HTMLElement;
render(template, container);
};
Expand Down
58 changes: 58 additions & 0 deletions src/frontend/src/components/landingPage.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { html, TemplateResult } from "lit-html";
import { navigationLink } from "./footer";
import { githubIcon, icLogo, questionIcon } from "./icons";

/**
* Landing page template
*
* It is a component with split panes left and right in desktop view.
* To the left there is some static content, and to the right there is a slot.
*
* In movile view, the static content is below the slot.
*
*/
export const landingPage = ({
slot,
}: {
slot: TemplateResult;
}): TemplateResult => {
return html` <main class="c-landingPage">
<div class="c-landingPage__logo">
<div class="c-logo">${icLogo}</div>
</div>
<section class="c-landingPage__right">
<div class="c-landingPage__right__content">
<div class="c-landingPage__right__content--full-width">${slot}</div>
</div>
</section>
<section class="c-landingPage__left">
<div class="c-landingPage__left__content">
<h1 class="t-title t-title--main">
Secure, seamless & privacy-preserving digital identity
</h1>
<p class="t-paragraph">
Internet Identity is a decentralized identity solution running
end-to-end on the Internet Computer blockchain.
</p>
</div>
<div class="c-landingPage__left__footer">
${navigationLink({
icon: questionIcon,
labelText: "Support",
id: "support-link",
url: "https://internetidentity.zendesk.com/hc/en-us",
rel: "noopener noreferrer",
classes: "t-link--discreet c-footer__link",
})}
${navigationLink({
icon: githubIcon,
labelText: "Source code",
id: "source-link",
url: "https://github.com/dfinity/internet-identity",
rel: "noopener noreferrer",
classes: "t-link--discreet c-footer__link",
})}
</div>
</section>
</main>`;
};
171 changes: 169 additions & 2 deletions src/frontend/src/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@
--vc-brand-alt: rgba(215, 205, 235, 1);
--vc-grey: grey;
--vc-light-grey: #d4d8e5;
--vc-brand-gradient: linear-gradient(90deg, #4b19d6 0%, #890eed 100%);

/**
* value tokens: sizes (--vs => valueSize)
Expand Down Expand Up @@ -203,6 +204,9 @@

--rc-button--disabled: var(--vc-shadow);

--rc-landing-page-background: var(--vc-brand-gradient);
--rc-landing-page-background-text: var(--vc-snow);

/*
color used to elevate something from its background
secondary button, card, icon button
Expand Down Expand Up @@ -254,6 +258,8 @@
--rg-brand-bruised: var(--vc-brand-blue) 50%, var(--vc-brand-purple) 90%;

/* reference tokens: sizes */
--rs-main-content-width: 40rem;

--rs-inline-grid-gap: var(--vs-inline);
--rs-inline-icon-gap: var(--vs-inline);

Expand Down Expand Up @@ -313,6 +319,12 @@
--rs-line--thick: calc(var(--rs-line) * 4);

--rs-footer-height: 4rem;

--rs-landing-page-left-pane-padding: calc(var(--vs-gutter) * 8);
--rs-landing-page-left-pane-min-height--mobile: 40rem;
--rs-landing-page-right-pane-padding--desktop: 10vmax;
--rs-landing-page-right-pane-padding--mobile: calc(var(--vs-stack) * 2);
--rs-landing-page-stack: calc(var(--vs-stack) * 4);
}

/* II) Optional Theme Settings: DarkMode, LightMode, Product Specific stuff */
Expand Down Expand Up @@ -755,8 +767,8 @@ a:hover,
.l-container {
position: relative;
font-size: 1.6rem;
min-width: 40rem;
max-width: 40rem;
min-width: var(--rs-main-content-width);
max-width: var(--rs-main-content-width);
/* centers the container and adds a bit of space to make sure the footer does not stick to it */
margin: 0 auto 2rem;
}
Expand Down Expand Up @@ -949,6 +961,161 @@ a:hover,
color: rgba(0, 0, 0, 0.5);
}

/**
* LandingPage component
*/

.c-landingPage {
display: grid;
grid-template-columns: 1fr minmax(var(--rs-main-content-width), 1fr);
grid-template-areas: "left right";

height: 100vh;
}

.c-landingPage__logo {
position: absolute;
left: var(--rs-landing-page-left-pane-padding);
top: var(--rs-landing-page-left-pane-padding);

color: var(--rc-landing-page-background-text);
}

.c-landingPage__logo .c-logo {
padding: 0;
}

.c-landingPage__left {
background: var(--rc-landing-page-background);
color: var(--rc-landing-page-background-text);

grid-area: left;

display: flex;
flex-direction: column;
align-items: flex-start;

padding: var(--rs-landing-page-left-pane-padding);
}

.c-landingPage__left__content {
flex: 1;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

padding: 0 20%;

/* To compensate for the IC logo that is outisde the normal flow with position absolute */
--logo-height: 3rem;
margin-top: var(--logo-height);
}

.c-landingPage__logo--mobile {
display: none;
}

.c-landingPage__logo--desktop {
display: block;
}

.c-landingPage__right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

grid-area: right;

overflow-y: scroll;
}

.c-landingPage__right__content {
min-width: var(--rs-main-content-width);
max-width: var(--rs-main-content-width);
/* This is necessary in case the content is bigger than the parent. */
/* It keeps the start of the box at the top of the container. */
max-height: 90%;

display: flex;
flex-direction: column;
align-items: center;
}

.c-landingPage__right__content--full-width {
width: 100%;
padding-bottom: var(--rs-landing-page-stack);
}

.c-landingPage .c-footer__link {
padding: 0;
}

.c-landingPage__left__footer {
display: flex;
gap: var(--rs-inline-grid-gap);
}

@media (max-width: 512px) {
.c-landingPage {
display: block;

padding: 0 5vmax;

background: var(--rc-landing-page-background);

height: auto;
min-height: 100vh;
}

.c-landingPage__logo {
display: flex;
position: static;
justify-content: center;

order: 1;
color: var(--rc-landing-page-background-text);

padding: var(--rs-landing-page-stack) 0;
}

.c-landingPage__left {
background: none;
order: 2;

padding: 0;
margin-top: var(--rs-landing-page-stack);
padding-bottom: var(--rs-landing-page-stack);

gap: var(--rs-landing-page-stack);
}

.c-landingPage__left__content {
padding: 0;
/* We don't need to account for the logo with absolute position */
margin-top: 0;
}

.c-landingPage__right {
order: 1;

background: var(--rc-light);
border-radius: var(--rs-card-border-radius);
padding: var(--rs-landing-page-right-pane-padding--mobile);

overflow: auto;

min-height: var(--rs-landing-page-left-pane-min-height--mobile);
}

.c-landingPage__right__content {
min-width: auto;
max-width: auto;
}
}

/**
* Card components
*/
Expand Down
15 changes: 15 additions & 0 deletions src/showcase/src/pages/manageNewLanding.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
import Screen from "../layouts/Screen.astro";
---

<Screen title="Manage New" pageName="manageNew">
<script>
import { toast } from "$src/components/toast";
import { manage } from "../templates";

manage.firstTime({
useExisting: () => toast.info("Asked for existing"),
register: () => toast.info("Asked for registration"),
}, true);
</script>
</Screen>
17 changes: 17 additions & 0 deletions src/showcase/src/pages/managePickManyNewLanding.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
import Screen from "../layouts/Screen.astro";
---

<Screen title="Manage Pick" pageName="managePick">
<script>
import { toast } from "$src/components/toast";
import { manage } from "../templates";

manage.pick({
anchors: [BigInt(10000), BigInt(243099), BigInt(10000), BigInt(243099), BigInt(10000), BigInt(243099), BigInt(10000), BigInt(243099), BigInt(10000), BigInt(243099), BigInt(10000), BigInt(243099), BigInt(10000), BigInt(243099),BigInt(10000), BigInt(243099),BigInt(10000), BigInt(243099),BigInt(10000), BigInt(243099)],
moreOptions: () => toast.info("Asked for more options"),
onSubmit: (userNumber) =>
toast.info(`User number submitted: ${userNumber.toString()}`),
}, true);
</script>
</Screen>
17 changes: 17 additions & 0 deletions src/showcase/src/pages/managePickNewLanding.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
import Screen from "../layouts/Screen.astro";
---

<Screen title="Manage Pick" pageName="managePick">
<script>
import { toast } from "$src/components/toast";
import { manage } from "../templates";

manage.pick({
anchors: [BigInt(10000), BigInt(243099)],
moreOptions: () => toast.info("Asked for more options"),
onSubmit: (userNumber) =>
toast.info(`User number submitted: ${userNumber.toString()}`),
}, true);
</script>
</Screen>

0 comments on commit 44f5580

Please sign in to comment.