feat(bildungs): Add table of content and style eligibility accordion

Agathebadia · Mar 25, 2024 · c8326f8 · c8326f8
1 parent 5f60a71
commit c8326f8
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 32 deletions.
diff --git a/app/app.css b/app/app.css
@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import '/main.css';
diff --git a/app/components/accordion/index.hbs b/app/components/accordion/index.hbs
@@ -1,7 +1,8 @@
 
 {{!-- Flowbite accordion component --}}
-<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400"
-class="w-5/6 ml-6">
+<div id="accordion-flush" data-accordion="collapse"
+data-active-classes="text-gray-300 dark:text-white"
+class="w-5/6 ml-6 rounded">
   {{#each this.states as |state index|}}
     <State @state={{state}} @index={{index}} />
   {{/each}}

diff --git a/app/components/state/index.hbs b/app/components/state/index.hbs
@@ -1,5 +1,6 @@
   <h2 id="accordion-flush-heading-{{@index}}">
-    <button type="button" class="flex items-center justify-between m-4 w-full py-5 font-medium rtl:text-right text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3"
+    <button id="eligibility-button-select" type="button" class="flex items-center justify-between w-full py-5 p-2 font-medium rtl:text-right border-b border-gray-200 dark:border-gray-700 gap-3"
+    data-inactive-classes="text-gray-100 dark:text-white"
       data-accordion-target="#accordion-flush-body-{{@index}}" aria-expanded="false" aria-controls="accordion-flush-body-{{@index}}">
       <span>{{@state.stateNameAndBildung}}</span>
       <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
@@ -9,20 +10,20 @@
     </button>
   </h2>
   <div id="accordion-flush-body-{{@index}}" class="hidden" aria-labelledby="accordion-flush-heading-{{@index}}">
-    <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
-      <h3>Principles</h3>
+    <div id="accordion-main-body" class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
+      <h3 class="font-bold">Principles</h3>
       {{#each @state.principles  as |principle|}}
-      <p class="mb-2 text-gray-500 dark:text-gray-400">
+      <p class="mb-2 dark:text-gray-300">
         {{principle}}
       </p>
       {{/each}}
-      <h3>Eligibility</h3>
+      <h3 class="font-bold">Eligibility</h3>
         {{#each @state.eligibility as |elig|}}
-        <p class="mb-2 text-gray-500 dark:text-gray-400">
+        <p class="mb-2 dark:text-gray-300">
           {{elig}}
         </p>
         {{/each}}
-      <p class="mb-2 text-gray-500 dark:text-gray-400">
+      <p class="mb-2 dark:text-gray-300">
         {{#if @state.hasBildungsUrlaubLaws}}
           <a href="{{@state.legalDocument}}" target="_blank" class="underline underline-offset-2">Legal documentation of
           {{@state.stateName}}</a>

diff --git a/app/index.html b/app/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Bildungsurlaub</title>
+    <title>How to: Bildungsurlaub</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

diff --git a/app/main.css b/app/main.css
@@ -0,0 +1,62 @@
+
+/* General */
+
+html  {
+  background-color: #ADADAD;
+}
+
+/* Headers */
+
+h1 {
+  font-size: 2rem;
+  border: 3px solid;
+}
+
+div.h1 {
+  font-size: inherit;
+  border: 3px solid;
+}
+
+/* Accordion eligibility */
+#eligibility-button-select {
+  background-color: #83677b;
+  color: #d4d3d3;
+}
+
+#accordion-flush #accordion-main-body {
+  color: #d4d3d3;
+  background-color: #64485c;
+}
+/* Table of content */
+
+.skip-to-main a {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.skip-to-main a:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  transform: scale(1.2);
+  text-shadow: none;
+  margin: 0.8em;
+  padding: 0.5em;
+  border: 2px solid;
+}
+
+div.table-of-contents {
+  border: 3px solid;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.5em;
+  width: fit-content;
+}
+
+div.table-of-contents li {
+  margin: 0.5em 0 0.5em 0;
+}
diff --git a/app/routes/home/template.hbs b/app/routes/home/template.hbs
@@ -1,12 +1,29 @@
 TODO:
 <h3>Styling of each section</h3>
 <h3>Styling of titles</h3>
-<h3>Link content to table of content</h3>
 <h3>Fix schema mermaid: Use SVG or .md generator</h3>
 <h3>Add alt text for mermaid schema</h3>
 <h3>Replace Tailwind logo with Bildungsurlaub one (Canva logo creation? or ask ChatGPT for platform to create logos)</h3>
 <h3>Verify pages are accessible with Colorblind extension + Lighthouse</h3>
+<!-- Skip links to enable keyboard users to reach the main content of the page  -->
+<div class="skip-to-main">
+  <a href="#main">
+    Skip to main content
+  </a>
+</div>
 
+<!-- Table of content -->
+<div class="table-of-contents" role="navigation" aria-labelledby="contents-heading">
+  <h2 id="contents-heading">Contents</h2>
+  <ul style="list-style: inside">
+    <li><a class="underline underline-offset-2" href="#general-definition">Bildungs ur... what?</a></li>
+    <li><a class="underline underline-offset-2" href="#definition-by-law">Definition and eligibility according to the German law</a></li>
+    <li><a class="underline underline-offset-2" href="#entitlement">Entitlement per state</a></li>
+    <li><a class="underline underline-offset-2" href="#find-your-bildungsurlaub">Find a Bildungurlaub</a></li>
+    <li><a class="underline underline-offset-2" href="#request-for-approval">Request approval for Bildungsurlaub</a></li>
+    <li><a class="underline underline-offset-2" href="#after-your-bildungsurlaub">After your Bildungsurlaub</a></li>
+  </ul>
+</div>
 <div class="flex justify-center">
   <div>
     <img src="images/mermaid.png" alt="schema to employed until eligibility for bildungsurlaub">
@@ -15,20 +32,9 @@ TODO:
   {{!-- Mermaid live editor: https://mermaid.live/edit#pako:eNpNkDtvwzAMhP8KwTkG6jTooKFDH0OHTtkKL4xFOwIk0dAjgRDkv1d1UFiaqA-n4-luOIpmVBgTJf4wNAdy3WU_eKhnhb2CT7dYKawbulfw5SGdGUZxC_kCkwRwErhC8vBSZ5_OsXnyXI2smc3J8ip-M1ZnP8ccLOVTIzwoeK8WOTLkBZJA_wSaSgS-cCiQrgKFKbTePXTd63-0NubKH-vbKBs-4A4dB0dG1xpuf6IB678cD6jqqHmibNOAg79XKeUkx-JHVClk3mFe9FYcqolsrLQW8iOy3VmbJOH7UfXa-P0XYap84w --}}
 </div>
 
-TABLE OF content
-{{!-- TODO --}}
-- Bildungs ur... what?
-- Definition and eligibility according to the German law
-- Entitlement per state
-- Find a Bildungurlaub
-- Request approval for Bildungsurlaub
-  -- Prepare your submission
-  -- Send a request to your employer
-  -- Copy template to
-- After your Bildungsurlaub
-
-<div>
-    <h2>What is Bildungsurlaub?</h2>
+<main id="main">
+<div id="general-definition">
+    <h1>What is Bildungsurlaub?</h1>
 
     <p class="m-8"><em><q>In most federal states, employees are offered the opportunity to take time off work to take advantage of
         opportunities
@@ -41,18 +47,23 @@ TABLE OF content
 
     <p class="m-8"><em><q>Educational leave is the legal entitlement of employees in [Germany] to time off work to participate in
     recognized further education events with continued payment of remuneration. </q></em> - Berlin.de</p>
-
-    <h2>Definition and eligibility according to the German law</h2>
+</div>
+<div id="definition-by-law">
+    <h1>Definition and eligibility according to the German law</h1>
 
     <p class="m-8">Each principle and eligibility depend on the state your are working in. In the overview below you will find a description of the principles (Grundsätze) and eligibility (Anspruch) of each state:</p>
 
       <Accordion @states={{@model.data}} />
-      {{log @model.data 'model.data'}}
+</div>
+<div id="entitlement">
 
+    <h1>Entitlement per state</h1>
     <Entitlement @states={{@model.data}} />
+</div>
 
+<div id="find-your-bildungsurlaub">
 
-    <h2>Find a Bildungsurlaub</h2>
+    <h1>Find a Bildungsurlaub</h1>
     <p>In the German states with Bildungsurlaub regulations, the common rule is to be employed for at least 6 months, to be eligible for Bildungsurlaub (5 days per year or 10 days every 2 years, see #Entitlement content for details). Also, the education itself must be recognized as Bildungsurlaub in the German state you are working in.</p>
 
     <p>Reminder: If approved, the employer continues to pay the salary of the employee (while attending further education), BUT the course is at the expense of the <em>employee</em>. Depending on the company, and/or the nature of the course, and/or the nature of your work, and the existing rules within your company, the employer can grant an educational budget, which can be used for Bildungsurlaub.</p>
@@ -66,8 +77,10 @@ TABLE OF content
       <li><a class="underline underline-offset-2" href="https://www.berlin.de/sen/arbeit/weiterbildung/bildungszeit/suche/">Bildungsurlaub - Official Berlin website</a></li>
     </ul>
     <h2>List or schema of actions</h2>
+</div>
+<div id="request-for-approval">
 
-<h2> Request approval for Bildungsurlaub</h2>
+<h1> Request approval for Bildungsurlaub</h1>
     Once you have found a course, I recommend you to follow the below steps:
 
     <ul style="list-style: inside">
@@ -122,14 +135,16 @@ TABLE OF content
         </p>
         <button class="border-solid	border-black	"
         {{on "click" (fn this.copyContent "copyGermanTemplateToClipboard")}}>Copy to clipboard!</button>
+</div>
+<div id="after-your-bildungsurlaub">
 
-        <h2>After your Bildungsurlaub</h2>
+        <h1>After your Bildungsurlaub</h1>
 
         <p>You're Bildungsurlaub is over? Make sure to forward your certificate to your HR department (or the original department of approval), to confirm the education has taken place at the agreed school, with the agreed courses.</p>
 </div>
 
 
-<h2><b>Weiterbildung:</b></h2>
+<h1><b>Weiterbildung:</b></h1>
 <ul style="list-style: inside">
   <li><a class="underline underline-offset-2"
     href="https://www.fu-berlin.de/en/sites/abt-1/referate/1c/welcome-service/ansprechpersonen-servicestellen/weiterbildung/bildungszeit.html">Taking
@@ -144,3 +159,4 @@ TABLE OF content
   <li><a class="underline underline-offset-2" href="https://www.iwwb.de/information/Bildungsurlaub-in-Deutschland-weiterbildung-26.html#:~:text=Berlin">Info Web
     Weiterbildung - Shows the official info (PDFs) and law</a></li>
 </ul>
+</main>