From 936dc9950a31589e283148f048e3e42f6390c628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Fri, 6 May 2022 18:00:30 +0100 Subject: [PATCH] Style buttons and footer - add logo to Back Home button - style Subscribe button on homepage - reorganize footer with version string on the left - restyle footer buttons --- customize.dist/pages.js | 21 ++++++++----------- customize.dist/pages/index.js | 8 +++---- .../src/less2/include/colortheme-dark.less | 1 + .../src/less2/include/colortheme.less | 1 + .../src/less2/include/infopages.less | 10 +++++++-- .../src/less2/pages/page-contact.less | 2 +- .../src/less2/pages/page-index.less | 14 +++++++++++-- 7 files changed, 36 insertions(+), 21 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 9f914ddc2..d7ba9c6ad 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -182,20 +182,20 @@ define([ }), h('span.logo-font', 'CryptPad') ]), + h('span.cp-footer-version', 'v' + Pages.versionString) + ]), + h('div.cp-footer-center', [ h('div.cp-logo-btns', [ footLink('https://cryptpad.org', null, Msg.footer_website, 'link'), footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon ]) ]), - h('div.cp-footer-center', [ + h('div.cp-footer-right', [ 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' ? ]) ]); }; @@ -248,18 +248,15 @@ define([ var isHome = ['/', '/index.html'].includes(window.location.pathname); var homeLink = h('a.nav-item.nav-link.cp-back-home' /* .navbar-brand */, { href: '/index.html' }, [ h('i.fa.fa-arrow-left'), + h('img', { + src: '/customize/CryptPad_logo.svg', + "aria-hidden": true, + alt: '' + }), Msg.homePage ]); return h('nav.navbar.navbar-expand-lg', - // 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?', - // 'aria-hidden': true, - // alt: '' - // }), 'CryptPad' - // ]), // button, // XXX collapse button // add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button [ diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index ae1a86f36..9929586e7 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -145,15 +145,15 @@ define([ locationBlock = h('div', h('br')); } - Msg.home_morestorage = 'For more storage space, and to support the project:'; // XXX + Msg.home_morestorage = 'For more storage space:'; // XXX var subButton = function () { + // XXX display donation button even if instance doesn't accept subscriptions if (Pages.areSubscriptionsAllowed()) { var sub = h('div.cp-sub-prompt', [ h('span', Msg.home_morestorage), - h('br'), - h('button', Msg.features_f_subscribe), - h('button', Msg.footer_donate) + // XXX how to link these properly to accounts? + h('button', {href:"/accounts/"}, Msg.features_f_subscribe) ]); return sub; } else { diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index db7e714f7..f1ad36526 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -48,6 +48,7 @@ @cryptpad_color_black: #000; @cryptpad_text_col: @cryptpad_color_grey_200; +@cryptpad_text_col_inv: @cryptpad_color_grey_900; @cryptpad_color_blue: #326599; // former logo-1 @cryptpad_color_light_blue: #00b7d8; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 3dc1b222b..d4c1158e6 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -48,6 +48,7 @@ @cryptpad_color_black: #000; @cryptpad_text_col:@cryptpad_color_grey_800; +@cryptpad_text_col_inv: @cryptpad_color_grey_200; @cryptpad_color_blue: #326599; // former logo-1 @cryptpad_color_light_blue: #00b7d8; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 1aec1703c..2d9a06617 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -153,7 +153,7 @@ body.html { justify-content: space-between; flex-direction: row; flex-wrap: wrap; - .cp-footer-left, .cp-footer-right { + .cp-footer-left, .cp-footer-center, .cp-footer-right { display: flex; flex-direction: row; flex-wrap: wrap; @@ -185,7 +185,8 @@ body.html { .cp-logo-btns { padding: 10px; a { - background-color: @cp_static-card-bg; + background-color: @cryptpad_color_link; + color: @cryptpad_text_col_inv; border-radius: @infopages-radius; padding: 0.5em 0.7em; white-space: nowrap; @@ -194,6 +195,7 @@ body.html { margin-right: 5px; } &:hover { + background-color: @cp_static-card-bg; color: @cryptpad_text_col; } } @@ -266,6 +268,10 @@ body.html { margin: 5px; color: @cp_static-link; display: inline-block; + img { + max-height: 30px; + margin-right: 10px; + } &.cp-back-home { margin-right: auto; } diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index c305f087a..0e75e7c15 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -18,7 +18,7 @@ div { .card { .cp-shadow(); - border-radius: 0; + border-radius: @infopages-radius-L; margin-bottom: 1em; border: 0; background-color: @cp_static-card-bg; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index e9d2c1e8e..684cce3e0 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -220,7 +220,7 @@ width: fit-content; padding: 10px; border-radius: @infopages-radius-L; - margin-right: 15px; + margin-right: 25px; &:visited { color: @cryptpad_text_col; } @@ -234,9 +234,19 @@ } } .cp-sub-prompt { + * { + display: block; + } button { + background-color: @cryptpad_color_link; + color: @cryptpad_text_col_inv; font-size: 1.4rem; - margin-top: 10px; + margin: 10px 0; + border-radius: @infopages-radius-L; + &:hover { + background-color: @cp_static-card-bg; + color: @cryptpad_text_col; + } } } }