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 buttonsmaster
David Benqué
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…
Reference in New Issue