make links clickable and make more link work

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;
+                                    }
+                                }
+                            ])
                         ])
                     ])
                 ]),

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()
         }
     }
 }

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;
         }
     }
 }