Skip to content

Commit

Permalink
feat(mockup): redesign starting questionnaire pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@stampaaaron
stampaaaron committed Sep 10, 2024
1 parent 5ee869f commit fe958ba
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 45 deletions.
63 changes: 22 additions & 41 deletions apps/mockup/new-period-of-life.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,62 +152,49 @@ <h2 class="visuallyhidden">Quicklinks und Sprachwechsel</h2>
<h2 class="Form--title">New period of life</h2>
</div>
<div class="Form--body">
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1">Period of life</label>
<!-- /component: FormLabel -->
<!-- component: Select -->
<select class="Select" id="period-select" name="input-1">
<option value="Blue">Baby</option>
<option value="Red">Teenager</option>
<option value="Yellow">Young adult</option>
<option value="custom">Custom</option>
</select>
<!-- /component: Select -->
</div>
<!-- component: FormInput -->
<div
class="FormInput"
id="custom-period-name-field"
style="display: none"
>
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1">
Custom period name
</label>
<label class="FormLabel" for="input-1"> Starting from </label>
<!-- /component: FormLabel -->
<!-- component: Input -->
<input
class="Input"
autocomplete="off"
id="input-1"
id="starting-from-picker"
name="input-1"
type="text"
type="date"
/>
<!-- /component: Input -->
</div>
<!-- component: FormInput -->
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1"> Starting from </label>
<label class="FormLabel" for="input-1">To </label>
<!-- /component: FormLabel -->
<!-- component: Input -->
<input
class="Input"
autocomplete="off"
id="starting-from-picker"
id="to-picker"
name="input-1"
type="date"
/>
<!-- /component: Input -->
</div>
<!-- component: FormInput -->

<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1">Remarks</label>
<label class="FormLabel" for="input-1">Description</label>
<!-- /component: FormLabel -->
<textarea class="Input"></textarea>
<input
class="Input"
autocomplete="off"
id="description-input"
name="input-1"
/>
<!-- /component: Select -->
</div>

<!-- component: FormButtons -->
<div class="FormButtons">
<!-- component: Button -->
Expand All @@ -223,21 +210,15 @@ <h2 class="Form--title">New period of life</h2>
<!-- component: ContentArea -->
</main>
<script>
document.getElementById("starting-from-picker").value = new Date()
.toISOString()
.substring(0, 10);
const descriptionField = document.getElementById("description-input");
const fromPicker = document.getElementById("starting-from-picker");

fromPicker.value = new Date().toISOString().substring(0, 10);

document
.getElementById("period-select")
.getElementById("to-picker")
.addEventListener("change", (event) => {
console.log(event.target.value);
if (event.target.value === "custom") {
document.getElementById("custom-period-name-field").style.display =
"block";
} else {
document.getElementById("custom-period-name-field").style.display =
"none";
}
descriptionField.value = `Period (${fromPicker.value} - ${event.target.value})`;
});
</script>
</body>
Expand Down
185 changes: 185 additions & 0 deletions apps/mockup/questionnaire-overview.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="de" data-template="all">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Language Exposure</title>
<link rel="stylesheet" href="./css/main.css?v=2024-03-20" />
<link rel="modulepreload" href="./js/ui.mjs" />
<link href="/pages/ct01/all-corporate-components.html" rel="canonical" />
<link href="https://www.uzh.ch" rel="alternate" hreflang="x-default" />
<link
rel="preload"
href="./fonts/WOFF2/SourceSans3-Regular.otf.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="./fonts/WOFF2/SourceSans3-Semibold.otf.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<meta name="description" content="Page description" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="/pages/ct01/all-corporate-components.html"
/>
<meta property="og:title" content="All Components (Corporate)" />
<meta property="og:description" content="Page description" />
<meta
property="og:image"
content="../../dummy/shareimage_example_1200x630.jpg"
/>
<meta
property="twitter:url"
content="/pages/ct01/all-corporate-components.html"
/>
<meta property="twitter:title" content="All Components (Corporate)" />
<meta property="twitter:description" content="Page description" />
<meta
property="twitter:image"
content="../../dummy/shareimage_example_1200x630.jpg"
/>
<meta property="twitter:dnt" content="on" /></head
><!-- Set template class here, e.g. template-s02-->

<body class="template-all">
<!-- component: Header -->
<header class="Header js-Header">
<p class="visuallyhidden" aria-level="1" role="heading">
Navigation auf uzh.ch
</p>
<div class="Header--top">
<div class="Header--logo">
<!-- component: Logo --><a class="Logo" href="../.."
><img
src="./uzh_logo.svg"
alt="Universität Zürich"
width="208"
height="92" /></a
><!-- /component: Logo -->
</div>
<div class="Header--mobileButtons">
<a
class="Header--search"
href="/node/pages/st04/st04_standard-inhaltseite-related-inpage.html"
><span class="visuallyhidden">Suche</span
><!-- component: Icon --><span class="Icon" data-name="24--search"
><svg>
<use xlink:href="#24--search"></use></svg></span
><!-- /component: Icon --></a
><button
class="Header--burger js-Header--burger"
type="button"
aria-controls="main-nav"
aria-expanded="false"
>
<span class="visuallyhidden">Navigation öffnen/schliessen</span
><span class="Header--burger--open">
<!-- component: Icon --><span class="Icon" data-name="24--menu"
><svg>
<use xlink:href="#24--menu"></use></svg></span
><!-- /component: Icon --> </span
><span class="Header--burger--close">
<!-- component: Icon --><span class="Icon" data-name="24--close"
><svg>
<use xlink:href="#24--close"></use></svg></span
><!-- /component: Icon -->
</span>
</button>
</div>

<h2 class="Header--department">Language Exposure</h2>
</div>
<div class="Header--bottom js-Header--bottom">
<div class="Header--bottom--inner">
<!-- component: MainNav -->
<div class="MainNav js-MainNav" id="main-nav" data-mode="lazy">
<div class="MainNav--service js-Header--service">
<!-- component: ServiceNav -->
<h2 class="visuallyhidden">Quicklinks und Sprachwechsel</h2>
<nav class="ServiceNav">
<ul class="ServiceNav--list">
<li class="ServiceNav--list--item">
<a class="ServiceNav--link" href="">English</a>
</li>
</ul>
</nav>
<!-- /component: ServiceNav -->
</div>
</div>
<!-- /component: MainNav -->
</div>
</div>
</header>
<!-- /component: Header -->
<main>
<section class="ContentArea">
<form
class="Form js-Form"
id="form-uid-3"
method="post"
action="./new-period-of-life.html"
enctype="multipart/form-data"
>
<div class="Form--body">
<table style="width: 20rem">
<tr>
<th style="font-weight: bold">Child</th>
<td>3212 (identifier missing)</td>
</tr>
<tr>
<th style="font-weight: bold">Study</th>
<td>Study XYZ</td>
</tr>
</table>
<div class="FormInput">
<label class="FormLabel"
>Child descriptive identifier
<span title="Pflichtfeld">*</span></label
>
<input class="Input" required type="text" />
</div>
<!-- component: FormButtons -->
<div class="FormButtons">
<!-- component: Button -->

<button class="Button color-primary size-large" type="submit">
<span class="Button--inner">Start questionnaire</span>
</button>
<!-- /component: Button -->
</div>
<!-- /component: FormButtons -->
</div>
</form>
</section>
<!-- component: ContentArea -->
</main>
</body>
</html>
7 changes: 3 additions & 4 deletions apps/mockup/start-questionnaire.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ <h2 class="visuallyhidden">Quicklinks und Sprachwechsel</h2>
class="Form js-Form"
id="form-uid-3"
method="post"
action="new-period-of-life.html"
action="questionnaire-overview.html"
enctype="multipart/form-data"
>
<div class="Form--header">
Expand All @@ -155,7 +155,7 @@ <h2 class="Form--title">Start questionnaire</h2>
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1">
Unique Identifier
Child ID
<span title="Pflichtfeld">*</span>
</label>
<!-- /component: FormLabel -->
Expand All @@ -167,15 +167,14 @@ <h2 class="Form--title">Start questionnaire</h2>
name="input-1"
type="text"
required="required"
placeholder="Child ID, study ID..."
/>
<!-- /component: Input -->
</div>
<!-- component: FormInput -->
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1">
Descriptive Identifier
Study ID
<span title="Pflichtfeld">*</span>
</label>
<!-- /component: FormLabel -->
Expand Down

0 comments on commit fe958ba

Please sign in to comment.