Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Christian P. MOMON 2019-12-20 04:35:15 +01:00 committed by Romain Hv
parent df8b3402ea
commit 3cfefdc4d5
3 changed files with 134 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
app/ui/footer.js
View File

@ -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>
`;
}

73
app/ui/header.js
View File

@ -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>
`;
}

76
public/chapril.css Normal file
View 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;
}