Customized header, footer and promo boxes (#4042).
This commit is contained in:
parent
cd3e6896d3
commit
330ee0146d
112
app/ui/footer.js
112
app/ui/footer.js
@ -1,5 +1,7 @@
|
|||||||
const html = require('choo/html');
|
const html = require('choo/html');
|
||||||
const Component = require('choo/component');
|
const Component = require('choo/component');
|
||||||
|
const version = require('../../package.json').version;
|
||||||
|
/*const { browserName } = require('../utils');*/
|
||||||
|
|
||||||
class Footer extends Component {
|
class Footer extends Component {
|
||||||
constructor(name, state) {
|
constructor(name, state) {
|
||||||
@ -12,112 +14,18 @@ class Footer extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
createElement() {
|
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`
|
return html`
|
||||||
<footer
|
<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
|
<a
|
||||||
class="flex flex-col md:flex-row items-start md:items-center md:justify-start"
|
href="https://admin.chapril.org/doku.php?id=admin:chatons:drop.chapril.org#personnalisation"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
alt="Version"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
${footer}
|
FirefoxSend chapril-${version}
|
||||||
</ul>
|
</a>
|
||||||
<ul
|
|
||||||
class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
|
|
||||||
>
|
|
||||||
${links}
|
|
||||||
</ul>
|
|
||||||
</footer>
|
</footer>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
const html = require('choo/html');
|
const html = require('choo/html');
|
||||||
const Component = require('choo/component');
|
const Component = require('choo/component');
|
||||||
const Account = require('./account');
|
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 {
|
class Header extends Component {
|
||||||
constructor(name, state, emit) {
|
constructor(name, state, emit) {
|
||||||
@ -18,45 +18,55 @@ class Header extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
createElement() {
|
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`
|
return html`
|
||||||
<header
|
<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>
|
</header>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
76
public/chapril.css
Normal file
76
public/chapril.css
Normal file
@ -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
Block a user