From cd2b41f51ecf87984a756a291d81318c93b8da02 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Tue, 1 Aug 2017 11:53:06 +0200 Subject: [PATCH 1/3] Fix up some less for supporting the info-pages --- customize.dist/pages.js | 9 +- customize.dist/src/less2/main.less | 5 +- .../src/less2/pages/page-contact.less | 168 ++++++++++++++++++ .../src/less2/pages/page-index.less | 2 - .../src/less2/pages/page-login.less | 0 .../src/less2/pages/page-register.less | 0 customize.dist/template.js | 7 +- 7 files changed, 179 insertions(+), 12 deletions(-) create mode 100644 customize.dist/src/less2/pages/page-contact.less create mode 100644 customize.dist/src/less2/pages/page-login.less create mode 100644 customize.dist/src/less2/pages/page-register.less diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 2d231f7aa..dbcf0dc88 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -129,9 +129,12 @@ define([ }; Pages['/contact.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.contact)), - setHTML(h('p'), Msg.main_about_p2) + return h('div#cp-main.cp-page-contact', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.contact)), + setHTML(h('p'), Msg.main_about_p2) + ]) ]); }; diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less index 242e22fc2..05ee01c8b 100644 --- a/customize.dist/src/less2/main.less +++ b/customize.dist/src/less2/main.less @@ -2,4 +2,7 @@ font-family: Neuropolitical; src: url(./customize/fonts/neuropolitical.ttf) } -div#cp-main.cp-page-index { @import "./pages/page-index.less"; } \ No newline at end of file +div#cp-main.cp-page-index { @import "./pages/page-index.less"; } +div#cp-main.cp-page-contact { @import "./pages/page-contact.less"; } +div#cp-main.cp-page-login { @import "./pages/page-login.less"; } +div#cp-main.cp-page-register { @import "./pages/page-register.less"; } \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less new file mode 100644 index 000000000..19fb525b2 --- /dev/null +++ b/customize.dist/src/less2/pages/page-contact.less @@ -0,0 +1,168 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + + +.infopages_main(); +.infopages_topbar(); + +&#cp-main { + +} +/* +.cp-right { + .cp-register-btn { + padding: 0.5em 1em 0.7em 1em; + border: 2px solid #fff; + &:hover { + transform: scale(1.05); + } + } + .cp-login-btn { + color: #fff; + margin-left: 0.6em; + padding: 0.5em 1em 0.7em 1em; + &:hover { + transform: scale(1.05); + } + } +} + +.cp-title { + display: flex; + align-items: center; + flex-direction: column; + margin-top: 1.5em; + img { + height: 20vh; + margin-bottom: 1.5em; + } + margin-left: 0; + h1 { + font-family: "Neuropolitical"; + //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; + //font-family: "Raleway"; + font-size: 45px; + } + p { + //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 21px; + //font-style: italic; + } +} +.cp-topbar { + position: absolute; + button:focus { + outline: none; + } + .navbar-toggler-left { + top: -0.59rem; + } + .cp-left { + .fa-bars { + font-size: 1.6rem; + } + } +} +@callout-padding: 15px; +a:hover { + text-decoration: none +} +.bs-callout { + display: flex; + align-items: stretch; + margin: 25px 0; + background:rgba(255,255,255,0.6); + color: black; + transition: all .1s ease-in-out; + box-sizing: border-box; + height: 5em; + position: relative; + a { + color: black; + &:hover { text-decoration-line: none; } + } + div { + @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { + left: 4.5em !important; + } + } +} +h4 { + margin: 0; +} +.cp-callout-more-moremsg,.cp-callout-more-lessmsg { + transform: none !important; +} +.bs-callout div { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + position: absolute; + left: 5em; +} +.bs-callout+.bs-callout { + margin-top: -5px; +} + +.bs-callout:hover { + //color: white; + transform: scale(1.05); + cursor: pointer; +} +.bs-callout:hover .fa { + //width: 100%; +} +.bs-callout:hover.cp-callout-more { + transform: none !important; +} +.bs-callout .fa { + display: flex; + align-items: center; + font-size: 2em; + padding-left: 0.57em; + width: 2em; + transition: width 0.1s; + color: #fff; +} +.cp-callout-pad .fa { background-color: @colortheme_pad-bg; } +.cp-callout-code .fa { background-color: @colortheme_code-bg; } +.cp-callout-slide .fa { background-color: @colortheme_slide-bg; } +.cp-callout-poll .fa { background-color: @colortheme_poll-bg; } +.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; } +.cp-callout-recent .fa { background-color: @colortheme_drive-bg; } +.cp-hidden { display: none !important; } +.cp-callout-more { + width: auto; + display: inline-block; + align-content: center; + height: 2em; + border-radius: 1em; + margin-left: auto; + margin-right: auto; + margin-top: 0; + background: none; + width: 100%; + div { + .infopages_link(); + color: #fff; + .fa { + font-size: inherit; + padding: 0; + width: 1em; + padding-left: 5px; + } + } +} +.navbar-inverse .navbar-toggler { + border-color: transparent; +} +@media (min-width: 576px) and (max-width: 767px) { + .container { + padding-left: 0; + padding-right: 0; + } + div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { + left: 5px; + } +}*/ \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 9b68d70f5..b42645ca5 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -1,5 +1,3 @@ -//@import (once) "./variables.less"; - @import (once) "../include/infopages.less"; @import (once) "../include/colortheme.less"; diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less new file mode 100644 index 000000000..e69de29bb diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less new file mode 100644 index 000000000..e69de29bb diff --git a/customize.dist/template.js b/customize.dist/template.js index a8445615e..acf44e373 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -177,12 +177,7 @@ $(function () { 'less!/customize/src/less2/main.less', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', ], function () { - if (pathname === '/') { - // TODO(cjd): This is a hack because the template system doesn't make it easy. - $body.append($main); - return; - } - $body.append($topbar).append($main).append($footer); + $body.append($main); if (/^\/user\//.test(pathname)) { require([ '/user/main.js'], function () {}); From 490e2b4d0a2279b16257793dde599b7aaacddb40 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Tue, 1 Aug 2017 13:49:42 +0200 Subject: [PATCH 2/3] work in progress on migrating styles back into the infopages.less --- customize.dist/src/less2/include/infopages.less | 14 +++++++++++--- customize.dist/src/less2/pages/page-contact.less | 1 + 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index b7bce8f75..d5a9e5660 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -1,3 +1,5 @@ +@infopages_infobar-height: 64px; + // Basic setup for info pages, this should be used at the global level .infopages_main () { min-height: 100vh; @@ -17,12 +19,16 @@ margin: 0; font-size: 14px; - font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + + .cp-container { + padding-top: @infopages_infobar-height; + } }; .infopages_link () { text-decoration: none; - color: #FFF; + color: #000; cursor: pointer; display: inline-flex; &:hover { @@ -33,6 +39,8 @@ // Apply this to the top bar div .infopages_topbar () { .cp-topbar { + background: #fff; + z-index: 9001; position: fixed; top: 0; @@ -43,7 +51,7 @@ box-sizing: border-box; width: 100%; - height: 64px; + height: @infopages_infobar-height; padding-left: 0.5em; padding-right: 0.5em; vertical-align: middle; diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index 19fb525b2..d70ecbd80 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -8,6 +8,7 @@ &#cp-main { } + /* .cp-right { .cp-register-btn { From 27aa1886b1a89f2d18c5922b47e6bf5dbe13a4f1 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Tue, 1 Aug 2017 14:17:02 +0200 Subject: [PATCH 3/3] Move footer to pages.js and add it to the contact page --- customize.dist/pages.js | 66 ++++++- .../src/less2/include/colortheme.less | 5 + .../src/less2/include/infopages.less | 11 +- .../src/less2/pages/page-contact.less | 165 ------------------ .../src/less2/pages/page-index.less | 11 +- 5 files changed, 88 insertions(+), 170 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index dbcf0dc88..01976ed7d 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -79,6 +79,69 @@ define([ ]; }; + var footerCol = function (title, L, literal) { + return h('div.col', [ + h('ul.list-unstyled', [ + h('li.title', { + 'data-localization': title, + }, title? Msg[title]: literal ) + ].concat(L.map(function (l) { + return h('li', [ l ]); + })) + ) + ]); + }; + + var footLink = function (ref, loc, text) { + var attrs = { + href: ref, + }; + if (!/^\//.test(ref)) { + attrs.target = '_blank'; + attrs.rel = 'noopener noreferrer'; + } + if (loc) { + attrs['data-localization'] = loc; + text = Msg[loc]; + } + return h('a', attrs, text); + }; + + var infopageFooter = function () { + return h('footer', [ + h('div.container', [ + h('div.row', [ + footerCol(null, [ + footLink('/about.html', 'about'), + footLink('/terms.html', 'terms'), + footLink('/privacy.html', 'privacy'), + ], 'CryptPad'), + footerCol('footer_applications', [ + footLink('/drive/', 'main_drive'), + footLink('/pad/', 'main_richText'), + footLink('/code/', 'main_code'), + footLink('/slide/', 'main_slide'), + footLink('/poll/', 'main_poll'), + footLink('/whiteboard/', null, Msg.type.whiteboard) + ]), + footerCol('footer_aboutUs', [ + footLink('https://blog.cryptpad.fr', 'blog'), + footLink('https://labs.xwiki.com', null, 'XWiki Labs'), + footLink('http://www.xwiki.com', null, 'XWiki SAS'), + footLink('https://www.open-paas.org', null, 'OpenPaaS') + ]), + footerCol('footer_contact', [ + footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'), + footLink('https://twitter.com/cryptpad', null, 'Twitter'), + footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'), + footLink('/contact.html', null, 'Email') + ]) + ]) + ]), + h('div.cp-version-footer', "CryptPad v1.13.0 (Naiad)") + ]); + }; + Pages['/about.html'] = function () { return h('div#main_other', [ h('center', [ @@ -134,7 +197,8 @@ define([ h('div.container.cp-container', [ h('center', h('h1', Msg.contact)), setHTML(h('p'), Msg.main_about_p2) - ]) + ]), + infopageFooter(), ]); }; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 26274ff1e..3ece30827 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -1,3 +1,8 @@ +@colortheme_link-color: #0275D8; +@colortheme_link-color-visited: #005999; +@colortheme_info-background: #fafafa; + + @colortheme_pad-bg: #1c4fa0; @colortheme_pad-color: #fff; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index d5a9e5660..c5d09dabe 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -1,12 +1,17 @@ +@import (once) "./colortheme.less"; + @infopages_infobar-height: 64px; // Basic setup for info pages, this should be used at the global level .infopages_main () { min-height: 100vh; - background-color: #FAFAFA; + background-color: @colortheme_info-background; a { - color: #FFF; + color: @colortheme_link-color; + &:visited { + color: @colortheme_link-color-visited; + } //opacity: 0.8; //transition: opacity 0.2s; } @@ -28,7 +33,7 @@ .infopages_link () { text-decoration: none; - color: #000; + color: #0275D8; cursor: pointer; display: inline-flex; &:hover { diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index d70ecbd80..6c7f0ac04 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -1,169 +1,4 @@ @import (once) "../include/infopages.less"; -@import (once) "../include/colortheme.less"; - .infopages_main(); .infopages_topbar(); - -&#cp-main { - -} - -/* -.cp-right { - .cp-register-btn { - padding: 0.5em 1em 0.7em 1em; - border: 2px solid #fff; - &:hover { - transform: scale(1.05); - } - } - .cp-login-btn { - color: #fff; - margin-left: 0.6em; - padding: 0.5em 1em 0.7em 1em; - &:hover { - transform: scale(1.05); - } - } -} - -.cp-title { - display: flex; - align-items: center; - flex-direction: column; - margin-top: 1.5em; - img { - height: 20vh; - margin-bottom: 1.5em; - } - margin-left: 0; - h1 { - font-family: "Neuropolitical"; - //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; - //font-family: "Raleway"; - font-size: 45px; - } - p { - //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 21px; - //font-style: italic; - } -} -.cp-topbar { - position: absolute; - button:focus { - outline: none; - } - .navbar-toggler-left { - top: -0.59rem; - } - .cp-left { - .fa-bars { - font-size: 1.6rem; - } - } -} -@callout-padding: 15px; -a:hover { - text-decoration: none -} -.bs-callout { - display: flex; - align-items: stretch; - margin: 25px 0; - background:rgba(255,255,255,0.6); - color: black; - transition: all .1s ease-in-out; - box-sizing: border-box; - height: 5em; - position: relative; - a { - color: black; - &:hover { text-decoration-line: none; } - } - div { - @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { - left: 4.5em !important; - } - } -} -h4 { - margin: 0; -} -.cp-callout-more-moremsg,.cp-callout-more-lessmsg { - transform: none !important; -} -.bs-callout div { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - position: absolute; - left: 5em; -} -.bs-callout+.bs-callout { - margin-top: -5px; -} - -.bs-callout:hover { - //color: white; - transform: scale(1.05); - cursor: pointer; -} -.bs-callout:hover .fa { - //width: 100%; -} -.bs-callout:hover.cp-callout-more { - transform: none !important; -} -.bs-callout .fa { - display: flex; - align-items: center; - font-size: 2em; - padding-left: 0.57em; - width: 2em; - transition: width 0.1s; - color: #fff; -} -.cp-callout-pad .fa { background-color: @colortheme_pad-bg; } -.cp-callout-code .fa { background-color: @colortheme_code-bg; } -.cp-callout-slide .fa { background-color: @colortheme_slide-bg; } -.cp-callout-poll .fa { background-color: @colortheme_poll-bg; } -.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; } -.cp-callout-recent .fa { background-color: @colortheme_drive-bg; } -.cp-hidden { display: none !important; } -.cp-callout-more { - width: auto; - display: inline-block; - align-content: center; - height: 2em; - border-radius: 1em; - margin-left: auto; - margin-right: auto; - margin-top: 0; - background: none; - width: 100%; - div { - .infopages_link(); - color: #fff; - .fa { - font-size: inherit; - padding: 0; - width: 1em; - padding-left: 5px; - } - } -} -.navbar-inverse .navbar-toggler { - border-color: transparent; -} -@media (min-width: 576px) and (max-width: 767px) { - .container { - padding-left: 0; - padding-right: 0; - } - div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { - left: 5px; - } -}*/ \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index b42645ca5..6fa6cecd8 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -5,6 +5,15 @@ .infopages_main(); .infopages_topbar(); +.cp-topbar { + background: transparent; + position: fixed; + a { + color: #fff; + } +} + + @background_lighter: rgba(0,0,0,0.1); @background_darker: rgba(0,0,0,0.4); &#cp-main { @@ -36,7 +45,7 @@ &:hover { transform: scale(1.05); } - } + } } .cp-title { display: flex;