infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Redesign instance home page

Browse Source
master
David Benqué 3 years ago
parent 0757993dd8
commit 0198bf6782
6 changed files with 244 additions and 109 deletions
Show Stats Download Patch File Download Diff File

89
customize.dist/pages.js
Unescape Escape View File

@ -86,11 +86,12 @@ define([
]); ]);
}; };
var footLink = function (ref, loc, text) { var footLink = function (ref, loc, text, icon) {
if (!ref) { return; } if (!ref) { return; }
var attrs = { var attrs = {
href: ref, href: ref,
}; };
var iconName = '';
if (!/^\//.test(ref)) { if (!/^\//.test(ref)) {
attrs.target = '_blank'; attrs.target = '_blank';
attrs.rel = 'noopener noreferrer'; attrs.rel = 'noopener noreferrer';
@ -99,13 +100,17 @@ define([
attrs['data-localization'] = loc; attrs['data-localization'] = loc;
text = Msg[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" ? var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ?
'/imprint.html' : AppConfig.imprint); '/imprint.html' : AppConfig.imprint);
Pages.versionString = "v4.13.0"; Pages.versionString = "4.13.0";
// used for the about menu // used for the about menu
@ -115,7 +120,7 @@ define([
Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link'); Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link');
Pages.roadmapLink = footLink(AppConfig.roadmap, 'footer_roadmap'); 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 terms = footLink('/terms.html', 'footer_tos'); // FIXME this should be configurable like the other legal pages
var legalFooter; 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 () { Pages.infopageTopbar = function () {
var rightLinks; var rightLinks;
var username = window.localStorage.getItem('User_name'); var username = window.localStorage.getItem('User_name');
var registerLink; var registerLink;
if (!ApiConfig.restrictRegistration) { 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) { if (username === null) {
rightLinks = [ 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, registerLink,
]; ];
} else { } else {
rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [ 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 username
]); ]);
@ -196,26 +233,30 @@ define([
'aria-label':'Toggle navigation'*/ 'aria-label':'Toggle navigation'*/
}, h('i.fa.fa-bars ')); }, h('i.fa.fa-bars '));
$(button).click(function () { // XXX button to collapse navbar on small screens
if ($('#menuCollapse').is(':visible')) { // $(button).click(function () {
return void $('#menuCollapse').slideUp(); // if ($('#menuCollapse').is(':visible')) {
} // return void $('#menuCollapse').slideUp();
$('#menuCollapse').slideDown(); // }
}); // $('#menuCollapse').slideDown();
// });
return h('nav.navbar.navbar-expand-lg', return h('nav.navbar.navbar-expand-lg',
h('a.navbar-brand', { href: '/index.html'}, [ // XXX add link back to index.html on footer logo
h('img', { // h('a.navbar-brand', { href: '/index.html'}, [
src: '/customize/CryptPad_logo.svg?', // h('img', {
'aria-hidden': true, // src: '/customize/CryptPad_logo.svg?',
alt: '' // 'aria-hidden': true,
}), 'CryptPad' // alt: ''
]), // }), 'CryptPad'
button, // ]),
h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [ //button, XXX collapse button
h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about), h('div', [
h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, Msg.docs_link), // 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: '/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)) ].concat(rightLinks))
); );
}; };

98
customize.dist/pages/index.js
Unescape Escape View File

@ -46,8 +46,7 @@ define([
[ 'code', Msg.type.code], [ 'code', Msg.type.code],
[ 'form', Msg.type.form], [ 'form', Msg.type.form],
[ 'whiteboard', Msg.type.whiteboard], [ 'whiteboard', Msg.type.whiteboard],
[ 'slide', Msg.type.slide], [ 'slide', Msg.type.slide]
[ 'drive', Msg.type.drive]
].filter(function (x) { ].filter(function (x) {
return isAvailableType(x[0]); return isAvailableType(x[0]);
}) })
@ -99,51 +98,28 @@ define([
}); });
} }
var supportText = Pages.setHTML(h('span'), Msg.home_support); var pageLink = function (ref, loc, text) {
Pages.documentationLink(supportText.querySelector('a'), "https://docs.cryptpad.fr/en/how_to_contribute.html"); 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); // XXX DB: this may be wrong, pasted over form pages.js
Pages.externalLink(opensource.querySelector('a'), "https://github.com/xwiki-labs/cryptpad"); var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ?
'/imprint.html' : AppConfig.imprint);
var blocks = [ imprintLink = AppConfig.imprint ? pageLink(imprintUrl, 'imprint') : undefined;
h('div.row.cp-page-section', [ privacyLink = pageLink(AppConfig.privacy, 'privacy');
h('div.col-sm-6', termsLink = pageLink(AppConfig.terms, 'terms');
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');
}),
])
])
];
var notice; var notice;
/* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute. /* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute.
@ -161,21 +137,39 @@ define([
Pages.infopageTopbar(), Pages.infopageTopbar(),
h('div.container.cp-container', [ h('div.container.cp-container', [
h('div.row.cp-home-hero', [ h('div.row.cp-home-hero', [
h('div.cp-title.col-md-7', [ h('div.cp-title.col-md-6', [
h('img', { h('img', {
src: '/customize/CryptPad_logo.svg?' + urlArgs, src: '/customize/CryptPad_logo.svg?' + urlArgs,
'aria-hidden': 'true', 'aria-hidden': 'true',
alt: '' alt: ''
}), }),
h('h1', 'CryptPad'), h('h1', 'CryptPad.fr'), // XXX use instance name
UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase) 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
]), ]),
h('div.col-md-5.cp-app-grid', [ 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-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, icons,
]) ])
]), ]),
notice, h('a.cp-app-drive', {'href': '/drive/'}, [ // XXX check this is correct
blocks h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}),
'Drive: 1GB' // XXX Use instance default storage
]) // XXX DB TODO: add drive link
])
]),
notice
]), ]),
Pages.infopageFooter(), Pages.infopageFooter(),
]), ]),

2
customize.dist/src/less2/include/colortheme-dark.less
Unescape Escape View File

@ -262,7 +262,7 @@
@cp_static-fg: @cryptpad_text_col; @cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand_300; @cp_static-link: @cryptpad_color_brand_300;
@cp_static-title: @cryptpad_color_brand; @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-footer-border: @cryptpad_color_grey_600;
@cp_static-topbar-fg: @cryptpad_color_brand_300; @cp_static-topbar-fg: @cryptpad_color_brand_300;
@cp_static-card-bg: @cryptpad_color_grey_800; @cp_static-card-bg: @cryptpad_color_grey_800;

2
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -261,7 +261,7 @@
@cp_static-fg: @cryptpad_text_col; @cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand; @cp_static-link: @cryptpad_color_brand;
@cp_static-title: @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-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand; @cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-card-bg: @cryptpad_color_white; @cp_static-card-bg: @cryptpad_color_white;

103
customize.dist/src/less2/include/infopages.less
Unescape Escape View File

@ -1,6 +1,9 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./font.less"; @import (reference) "./font.less";
@infopages-radius: 5px;
@infopages-radius-L: 10px;
.infopages_link () { .infopages_link () {
text-decoration: none; text-decoration: none;
color: @cryptpad_color_link; color: @cryptpad_color_link;
@ -52,7 +55,7 @@ body.html {
padding-top: @infopages_padding; padding-top: @infopages_padding;
padding-bottom: @infopages_padding; padding-bottom: @infopages_padding;
min-height: 75vh; min-height: 75vh;
max-width: 950px; max-width: 1200px;
h1 { h1 {
font-size: 3em; font-size: 3em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -144,54 +147,102 @@ body.html {
footer { footer {
background-color: @cp_static-footer; background-color: @cp_static-footer;
padding-top: 20px; padding: 10px;
align-self: normal; // override align-items:center from parent in index.html align-self: normal; // override align-items:center from parent in index.html
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 {
margin-left: 10px;
}
}
.container {
margin-bottom: 20px;
a { a {
color: @cp_static-link; background-color: @cp_static-card-bg;
&:visited { border-radius: @infopages-radius;
color: @cp_static-link; padding: 0.5em 0.7em;
* {
display: inline;
}
i {
margin-right: 5px;
} }
&:hover {
color: @cryptpad_text_col;
} }
} }
.cp-logo-foot { .cp-logo-foot {
display: flex; display: flex;
flex-flow: column; flex-flow: row;
width: 100%; width: 100%;
align-items: center; align-items: center;
margin-right: 20px;
img { img {
max-width: 60px; max-height: 40px;
display: block; display: block;
margin-right: 10px;
} }
.logo-font { .logo-font {
display: block; display: block;
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
font-size: 1.5rem; font-size: 1.5rem;
color: @cp_static-title; color: @cp_static-title;
margin-bottom: 10px; height: 40px;
} }
} }
.cp-version-footer {
background-color: @cp_static-footer; .cp-footer-language{
display: flex; margin-right: 10px;
flex-flow: column; i {
align-items: center; font-size: 1.3em;
padding: 0.5em; margin-right: 5px;
border-top: 1px solid @cp_static-footer-border; }
select { select {
min-width: 0; 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 // navigation top bar
.navbar { .navbar {
width: 100%; width: 100%;
color: @cp_static-topbar-fg; color: @cp_static-topbar-fg;
justify-content: flex-end;
.navbar-brand { .navbar-brand {
display: block; display: block;
height: 50px; height: 50px;
@ -208,20 +259,32 @@ body.html {
margin-right: 0; margin-right: 0;
} }
a { a {
border: 2px solid transparent; //border: 2px solid transparent;
white-space: nowrap; white-space: nowrap;
color: @cp_static-title; color: @cp_static-title;
background-color: @cp_static-card-bg;
border-radius: @infopages-radius;
} }
.nav-link { .nav-link {
padding: 0.5em 0.7em; padding: 0.5em 0.7em;
margin-left: 10px;
color: @cp_static-link; color: @cp_static-link;
display: inline-block;
&:hover { &:hover {
color: @cryptpad_text_col; color: @cryptpad_text_col;
} }
i {
margin-right: 5px;
}
} }
.cp-register-btn { .cp-register-btn {
border: 2px solid @cp_static-topbar-fg; background-color: @cp_static-topbar-fg;
color: @cp_static-bg;
display: inline-block; display: inline-block;
&:hover {
background-color: @cp_static-card-bg;
color: @cryptpad_text_col;
}
} }
button:focus { button:focus {
outline: none; outline: none;

47
customize.dist/src/less2/pages/page-index.less
Unescape Escape View File

@ -43,7 +43,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
color: @cryptpad_color_brand;
margin-top: 1.5em; margin-top: 1.5em;
img { img {
max-width: 200px; max-width: 200px;
@ -53,14 +52,19 @@
h1 { h1 {
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
font-weight: 500; font-weight: 500;
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; color: @cryptpad_color_brand;
//font-family: "Raleway";
font-size: 3.7rem; font-size: 3.7rem;
} }
.tag-line { .tag-line {
text-align: center; text-align: center;
font-size: 1.4em; 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 { .cp-app-grid {
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; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
}
a { a {
margin: 10px; margin: 10px;
text-decoration: none;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-top: 40px; margin-top: 40px;
@ -153,6 +170,7 @@
each(@colortheme_apps, { each(@colortheme_apps, {
.cp-callout-@{key} { .cp-callout-@{key} {
border-radius: @infopages-radius;
i { color: @value; } i { color: @value; }
&:hover { &:hover {
@desat: desaturate(@value, 15%); @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-hidden { display: none !important; }
.cp-callout-more { .cp-callout-more {

Write Preview
Loading…
Cancel
Save