Customized header, footer and promo boxes (#4042).
This commit is contained in:
root
parent
a00127f4a8
commit
5887450b62
|
|
@ -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/">
|
||||
Mozilla
|
||||
</a>
|
||||
<ul
|
||||
class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
|
||||
<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">
|
||||
<a href="https://www.mozilla.org/about/legal/terms/services/#send">
|
||||
${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>
|
||||
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) {
|
||||
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<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>
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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