diff --git a/customize.dist/pages/contact.js b/customize.dist/pages/contact.js index 94423f640..43c5bcacb 100644 --- a/customize.dist/pages/contact.js +++ b/customize.dist/pages/contact.js @@ -15,6 +15,8 @@ define([ ].indexOf(Config.adminEmail) === -1; var adminMailbox = Config.supportMailbox && LocalStore.isLoggedIn(); + Msg.contact_admin = "Contact the administrators for: {0}"; // XXX DB: add instance title + return h('div#cp-main', [ Pages.infopageTopbar(), h('div.container.cp-container', [ @@ -24,7 +26,7 @@ define([ (adminEmail || adminMailbox) ? h('div.row.cp-iconCont.align-items-center', [ h('div.col-12', 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', h('a.card', {href : "mailto:"+Config.adminEmail}, @@ -58,24 +60,24 @@ define([ h('div.row.cp-iconCont.align-items-center', [ h('div.col-12', 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('a.card', {href : "https://twitter.com/cryptpad"}, + h('div', + h('a.card-small', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"}, h('div.card-body', h('p', [ - // this is not a typo. adblock plus blocks images with src *twitter* apparently h('img', { - src: '/customize/images/twiitter.svg', + src: '/customize/images/sayhi.svg', alt: '', - 'aria-hidden': 'true'}), - 'Twitter' + 'aria-hidden': 'true' + }), + Msg.contact_chat || 'Chat' ]) ) ) ), - h('div.col-12.col-sm-6.col-md-3.col-lg-3', - h('a.card', {href : "https://social.weho.st/@cryptpad"}, + h('div', + h('a.card-small', {href : "https://social.weho.st/@cryptpad"}, h('div.card-body', h('p', [ h('img', { @@ -88,35 +90,35 @@ define([ ) ) ), - h('div.col-12.col-sm-6.col-md-3.col-lg-3', - h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"}, + h('div', + h('a.card-small', {href : "https://twitter.com/cryptpad"}, h('div.card-body', h('p', [ + // this is not a typo. adblock plus blocks images with src *twitter* apparently h('img', { - src: '/customize/images/github.svg', + src: '/customize/images/twiitter.svg', alt: '', 'aria-hidden': 'true'}), - Msg.contact_bug || 'Bug report' + 'Twitter' ]) ) ) ), - h('div.col-12.col-sm-6.col-md-3.col-lg-3', - h('a.card', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"}, + h('div', + h('a.card-small', {href : "https://github.com/xwiki-labs/cryptpad/issues/"}, h('div.card-body', h('p', [ h('img', { - src: '/customize/images/sayhi.svg', + src: '/customize/images/github.svg', alt: '', - 'aria-hidden': 'true' - }), - Msg.contact_chat || 'Chat' + 'aria-hidden': 'true'}), + Msg.contact_bug || 'Bug report' ]) ) ) ), - h('div.col-12.col-sm-6.col-md-3.col-lg-3', - h('a.card', {href : "mailto:" + developerEmail}, + h('div', + h('a.card-small', {href : "mailto:" + developerEmail}, h('div.card-body', h('p', [ h('img', { diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index 0e75e7c15..803dc1a3c 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -11,12 +11,19 @@ .cp-container { .cp-iconCont { + text-align: center; + &.align-items-center { + justify-content: center; + } h4 { margin-top: 1.5em; margin-bottom: 1.5em; } + p.center { + text-align: center; + } div { - .card { + a.card { .cp-shadow(); border-radius: @infopages-radius-L; margin-bottom: 1em; @@ -53,6 +60,34 @@ 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; + } + } } } }