Skip to content

Commit

Permalink
feat(mockup): improve linking when creating another period
Browse files Browse the repository at this point in the history
  • Loading branch information
stampaaaron committed Sep 10, 2024
1 parent fe958ba commit 381bbdb
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 1 deletion.
2 changes: 1 addition & 1 deletion apps/mockup/additional-period-or-finish.html
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ <h2 class="Form--title">
<!-- component: Button -->
<a
class="Button color-border-white size-large"
href="./new-period-of-life.html"
href="./new-period-of-life2.html"
>
<span class="Button--inner">Continue with new period</span>
</a>
Expand Down
225 changes: 225 additions & 0 deletions apps/mockup/new-period-of-life2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!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="full-calendar.html"
enctype="multipart/form-data"
>
<div class="Form--header">
<h2 class="Form--title">New period of life</h2>
</div>
<div class="Form--body">
<!-- component: FormInput -->
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1"> Starting from </label>
<!-- /component: FormLabel -->
<!-- component: Input -->
<input
class="Input"
autocomplete="off"
id="starting-from-picker"
name="input-1"
type="date"
/>
<!-- /component: Input -->
</div>
<div class="FormInput">
<!-- component: FormLabel -->
<label class="FormLabel" for="input-1">To </label>
<!-- /component: FormLabel -->
<!-- component: Input -->
<input
class="Input"
autocomplete="off"
id="to-picker"
name="input-1"
type="date"
/>
<!-- /component: Input -->
</div>

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

<!-- component: FormButtons -->
<div class="FormButtons">
<!-- component: Button -->
<button class="Button color-primary size-large" type="submit">
<span class="Button--inner">Continue</span>
</button>
<!-- /component: Button -->
</div>
<!-- /component: FormButtons -->
</div>
</form>
</section>
<!-- component: ContentArea -->
</main>
<script>
const descriptionField = document.getElementById("description-input");
const fromPicker = document.getElementById("starting-from-picker");

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

document
.getElementById("to-picker")
.addEventListener("change", (event) => {
descriptionField.value = `Period (${fromPicker.value} - ${event.target.value})`;
});
</script>
</body>
</html>

0 comments on commit 381bbdb

Please sign in to comment.