Redesign instance home page
David Benqué
parent
0757993dd8
commit
0198bf6782
|
|
@ -86,11 +86,12 @@ define([
|
|||
]);
|
||||
};
|
||||
|
||||
var footLink = function (ref, loc, text) {
|
||||
var footLink = function (ref, loc, text, icon) {
|
||||
if (!ref) { return; }
|
||||
var attrs = {
|
||||
href: ref,
|
||||
};
|
||||
var iconName = '';
|
||||
if (!/^\//.test(ref)) {
|
||||
attrs.target = '_blank';
|
||||
attrs.rel = 'noopener noreferrer';
|
||||
|
|
@ -99,13 +100,17 @@ define([
|
|||
attrs['data-localization'] = loc;
|
||||
text = Msg[loc];
|
||||
}
|
||||
return h('a', attrs, text);
|
||||
if (icon) {
|
||||
iconName = 'i.fa.fa-' + icon;
|
||||
icon = h(iconName)
|
||||
}
|
||||
return h('a', attrs, [icon, text]);
|
||||
};
|
||||
|
||||
var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ?
|
||||
'/imprint.html' : AppConfig.imprint);
|
||||
|
||||
Pages.versionString = "v4.13.0";
|
||||
Pages.versionString = "4.13.0";
|
||||
|
||||
|
||||
// used for the about menu
|
||||
|
|
@ -115,7 +120,7 @@ define([
|
|||
Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link');
|
||||
Pages.roadmapLink = footLink(AppConfig.roadmap, 'footer_roadmap');
|
||||
|
||||
Pages.infopageFooter = function () {
|
||||
Pages.infopageOldFooter = function () { // XXX DB: not used, kept to copy/paste
|
||||
var terms = footLink('/terms.html', 'footer_tos'); // FIXME this should be configurable like the other legal pages
|
||||
var legalFooter;
|
||||
|
||||
|
|
@ -165,23 +170,55 @@ define([
|
|||
]);
|
||||
};
|
||||
|
||||
Pages.infopageFooter = function () {
|
||||
return h('footer.cp-footer', [
|
||||
h('div.cp-footer-left', [
|
||||
h('div.cp-logo-foot', [
|
||||
h('img', {
|
||||
src: '/customize/CryptPad_logo.svg',
|
||||
"aria-hidden": true,
|
||||
alt: ''
|
||||
}),
|
||||
h('span.logo-font', 'CryptPad')
|
||||
]),
|
||||
footLink('https://cryptpad.org', null, 'Website', 'link'),
|
||||
footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate') // XXX DB: add OpenCollective icon
|
||||
]),
|
||||
h('.div.cp-footer-center', [
|
||||
h('div.cp-footer-language', [
|
||||
h('i.fa.fa-language', {'aria-hidden': 'true'}),
|
||||
languageSelector()
|
||||
])
|
||||
]),
|
||||
h('div.cp-footer-right', [
|
||||
h('span.cp-footer-version', 'Version: ' + Pages.versionString) // XXX DB: translate 'Version' ?
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
||||
Pages.infopageTopbar = function () {
|
||||
var rightLinks;
|
||||
var username = window.localStorage.getItem('User_name');
|
||||
var registerLink;
|
||||
|
||||
if (!ApiConfig.restrictRegistration) {
|
||||
registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, Msg.login_register);
|
||||
registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, [
|
||||
h('i.fa.fa-user', {'aria-hidden':'true'}),
|
||||
Msg.login_register
|
||||
]);
|
||||
}
|
||||
|
||||
if (username === null) {
|
||||
rightLinks = [
|
||||
h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, Msg.login_login),
|
||||
h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, [
|
||||
h('i.fa.fa-sign-in', {'aria-hidden':'true'}),
|
||||
Msg.login_login
|
||||
]),
|
||||
registerLink,
|
||||
];
|
||||
} else {
|
||||
rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [
|
||||
h('i.fa.fa-user-circle'),
|
||||
h('i.fa.fa-user-circle', {'aria-hidden':'true'}),
|
||||
" ",
|
||||
username
|
||||
]);
|
||||
|
|
@ -196,26 +233,30 @@ define([
|
|||
'aria-label':'Toggle navigation'*/
|
||||
}, h('i.fa.fa-bars '));
|
||||
|
||||
$(button).click(function () {
|
||||
if ($('#menuCollapse').is(':visible')) {
|
||||
return void $('#menuCollapse').slideUp();
|
||||
}
|
||||
$('#menuCollapse').slideDown();
|
||||
});
|
||||
// XXX button to collapse navbar on small screens
|
||||
// $(button).click(function () {
|
||||
// if ($('#menuCollapse').is(':visible')) {
|
||||
// return void $('#menuCollapse').slideUp();
|
||||
// }
|
||||
// $('#menuCollapse').slideDown();
|
||||
// });
|
||||
|
||||
return h('nav.navbar.navbar-expand-lg',
|
||||
h('a.navbar-brand', { href: '/index.html'}, [
|
||||
h('img', {
|
||||
src: '/customize/CryptPad_logo.svg?',
|
||||
'aria-hidden': true,
|
||||
alt: ''
|
||||
}), 'CryptPad'
|
||||
]),
|
||||
button,
|
||||
h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [
|
||||
h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about),
|
||||
h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, Msg.docs_link),
|
||||
// XXX add link back to index.html on footer logo
|
||||
// h('a.navbar-brand', { href: '/index.html'}, [
|
||||
// h('img', {
|
||||
// src: '/customize/CryptPad_logo.svg?',
|
||||
// 'aria-hidden': true,
|
||||
// alt: ''
|
||||
// }), 'CryptPad'
|
||||
// ]),
|
||||
//button, XXX collapse button
|
||||
h('div', [
|
||||
// XXX remove about page
|
||||
// h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about),
|
||||
h('a.nav-item.nav-link', { href: '/features.html'}, Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features),
|
||||
h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'},
|
||||
[h('i.fa.fa-book', {'aria-hidden':'true'}),Msg.docs_link]),
|
||||
].concat(rightLinks))
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -46,8 +46,7 @@ define([
|
|||
[ 'code', Msg.type.code],
|
||||
[ 'form', Msg.type.form],
|
||||
[ 'whiteboard', Msg.type.whiteboard],
|
||||
[ 'slide', Msg.type.slide],
|
||||
[ 'drive', Msg.type.drive]
|
||||
[ 'slide', Msg.type.slide]
|
||||
].filter(function (x) {
|
||||
return isAvailableType(x[0]);
|
||||
})
|
||||
|
|
@ -99,51 +98,28 @@ define([
|
|||
});
|
||||
}
|
||||
|
||||
var supportText = Pages.setHTML(h('span'), Msg.home_support);
|
||||
Pages.documentationLink(supportText.querySelector('a'), "https://docs.cryptpad.fr/en/how_to_contribute.html");
|
||||
var pageLink = function (ref, loc, text) {
|
||||
if (!ref) { return; }
|
||||
var attrs = {
|
||||
href: ref,
|
||||
};
|
||||
if (!/^\//.test(ref)) {
|
||||
attrs.target = '_blank';
|
||||
attrs.rel = 'noopener noreferrer';
|
||||
}
|
||||
if (loc) {
|
||||
attrs['data-localization'] = loc;
|
||||
text = Msg[loc];
|
||||
}
|
||||
return h('a', attrs, text);
|
||||
};
|
||||
|
||||
var opensource = Pages.setHTML(h('p'), Msg.home_opensource);
|
||||
Pages.externalLink(opensource.querySelector('a'), "https://github.com/xwiki-labs/cryptpad");
|
||||
|
||||
var blocks = [
|
||||
h('div.row.cp-page-section', [
|
||||
h('div.col-sm-6',
|
||||
h('img.img-fluid.cp-img-invert', {
|
||||
src:'/customize/images/shredder.png',
|
||||
alt:'',
|
||||
'aria-hidden': 'true'
|
||||
})
|
||||
),
|
||||
h('div.col-sm-6', [
|
||||
h('h2', Msg.home_privacy_title),
|
||||
h('p', Msg.home_privacy_text)
|
||||
])
|
||||
]),
|
||||
h('div.row.cp-page-section',
|
||||
h('div.col-sm-12', [
|
||||
h('h2', Msg.home_host_title),
|
||||
h('p'), Msg.home_host
|
||||
])
|
||||
),
|
||||
h('div.row.cp-page-section', [
|
||||
h('div.col-sm-6', [
|
||||
h('h2', Msg.home_opensource_title),
|
||||
opensource,
|
||||
h('img.small-logo.cp-img-invert', {
|
||||
src: '/customize/images/logo_AGPLv3.svg',
|
||||
alt: 'APGL3 License Logo'
|
||||
})
|
||||
]),
|
||||
h('div.col-sm-6', [
|
||||
h('h2', Msg.home_support_title),
|
||||
supportText,
|
||||
subscribeButton,
|
||||
Pages.crowdfundingButton(function () {
|
||||
Feedback.send('HOME_SUPPORT_CRYPTPAD');
|
||||
}),
|
||||
])
|
||||
])
|
||||
];
|
||||
// XXX DB: this may be wrong, pasted over form pages.js
|
||||
var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ?
|
||||
'/imprint.html' : AppConfig.imprint);
|
||||
imprintLink = AppConfig.imprint ? pageLink(imprintUrl, 'imprint') : undefined;
|
||||
privacyLink = pageLink(AppConfig.privacy, 'privacy');
|
||||
termsLink = pageLink(AppConfig.terms, 'terms');
|
||||
|
||||
var notice;
|
||||
/* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute.
|
||||
|
|
@ -161,21 +137,39 @@ define([
|
|||
Pages.infopageTopbar(),
|
||||
h('div.container.cp-container', [
|
||||
h('div.row.cp-home-hero', [
|
||||
h('div.cp-title.col-md-7', [
|
||||
h('div.cp-title.col-md-6', [
|
||||
h('img', {
|
||||
src: '/customize/CryptPad_logo.svg?' + urlArgs,
|
||||
'aria-hidden': 'true',
|
||||
alt: ''
|
||||
}),
|
||||
h('h1', 'CryptPad'),
|
||||
UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase)
|
||||
h('h1', 'CryptPad.fr'), // XXX use instance name
|
||||
UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase), // XXX Use instance description
|
||||
h('div.cp-instance-location', [
|
||||
h('i.fa.fa-map-pin', {'aria-hidden': 'true'}),
|
||||
'Encrypted data is hosted in: France (OVH)' // XXX Use instance location
|
||||
]),
|
||||
termsLink, // XXX DB: insert link to ToS if available
|
||||
privacyLink, // XXX DB: insert link to privacy policy if available
|
||||
imprintLink // XXX DB: insert link to imprint if available
|
||||
]),
|
||||
h('div.col-md-5.cp-app-grid', [
|
||||
icons,
|
||||
h('div.col-md-6', [
|
||||
h('div.cp-app-grid', [
|
||||
h('span.cp-app-new', [
|
||||
h('i.fa.fa-plus'),
|
||||
Msg.fm_newFile
|
||||
]),
|
||||
h('div.cp-app-grid-apps', [
|
||||
icons,
|
||||
])
|
||||
]),
|
||||
h('a.cp-app-drive', {'href': '/drive/'}, [ // XXX check this is correct
|
||||
h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}),
|
||||
'Drive: 1GB' // XXX Use instance default storage
|
||||
]) // XXX DB TODO: add drive link
|
||||
])
|
||||
]),
|
||||
notice,
|
||||
blocks
|
||||
notice
|
||||
]),
|
||||
Pages.infopageFooter(),
|
||||
]),
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@
|
|||
@cp_static-fg: @cryptpad_text_col;
|
||||
@cp_static-link: @cryptpad_color_brand_300;
|
||||
@cp_static-title: @cryptpad_color_brand;
|
||||
@cp_static-footer: @cryptpad_color_grey_950;
|
||||
@cp_static-footer: fade(@cryptpad_color_brand, 20%);
|
||||
@cp_static-footer-border: @cryptpad_color_grey_600;
|
||||
@cp_static-topbar-fg: @cryptpad_color_brand_300;
|
||||
@cp_static-card-bg: @cryptpad_color_grey_800;
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@
|
|||
@cp_static-fg: @cryptpad_text_col;
|
||||
@cp_static-link: @cryptpad_color_brand;
|
||||
@cp_static-title: @cryptpad_color_brand;
|
||||
@cp_static-footer: @cryptpad_color_grey_300;
|
||||
@cp_static-footer: fade(@cryptpad_color_brand_300, 30%);
|
||||
@cp_static-footer-border: @cryptpad_color_white;
|
||||
@cp_static-topbar-fg: @cryptpad_color_brand;
|
||||
@cp_static-card-bg: @cryptpad_color_white;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./font.less";
|
||||
|
||||
@infopages-radius: 5px;
|
||||
@infopages-radius-L: 10px;
|
||||
|
||||
.infopages_link () {
|
||||
text-decoration: none;
|
||||
color: @cryptpad_color_link;
|
||||
|
|
@ -52,7 +55,7 @@ body.html {
|
|||
padding-top: @infopages_padding;
|
||||
padding-bottom: @infopages_padding;
|
||||
min-height: 75vh;
|
||||
max-width: 950px;
|
||||
max-width: 1200px;
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 0.5em;
|
||||
|
|
@ -144,54 +147,102 @@ body.html {
|
|||
footer {
|
||||
|
||||
background-color: @cp_static-footer;
|
||||
padding-top: 20px;
|
||||
padding: 10px;
|
||||
align-self: normal; // override align-items:center from parent in index.html
|
||||
|
||||
.container {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: inset 0px 7px 15px -7px rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// .container {
|
||||
// margin-bottom: 20px;
|
||||
// a {
|
||||
// color: @cp_static-link;
|
||||
// &:visited {
|
||||
// color: @cp_static-link;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.cp-footer-left, .cp-footer-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
a {
|
||||
color: @cp_static-link;
|
||||
&:visited {
|
||||
color: @cp_static-link;
|
||||
}
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: @cp_static-card-bg;
|
||||
border-radius: @infopages-radius;
|
||||
padding: 0.5em 0.7em;
|
||||
* {
|
||||
display: inline;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:hover {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
.cp-logo-foot {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-flow: row;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
max-width: 60px;
|
||||
max-height: 40px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.logo-font {
|
||||
display: block;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 1.5rem;
|
||||
color: @cp_static-title;
|
||||
margin-bottom: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.cp-version-footer {
|
||||
background-color: @cp_static-footer;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
border-top: 1px solid @cp_static-footer-border;
|
||||
|
||||
.cp-footer-language{
|
||||
margin-right: 10px;
|
||||
i {
|
||||
font-size: 1.3em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
select {
|
||||
min-width: 0;
|
||||
margin-bottom: 10px;
|
||||
background-color: @cp_static-card-bg;
|
||||
color: @cryptpad_text_col;
|
||||
border: 0px;
|
||||
border-radius: @infopages-radius;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
}
|
||||
.cp-footer-version {
|
||||
font-family: 'IBM Plex Mono';
|
||||
}
|
||||
// .cp-version-footer {
|
||||
// background-color: @cp_static-footer;
|
||||
// display: flex;
|
||||
// flex-flow: column;
|
||||
// align-items: center;
|
||||
// padding: 0.5em;
|
||||
// border-top: 1px solid @cp_static-footer-border;
|
||||
// select {
|
||||
// min-width: 0;
|
||||
// margin-bottom: 10px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// navigation top bar
|
||||
.navbar {
|
||||
width: 100%;
|
||||
color: @cp_static-topbar-fg;
|
||||
justify-content: flex-end;
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
height: 50px;
|
||||
|
|
@ -208,20 +259,32 @@ body.html {
|
|||
margin-right: 0;
|
||||
}
|
||||
a {
|
||||
border: 2px solid transparent;
|
||||
//border: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
color: @cp_static-title;
|
||||
background-color: @cp_static-card-bg;
|
||||
border-radius: @infopages-radius;
|
||||
}
|
||||
.nav-link {
|
||||
padding: 0.5em 0.7em;
|
||||
margin-left: 10px;
|
||||
color: @cp_static-link;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.cp-register-btn {
|
||||
border: 2px solid @cp_static-topbar-fg;
|
||||
background-color: @cp_static-topbar-fg;
|
||||
color: @cp_static-bg;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
background-color: @cp_static-card-bg;
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: @cryptpad_color_brand;
|
||||
margin-top: 1.5em;
|
||||
img {
|
||||
max-width: 200px;
|
||||
|
|
@ -53,14 +52,19 @@
|
|||
h1 {
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 500;
|
||||
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
|
||||
//font-family: "Raleway";
|
||||
color: @cryptpad_color_brand;
|
||||
font-size: 3.7rem;
|
||||
}
|
||||
.tag-line {
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
color: @cp_static-link;
|
||||
}
|
||||
.cp-instance-location {
|
||||
margin-top: 20px;
|
||||
i {
|
||||
font-size: 1.2em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,12 +74,25 @@
|
|||
}
|
||||
|
||||
.cp-app-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
background-color: @cp_alertify-bg;
|
||||
border-radius: @infopages-radius-L;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
|
||||
.cp-app-new {
|
||||
font-size: 1.4em;
|
||||
line-height: 100%;
|
||||
color: fade(@cryptpad_text_col, 80%);
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.cp-app-grid-apps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
a {
|
||||
margin: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 40px;
|
||||
|
|
@ -153,6 +170,7 @@
|
|||
|
||||
each(@colortheme_apps, {
|
||||
.cp-callout-@{key} {
|
||||
border-radius: @infopages-radius;
|
||||
i { color: @value; }
|
||||
&:hover {
|
||||
@desat: desaturate(@value, 15%);
|
||||
|
|
@ -161,6 +179,25 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
a.cp-app-drive {
|
||||
color: @cryptpad_text_col;
|
||||
font-size: 1.5em;
|
||||
display: inline-block;
|
||||
margin: 20px 0px;
|
||||
padding: 10px;
|
||||
border-radius: @infopages-radius-L;
|
||||
&:visited {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@cryptpad_text_col, 10%);
|
||||
}
|
||||
i {
|
||||
color: @cryptpad_color_brand;
|
||||
margin-right: 10px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-hidden { display: none !important; }
|
||||
.cp-callout-more {
|
||||
|
|
|
|||
Loading…
Reference in New Issue