diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 3c4b8067e..40c98c528 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -2,7 +2,8 @@ define([ '/api/config', '/common/hyperscript.js', '/common/cryptpad-common.js', -], function (Config, h, Cryptpad) { + 'jquery' +], function (Config, h, Cryptpad, $) { var Pages = {}; var Msg = Cryptpad.Messages; var urlArgs = Config.requireConf.urlArgs; @@ -254,10 +255,11 @@ define([ } Pages['/'] = Pages['/index.html'] = function () { + var showingMore = false; return [ h('div#cp-main.cp-page-index', [ infopageTopbar(), - h('div.container', [ + h('div.container.cp-container', [ h('div.row', [ h('div.cp-title.col-6.col-xs-6', [ h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), @@ -266,32 +268,44 @@ define([ ]), /*userForm(),*/ h('div.col-6.col-xs-6', [ - h('div.bs-callout.cp-callout-pad', [ - h('i.fa.fa-file-word-o'), - h('div', [h('h4', 'Rich Text Pad')]), - // "TODO Collaborate in realtime on notes and ideas." - ]), - h('div.bs-callout.cp-callout-code', [ - h('i.fa.fa-file-code-o'), - h('div', [h('h4', 'Markdown/Code Pad')]), - // "TODO Edit Markdown with realtime visual rendering." - ]), - h('div.bs-callout.cp-callout-slide', [ - h('i.fa.fa-file-powerpoint-o'), - h('div', [h('h4', 'Markdown Presentation')]), - // "TODO Make quick presentations with Markdown slides." - ]), + [ + [ 'pad', '/pad/', 'Rich Text Pad', 'fa-file-word-o' ], + [ 'code', '/code/', 'Markdown/Code Pad', 'fa-file-code-o' ], + [ 'slide', '/slide/', 'Markdown Presentation', 'fa-file-powerpoint-o' ], + [ 'poll.cp-more.cp-hidden', '/poll/', 'Poll or Schedule', 'fa-calendar' ], + [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', 'Whiteboard', 'fa-paint-brush' ], + [ 'recent.cp-more.cp-hidden', '/drive/', 'Recent Pads', 'fa-hdd-o' ] + ].map(function (x) { + return h('a', [ + { href: x[1] }, + h('div.bs-callout.cp-callout-' + x[0], [ + h('i.fa.' + x[3]), + h('div', [ h('h4', x[2]) ]) + ]) + ]); + }), h('div.bs-callout.cp-callout-more', [ - h('div', [ + h('div.cp-callout-more-lessmsg.cp-hidden', [ + "see less ", + h('i.fa.fa-caret-up') + ]), + h('div.cp-callout-more-moremsg', [ "see more ", h('i.fa.fa-caret-down') ]), - // "TODO Make quick presentations with Markdown slides." - ]), - /*h('div.bs-callout.cp-callout-recent', [ - h('h4', 'TODO Your Recent Pads'), - /// "TODO See pads recently edited on this computer." - ]),*/ + { + onclick: function () { + if (showingMore) { + $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden'); + $('.cp-callout-more-moremsg').removeClass('cp-hidden'); + } else { + $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden'); + $('.cp-callout-more-moremsg').addClass('cp-hidden'); + } + showingMore = !showingMore; + } + } + ]) ]) ]) ]), diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index f681bfc0c..b7bce8f75 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -20,6 +20,16 @@ font-family: 'Open Sans', 'Helvetica Neue', sans-serif; }; +.infopages_link () { + text-decoration: none; + color: #FFF; + cursor: pointer; + display: inline-flex; + &:hover { + transform: scale(1.05); + } +} + // Apply this to the top bar div .infopages_topbar () { .cp-topbar { @@ -47,12 +57,9 @@ -ms-user-select: none; a { - text-decoration: none; font-weight: 500; padding: 0.6em; - color: #FFF; - - cursor: pointer; + .infopages_link() } } } \ 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 87ab5bcfb..ab851dbee 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -54,14 +54,7 @@ font-style: italic; } } -.cp-topbar { - a { - display: inline-flex; - &:hover { - transform: scale(1.05); - } - } -} +.cp-topbar { position: absolute; } @callout-padding: 15px; @@ -75,6 +68,10 @@ box-sizing: border-box; height: 5em; position: relative; + a { + color: black; + &:hover { text-decoration-line: none; } + } } h4 { margin: 0; @@ -110,24 +107,17 @@ h4 { padding-left: 0.57em; width: 2em; transition: width 0.1s; + color: #fff; } -.cp-callout-pad .fa { - background-color: @colortheme_pad-bg; - 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-callout-code .fa { - background-color: @colortheme_code-bg; - color: #fff; -} - -.cp-callout-slide .fa { - background-color: @colortheme_slide-bg; - color: #fff; -} - -.cp-callout-recent { border-left-color: @colortheme_drive-bg; } +.cp-hidden { display: none !important; } .cp-callout-more { width: auto; @@ -137,17 +127,17 @@ h4 { 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; - } - .fa-caret-down { - padding-left: 5px; + padding-left: 5px; } } }