make links clickable and make more link work

pull/1/head
Caleb James DeLisle 8 years ago
parent 5fa20836cf
commit 428bee6306

@ -2,7 +2,8 @@ define([
'/api/config', '/api/config',
'/common/hyperscript.js', '/common/hyperscript.js',
'/common/cryptpad-common.js', '/common/cryptpad-common.js',
], function (Config, h, Cryptpad) { 'jquery'
], function (Config, h, Cryptpad, $) {
var Pages = {}; var Pages = {};
var Msg = Cryptpad.Messages; var Msg = Cryptpad.Messages;
var urlArgs = Config.requireConf.urlArgs; var urlArgs = Config.requireConf.urlArgs;
@ -254,10 +255,11 @@ define([
} }
Pages['/'] = Pages['/index.html'] = function () { Pages['/'] = Pages['/index.html'] = function () {
var showingMore = false;
return [ return [
h('div#cp-main.cp-page-index', [ h('div#cp-main.cp-page-index', [
infopageTopbar(), infopageTopbar(),
h('div.container', [ h('div.container.cp-container', [
h('div.row', [ h('div.row', [
h('div.cp-title.col-6.col-xs-6', [ h('div.cp-title.col-6.col-xs-6', [
h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }),
@ -266,32 +268,44 @@ define([
]), ]),
/*userForm(),*/ /*userForm(),*/
h('div.col-6.col-xs-6', [ h('div.col-6.col-xs-6', [
h('div.bs-callout.cp-callout-pad', [ [
h('i.fa.fa-file-word-o'), [ 'pad', '/pad/', 'Rich Text Pad', 'fa-file-word-o' ],
h('div', [h('h4', 'Rich Text Pad')]), [ 'code', '/code/', 'Markdown/Code Pad', 'fa-file-code-o' ],
// "TODO Collaborate in realtime on notes and ideas." [ 'slide', '/slide/', 'Markdown Presentation', 'fa-file-powerpoint-o' ],
]), [ 'poll.cp-more.cp-hidden', '/poll/', 'Poll or Schedule', 'fa-calendar' ],
h('div.bs-callout.cp-callout-code', [ [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', 'Whiteboard', 'fa-paint-brush' ],
h('i.fa.fa-file-code-o'), [ 'recent.cp-more.cp-hidden', '/drive/', 'Recent Pads', 'fa-hdd-o' ]
h('div', [h('h4', 'Markdown/Code Pad')]), ].map(function (x) {
// "TODO Edit Markdown with realtime visual rendering." return h('a', [
]), { href: x[1] },
h('div.bs-callout.cp-callout-slide', [ h('div.bs-callout.cp-callout-' + x[0], [
h('i.fa.fa-file-powerpoint-o'), h('i.fa.' + x[3]),
h('div', [h('h4', 'Markdown Presentation')]), h('div', [ h('h4', x[2]) ])
// "TODO Make quick presentations with Markdown slides." ])
]), ]);
}),
h('div.bs-callout.cp-callout-more', [ 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 ", "see more ",
h('i.fa.fa-caret-down') h('i.fa.fa-caret-down')
]), ]),
// "TODO Make quick presentations with Markdown slides." {
]), onclick: function () {
/*h('div.bs-callout.cp-callout-recent', [ if (showingMore) {
h('h4', 'TODO Your Recent Pads'), $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
/// "TODO See pads recently edited on this computer." $('.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;
}
}
])
]) ])
]) ])
]), ]),

@ -20,6 +20,16 @@
font-family: 'Open Sans', 'Helvetica Neue', sans-serif; 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 // Apply this to the top bar div
.infopages_topbar () { .infopages_topbar () {
.cp-topbar { .cp-topbar {
@ -47,12 +57,9 @@
-ms-user-select: none; -ms-user-select: none;
a { a {
text-decoration: none;
font-weight: 500; font-weight: 500;
padding: 0.6em; padding: 0.6em;
color: #FFF; .infopages_link()
cursor: pointer;
} }
} }
} }

@ -54,14 +54,7 @@
font-style: italic; font-style: italic;
} }
} }
.cp-topbar { .cp-topbar { position: absolute; }
a {
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
}
@callout-padding: 15px; @callout-padding: 15px;
@ -75,6 +68,10 @@
box-sizing: border-box; box-sizing: border-box;
height: 5em; height: 5em;
position: relative; position: relative;
a {
color: black;
&:hover { text-decoration-line: none; }
}
} }
h4 { h4 {
margin: 0; margin: 0;
@ -110,24 +107,17 @@ h4 {
padding-left: 0.57em; padding-left: 0.57em;
width: 2em; width: 2em;
transition: width 0.1s; transition: width 0.1s;
}
.cp-callout-pad .fa {
background-color: @colortheme_pad-bg;
color: #fff;
}
.cp-callout-code .fa {
background-color: @colortheme_code-bg;
color: #fff; color: #fff;
} }
.cp-callout-slide .fa { .cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
background-color: @colortheme_slide-bg; .cp-callout-code .fa { background-color: @colortheme_code-bg; }
color: #fff; .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-recent { border-left-color: @colortheme_drive-bg; } .cp-hidden { display: none !important; }
.cp-callout-more { .cp-callout-more {
width: auto; width: auto;
@ -137,16 +127,16 @@ h4 {
border-radius: 1em; border-radius: 1em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 0;
background: none; background: none;
width: 100%; width: 100%;
div { div {
.infopages_link();
color: #fff; color: #fff;
.fa { .fa {
font-size: inherit; font-size: inherit;
padding: 0; padding: 0;
width: 1em; width: 1em;
}
.fa-caret-down {
padding-left: 5px; padding-left: 5px;
} }
} }

Loading…
Cancel
Save