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
master
David Benqué 3 years ago
parent c990665bb5
commit 936dc9950a

@ -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
[

@ -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 {

@ -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;

@ -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;

@ -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;
}

@ -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;

@ -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;
}
}
}
}

Loading…
Cancel
Save