Redesign contact page

master
David Benqué 3 years ago
parent 936dc9950a
commit c17c4adfd7

@ -15,6 +15,8 @@ define([
].indexOf(Config.adminEmail) === -1; ].indexOf(Config.adminEmail) === -1;
var adminMailbox = Config.supportMailbox && LocalStore.isLoggedIn(); var adminMailbox = Config.supportMailbox && LocalStore.isLoggedIn();
Msg.contact_admin = "Contact the administrators for: {0}"; // XXX DB: add instance title
return h('div#cp-main', [ return h('div#cp-main', [
Pages.infopageTopbar(), Pages.infopageTopbar(),
h('div.container.cp-container', [ h('div.container.cp-container', [
@ -24,7 +26,7 @@ define([
(adminEmail || adminMailbox) ? h('div.row.cp-iconCont.align-items-center', [ (adminEmail || adminMailbox) ? h('div.row.cp-iconCont.align-items-center', [
h('div.col-12', h('div.col-12',
Pages.setHTML(h('h2.text-center'), Msg.contact_admin), Pages.setHTML(h('h2.text-center'), Msg.contact_admin),
h('p', Msg.contact_adminHint) h('p.center', Msg.contact_adminHint)
), ),
adminEmail ? h('div.col-12.col-sm-6.col-md-3.col-lg-3', adminEmail ? h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "mailto:"+Config.adminEmail}, h('a.card', {href : "mailto:"+Config.adminEmail},
@ -58,24 +60,24 @@ define([
h('div.row.cp-iconCont.align-items-center', [ h('div.row.cp-iconCont.align-items-center', [
h('div.col-12', h('div.col-12',
Pages.setHTML(h('h2.text-center'), Msg.contact_dev), Pages.setHTML(h('h2.text-center'), Msg.contact_dev),
h('p', Msg.contact_devHint) h('p.center', Msg.contact_devHint)
), ),
h('div.col-12.col-sm-6.col-md-3.col-lg-3', h('div',
h('a.card', {href : "https://twitter.com/cryptpad"}, h('a.card-small', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"},
h('div.card-body', h('div.card-body',
h('p', [ h('p', [
// this is not a typo. adblock plus blocks images with src *twitter* apparently
h('img', { h('img', {
src: '/customize/images/twiitter.svg', src: '/customize/images/sayhi.svg',
alt: '', alt: '',
'aria-hidden': 'true'}), 'aria-hidden': 'true'
'Twitter' }),
Msg.contact_chat || 'Chat'
]) ])
) )
) )
), ),
h('div.col-12.col-sm-6.col-md-3.col-lg-3', h('div',
h('a.card', {href : "https://social.weho.st/@cryptpad"}, h('a.card-small', {href : "https://social.weho.st/@cryptpad"},
h('div.card-body', h('div.card-body',
h('p', [ h('p', [
h('img', { h('img', {
@ -88,35 +90,35 @@ define([
) )
) )
), ),
h('div.col-12.col-sm-6.col-md-3.col-lg-3', h('div',
h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"}, h('a.card-small', {href : "https://twitter.com/cryptpad"},
h('div.card-body', h('div.card-body',
h('p', [ h('p', [
// this is not a typo. adblock plus blocks images with src *twitter* apparently
h('img', { h('img', {
src: '/customize/images/github.svg', src: '/customize/images/twiitter.svg',
alt: '', alt: '',
'aria-hidden': 'true'}), 'aria-hidden': 'true'}),
Msg.contact_bug || 'Bug report' 'Twitter'
]) ])
) )
) )
), ),
h('div.col-12.col-sm-6.col-md-3.col-lg-3', h('div',
h('a.card', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"}, h('a.card-small', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
h('div.card-body', h('div.card-body',
h('p', [ h('p', [
h('img', { h('img', {
src: '/customize/images/sayhi.svg', src: '/customize/images/github.svg',
alt: '', alt: '',
'aria-hidden': 'true' 'aria-hidden': 'true'}),
}), Msg.contact_bug || 'Bug report'
Msg.contact_chat || 'Chat'
]) ])
) )
) )
), ),
h('div.col-12.col-sm-6.col-md-3.col-lg-3', h('div',
h('a.card', {href : "mailto:" + developerEmail}, h('a.card-small', {href : "mailto:" + developerEmail},
h('div.card-body', h('div.card-body',
h('p', [ h('p', [
h('img', { h('img', {

@ -11,12 +11,19 @@
.cp-container { .cp-container {
.cp-iconCont { .cp-iconCont {
text-align: center;
&.align-items-center {
justify-content: center;
}
h4 { h4 {
margin-top: 1.5em; margin-top: 1.5em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
p.center {
text-align: center;
}
div { div {
.card { a.card {
.cp-shadow(); .cp-shadow();
border-radius: @infopages-radius-L; border-radius: @infopages-radius-L;
margin-bottom: 1em; margin-bottom: 1em;
@ -53,6 +60,34 @@
font-size: 1.3em; font-size: 1.3em;
} }
} }
a.card-small {
.cp-shadow();
border-radius: @infopages-radius-L;
display: inline-block;
background-color: @cp_static-card-bg;
margin: 15px;
.card-body {
padding: 10px;
p {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
margin: 0;
height: 100%;
font-size: 1.3em;
}
}
img {
width: 40px;
margin: 0 10px 0 0;
}
&:hover, &:focus {
text-decoration: none;
color: @cryptpad_text_col;
background-color: @cryptpad_color_brand_fadest;
}
}
} }
} }
} }

Loading…
Cancel
Save