Merge pull request #624 from epfl-si/feature/404-page-template

404 page template

assets/components/entrypoint.scss

@@ -128,4 +128,5 @@
 @import 'pages/people-detail/people-detail';
 @import 'pages/blog-single/blog-single';
 @import 'pages/study-plan-course/study-plan-course';
+@import 'pages/error-404/error-404';
 @import 'pages/event-list/event-list';

assets/components/organisms/header/header.twig

@@ -7,7 +7,7 @@
   </a>
   <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
     {% for head in header %}
-      <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
+      <li id="menu-item-{{ loop.index }}" {% if ( loop.index == 2 ) and ( showCurrentMenuItem|default(true) ) %} class="current-menu-item"{% endif %}>
         {% if language == 'fr' %}
         <a class="nav-item" href="{{ head.url_fr }}">{{ head.name_fr }}</a>
         {% endif %}

assets/components/pages/error-404/error-404.scss

@@ -0,0 +1,12 @@
+
+.error-title {
+  color: $red;
+  font-size: 12vw;
+  margin-bottom: .75rem;
+  text-align: center;
+}
+
+.error-404 .search-form {
+  margin: 0 auto;
+  max-width: 50rem;
+}

assets/components/pages/error-404/error-404.twig

@@ -0,0 +1,50 @@
+{% set isSpecial = true %}
+{% if language is not defined %}{% set language = 'en' %}{% endif %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header.twig' with { long_nav_lang: true, showCurrentMenuItem: false } %}
+{% endblock %}
+
+{% block main %}
+  <main id="main" role="main" class="content">
+
+    {% block content %}
+      <section class="error-404 not-found">
+        <div class="page-content container">
+          <p class="h1 mt-4 error-title">404</p>
+          <h1 class="h3 text-center">
+            {% if language == 'fr' %}
+            Cette page est introuvable.
+            {% elseif language == 'en' %}
+            That page can't be found.
+            {% elseif language == 'de' %}
+            Diese Seite konnte nicht gefunden werden.
+            {% endif %}
+          </h1>
+          <div class="mt-5 pt-2">
+            <form action="#" class="border-0 p-0">
+              <div class="search-form mt-1 input-group">
+                {% if language == 'fr' %}
+                <label for="search" class="sr-only">Rechercher sur le site</label>
+                <input type="text" class="form-control" name="search" placeholder="Rechercher sur le site" >
+                <button type="submit" class="d-none d-xl-block btn btn-primary input-group-append">Valider</button>
+                {% elseif language == 'en' %}
+                <label for="search" class="sr-only">Search on the site</label>
+                <input type="text" class="form-control" name="search" placeholder="Search on the site" >
+                <button type="submit" class="d-none d-xl-block btn btn-primary input-group-append">Validate</button>
+                {% elseif language == 'de' %}
+                <label for="search" class="sr-only">Suchen</label>
+                <input type="text" class="form-control" name="search" placeholder="Suchen" >
+                <button type="submit" class="d-none d-xl-block btn btn-primary input-group-append">Bestätigen</button>
+                {% endif %}
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    {% endblock %}
+
+  </main>
+{% endblock %}

assets/components/pages/error-404/error-404.yml

@@ -0,0 +1,2 @@
+name: error-404
+title: Error 404