From 44cd235f481da71a904283d22e54f9ca1b5a7f10 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 20 Mar 2018 11:05:43 +0100 Subject: [PATCH] Fix CSS with Bootstrap 4 --- customize.dist/pages.js | 45 ++++++++++--------- .../src/less2/include/creation.less | 14 ++++-- .../src/less2/include/infopages.less | 1 + customize.dist/translations/messages.fr.js | 4 +- www/common/common-ui-elements.js | 12 ++--- 5 files changed, 45 insertions(+), 31 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 5178cac17..e8f8c877c 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -92,20 +92,25 @@ define([ ]); } - return h('nav.navbar.navbar-toggleable-md', - 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('a.navbar-brand', { href: '/index.html'}), - h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [ - //h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad), // Moved the FAQ - h('a.nav-item.nav-link', { href: '/faq.html'}, Msg.faq_link), - h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog), - h('a.nav-item.nav-link', { href: '/features.html'}, Msg.features), - h('a.nav-item.nav-link', { href: '/privacy.html'}, Msg.privacy), - h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact), - h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about), - ].concat(rightLinks)) + return h('nav.navbar.navbar-expand-lg', + h('a.navbar-brand', { href: '/index.html'}), + 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 ')), + h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [ + //h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad), // Moved the FAQ + h('a.nav-item.nav-link', { href: '/faq.html'}, Msg.faq_link), + h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog), + h('a.nav-item.nav-link', { href: '/features.html'}, Msg.features), + h('a.nav-item.nav-link', { href: '/privacy.html'}, Msg.privacy), + h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact), + h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about), + ].concat(rightLinks)) ); }; @@ -144,10 +149,10 @@ define([ ]), ]), h('div.row.align-items-center',[ - h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-2.cp-bio-avatar.cp-bio-avatar-right', [ h('img.img-fluid', {'src': '/customize/images/AaronMacSween.jpg'}) ]), - h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-1.cp-profile-det',[ h('h3', "Aaron MacSween"), h('hr'), setHTML(h('div#bioAaron'), '

Aaron transitioned into distributed systems development from a background in jazz and live stage performance.
He appreciates the elegance of biological systems and functional programming, and focused on both as a student at the University of Toronto, where he studied cognitive and computer sciences.
He moved to Paris in 2015 to work as a research engineer at XWiki SAS, after having dedicated significant time to various cryptography-related software projects.
He spends his spare time experimenting with guitars, photography, science fiction, and spicy food.

'), @@ -195,10 +200,10 @@ define([ ]), ]), h('div.row.align-items-center',[ - h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-2.cp-bio-avatar.cp-bio-avatar-right', [ h('img.img-fluid', {'src': '/customize/images/Catalin.jpg'}) ]), - h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-1.cp-profile-det',[ h('h3', "Catalin Scripcariu"), h('hr'), setHTML(h('div#bioCatalin'), '

Catalin is a Maths majour and has worked in B2B sales for 12 years. Design was always his passion and 3 years ago he started to dedicate himself to web design and front-end.
At the beginning of 2017 he joined the XWiki, where he worked both on the business and the community side of XWiki, including the research team and CryptPad.

'), @@ -504,13 +509,13 @@ define([ ]), ]), h('div.row.align-items-center', [ - h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-2', [ setHTML(h('h2'), Msg.whatis_zeroknowledge), setHTML(h('p'), Msg.whatis_zeroknowledge_p1), setHTML(h('p'), Msg.whatis_zeroknowledge_p2), setHTML(h('p'), Msg.whatis_zeroknowledge_p3), ]), - h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-1', [ h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }), ]), ]), diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 5525196bd..4fd0a5a1d 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -37,11 +37,11 @@ .cp-creation-create, .cp-creation-settings { margin-top: 0px; - @creation-button: #FF0073; + @creation-button: #30B239; button { .tools_unselectable(); padding: 15px; - background: #30b239; + background: @creation-button; color: #FFF; font-weight: bold; margin: 3px 10px; @@ -50,12 +50,20 @@ outline: none; width: 100%; &:hover { - background: darken(@creation-button, 5%); + //background: darken(@creation-button, 5%); + background: lighten(@creation-button, 5%); } } } .cp-creation-create { text-align: center; + margin: auto; + margin-top: 20px; + width: 400px; + max-width: 100%; + button { + margin: 0; + } } #cp-creation-form { diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 3c3bdef5e..b07b90aa8 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -164,6 +164,7 @@ } a { border: 2px solid transparent; + white-space: nowrap; } .nav-link { padding: 0.5em 0.7em; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 3da5fb202..37e1cfb18 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -547,7 +547,7 @@ define(function () { out.settings_deleteButton = "Supprimer votre compte"; out.settings_deleteModal = "Veuillez envoyer les informations suivantes à votre administrateur CryptPad afin que vos données soient supprimées du serveur."; - out.settings_anonymous = "Vous n'êtes pas connectés. Ces préférences seront utilisées pour ce navigateur."; + out.settings_anonymous = "Vous n'êtes pas connecté. Ces préférences seront utilisées pour ce navigateur."; out.settings_publicSigningKey = "Clé publique de signature"; out.settings_usage = "Utilisation"; @@ -1033,7 +1033,7 @@ define(function () { out.readme_cat1 = "Découvrez votre CryptDrive"; out.readme_cat1_l1 = "Créer un pad : Dans votre CryptDrive, cliquez sur {0} puis {1} et vous obtenez un nouveau pad."; // 0: New, 1: Rich Text out.readme_cat1_l2 = "Ouvrir des pads depuis votre CryptDrive : Double-cliquez sur l'icone d'un pad pour l'ouvrir."; - out.readme_cat1_l3 = "Organiser vos pads : Quand vous êtes connectés, tous les pads auquel vous accédez sont ajoutés dans la section {0} de votre CryptDrive."; // 0: Unsorted files + out.readme_cat1_l3 = "Organiser vos pads : Quand vous êtes connecté, tous les pads auquel vous accédez sont ajoutés dans la section {0} de votre CryptDrive."; // 0: Unsorted files out.readme_cat1_l3_l1 = "Vous pouvez cliquer et faire glisser des fichiers dans des dossiers dans la section {0} de votre CryptDrive, et créer de nouveaux dossiers."; // 0: Documents out.readme_cat1_l3_l2 = "N'hésitez pas à utiliser le clic droit sur les icones puisque des menus sont souvent disponibles."; out.readme_cat1_l4 = "Déplacer des pads vers la corbeille : Vous pouvez cliquer et faire glisser vos pads dans la {0} de la même manière que vous pouvez les déposer dans des dossiers."; // 0: Trash diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 778e7fb04..561d7af6a 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1889,11 +1889,15 @@ define([ ]) ]); + var createDiv = h('div.cp-creation-create'); + var $create = $(createDiv); + var templates = h('div.cp-creation-template', [ h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]), h('div.cp-creation-template-container', [ h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw') - ]) + ]), + createDiv ]); var settings = h('div.cp-creation-remember', [ @@ -1909,15 +1913,11 @@ define([ h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp) ]); - var createDiv = h('div.cp-creation-create'); - var $create = $(createDiv); - $(h('div#cp-creation-form', [ owned, expire, settings, - templates, - createDiv + templates ])).appendTo($creation); // Display templates