Customized header, footer and promo boxes (#4042).

app/ui/footer.js

@@ -1,7 +1,7 @@
 const html = require('choo/html');
 const Component = require('choo/component');
 const version = require('../../package.json').version;
-const { browserName } = require('../utils');
+/*const { browserName } = require('../utils');*/
 
 class Footer extends Component {
   constructor(name, state) {
@@ -14,47 +14,18 @@ class Footer extends Component {
   }
 
   createElement() {
-    const translate = this.state.translate;
-    const browser = browserName();
-    const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
     return html`
       <footer
-        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-60 dark:text-grey-40 md:items-center justify-between"
+        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-60 dark:text-grey-40 md:justify-end justify-between"
       >
-        <a class="mozilla-logo m-2" href="https://www.mozilla.org/">
+        <a
-          Mozilla
+          href="https://admin.chapril.org/doku.php?id=admin:chatons:drop.chapril.org#personnalisation"
-        </a>
+          rel="noreferrer noopener"
-        <ul
+          alt="Version"
-          class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
+          target="_blank"
         >
-          <li class="m-2">
+          FirefoxSend chapril-${version}
-            <a href="https://www.mozilla.org/about/legal/terms/services/#send">
+        </a>
-              ${translate('footerLinkLegal')}
-            </a>
-          </li>
-          <li class="m-2">
-            <a href="/legal"> ${translate('footerLinkPrivacy')} </a>
-          </li>
-          <li class="m-2">
-            <a href="https://www.mozilla.org/privacy/websites/#cookies">
-              ${translate('footerLinkCookies')}
-            </a>
-          </li>
-          <li class="m-2">
-            <a href="https://github.com/mozilla/send">GitHub </a>
-          </li>
-          <li class="m-2">
-            <a
-              href="${feedbackUrl}"
-              rel="noreferrer noopener"
-              class="feedback-link"
-              alt="Feedback"
-              target="_blank"
-            >
-              ${translate('siteFeedback')}
-            </a>
-          </li>
-        </ul>
       </footer>
     `;
   }

app/ui/header.js

@@ -1,8 +1,8 @@
 const html = require('choo/html');
 const Component = require('choo/component');
 const Account = require('./account');
-const assets = require('../../common/assets');
+/*const assets = require('../../common/assets');*/
-const { platform } = require('../utils');
+/*const { platform } = require('../utils');*/
 
 class Header extends Component {
   constructor(name, state, emit) {
@@ -17,32 +17,55 @@ class Header extends Component {
     return false;
   }
   createElement() {
-    const title =
-      platform() === 'android'
-        ? html`
-            <a class="flex flex-row items-center">
-              <img src="${assets.get('icon.svg')}" />
-              <svg class="w-48">
-                <use xlink:href="${assets.get('wordmark.svg')}#logo" />
-              </svg>
-            </a>
-          `
-        : html`
-            <a class="flex flex-row items-center" href="/">
-              <img
-                alt="${this.state.translate('title')}"
-                src="${assets.get('icon.svg')}"
-              />
-              <svg class="w-48 md:w-64">
-                <use xlink:href="${assets.get('wordmark.svg')}#logo" />
-              </svg>
-            </a>
-          `;
     return html`
       <header
-        class="main-header relative flex-none flex flex-row items-center justify-between w-full px-6 md:px-8 h-16 md:h-24 z-20 bg-transparent"
+        class="main-header relative flex-none flex flex-row items-center justify-between px-6 md:px-8 z-20 bg-transparent"
       >
-        ${title} ${this.account.render()}
+        <!-- Chapril banner code: starting… -->
+        <div id="chapril-banner">
+          <div id="chapril-banner-zone">
+            <div id="chapril-banner-logo">
+              <a href="https://www.chapril.org/"
+                ><img
+                  src="/Chapril-banner/v1/chapril-logo-small.png"
+                  alt="Logo Chapril"
+              /></a>
+            </div>
+            <div id="chapril-banner-menu">
+              <ul>
+                <li><a href="https://www.chapril.org/">Accueil Chapril</a></li>
+                <li>
+                  <a href="https://www.chapril.org/services.html"
+                    >Services libres</a
+                  >
+                </li>
+                <li>
+                  <a href="https://pouet.april.org/@aprilorg">Nous suivre</a>
+                </li>
+                <li><a href="https://www.chapril.org/cgu.html">CGU</a></li>
+                <li>
+                  <a href="https://www.chapril.org/a-propos.html"
+                    >Mentions légales</a
+                  >
+                </li>
+                <li>
+                  <a href="https://www.chapril.org/contact.html"
+                    >Nous contacter</a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div id="chapril-banner-aprillogo">
+              <a href="https://www.april.org/"
+                ><img
+                  src="/Chapril-banner/v1/april-logo-small.png"
+                  class="chapril-banner-logo"
+                  alt="Logo April"
+              /></a>
+            </div>
+          </div>
+        </div>
+        <!-- Chapril banner code: done. -->
       </header>
     `;
   }

app/ui/promo.js

@@ -1,6 +1,6 @@
 const html = require('choo/html');
 const Component = require('choo/component');
-const assets = require('../../common/assets');
+/*const assets = require('../../common/assets');*/
 
 class Promo extends Component {
   constructor(name, state) {
@@ -15,24 +15,8 @@ class Promo extends Component {
   createElement() {
     return html`
       <send-promo
-        class="w-full flex-row items-center content-center justify-center bg-white text-grey-80 px-4 py-3 flex border-b border-grey-banner leading-normal dark:bg-grey-90 dark:text-grey-20 dark:border-grey-80"
+        class="send-promo w-full flex-row items-center content-center justify-center bg-white text-grey-80 px-4 py-3 flex border-b border-grey-banner leading-normal dark:bg-grey-90 dark:text-grey-20 dark:border-grey-80"
-      >
+      ></send-promo>
-        <div class="flex items-center mx-auto">
-          <img
-            src="${assets.get('master-logo.svg')}"
-            class="w-6 h-6"
-            alt="Firefox"
-          />
-          <span class="ml-2 sm:ml-4 text-xs sm:text-base">
-            ${this.state.translate('trailheadPromo')}${' '}
-            <a
-              class="underline link-blue"
-              href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy"
-              >${this.state.translate('learnMore')}</a
-            >
-          </span>
-        </div>
-      </send-promo>
     `;
   }
 }

public/chapril.css

@@ -0,0 +1,76 @@
+#chapril-banner {
+  /* position: fixed; */
+
+  /* top: 0; */
+  height: 42px !important;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #fafafa;
+  text-align: center;
+  border-bottom: 1px solid #bdbdbd;
+}
+
+#chapril-banner-zone {
+  width: 100%;
+
+  /* max-width: 950px; */
+  margin: 0 auto;
+  padding: 0;
+  text-align: left;
+
+  /* border: solid 1px red; */
+}
+
+#chapril-banner-zone > div {
+  float: left;
+  margin: 0 15px;
+}
+
+#chapril-banner-menu > ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: justify;
+  box-sizing: border-box;
+}
+
+#chapril-banner-menu > ul > li {
+  float: left;
+  margin: 0 10px 0 0;
+  padding: 0;
+  display: block;
+  box-sizing: border-box;
+  font-family: 'DejaVu Sans', Verdana, Geneva, sans-serif !important;
+  height: 42px;
+}
+
+#chapril-banner-menu > ul > li:hover {
+  background-color: #dadada;
+}
+
+#chapril-banner-menu > ul > li > a {
+  height: 42px;
+  color: #555000;
+  font-size: 12px;
+  text-decoration: none !important;
+  line-height: 42px;
+  border: none !important;
+  padding: 10px 15px;
+}
+
+#chapril-banner-aprillogo {
+  float: right !important;
+}
+
+#chapril-banner-aprillogo > a > img {
+  padding-top: 2px;
+}
+
+#chapril-banner-zone > div > a > img {
+  height: auto !important;
+}
+
+.send-promo {
+  display: none;
+}