Fix footer

- make responsive behavior more robust
- add placeholder translation
- remove old code

customize.dist/pages.js

@@ -167,57 +167,7 @@ define([
     Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link');
     Pages.roadmapLink = footLink(customURLs.roadmap, 'footer_roadmap');
 
-    Pages.infopageOldFooter = function () { // XXX DB: not used, kept to copy/paste
-        //var terms = footLink('/terms.html', 'footer_tos'); // FIXME this should be configurable like the other legal pages
-        var legalFooter;
-
-        // only display the legal part of the footer if it has content
-        if (Pages.termsLink || Pages.privacyLink || Pages.imprintLink) {
-            legalFooter = footerCol('footer_legal', [
-                Pages.termsLink,
-                Pages.privacyLink,
-                Pages.imprintLink,
-            ]);
-        }
-
-        var n = legalFooter ? 3: 4;
-
-        return h('footer', [
-            h('div.container', [
-                h('div.row', [
-                    h('div.col-sm-' + n, [
-                        h('div.cp-logo-foot', [
-                            h('img', {
-                                src: '/customize/CryptPad_logo.svg',
-                                "aria-hidden": true,
-                                alt: ''
-                            }),
-                            h('span.logo-font', 'CryptPad')
-                        ])
-                    ]),
-                    footerCol('footer_product', [
-                        footLink('/what-is-cryptpad.html', 'topbar_whatIsCryptpad'),
-                        Pages.docsLink,
-                        footLink('/features.html', Pages.areSubscriptionsAllowed()? 'pricing': 'features'), // Messages.pricing, Messages.features
-                        Pages.sourceLink,
-                        footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate'),
-                    ], n),
-                    footerCol('footer_aboutUs', [
-                        footLink('https://blog.cryptpad.fr/', 'blog'),
-                        footLink('/contact.html', 'contact'),
-                        footLink('https://github.com/xwiki-labs/cryptpad/wiki/Contributors', 'footer_team'),
-                        footLink('http://www.xwiki.com', null, 'XWiki SAS'),
-                        Pages.roadmapLink,
-                    ], n),
-                    legalFooter,
-                ])
-            ]),
-            h('div.cp-version-footer', [
-                languageSelector(),
-                h('span', "CryptPad " + Pages.versionString)
-            ])
-        ]);
-    };
+    Msg.footer_website = "Project Website"; // XXX
 
     Pages.infopageFooter = function () {
         return h('footer.cp-footer', [
@@ -230,8 +180,11 @@ define([
                     }),
                     h('span.logo-font', 'CryptPad')
                 ]),
-                footLink('https://cryptpad.org', null, 'Website', 'link'),
-                footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon
+                h('div.cp-logo-btns', [
+                    footLink('https://cryptpad.org', null, Msg.footer_website, 'link'),
+                    footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon
+
+                ])
             ]),
             h('div.cp-footer-center', [
                 h('div.cp-footer-language', [

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

@@ -146,51 +146,30 @@ body.html {
     }
     footer {
         background-color: @cp_static-footer;
-        padding: 10px;
         align-self: normal; // override align-items:center from parent in index.html
         box-shadow: inset 0px 7px 15px -7px rgba(0,0,0,0.3);
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-direction: row;
-        @media screen and (max-width: 830px) {
-            flex-direction: column;
-            div {
-                margin-bottom: 10px;
-            }
-        }
+        flex-wrap: wrap;
         .cp-footer-left, .cp-footer-right {
             display: flex;
             flex-direction: row;
+            flex-wrap: wrap;
             align-items: center;
             a {
-                margin-left: 10px;
+                margin-right: 10px;
             }
         }
 
-        a {
-            background-color: @cp_static-card-bg;
-            border-radius: @infopages-radius;
-            padding: 0.5em 0.7em;
-            * {
-                display: inline;
-            }
-            i {
-                margin-right: 5px;
-            }
-            &:hover {
-                color: @cryptpad_text_col;
-            }
-        }
         .cp-logo-foot {
             display: flex;
             flex-flow: row;
-            width: 100%;
             align-items: center;
-            margin-right: 20px;
+            padding: 10px;
             img {
                 max-height: 40px;
-                display: block;
                 margin-right: 10px;
             }
             .logo-font {
@@ -203,7 +182,26 @@ body.html {
 
         }
 
+        .cp-logo-btns {
+            padding: 10px;
+            a {
+                background-color: @cp_static-card-bg;
+                border-radius: @infopages-radius;
+                padding: 0.5em 0.7em;
+                white-space: nowrap;
+                display: inline-block;
+                i {
+                    margin-right: 5px;
+                }
+                &:hover {
+                    color: @cryptpad_text_col;
+                }
+            }
+
+        }
+
         .cp-footer-language {
+            padding: 10px;
             margin-right: 10px;
             i {
                 font-size: 1.3em;
@@ -219,6 +217,7 @@ body.html {
             }
         }
         .cp-footer-version {
+            padding: 10px;
             font-family: 'IBM Plex Mono';
         }
         // .cp-version-footer {