Changed the menu, added the logo on top bar

customize.dist/pages.js

@@ -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', [
+        return h('div#main_other', [
-            infopageTopbar(),
-            h('div.container.cp-container', [
             h('center', h('h1', Msg.contact)),
             setHTML(h('p'), Msg.main_about_p2)
-            ]),
-            infopageFooter(),
         ]);
     };
 
@@ -308,30 +241,23 @@ define([
 
     var infopageTopbar = function () {
         return h('div.cp-topbar',
-            h('div.navbar.navbar-toggleable-sm.navbar-light.navbar-inverse',
+            h('div.cp-left',
-            	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('a.navbar-brand', { href: 'index.html'}, [
+                    h( 'img', { src: '/customize/CryptPad-white-logo.svg' })
+            ])
+            ),
+            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('ul.navbar-nav', [
+                    h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, 'What is CryptPad'),
-                            h('li.nav-item', [
+                    h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, 'Blog'),
-                                    h('a.nav-link', { href: '/what-is-cryptpad.html'}, 'What is CryptPad'),
+                    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')
                 ]),
-                            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-right',
-                h('a.cp-register-btn', { href: '/register'}, 'Register'),
-                h('a.cp-login-btn', { href: '/login'}, 'Log in')
             )
         );
     }

customize.dist/src/less2/pages/page-index.less

@@ -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,7 +33,6 @@
 	}
 	.cp-login-btn {
 		color: #fff;
-		margin-left: 0.6em;
 		padding: 0.5em 1em 0.7em 1em;
 		&:hover {
 			transform: scale(1.05);
@@ -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) {
+@media (max-width: 991px) {
-    .collapse.show {
+    #menuCollapse {
-        margin-bottom: -12em;
+        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;
+}