Customized header, footer and promo boxes (#4042).
This commit is contained in:
parent
201d0e33ab
commit
b40915578d
|
|
@ -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,73 +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>
|
||||
`);
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
<li class="m-2">${translate('footerText')}</li>
|
||||
</ul>
|
||||
<ul
|
||||
class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
|
||||
>
|
||||
${links}
|
||||
</ul>
|
||||
FirefoxSend chapril-${version}
|
||||
</a>
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,32 +18,55 @@ class Header extends Component {
|
|||
}
|
||||
|
||||
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 viewBox="66 0 340 64" 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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue