From 657323c80de953d09baec76465b5838dd37ede48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Wed, 30 Mar 2022 11:19:35 +0100 Subject: [PATCH 1/2] More responsive nav and footer --- customize.dist/pages.js | 32 +++++++------- .../src/less2/include/infopages.less | 42 ++++--------------- .../src/less2/pages/page-index.less | 6 +-- 3 files changed, 26 insertions(+), 54 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index fe49b3870..25d1b6e94 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -210,9 +210,9 @@ define([ 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 + footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon ]), - h('.div.cp-footer-center', [ + h('div.cp-footer-center', [ h('div.cp-footer-language', [ h('i.fa.fa-language', {'aria-hidden': 'true'}), languageSelector() @@ -252,17 +252,16 @@ define([ ]); } -/* - var button = h('button.navbar-toggler', { - 'type':'button', - /*'data-toggle':'collapse', - 'data-target':'#menuCollapse', - 'aria-controls': 'menuCollapse', - 'aria-expanded':'false', - 'aria-label':'Toggle navigation' - }, h('i.fa.fa-bars ')); */ - - // XXX button to collapse navbar on small screens + // var button = h('button.navbar-toggler', { + // 'type':'button', + // 'data-toggle':'collapse', + // 'data-target':'#menuCollapse', + // 'aria-controls': 'menuCollapse', + // 'aria-expanded':'false', + // 'aria-label':'Toggle navigation' + // }, h('i.fa.fa-bars ')); + + // // XXX button to collapse navbar on small screens // $(button).click(function () { // if ($('#menuCollapse').is(':visible')) { // return void $('#menuCollapse').slideUp(); @@ -279,14 +278,15 @@ define([ // alt: '' // }), 'CryptPad' // ]), - //button, XXX collapse button - h('div', [ + // button, // XXX collapse button + // add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button + [ // 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)) + ].concat(rightLinks) ); }; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 9bb56f6dc..d87ddb980 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -112,7 +112,7 @@ body.html { border: none; padding: 10px 20px; margin-right: 10px; - border-radius: 0px; + border-radius: @infopages-radius; cursor: pointer; &:hover, &:focus { background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); @@ -145,7 +145,6 @@ body.html { } } footer { - background-color: @cp_static-footer; padding: 10px; align-self: normal; // override align-items:center from parent in index.html @@ -153,15 +152,13 @@ body.html { display: flex; align-items: center; justify-content: space-between; - // .container { - // margin-bottom: 20px; - // a { - // color: @cp_static-link; - // &:visited { - // color: @cp_static-link; - // } - // } - // } + flex-direction: row; + @media screen and (max-width: 830px) { + flex-direction: column; + div { + margin-bottom: 10px; + } + } .cp-footer-left, .cp-footer-right { display: flex; flex-direction: row; @@ -267,7 +264,7 @@ body.html { } .nav-link { padding: 0.5em 0.7em; - margin-left: 10px; + margin: 5px; color: @cp_static-link; display: inline-block; &:hover { @@ -294,26 +291,5 @@ body.html { color: @cp_static-topbar-fg; } } - @media (max-width: 1000px) { - #menuCollapse { - text-align: right; - /* @media (min-width: 576px) { - top: 100%; - background: rgba(255,255,255,0.8); - position: absolute; - right: 0px; - padding: 0 20px; - z-index: 1; - } - */ - } - .navbar-nav a { - text-align: right !important; - } - .cp-register-btn { - margin-right: 13px; - text-align: center; - } - } } diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 157e1d886..faedf47fc 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -10,11 +10,7 @@ flex-direction: column; justify-content: space-between; align-items: center; - .container { - @media only screen and (max-device-width : 576px) { - margin-top: 6em; - } - } + & > .cp-container { flex: 1; display: flex; From 58611e6f6b23838ab0f8af13f4f7e8c60a37b957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Fri, 1 Apr 2022 16:08:16 +0100 Subject: [PATCH 2/2] Rounded and redesigned static pages - Login and register pages - Features page --- customize.dist/pages.js | 2 +- customize.dist/pages/index.js | 13 ++++++++----- customize.dist/pages/login.js | 6 ++++-- customize.dist/pages/register.js | 16 +++++++++------- .../src/less2/include/colortheme-dark.less | 1 + .../src/less2/include/colortheme.less | 1 + .../src/less2/include/infopages.less | 6 +++--- .../src/less2/pages/page-features.less | 3 ++- .../src/less2/pages/page-login.less | 19 +++++++++---------- .../src/less2/pages/page-register.less | 19 ++++++++----------- 10 files changed, 46 insertions(+), 40 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 25d1b6e94..35b28a6f7 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -270,7 +270,7 @@ define([ // }); return h('nav.navbar.navbar-expand-lg', - // XXX add link back to index.html on footer logo + // XXX DB add link back to index.html on other pages // h('a.navbar-brand', { href: '/index.html'}, [ // h('img', { // src: '/customize/CryptPad_logo.svg?', diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index d7dde32a1..38b8f01cb 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -116,6 +116,9 @@ define([ var fastLink = k => pageLink(Pages.customURLs[k], k); + // XXX DB + Msg.terms = "Terms of Service"; + // XXX DB: this may be wrong, pasted over form pages.js var imprintLink = fastLink('imprint'); var privacyLink = fastLink('privacy'); @@ -149,9 +152,9 @@ define([ 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 + termsLink, + privacyLink, + imprintLink ]), h('div.col-md-6', [ h('div.cp-app-grid', [ @@ -165,8 +168,8 @@ define([ ]), 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 + 'Drive: 1GB' // XXX DB TODO: Use instance default storage + ]) ]) ]), notice diff --git a/customize.dist/pages/login.js b/customize.dist/pages/login.js index 9ff9b6746..c5e39424c 100644 --- a/customize.dist/pages/login.js +++ b/customize.dist/pages/login.js @@ -5,6 +5,7 @@ define([ '/customize/pages.js', '/api/config', ], function (h, UI, Msg, Pages, Config) { + Msg.login_instance = "Connect to your account on {0}"; // XXX insert instance name return function () { return [h('div#cp-main', [ Pages.infopageTopbar(), @@ -13,6 +14,7 @@ define([ h('div.row', [ h('div.col-md-3'), h('div#userForm.form-group.hidden.col-md-6', [ + h('div.cp-login-instance',Msg.login_instance), h('input.form-control#name', { name: 'name', type: 'text', @@ -32,11 +34,11 @@ define([ UI.createCheckbox('import-recent', Msg.register_importRecent), ]), h('div.extra', [ - h('button.login', Msg.login_login), (Config.restrictRegistration? undefined: h('button#register.cp-secondary', Msg.login_register) - ) + ), + h('button.login', Msg.login_login) ]) ]), h('div.col-md-3') diff --git a/customize.dist/pages/register.js b/customize.dist/pages/register.js index 1bd26ff47..30e04a6b4 100644 --- a/customize.dist/pages/register.js +++ b/customize.dist/pages/register.js @@ -26,8 +26,8 @@ define([ h('div.row.cp-page-title', h('h1', Msg.register_header)), //h('div.row.cp-register-det', content), ].concat(content)), + Pages.infopageFooter(), ]), - Pages.infopageFooter(), ]; }; @@ -44,6 +44,8 @@ define([ termsCheck = h('div.checkbox-container', tos); } + Msg.register_instance = "Creating a new account on {0}"; // XXX DB + return frame([ h('div.row.cp-register-det', [ h('div#data.hidden.col-md-6', [ @@ -51,13 +53,13 @@ define([ Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes) ]), h('div.cp-reg-form.col-md-6', [ - h('img.img-fluid', { - src: '/customize/images/swallow-the-key.png?' + urlArgs - }), h('div#userForm.form-group.hidden', [ - h('a', { - href: '/features.html' - }, Msg.register_whyRegister), + h('div.cp-register-instance', [ + Msg.register_instance, , h('br'), + h('a', { + href: '/features.html' + }, Msg.register_whyRegister) + ]), h('input.form-control#username', { type: 'text', autocomplete: 'off', diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index e2f585b6e..db7e714f7 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -266,6 +266,7 @@ @cp_static-footer-border: @cryptpad_color_grey_600; @cp_static-topbar-fg: @cryptpad_color_brand_300; @cp_static-card-bg: @cryptpad_color_grey_800; +@cp_static-danger: @cryptpad_color_red_fade; @cp_static-img-invert-filter: hue-rotate(200grad) invert(); // Limit diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 55bfe92db..3dc1b222b 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -265,6 +265,7 @@ @cp_static-footer-border: @cryptpad_color_white; @cp_static-topbar-fg: @cryptpad_color_brand; @cp_static-card-bg: @cryptpad_color_white; +@cp_static-danger: fade(@cryptpad_color_red, 30%); @cp_static-img-invert-filter: none; // Limit diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index d87ddb980..5b53c4a8a 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -125,9 +125,9 @@ body.html { } .form-group { - & > * { - margin-top: 0.5em; - } + // & > * { + // margin-bottom: 0.5em; + // } display: flex; flex-direction: column; align-items: center; diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index 5ec076a34..50f9195ae 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/customize.dist/src/less2/pages/page-features.less @@ -22,10 +22,11 @@ .cp-shadow(); border: none; background-color: @cp_static-card-bg; - border-radius: 0px;; + border-radius: @infopages-radius; .title-card { background-color: @cryptpad_color_brand; padding: 20px; + border-radius: @infopages-radius @infopages-radius 0 0 ; } .card-body, .title-card { display: flex; diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 07fcc7cb5..f6e417c19 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -23,11 +23,16 @@ .cp-shadow(); background-color: @cp_static-card-bg; padding: 10px; + margin: 0 10px 10px 10px; + border-radius: @infopages-radius-L; + .cp-login-instance { + margin-bottom: 10px; + } .form-control { - border-radius: 0; + border-radius: @infopages-radius; color: @cryptpad_text_col; background-color: @cp_forms-bg; - margin-bottom: 5px; + margin-bottom: 10px; &:focus { border-color: @cryptpad_color_brand; } @@ -43,14 +48,8 @@ } .extra { margin-top: 1em; - - #register { - border-color: @cryptpad_color_brand; - background: @cryptpad_color_white; - color: @cryptpad_color_brand; - padding: 10px; - border-radius: 0; - margin: 0px; + button.login { + margin-right: 0px; } } } diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 1ce8bbd5f..cafeaee05 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -13,13 +13,9 @@ .cp-container { .form-group { - .checkbox-container { - &:nth-of-type(1) { - margin-top: 2em; - } - &:last-of-type { - margin-bottom: 1em; - } + .cp-register-instance { + text-align: center; + margin-bottom: 10px; } #register { &.btn { @@ -85,12 +81,13 @@ position: relative; z-index: 2; margin-bottom: 100px; + border-radius: @infopages-radius-L; .cp-shadow(); .form-control { - border-radius: 0; + border-radius: @infopages-radius; color: @cryptpad_text_col; background-color: @cp_forms-bg; - margin-top: 5px; + margin-bottom: 10px; &:focus { border-color: @cryptpad_color_brand; } @@ -100,7 +97,7 @@ color: @cryptpad_text_col; } button#register { - margin: 0px; + margin-top: 10px; } } @@ -119,7 +116,7 @@ content: "\f071"; } .red { - color: @cryptpad_color_red; + background-color: @cp_static-danger; } } }