Changed the menu, added the logo on top bar
CatalinScr
parent
69c470330f
commit
89ab82c0e2
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -79,69 +79,6 @@ define([
|
|||
];
|
||||
};
|
||||
|
||||
var footerCol = function (title, L, literal) {
|
||||
return h('div.col', [
|
||||
h('ul.list-unstyled', [
|
||||
h('li.title', {
|
||||
'data-localization': title,
|
||||
}, title? Msg[title]: literal )
|
||||
].concat(L.map(function (l) {
|
||||
return h('li', [ l ]);
|
||||
}))
|
||||
)
|
||||
]);
|
||||
};
|
||||
|
||||
var footLink = function (ref, loc, text) {
|
||||
var attrs = {
|
||||
href: ref,
|
||||
};
|
||||
if (!/^\//.test(ref)) {
|
||||
attrs.target = '_blank';
|
||||
attrs.rel = 'noopener noreferrer';
|
||||
}
|
||||
if (loc) {
|
||||
attrs['data-localization'] = loc;
|
||||
text = Msg[loc];
|
||||
}
|
||||
return h('a', attrs, text);
|
||||
};
|
||||
|
||||
var infopageFooter = function () {
|
||||
return h('footer', [
|
||||
h('div.container', [
|
||||
h('div.row', [
|
||||
footerCol(null, [
|
||||
footLink('/about.html', 'about'),
|
||||
footLink('/terms.html', 'terms'),
|
||||
footLink('/privacy.html', 'privacy'),
|
||||
], 'CryptPad'),
|
||||
footerCol('footer_applications', [
|
||||
footLink('/drive/', 'main_drive'),
|
||||
footLink('/pad/', 'main_richText'),
|
||||
footLink('/code/', 'main_code'),
|
||||
footLink('/slide/', 'main_slide'),
|
||||
footLink('/poll/', 'main_poll'),
|
||||
footLink('/whiteboard/', null, Msg.type.whiteboard)
|
||||
]),
|
||||
footerCol('footer_aboutUs', [
|
||||
footLink('https://blog.cryptpad.fr', 'blog'),
|
||||
footLink('https://labs.xwiki.com', null, 'XWiki Labs'),
|
||||
footLink('http://www.xwiki.com', null, 'XWiki SAS'),
|
||||
footLink('https://www.open-paas.org', null, 'OpenPaaS')
|
||||
]),
|
||||
footerCol('footer_contact', [
|
||||
footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'),
|
||||
footLink('https://twitter.com/cryptpad', null, 'Twitter'),
|
||||
footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'),
|
||||
footLink('/contact.html', null, 'Email')
|
||||
])
|
||||
])
|
||||
]),
|
||||
h('div.cp-version-footer', "CryptPad v1.13.0 (Naiad)")
|
||||
]);
|
||||
};
|
||||
|
||||
Pages['/about.html'] = function () {
|
||||
return h('div#main_other', [
|
||||
h('center', [
|
||||
|
|
@ -192,13 +129,9 @@ define([
|
|||
};
|
||||
|
||||
Pages['/contact.html'] = function () {
|
||||
return h('div#cp-main.cp-page-contact', [
|
||||
infopageTopbar(),
|
||||
h('div.container.cp-container', [
|
||||
h('center', h('h1', Msg.contact)),
|
||||
setHTML(h('p'), Msg.main_about_p2)
|
||||
]),
|
||||
infopageFooter(),
|
||||
return h('div#main_other', [
|
||||
h('center', h('h1', Msg.contact)),
|
||||
setHTML(h('p'), Msg.main_about_p2)
|
||||
]);
|
||||
};
|
||||
|
||||
|
|
@ -308,30 +241,23 @@ define([
|
|||
|
||||
var infopageTopbar = function () {
|
||||
return h('div.cp-topbar',
|
||||
h('div.navbar.navbar-toggleable-sm.navbar-light.navbar-inverse',
|
||||
h('button.navbar-toggler.navbar-toggler-left', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
|
||||
[h('i.fa.fa-bars ')
|
||||
]),
|
||||
h('div.collapse.navbar-collapse#menuCollapse', [
|
||||
h('ul.navbar-nav', [
|
||||
h('li.nav-item', [
|
||||
h('a.nav-link', { href: '/what-is-cryptpad.html'}, 'What is CryptPad'),
|
||||
]),
|
||||
h('li.nav-item', [
|
||||
h('a.nav-link', { href: 'https://blog.cryptpad.fr/'}, 'Blog'),
|
||||
]),
|
||||
h('li.nav-item', [
|
||||
h('a.nav-link', { href: '/contact.html'}, 'Contact'),
|
||||
]),
|
||||
h('li.nav-item', [
|
||||
h('a.nav-link', { href: '/about.html'}, 'About'),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
h('div.cp-left',
|
||||
h('a.navbar-brand', { href: 'index.html'}, [
|
||||
h( 'img', { src: '/customize/CryptPad-white-logo.svg' })
|
||||
])
|
||||
),
|
||||
h('div.cp-right',
|
||||
h('a.cp-register-btn', { href: '/register'}, 'Register'),
|
||||
h('a.cp-login-btn', { href: '/login'}, 'Log in')
|
||||
h('div.cp-right.navbar.navbar-toggleable-md.navbar-light.navbar-inverse',
|
||||
h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
|
||||
[h('i.fa.fa-bars ')
|
||||
]),
|
||||
h('div.collapse.navbar-collapse#menuCollapse', [
|
||||
h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, 'What is CryptPad'),
|
||||
h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, 'Blog'),
|
||||
h('a.nav-item.nav-link', { href: '/contact.html'}, 'Contact'),
|
||||
h('a.nav-item.nav-link', { href: '/about.html'}, 'About'),
|
||||
h('a.cp-login-btn', { href: '/login'}, 'Log in'),
|
||||
h('a.cp-register-btn', { href: '/register'}, 'Register')
|
||||
]),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
//@import (once) "./variables.less";
|
||||
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme.less";
|
||||
|
||||
|
|
@ -5,15 +7,6 @@
|
|||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
|
||||
.cp-topbar {
|
||||
background: transparent;
|
||||
position: fixed;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@background_lighter: rgba(0,0,0,0.1);
|
||||
@background_darker: rgba(0,0,0,0.4);
|
||||
&#cp-main {
|
||||
|
|
@ -40,12 +33,11 @@
|
|||
}
|
||||
.cp-login-btn {
|
||||
color: #fff;
|
||||
margin-left: 0.6em;
|
||||
padding: 0.5em 1em 0.7em 1em;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-title {
|
||||
display: flex;
|
||||
|
|
@ -71,6 +63,11 @@
|
|||
}
|
||||
.cp-topbar {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
a {
|
||||
color: #fff;
|
||||
padding: 0.5em 0.5em 0.5em 0.5em;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -87,6 +84,15 @@
|
|||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 5vh;
|
||||
margin-top: -4px;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
transform: none;
|
||||
}
|
||||
};
|
||||
}
|
||||
@callout-padding: 15px;
|
||||
a:hover {
|
||||
|
|
@ -181,6 +187,8 @@ h4 {
|
|||
}
|
||||
.navbar-inverse .navbar-toggler {
|
||||
border-color: transparent;
|
||||
margin-top: -12px;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.container {
|
||||
|
|
@ -191,8 +199,24 @@ h4 {
|
|||
left: 5px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.collapse.show {
|
||||
margin-bottom: -12em;
|
||||
@media (max-width: 991px) {
|
||||
#menuCollapse {
|
||||
position: absolute;
|
||||
left: -131px;
|
||||
margin-top: 0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
#menuCollapse a {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.navbar-nav a {
|
||||
text-align: right !important;
|
||||
}
|
||||
.cp-right .cp-login-btn {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
.collapsing a {
|
||||
text-align: right !important;
|
||||
}
|
||||
Loading…
Reference in New Issue