From 0198bf678201d65b15062d6a248d67d5ec2a0678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Wed, 23 Mar 2022 09:59:16 +0000 Subject: [PATCH] Redesign instance home page --- customize.dist/pages.js | 89 +++++++++++---- customize.dist/pages/index.js | 100 ++++++++-------- .../src/less2/include/colortheme-dark.less | 2 +- .../src/less2/include/colortheme.less | 2 +- .../src/less2/include/infopages.less | 107 ++++++++++++++---- .../src/less2/pages/page-index.less | 53 +++++++-- 6 files changed, 244 insertions(+), 109 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index ea52b00f8..172bf5825 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -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)) ); }; diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index 816dbd49b..279bbe5fc 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -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(), ]), diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index c58a1684a..e2f585b6e 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -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; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 3565f546f..55bfe92db 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -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; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index e64e38744..1df1a2354 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -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; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 26ef0328d..157e1d886 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -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 {