Updated the contact page with the new design

This commit is contained in:
CatalinScr 2017-08-31 16:26:20 +03:00
parent 83be769bb3
commit 0ceb4cbbcb
3 changed files with 54 additions and 28 deletions

View File

@ -286,45 +286,35 @@ define([
)
]),
h('div.container.cp-container', [
h('div.row.cp-iconCont', [
h('div.row.cp-iconCont.align-items-center', [
h('div.col-12',
setHTML(h('p.text-center'), Msg.main_about_p2)
setHTML(h('h4.text-center'), Msg.main_about_p26)
),
h('div.col-4.col-sm-2',
setHTML(h('p'), Msg.main_about_p21)
),
h('div.col-4.col-sm-2',
h('a.card', {href : "#"},
h('div.col-6.col-sm-3.col-md-3.col-lg-3',
h('a.card', {href : "https://twitter.com/cryptpad"},
h('div.card-body',
setHTML(h('p'), Msg.main_about_p22)
)
)
),
h('div.col-4.col-sm-2',
h('a.card',
h('div.col-6.col-sm-3.col-md-3.col-lg-3',
h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
h('div.card-body',
setHTML(h('p'), Msg.main_about_p21)
setHTML(h('p'), Msg.main_about_p23)
)
)
),
h('div.col-4.col-sm-2',
h('a.card',
h('div.col-6.col-sm-3.col-md-3.col-lg-3',
h('a.card', {href : "https://riot.im/app/#/room/#cryptpad:matrix.org"},
h('div.card-body',
setHTML(h('p'), Msg.main_about_p21)
setHTML(h('p'), Msg.main_about_p24)
)
)
),
h('div.col-4.col-sm-2',
h('div.card',
h('div.col-6.col-sm-3.col-md-3.col-lg-3',
h('a.card', {href : "mailto:research@xwiki.com"},
h('div.card-body',
setHTML(h('p'), Msg.main_about_p21)
)
)
),
h('div.col-4.col-sm-2',
h('div.card',
h('div.card-body',
setHTML(h('p'), Msg.main_about_p21)
setHTML(h('p'), Msg.main_about_p25)
)
)
),

View File

@ -13,18 +13,35 @@
.cp-container {
background: #fff;
.cp-iconCont{
h4 {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
div {
.card {
padding: 3.5em 1em 1em 1em;
padding: 4em 1em 0.5em 1em;
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
border-color: #fff;
text-align: center;
margin-bottom: 1em;
&:hover, &:focus {
text-decoration: none;
box-shadow: 0 2px 4px rgba(69, 145, 196, 0.6);
transform: scale(1.05);
}
@media (max-width: 1200px) and (min-width: 769px) {
min-height: 139px;
}
@media (max-width: 768px) and (min-width: 576px){
min-height: 164px;
}
@media (max-width: 496px) {
min-height: 140px;
}
@media (max-width: 335px) {
min-height: 162px;
}
}
&:nth-child(3) {
&:nth-child(2) {
.card {
background-image: url(/customize/images/twitter.svg);
background-repeat: no-repeat;
@ -32,7 +49,7 @@
background-size: 3rem;
}
}
&:nth-child(4) {
&:nth-child(3) {
.card {
background-image: url(/customize/images/issue.svg);
background-repeat: no-repeat;
@ -40,6 +57,22 @@
background-size: 3rem;
}
}
&:nth-child(4) {
.card {
background-image: url(/customize/images/sayhi.svg);
background-repeat: no-repeat;
background-position: 50% 10%;
background-size: 3rem;
}
}
&:nth-child(5) {
.card {
background-image: url(/customize/images/email.svg);
background-repeat: no-repeat;
background-position: 50% 10%;
background-size: 3rem;
}
}
}
}
}

View File

@ -516,8 +516,11 @@ define(function () {
// contact.html
out.main_about_p2 = 'If you have any questions or comments, feel free to reach out!<br/>You can <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>tweet us</a>, open an issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">on <i class="fa fa-github"></i>GitHub</a>. Come say hi on <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">our <i class="fa fa-comment"></i>Matrix channel</a> or IRC (#cryptpad on irc.freenode.net), or <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>send us an email</a>.';
out.main_about_p21 = 'You can';
out.main_about_p22 = 'Tweet us';
out.main_about_p23 = 'open an issue on GitHub';
out.main_about_p24 = 'say Hello (Matrix)';
out.main_about_p25 = 'send us an email';
out.main_about_p26 = 'If you have any questions or comments, feel free to reach out!'
out.main_info = "<h2>Collaborate in Confidence</h2> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; <strong>even from us</strong>.";
out.main_catch_phrase = "The Zero Knowledge Cloud";