mirror_html/nullboard
1
0
Fork 0
mirror of https://github.com/apankrat/nullboard.git synced 2025-08-01 10:50:30 +02:00
Code Issues Projects Releases Wiki Activity

fix disappearing list/board titles, add support for links in the same

Browse Source
This commit is contained in:
Alex Pankratov
2020-02-20 23:37:13 +01:00
parent 80da1f4452
commit 2105405258
1 changed files with 75 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
nullboard.html
View File

@@ -335,15 +335,15 @@
} }
/***/ /***/
.board .list .note { .board .note {
background: #fff; background: #fff;
margin-top: 5px; margin-top: 5px;
box-shadow: 0 1px 2px #bbb, 0 0 1px #ddd; box-shadow: 0 1px 2px #bbb, 0 0 1px #ddd;
position: relative; position: relative;
} }
.board .list .note.dragging, .board .note.dragging,
.board .list .note.dragging.raw { .board .note.dragging.raw {
background: #CED4DA; background: #CED4DA;
box-shadow: 0 +1px 0 #00000010 inset, box-shadow: 0 +1px 0 #00000010 inset,
0 -1px 0 #00000010 inset, 0 -1px 0 #00000010 inset,
@@ -351,30 +351,31 @@
-1px 0 0 #00000010 inset; -1px 0 0 #00000010 inset;
} }
.board .list .note.dragging * { .board .note.dragging * {
opacity: 0 !important; opacity: 0 !important;
} }
/***/ /***/
.board .list .note:last-child { .board .note:last-child {
margin-bottom: 5px; margin-bottom: 5px;
} }
.board .list .note .text, .board .note .text,
.board .list .note .edit { .board .note .edit {
padding: 5px 10px; padding: 5px 10px;
margin-right: 15px; margin-right: 15px;
font-size: 11px; font-size: 11px;
} }
.board .list .note .text { .board .note .text {
min-height: 13px; min-height: 13px;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
/***/ /***/
.board .list .note .text a { .board .head .text a,
.board .note .text a {
color: inherit; color: inherit;
cursor: default; cursor: default;
transition: none; transition: none;
@@ -386,42 +387,45 @@
100% { color: inherit; } 100% { color: inherit; }
} }
.board .list .note .text a:hover { .board .head .text a:hover,
.board .note .text a:hover {
animation-name: whoomp; animation-name: whoomp;
animation-duration: 700ms; animation-duration: 700ms;
} }
.reveal .board .list .note .text a { .reveal .board .head .text a,
.reveal .board .note .text a {
color: #1489db; color: #1489db;
cursor: pointer; cursor: pointer;
} }
.reveal .board .list .note .text a:hover { .reveal .board .head .text a:hover,
.reveal .board .note .text a:hover {
animation-name: none; animation-name: none;
} }
/***/ /***/
.board .list .note .edit { .board .note .edit {
display: none; display: none;
border: none; border: none;
} }
.board .list .note.editing { .board .note.editing {
box-shadow: none; box-shadow: none;
outline: 1px solid #8eaedd; outline: 1px solid #8eaedd;
} }
.board .list .note.editing .text { .board .note.editing .text {
display: none; display: none;
} }
.board .list .note.editing .edit { .board .note.editing .edit {
display: block; display: block;
resize: none; resize: none;
} }
/***/ /***/
.board .list .note .ops { .board .note .ops {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -431,26 +435,26 @@
font-size: 9px; font-size: 9px;
} }
.board .list .note.editing .ops { .board .note.editing .ops {
display: none; display: none;
} }
.board .list .note:hover .ops { .board .note:hover .ops {
opacity: 1; opacity: 1;
} }
.board .list .note .ops .teaser { .board .note .ops .teaser {
display: block; display: block;
margin-top: 2px; margin-top: 2px;
margin-right: 1px; margin-right: 1px;
padding-right: 3px; padding-right: 3px;
} }
.board .list .note .ops .teaser:before { .board .note .ops .teaser:before {
content: '\2261'; content: '\2261';
} }
.board .list .note .ops .bulk { .board .note .ops .bulk {
display: none; display: none;
background: #fff; background: #fff;
border-left: none; border-left: none;
@@ -460,57 +464,57 @@
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.board .list .note .ops .bulk a { .board .note .ops .bulk a {
padding-right: 4px; padding-right: 4px;
} }
.board .list .note .ops:hover .bulk { .board .note .ops:hover .bulk {
display: block; display: block;
} }
.board .list .note .ops:hover .teaser { .board .note .ops:hover .teaser {
display: none; display: none;
} }
/***/ /***/
.board .list .note.raw { .board .note.raw {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
font-weight: 500; font-weight: 500;
} }
.board .list .note.raw.editing { .board .note.raw.editing {
background: #fff; background: #fff;
} }
.board .list .note.raw .text { .board .note.raw .text {
} }
.board .list .note.collapsed { .board .note.collapsed {
height: 23px; height: 23px;
} }
.board .list .note.collapsed .text { .board .note.collapsed .text {
height: 13px; height: 13px;
overflow: hidden; overflow: hidden;
line-height: 22px; line-height: 22px;
padding-top: 0; padding-top: 0;
} }
.board .list .note.collapsed .ops { .board .note.collapsed .ops {
opacity: 1; opacity: 1;
} }
.board .list .note.collapsed .ops .teaser { .board .note.collapsed .ops .teaser {
padding: 1px 3px 0 1px; padding: 1px 3px 0 1px;
} }
.board .list .note.collapsed .ops .teaser:before { .board .note.collapsed .ops .teaser:before {
content: '_'; content: '_';
top: 1px; top: 1px;
} }
.board .list .note.collapsed:hover .ops .teaser:before { .board .note.collapsed:hover .ops .teaser:before {
content: '\2261'; content: '\2261';
} }
@@ -784,12 +788,12 @@
display: none; display: none;
} }
.board .list .note { .board .note {
box-shadow: none; box-shadow: none;
outline: 1px solid #ccc; outline: 1px solid #ccc;
} }
.board .list .note.raw { .board .note.raw {
outline: none; outline: none;
} }
} }
@@ -837,14 +841,15 @@
background: #202224; background: #202224;
} }
.dark .board .list .note { .dark .board .note {
background: #2B2C2F; background: #2B2C2F;
background: linear-gradient(#2B2C2F, #27282B); background: linear-gradient(#2B2C2F, #27282B);
box-shadow: 0 1px 3px #0005; box-shadow: 0 1px 3px #0005;
text-shadow: 0 0 4px #0008; text-shadow: 0 0 4px #0008;
} }
.dark.reveal .board .list .note .text a { .dark.reveal .board .head .text a,
.dark.reveal .board .note .text a {
color: #fc0; color: #fc0;
} }
@@ -854,45 +859,46 @@
100% { color: inherit; } 100% { color: inherit; }
} }
.dark .board .list .note .text a:hover { .dark .board .head .text a:hover,
.dark .board .note .text a:hover {
animation-name: whoomp-dark; animation-name: whoomp-dark;
} }
.dark .board .list .note.raw { .dark .board .note.raw {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
} }
.dark .board .list .note.raw .text { .dark .board .note.raw .text {
color: #eee; color: #eee;
text-shadow: 0 0 4px #0008; text-shadow: 0 0 4px #0008;
} }
.dark .board .list .note .ops .teaser { .dark .board .note .ops .teaser {
color: #ccc; color: #ccc;
} }
.dark .board .list .note .ops .bulk { .dark .board .note .ops .bulk {
background: #202224; background: #202224;
border-left: 1px solid #111; border-left: 1px solid #111;
border-bottom: 1px solid #111; border-bottom: 1px solid #111;
} }
.dark .board .list .note.raw .ops .bulk { .dark .board .note.raw .ops .bulk {
border: none; border: none;
} }
.dark .board .list .note .ops .bulk a { .dark .board .note .ops .bulk a {
color: #ccc; color: #ccc;
} }
.dark .board .list .note .ops .bulk a:hover { .dark .board .note .ops .bulk a:hover {
color: #fc2; color: #fc2;
} }
.dark .board .list .note.dragging, .dark .board .note.dragging,
.dark .board .list .note.dragging.raw { .dark .board .note.dragging.raw {
background: #15171A; background: #15171A;
box-shadow: 0 +1px 0 #000 inset, box-shadow: 0 +1px 0 #000 inset,
0 -1px 0 #000 inset, 0 -1px 0 #000 inset,
@@ -921,7 +927,7 @@
outline: 1px solid #bc9908; outline: 1px solid #bc9908;
} }
.dark .board .list .note.editing { .dark .board .note.editing {
background: #111315; background: #111315;
outline: 1px solid #bc9908; outline: 1px solid #bc9908;
} }
@@ -1020,21 +1026,21 @@
width: 290px; width: 290px;
} }
.z1 .board .list .note .text, .z1 .board .note .text,
.z1 .board .list .note .edit, .z1 .board .note .edit,
.z1 .dragster { .z1 .dragster {
font-size: 13px; font-size: 13px;
} }
.z1 .board .list .note .text { .z1 .board .note .text {
min-height: 16px; min-height: 16px;
} }
.z1 .board .list .note.collapsed { .z1 .board .note.collapsed {
height: 26px; height: 26px;
} }
.z1 .board .list .note.collapsed .text { .z1 .board .note.collapsed .text {
height: 17px; height: 17px;
line-height: 25px; line-height: 25px;
} }
@@ -1043,7 +1049,7 @@
line-height: 24px; line-height: 24px;
} }
.z1 .board .list .note .ops { .z1 .board .note .ops {
font-size: 10px; font-size: 10px;
} }
@@ -1279,23 +1285,13 @@
return $('tt .encoder').html(enc).text(); return $('tt .encoder').html(enc).text();
} }
function getHtml($item)
{
return htmlDecode($item.html());
}
function setHtml($item, html)
{
$item.html(htmlEncode(html));
}
// //
function setNoteText($note, text) function setText($note, text)
{ {
$note.attr('_text', text); $note.attr('_text', text);
text = htmlEncode(text); text = htmlEncode(text);
hmmm = /(https?:\/\/[^\s]+)/mg; hmmm = /\b(https?:\/\/[^\s]+)/mg;
text = text.replace(hmmm, function(url){ text = text.replace(hmmm, function(url){
return '<a href="' + url + '" target=_blank>' + url + '</a>'; return '<a href="' + url + '" target=_blank>' + url + '</a>';
@@ -1304,7 +1300,7 @@
$note.html(text); $note.html(text);
} }
function getNoteText($note) function getText($note)
{ {
return $note.attr('_text'); return $note.attr('_text');
} }
@@ -1319,7 +1315,7 @@
} }
var $text = $('.wrap .board > .head .text'); var $text = $('.wrap .board > .head .text');
var title = getHtml( $text ); var title = getText( $text );
document.board.title = title; document.board.title = title;
document.title = 'NB - ' + (title || '(unnamed board)'); document.title = 'NB - ' + (title || '(unnamed board)');
@@ -1360,18 +1356,18 @@
var $b_lists = $b.find('.lists'); var $b_lists = $b.find('.lists');
$b[0].board_id = board.id; $b[0].board_id = board.id;
setHtml( $b.find('.head .text'), board.title ); setText( $b.find('.head .text'), board.title );
board.lists.forEach(function(list){ board.lists.forEach(function(list){
var $l = $ldiv.clone(); var $l = $ldiv.clone();
var $l_notes = $l.find('.notes'); var $l_notes = $l.find('.notes');
setHtml( $l.find('.head .text'), list.title ); setText( $l.find('.head .text'), list.title );
list.notes.forEach(function(n){ list.notes.forEach(function(n){
var $n = $ndiv.clone(); var $n = $ndiv.clone();
setNoteText( $n.find('.text'), n.text ); setText( $n.find('.text'), n.text );
if (n.raw) $n.addClass('raw'); if (n.raw) $n.addClass('raw');
if (n.min) $n.addClass('collapsed'); if (n.min) $n.addClass('collapsed');
$l_notes.append($n); $l_notes.append($n);
@@ -1398,15 +1394,15 @@
function saveBoard() function saveBoard()
{ {
var $board = $('.wrap .board'); var $board = $('.wrap .board');
var board = new Board( getHtml($board.find('> .head .text')) ); var board = new Board( getText($board.find('> .head .text')) );
$board.find('.list').each(function(){ $board.find('.list').each(function(){
var $list = $(this); var $list = $(this);
var l = board.addList( getHtml($list.find('.head .text')) ); var l = board.addList( getText($list.find('.head .text')) );
$list.find('.note').each(function(){ $list.find('.note').each(function(){
var $note = $(this) var $note = $(this)
var n = l.addNote( getNoteText($note.find('.text')) ); var n = l.addNote( getText($note.find('.text')) );
n.raw = $note.hasClass('raw'); n.raw = $note.hasClass('raw');
n.min = $note.hasClass('collapsed'); n.min = $note.hasClass('collapsed');
}); });
@@ -1651,7 +1647,7 @@
$note[0]._collapsed = $note.hasClass('collapsed'); $note[0]._collapsed = $note.hasClass('collapsed');
$note.removeClass('collapsed'); $note.removeClass('collapsed');
$edit.val( getNoteText($text) ); $edit.val( getText($text) );
$edit.width( $text.width() ); $edit.width( $text.width() );
$edit.height( $text.height() ); $edit.height( $text.height() );
$note.addClass('editing'); $note.addClass('editing');
@@ -1672,7 +1668,7 @@
// //
var $text = $item.find('.text'); var $text = $item.find('.text');
var text_now = $edit.val().trimRight(); var text_now = $edit.val().trimRight();
var text_was = getNoteText( $text ); var text_was = getText( $text );
// //
var brand_new = $item.hasClass('brand-new'); var brand_new = $item.hasClass('brand-new');
@@ -1689,7 +1685,7 @@
else else
if (text_now != text_was || brand_new) if (text_now != text_was || brand_new)
{ {
setNoteText( $text, text_now ); setText( $text, text_now );
saveBoard(); saveBoard();
updatePageTitle(); updatePageTitle();
@@ -2495,7 +2491,7 @@
}); });
// //
$('.board .list .note .edit').live('input propertychange', function(){ $('.board .note .edit').live('input propertychange', function(){
var delta = $(this).outerHeight() - $(this).height(); var delta = $(this).outerHeight() - $(this).height();