Footer redesign

customize.dist/pages.js

@@ -64,34 +64,43 @@ define([
 
     Pages.versionString = "CryptPad v3.23.1 (XerusDaamsi's revenge)";
 
+    Msg.docs_link = "Documentation"; // XXX breaks the about menu
+    // XXX Remove FAQ from translations and remove FAQ page
+    // XXX Add FAQ to docs
+    Msg.footer_team = "Contributors" // XXX existing key
+    Msg.footer_tos = "Terms of Service" // XXX existing key
+
     // used for the about menu
     Pages.imprintLink = AppConfig.imprint ? footLink(imprintUrl, 'imprint') : undefined;
     Pages.privacyLink = footLink(AppConfig.privacy, 'privacy');
     Pages.githubLink = footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub');
-    Pages.faqLink = footLink('/faq.html', 'faq_link');
+    Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link');
 
     Pages.infopageFooter = function () {
         return h('footer', [
             h('div.container', [
                 h('div.row', [
-                    footerCol(null, [
-                        h('div.cp-bio-foot', [
-                            h('p', Msg.main_footerText),
-                            languageSelector()
+                    // XXX remove this footerCol and just make a h('div.col-6.col-sm-3',...
+                    h('div.col-6.col-sm-3', [
+                        h('div.cp-logo-foot', [
+                            h('img', {
+                                src: '/customize/CryptPad_logo.svg',
+                                "aria-hidden": true
+                            }),
+                            h('span.logo-font', 'CryptPad')
                         ])
                     ], ''),
                     footerCol('footer_product', [
                         footLink('/what-is-cryptpad.html', 'topbar_whatIsCryptpad'),
-                        Pages.faqLink,
+                        Pages.docsLink,
+                        footLink('/features.html', 'features'),
                         Pages.githubLink,
                         footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate'),
                     ]),
                     footerCol('footer_aboutUs', [
-                        /*footLink('https://blog.cryptpad.fr', 'blog'), */
-                        footLink('http://www.xwiki.com', null, 'XWiki SAS'),
-                        footLink('https://www.open-paas.org', null, 'OpenPaaS'),
-                        footLink('/about.html', 'footer_team'),
                         footLink('/contact.html', 'contact'),
+                        footLink('https://github.com/xwiki-labs/cryptpad/wiki/Contributors', 'footer_team'),
+                        footLink('http://www.xwiki.com', null, 'XWiki SAS'),
                     ]),
                     footerCol('footer_legal', [
                         footLink('/terms.html', 'footer_tos'),
@@ -100,7 +109,10 @@ define([
                     ]),
                 ])
             ]),
-            h('div.cp-version-footer', Pages.versionString)
+            h('div.cp-version-footer', [
+                languageSelector(),
+                h('span', Pages.versionString)
+            ])
         ]);
     };
 

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

@@ -80,40 +80,48 @@ body {
         }
     }
     footer {
-        background-color: @cryptpad_color_blue;
+        @footer-color: #d9d9d9; // XXX move this
+
+        background-color: @footer-color;
+        padding-top: 20px;
         .container {
-            .col {
-                margin-top: 1em;
-            }
+            margin-bottom: 20px;
             a {
-            color: #fff;
+                color: @colortheme_logo-2;
                 &:visited {
-                color: darken(#fff, 5%);
+                    color: @colortheme_logo-2;
                 };
             }
-        margin-bottom: 1em;
-        ul.list-unstyled {
-                margin-top: 1em;
-                text-align: center;
         }
+        .cp-logo-foot {
+            display: flex;
+            flex-flow: column;
+            width: 100%;
+            align-items: center;
+            img {
+                max-width: 60px;
+                display: block;
             }
-        .cp-bio-foot {
-            background-image: url(/customize/CryptPad-white-logo.svg);
-            background-size: 100%;
-            background-repeat: no-repeat;
-            p {
-                color: #fff;
-                padding-top: 30%;
-                margin-bottom: 0;
+            .logo-font {
+                display: block;
+                font-family: "IBM Plex Mono";
+                font-size: 1.5rem;
+                color: @colortheme_logo-2;
+                margin-bottom: 10px;
             }
 
         }
         .cp-version-footer {
-            background-color: @cryptpad_color_blue;
-            color: #fff;
-            text-align: center;
+            background-color: @footer-color;
+            display: flex;
+            flex-flow: column;
+            align-items: center;
             padding: 0.5em;
-            border-top: 2px solid #fff;
+            border-top: 1px solid #fff;
+            select {
+                min-width: 0;
+                margin-bottom: 10px;
+            }
         }
     }
 
@@ -219,13 +227,5 @@ body {
             text-align: center;
         }
     }
-
-    //footer general styles
-
-    .footer-title {
-        font-weight: bold;
-        font-size: 1.2em;
-        color: #1E1F1F;
-    }
 }