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

app/ui/footer.js

@@ -1,5 +1,7 @@
 const html = require('choo/html');
 const Component = require('choo/component');
+const version = require('../../package.json').version;
+/*const { browserName } = require('../utils');*/
 
 class Footer extends Component {
   constructor(name, state) {
@@ -12,112 +14,18 @@ class Footer extends Component {
   }
 
   createElement() {
-    const translate = this.state.translate;
-
-    // Add additional links from configuration if available
-    var links = [];
-    if (this.state != undefined && this.state.WEB_UI != undefined) {
-      const WEB_UI = this.state.WEB_UI;
-
-      if (WEB_UI.FOOTER_DONATE_URL != '') {
-        links.push(html`
-          <li class="m-2">
-            <a href="${WEB_UI.FOOTER_DONATE_URL}" target="_blank">
-              ${translate('footerLinkDonate')}
-            </a>
-          </li>
-        `);
-      }
-      if (WEB_UI.FOOTER_CLI_URL != '') {
-        links.push(html`
-          <li class="m-2">
-            <a href="${WEB_UI.FOOTER_CLI_URL}" target="_blank">
-              ${translate('footerLinkCli')}
-            </a>
-          </li>
-        `);
-      }
-      if (WEB_UI.FOOTER_DMCA_URL != '') {
-        links.push(html`
-          <li class="m-2">
-            <a href="${WEB_UI.FOOTER_DMCA_URL}" target="_blank">
-              ${translate('footerLinkDmca')}
-            </a>
-          </li>
-        `);
-      }
-      if (WEB_UI.FOOTER_SOURCE_URL != '') {
-        links.push(html`
-          <li class="m-2">
-            <a href="${WEB_UI.FOOTER_SOURCE_URL}" target="_blank">
-              ${translate('footerLinkSource')}
-            </a>
-          </li>
-        `);
-      }
-    } else {
-      links.push(html`
-        <li class="m-2">
-          <a href="https://gitlab.com/timvisee/send" target="_blank">
-            ${translate('footerLinkSource')}
-          </a>
-        </li>
-      `);
-    }
-
-    // Defining a custom footer
-    var footer = [];
-    if (this.state != undefined && this.state.WEB_UI != undefined) {
-      const WEB_UI = this.state.WEB_UI;
-
-      if (WEB_UI.CUSTOM_FOOTER_URL != '' && WEB_UI.CUSTOM_FOOTER_TEXT != '') {
-        footer.push(html`
-          <li class="m-2">
-            <a href="${WEB_UI.CUSTOM_FOOTER_URL}" target="_blank">
-              ${WEB_UI.CUSTOM_FOOTER_TEXT}
-            </a>
-          </li>
-        `);
-      }
-      else if (WEB_UI.CUSTOM_FOOTER_URL != '') {
-        footer.push(html`
-          <li class="m-2">
-            <a href="${WEB_UI.CUSTOM_FOOTER_URL}" target="_blank">
-              ${WEB_UI.CUSTOM_FOOTER_URL}
-            </a>
-          </li>
-        `);
-      }
-      else if (WEB_UI.CUSTOM_FOOTER_TEXT != '') {
-        footer.push(html`
-          <li class="m-2">
-            ${WEB_UI.CUSTOM_FOOTER_TEXT}
-          </li>
-        `)
-      }
-      else  {
-        footer.push(html`
-          <li class="m-2">
-            ${translate('footerText')}
-          </li>
-        `);
-      }
-    }
-
     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"
       >
-        <ul
-          class="flex flex-col md:flex-row items-start md:items-center md:justify-start"
+        <a
+          href="https://admin.chapril.org/doku.php?id=admin:chatons:drop.chapril.org#personnalisation"
+          rel="noreferrer noopener"
+          alt="Version"
+          target="_blank"
         >
-          ${footer}
-        </ul>
-        <ul
-          class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
-        >
-          ${links}
-        </ul>
+          FirefoxSend chapril-${version}
+        </a>
       </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 { platform } = require('../utils');
+/*const assets = require('../../common/assets');*/
+/*const { platform } = require('../utils');*/
 
 class Header extends Component {
   constructor(name, state, emit) {
@@ -18,45 +18,55 @@ class Header extends Component {
   }
 
   createElement() {
-    let assetMap = {};
-    if (this.state.ui !== undefined) assetMap = this.state.ui.assets;
-    else
-      assetMap = {
-        icon:
-          this.state.WEB_UI.CUSTOM_ASSETS.icon !== ''
-            ? this.state.WEB_UI.CUSTOM_ASSETS.icon
-            : assets.get('icon.svg'),
-        wordmark:
-          this.state.WEB_UI.CUSTOM_ASSETS.wordmark !== ''
-            ? this.state.WEB_UI.CUSTOM_ASSETS.wordmark
-            : assets.get('wordmark.svg') + '#logo'
-      };
-    const title =
-      platform() === 'android'
-        ? html`
-            <a class="flex flex-row items-center">
-              <img src="${assetMap.icon}" />
-              <svg class="w-48">
-                <use xlink:href="${assetMap.wordmark}" />
-              </svg>
-            </a>
-          `
-        : html`
-            <a class="flex flex-row items-center" href="/">
-              <img
-                alt="${this.state.translate('title')}"
-                src="${assetMap.icon}"
-              />
-              <svg viewBox="66 0 340 64" class="w-48 md:w-64">
-                <use xlink:href="${assetMap.wordmark}" />
-              </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>
     `;
   }

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;
+}