Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/pages.js

@@ -77,25 +77,19 @@ define([
     };
 
     var infopageTopbar = function () {
-        return h('div.cp-topbar',
+        return h('nav.navbar.navbar-toggleable-md',
-            h('div',
-                h('a.navbar-brand', { href: 'index.html'}, [
-                    h( 'img', { src: '/customize/CryptPad-white-logo.svg' })
-            ])
-            ),
-            h('div.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.justify-content-end.flex-column#menuCollapse', [  
+                    h('a.navbar-brand', { href: '/'}),
+                h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [  
                     h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad),
                     h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
                     h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact),
                     h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about),
-                    h('a.cp-login-btn', { href: '/login'}, Msg.login_login),
+                    h('a.nav-item.nav-link.cp-login-btn', { href: '/login'}, Msg.login_login),
-                    h('a.cp-register-btn', { href: '/register'}, Msg.login_register)
+                    h('a.nav-item.nav-link.cp-register-btn', { href: '/register'}, Msg.login_register)
                 ])
-            )
         );
     };
 
@@ -138,9 +132,9 @@ define([
                         setHTML(h('div#bio'), '')
                     ]),
                     h('div.col-md-4', [
-                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('img.bio-avatar', {'src': '/customize/images/ludovic.jpg'}),
                         h('h3', "Ludovic Dubost"),
-                        setHTML(h('div#bio'), '')
+                        setHTML(h('div#bio'), '<p>A graduate of PolyTech (X90) and Telecom School in Paris, Ludovic Dubost started his career as a software architect for Netscape Communications Europe. He then became CTO of NetValue, one of the first French start-ups that went public. He left NetValue after the company was purchased by Nielsen/NetRatings and in 2004 launched XWiki, the next generation wiki.</p><p>Since the very beginning, Ludovic has been immensely helpful to the CryptPad project. He believed in the idea when there was nothing more than the collaborative pad and his help with sales strategy for the project.</p>')
                     ])
                 ]),
             ]),
@@ -280,9 +274,11 @@ define([
                                         if (showingMore) {
                                             $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
                                             $('.cp-callout-more-moremsg').removeClass('cp-hidden');
+                                            if ( $( window ).width() >991 ) $('.navbar').css('margin-top','-1em');
                                         } else {
                                             $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden');
                                             $('.cp-callout-more-moremsg').addClass('cp-hidden');
+                                            $('.navbar').css('margin-top','0');
                                         }
                                         showingMore = !showingMore;
                                     }

customize.dist/src/less/alertify.less

@@ -1,282 +0,0 @@
-@import "./variables.less";
-
-/*  Logs are shown to inform the user that something has happened
-    They are only displayed briefly
-*/
-.alertify-logs {
-    @media print {
-        visibility: hidden;
-    }
-    > * {
-        padding: @padding-base @padding-base * 4;
-        color: @alertify-fore;
-
-        font-weight: bold;
-        font-size: large;
-
-        box-shadow: @box-shadow;
-        border-radius: @border-radius;
-        &, &.default {
-            // FIXME
-            background: rgba(0, 0, 0, .8);
-        }
-        &.error {
-            background: @danger-color;
-        }
-        &.success {
-            background: @success-color;
-            color: @success-fore;
-        }
-    }
-}
-
-.alertify {
-    position: fixed;
-    background-color: @alertify-bg;
-    color: @alertify-fg;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-
-    &.hide {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &, &.show {
-        box-sizing: border-box;
-        transition: all .33s cubic-bezier(.25, .8, .25, 1);
-    }
-
-    &, * {
-        box-sizing: border-box;
-    }
-
-    .dialog {
-       padding: 12px;
-    }
-
-    .dialog, .alert {
-        .bright {
-            color: @light-base;
-        }
-
-        & > div {
-            background-color: @alertify-dialog-bg;
-            border-radius: 5px;
-            &.half {
-                width: 50%;
-                @media (max-width: @media-medium-screen) {
-                    width: 100%;
-                }
-            }
-        }
-
-        width: 100%;
-        margin: 0 auto;
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-
-        > * {
-            width: 30%;
-            width: 500px;
-            max-width: 95%;
-            margin: 0 auto;
-            text-align: center;
-            padding: @padding-base;
-            background: #fff;
-            // FIXME
-            box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
-        }
-
-        .msg {
-          padding: @padding-base;
-          margin-bottom: @padding-base;
-          margin: 0;
-          text-align: left;
-        }
-
-        input:not(.form-control){
-            background-color: @alertify-input-bg;
-            color: @alertify-input-fg;
-
-            border: 0px;
-            border-radius: 5px;
-
-            margin-bottom: 15px;
-            width: 100%;
-            font-size: 100%;
-            padding: @padding-base;
-            &:focus {
-                //outline-offset: -2px;
-            }
-        }
-        nav {
-
-            text-align: right;
-
-            button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
-
-                background-color: @alertify-btn-bg;
-                box-sizing: border-box;
-                position: relative;
-                outline: 0;
-                border: 0;
-                display: inline-block;
-                align-items: center;
-                padding: 0 6px;
-                margin: 6px 8px;
-                line-height: 36px;
-                min-height: 36px;
-                white-space: nowrap;
-                min-width: 88px;
-                text-align: center;
-                text-transform: uppercase;
-                font-size: 14px;
-                text-decoration: none;
-                cursor: pointer;
-
-                color: @alertify-btn-fg;
-                border: 1px solid @alertify-base;
-                border-radius: 5px;
-
-                &.safe, &.danger {
-                    color: @old-base;
-                    white-space: normal;
-                    font-weight: bold;
-                }
-                &.danger {
-                    background-color: @cp-red;
-                    &:hover, &:active {
-                        background-color: lighten(@cp-red, 5%);
-                    }
-                }
-
-                &.safe {
-                    background-color: @cp-green;
-                    &:hover, &:active {
-                        background-color: lighten(@cp-green, 10%);
-                    }
-                }
-
-                &:hover, &:active {
-                    background-color: @alertify-btn-bg-hover;
-                }
-
-                &:focus {
-                    border: 1px dotted @alertify-base;
-                }
-                &::-moz-focus-inner {
-                    border:0;
-                }
-            }
-
-            button.btn {
-                margin: 6px 4px;
-            }
-        }
-    }
-}
-
-.alertify-logs {
-
-    position: fixed;
-    z-index: 99999;
-
-    &.bottom, &:not(.top) {
-        bottom: 16px;
-        // Bottom left placement. Default. Use for transitions.
-        &.left, &:not(.right) {
-            > * {
-
-            }
-        }
-        // Top right placement
-        &.right {
-            > * {
-
-            }
-        }
-    }
-
-    // All left positions.
-    &.left, &:not(.right) {
-        left: 16px;
-        > * {
-            float: left;
-            transform: translate3d(0, 0, 0);
-            height: auto;
-
-            &.show {
-                left: 0;
-            }
-            &, &.hide {
-                left: -110%;
-            }
-        }
-    }
-
-    &.right {
-        right: 16px;
-        > * {
-            float: right;
-            transform: translate3d(0, 0, 0);
-            &.show {
-                right: 0;
-                opacity: 1;
-            }
-            &, &.hide {
-                right: -110%;
-                opacity: 0;
-            }
-        }
-    }
-
-    &.top {
-        top: 0;
-        // Top left placement, use for transitions.
-        &.left, &:not(.right) {
-            > * {
-
-            }
-        }
-        // Top right placement, use for transitions
-        &.right {
-            > * {
-
-            }
-        }
-    }
-
-    > * {
-        box-sizing: border-box;
-        transition: all .4s cubic-bezier(.25, .8, .25, 1);
-        position: relative;
-        clear: both;
-        backface-visibility: hidden;
-        perspective: 1000;
-
-        & {
-            max-height: 0;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        &.show {
-            margin-top: @padding-base;
-            opacity: 1;
-            max-height: 1000px;
-            padding: @padding-base;
-            pointer-events: auto;
-        }
-    }
-
-}

customize.dist/src/less/cryptpad.less

@@ -1,7 +1,7 @@
 @import "./variables.less";
 @import "./mixins.less";
 
-@import "./alertify.less";
+@import "../less2/include/alertify.less";
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
@@ -10,6 +10,8 @@
 
 @toolbar-green: #5cb85c;
 
+.alertify_main();
+
 html.cp, .cp body {
     font-size: .875em;
     background-color: @page-white; //@base;

customize.dist/src/less/variables.less

@@ -1,21 +1,21 @@
 @import (once) '../less2/include/colortheme.less';
+@import (once) '../less2/include/browser.less';
 
-@base: #fff; //#f5f5f5;
+@base: @colortheme_base;
 @dark-base: darken(@base, 20%);
 @less-dark-base: darken(@base, 10%);
-@light-base: lighten(@base, 20%);
+@light-base: @colortheme_light-base;
 @less-light-base: lighten(@base, 10%);
 @fore: #555;
-@old-base: #302B28;
+@old-base: @colortheme_old-base;
-@old-fore: #fafafa;
+@old-fore: @colortheme_old-fore;
 
 @main-font-size: 16px;
 
-@cp-green: #46E981;
+@cp-green: @colortheme_cp-green;
 @cp-accent: lighten(@cp-green, 20%);
 
-//@cp-red: #FF0073; // remove red
+@cp-red: @colortheme_cp-red;
-@cp-red: #FA5858; // remove red
 @cp-outline: #444;
 
 @cp-orange: #FE9A2E;
@@ -33,46 +33,18 @@
 @cp-link-visited: @cp-light-blue;
 @cp-link-hover: darken(@cp-light-blue, 10%);
 
-// alertify things
-
-@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
-@padding-base: 12px;
-
-@success-color: @cp-green;
-@success-fore: @base;
-@danger-color: @cp-red;
-
-@text-color: rgba(0, 0, 0, .8);
-@border-radius: 1px;
-
-@alertify-fore: @old-fore;
-@alertify-base: @old-base;
-
-@alertify-dialog-bg: #444;
-@alertify-dialog-fg: @old-fore;
-
-@alertify-btn-fg: @old-fore;
-
-@alertify-btn-bg: rgba(200, 200, 200, 0.05);
-@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
-
-@alertify-bg: rgba(0, 0, 0, .3);
-@alertify-fg: @old-fore;
-
-@alertify-input-bg: @old-base;
-@alertify-input-fg: @old-fore;
 
 @slide-default-bg: #000;
 
 @bg-loading: #222;
 @color-loading: @old-fore;
 
-@media-not-big: 800px;
+@media-not-big: @browser_media-not-big;
-@media-not-small: 801px;
+@media-not-small: @browser_media-not-small;
 
-@media-short-screen: 450px;
+@media-short-screen: @browser_media-short-screen;
-@media-narrow-screen: 400px;
+@media-narrow-screen: @browser_media-narrow-screen;
-@media-medium-screen: 600px;
+@media-medium-screen: @browser_media-medium-screen;
 
 
 // Dropdown

customize.dist/src/less2/include/alertify.less

@@ -0,0 +1,304 @@
+@import (once) "./colortheme.less";
+@import (once) "./browser.less";
+
+.alertify_main () {
+    @alertify-fore: @colortheme_old-fore;
+    @alertify-base: @colortheme_old-base;
+
+    @alertify-dialog-bg: #444;
+    @alertify-dialog-fg: @colortheme_old-fore;
+
+    @alertify-btn-fg: @colortheme_old-fore;
+
+    @alertify-btn-bg: rgba(200, 200, 200, 0.05);
+    @alertify-btn-bg-hover: rgba(200, 200, 200, .15);
+
+    @alertify-bg: rgba(0, 0, 0, .3);
+    @alertify-fg: @colortheme_old-fore;
+
+    @alertify-input-bg: @colortheme_old-base;
+    @alertify-input-fg: @colortheme_old-fore;
+
+    @alertify_padding-base: 12px;
+    @alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
+    @alertify_border-radius: 1px;
+
+    // Logs to show that something has happened
+    // These show only once
+
+    .alertify-logs {
+        @media print {
+            visibility: hidden;
+        }
+        > * {
+            padding: @alertify_padding-base @alertify_padding-base * 4;
+            color: @alertify-fore;
+
+            font-weight: bold;
+            font-size: large;
+
+            box-shadow: @alertify_box-shadow;
+            border-radius: @alertify_border-radius;
+            &, &.default {
+                // FIXME
+                background: rgba(0, 0, 0, .8);
+            }
+            &.error {
+                background: @colortheme_cp-red;
+            }
+            &.success {
+                background: @colortheme_cp-green;
+            }
+        }
+    }
+
+    .alertify {
+        position: fixed;
+        background-color: @alertify-bg;
+        color: @alertify-fg;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 99999;
+
+        &.hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &, &.show {
+            box-sizing: border-box;
+            transition: all .33s cubic-bezier(.25, .8, .25, 1);
+        }
+
+        &, * {
+            box-sizing: border-box;
+        }
+
+        .dialog {
+            padding: 12px;
+        }
+
+        .dialog, .alert {
+            .bright {
+                color: @colortheme_light-base;
+            }
+
+            & > div {
+                background-color: @alertify-dialog-bg;
+                border-radius: 5px;
+                &.half {
+                    width: 50%;
+                    @media (max-width: @browser_media-medium-screen) {
+                        width: 100%;
+                    }
+                }
+            }
+
+            width: 100%;
+            margin: 0 auto;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+
+            > * {
+                width: 30%;
+                width: 500px;
+                max-width: 95%;
+                margin: 0 auto;
+                text-align: center;
+                padding: @alertify_padding-base;
+                background: #fff;
+                // FIXME
+                box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
+            }
+
+            .msg {
+                padding: @alertify_padding-base;
+                margin-bottom: @alertify_padding-base;
+                margin: 0;
+                text-align: left;
+            }
+
+            input:not(.form-control){
+                background-color: @alertify-input-bg;
+                color: @alertify-input-fg; 
+                border: 0px;
+                border-radius: 5px;
+
+                margin-bottom: 15px;
+                width: 100%;
+                font-size: 100%;
+                padding: @alertify_padding-base;
+                &:focus {
+                    //outline-offset: -2px;
+                }
+            }
+            nav {
+
+                text-align: right;
+
+                button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+
+                    background-color: @alertify-btn-bg;
+                    box-sizing: border-box;
+                    position: relative;
+                    outline: 0;
+                    border: 0;
+                    display: inline-block;
+                    align-items: center;
+                    padding: 0 6px;
+                    margin: 6px 8px;
+                    line-height: 36px;
+                    min-height: 36px;
+                    white-space: nowrap;
+                    min-width: 88px;
+                    text-align: center;
+                    text-transform: uppercase;
+                    font-size: 14px;
+                    text-decoration: none;
+                    cursor: pointer;
+
+                    color: @alertify-btn-fg;
+                    border: 1px solid @alertify-base;
+                    border-radius: 5px;
+
+                    &.safe, &.danger {
+                        color: @colortheme_old-base;
+                        white-space: normal;
+                        font-weight: bold;
+                    }
+                    &.danger {
+                        background-color: @colortheme_cp-red;
+                        &:hover, &:active {
+                            background-color: lighten(@colortheme_cp-red, 5%);
+                        }
+                    }
+
+                    &.safe {
+                        background-color: @colortheme_cp-green;
+                        &:hover, &:active {
+                            background-color: lighten(@colortheme_cp-green, 10%);
+                        }
+                    }
+
+                    &:hover, &:active {
+                        background-color: @alertify-btn-bg-hover;
+                    }
+
+                    &:focus {
+                        border: 1px dotted @alertify-base;
+                    }
+                    &::-moz-focus-inner {
+                        border:0;
+                    }
+                }
+
+                button.btn {
+                    margin: 6px 4px;
+                }
+            }
+        }
+    }
+
+    .alertify-logs {
+
+        position: fixed;
+        z-index: 99999;
+
+        &.bottom, &:not(.top) {
+            bottom: 16px;
+            // Bottom left placement. Default. Use for transitions.
+            &.left, &:not(.right) {
+                > * {
+
+                }
+            }
+            // Top right placement
+            &.right {
+                > * {
+
+                }
+            }
+        }
+
+        // All left positions.
+        &.left, &:not(.right) {
+            left: 16px;
+            > * {
+                float: left;
+                transform: translate3d(0, 0, 0);
+                height: auto;
+
+                &.show {
+                    left: 0;
+                }
+                &, &.hide {
+                    left: -110%;
+                }
+            }
+        }
+
+        &.right {
+            right: 16px;
+            > * {
+                float: right;
+                transform: translate3d(0, 0, 0);
+                &.show {
+                    right: 0;
+                    opacity: 1;
+                }
+                &, &.hide {
+                    right: -110%;
+                    opacity: 0;
+                }
+            }
+        }
+
+        &.top {
+            top: 0;
+            // Top left placement, use for transitions.
+            &.left, &:not(.right) {
+                > * {
+
+                }
+            }
+            // Top right placement, use for transitions
+            &.right {
+                > * {
+
+                }
+            }
+        }
+
+        > * {
+            box-sizing: border-box;
+            transition: all .4s cubic-bezier(.25, .8, .25, 1);
+            position: relative;
+            clear: both;
+            backface-visibility: hidden;
+            perspective: 1000;
+
+            & {
+                max-height: 0;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            &.show {
+                margin-top: @alertify_padding-base;
+                opacity: 1;
+                max-height: 1000px;
+                padding: @alertify_padding-base;
+                pointer-events: auto;
+            }
+        }
+
+    }
+}

customize.dist/src/less2/include/browser.less

@@ -0,0 +1,9 @@
+// These things are not for design but rather for working in different browser
+// types and window sizes
+
+@browser_media-not-big: 800px;
+@browser_media-not-small: 801px;
+
+@browser_media-short-screen: 450px;
+@browser_media-narrow-screen: 400px;
+@browser_media-medium-screen: 600px;

customize.dist/src/less2/include/colortheme.less

@@ -2,6 +2,14 @@
 @colortheme_link-color-visited: #005999;
 @colortheme_info-background: #fafafa;
 
+@colortheme_old-base: #302B28;
+@colortheme_old-fore: #fafafa;
+
+@colortheme_base: #fff;
+@colortheme_light-base: lighten(@colortheme_base, 20%);
+
+@colortheme_cp-red: #FA5858; // remove red
+@colortheme_cp-green: #46E981;
 
 @colortheme_pad-bg: #1c4fa0;
 @colortheme_pad-color: #fff;

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

@@ -62,43 +62,39 @@
         //font-style: italic;
     }
 }
-.cp-topbar { 
+.navbar {
-    //position: absolute;
+    width: 100%;
-    background: transparent;
+    margin-top: -1em;
+    @media only screen and (max-device-width: 991px) {
+        margin-top: 0;
+    }
+    .navbar-brand {
+        background: url(/customize/CryptPad-white-logo.svg) no-repeat;
+        width: 250px;
+        height: 50px;
+    }
     a {
         color: #fff;
-        padding: 0.5em 0.5em 0.5em 0.5em;
+        border: 2px solid transparent;
+        &:visited {
+            color: rgba(255,255,255,.8);
+        };
+    }
+    .nav-link {
+        padding: 0.5em 0.7em;
+        &:hover {
+            transform: scale(1.05);
+        };
+    }
+    .cp-register-btn {
+            border: 2px solid #fff;
     }
     button:focus {
         outline: none;
     }
-    .collapse {
+    .navbar-toggler {
-        a {
+        margin-top: 10px;
-            display: block;
+        color: #fff;
-        }
-    }
-    .navbar-toggler-left {
-        top: -0.59rem;
-    }
-    .cp-left {
-        .fa-bars {
-            font-size: 1.6rem;
-        }
-    }
-    a.cp-logo {
-        display: none;
-    }
-    img {
-        height: 5vh;
-        margin-top: -4px;
-    }
-    &:hover {
-        img {
-            transform: none;
-        }
-    };
-    a.cp-logo {
-        display: none;
     }
 }
 @callout-padding: 15px;
@@ -119,9 +115,9 @@ a:hover {
         color: black;
         &:hover { text-decoration-line: none; }
     }
-    div {
+    div h4 {
         @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
-            left: 4.5em !important;
+            font-size: 1.3em;
         }
     }
 }
@@ -192,11 +188,6 @@ h4 {
         }
     }
 }
-.navbar-inverse .navbar-toggler {
-    border-color: transparent;
-    margin-top: -12px;
-    padding: 0;
-}
 @media (min-width: 576px) and (max-width: 767px) {
     .container {
         padding-left: 0;
@@ -208,22 +199,25 @@ h4 {
 }
 @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 {
+    .cp-register-btn {
-        padding: 0.5em;
+        margin-right: 13px;
+        margin-left: 83vw;
+        text-align: center;
      }
 }
-.collapsing a {
+@media (max-width: 687px) {
-    text-align: right !important;
+    .cp-register-btn {
+         margin-left: 75vw;
+    }
 }
+@media (max-width: 467px) {
+    .cp-register-btn {
+         margin-left: 63vw;
+    }
+}
+

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

@@ -1,8 +1,10 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
+@import (once) "../include/alertify.less";
 
 .infopages_main();
 .infopages_topbar();
+.alertify_main();
 
 .form-group {
     .extra {

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

@@ -1,8 +1,10 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
+@import (once) "../include/alertify.less";
 
 .infopages_main();
 .infopages_topbar();
+.alertify_main();
 
 .cp-container {
     .form-group {