From 657323c80de953d09baec76465b5838dd37ede48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Wed, 30 Mar 2022 11:19:35 +0100
Subject: [PATCH] More responsive nav and footer

---
 customize.dist/pages.js                       | 32 +++++++-------
 .../src/less2/include/infopages.less          | 42 ++++---------------
 .../src/less2/pages/page-index.less           |  6 +--
 3 files changed, 26 insertions(+), 54 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index fe49b3870..25d1b6e94 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -210,9 +210,9 @@ define([
                     h('span.logo-font', 'CryptPad')
                 ]),
                 footLink('https://cryptpad.org', null, 'Website', 'link'),
-                footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate') // XXX DB: add OpenCollective icon
+                footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon
             ]),
-            h('.div.cp-footer-center', [
+            h('div.cp-footer-center', [
                 h('div.cp-footer-language', [
                     h('i.fa.fa-language', {'aria-hidden': 'true'}),
                     languageSelector()
@@ -252,17 +252,16 @@ define([
             ]);
         }
 
-/*
-        var button = h('button.navbar-toggler', {
-            'type':'button',
-            /*'data-toggle':'collapse',
-            'data-target':'#menuCollapse',
-            'aria-controls': 'menuCollapse',
-            'aria-expanded':'false',
-            'aria-label':'Toggle navigation'
-        }, h('i.fa.fa-bars ')); */
-
-        // XXX button to collapse navbar on small screens
+        // var button = h('button.navbar-toggler', {
+        //     'type':'button',
+        //     'data-toggle':'collapse',
+        //     'data-target':'#menuCollapse',
+        //     'aria-controls': 'menuCollapse',
+        //     'aria-expanded':'false',
+        //     'aria-label':'Toggle navigation'
+        // }, h('i.fa.fa-bars '));
+
+        // // XXX button to collapse navbar on small screens
         // $(button).click(function () {
         //     if ($('#menuCollapse').is(':visible')) {
         //         return void $('#menuCollapse').slideUp();
@@ -279,14 +278,15 @@ define([
             //         alt: ''
             //     }), 'CryptPad'
             // ]),
-            //button, XXX collapse button
-            h('div', [
+            // button, // XXX collapse button
+            // add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button
+            [
                 // XXX remove about page
                 // h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about),
                 h('a.nav-item.nav-link', { href: '/features.html'}, Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features),
                 h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'},
                     [h('i.fa.fa-book', {'aria-hidden':'true'}),Msg.docs_link]),
-            ].concat(rightLinks))
+            ].concat(rightLinks)
         );
     };
 
diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less
index 9bb56f6dc..d87ddb980 100644
--- a/customize.dist/src/less2/include/infopages.less
+++ b/customize.dist/src/less2/include/infopages.less
@@ -112,7 +112,7 @@ body.html {
             border: none;
             padding: 10px 20px;
             margin-right: 10px;
-            border-radius: 0px;
+            border-radius: @infopages-radius;
             cursor: pointer;
             &:hover, &:focus {
                 background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
@@ -145,7 +145,6 @@ body.html {
         }
     }
     footer {
-
         background-color: @cp_static-footer;
         padding: 10px;
         align-self: normal; // override align-items:center from parent in index.html
@@ -153,15 +152,13 @@ body.html {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        // .container {
-        //     margin-bottom: 20px;
-        //     a {
-        //         color: @cp_static-link;
-        //         &:visited {
-        //             color: @cp_static-link;
-        //         }
-        //     }
-        // }
+        flex-direction: row;
+        @media screen and (max-width: 830px) {
+            flex-direction: column;
+            div {
+                margin-bottom: 10px;
+            }
+        }
         .cp-footer-left, .cp-footer-right {
             display: flex;
             flex-direction: row;
@@ -267,7 +264,7 @@ body.html {
         }
         .nav-link {
             padding: 0.5em 0.7em;
-            margin-left: 10px;
+            margin: 5px;
             color: @cp_static-link;
             display: inline-block;
             &:hover {
@@ -294,26 +291,5 @@ body.html {
             color: @cp_static-topbar-fg;
         }
     }
-    @media (max-width: 1000px) {
-        #menuCollapse {
-            text-align: right;
-    /*        @media (min-width: 576px) {
-                top: 100%;
-                background: rgba(255,255,255,0.8);
-                position: absolute;
-                right: 0px;
-                padding: 0 20px;
-                z-index: 1;
-            }
-    */
-        }
-        .navbar-nav a {
-            text-align: right !important;
-        }
-        .cp-register-btn {
-            margin-right: 13px;
-            text-align: center;
-        }
-    }
 }
 
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 157e1d886..faedf47fc 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -10,11 +10,7 @@
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
-        .container {
-            @media only screen and (max-device-width : 576px) {
-                margin-top: 6em;
-            }
-        }
+
         & > .cp-container {
             flex: 1;
             display: flex;