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

first revision of font-size/line-height customization

Browse Source
This commit is contained in:
Alex Pankratov 2021-04-05 18:20:23 +02:00
parent 8e3609994d
commit 2f0731ad47
1 changed files with 107 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
nullboard.html
View File

@ -215,7 +215,8 @@
background: #f8f9fb;
}
body.dragging {
body.dragging,
.no-user-select {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
@ -784,9 +785,6 @@
.config .bulk .boards a.load-board {
display: block;
margin-right: 10px;
padding: 0 5px;
margin-left: -5px;
}
.config .bulk .boards a.load-board.active {
@ -847,8 +845,8 @@
}
.config .bulk .break {
padding-top: 6px;
margin-top: 6px;
padding: 6px 2px 0;
margin: 6px -2px 0;
border-top: 1px solid #00000028;
}
@ -871,6 +869,45 @@
opacity: 0;
transition: opacity 250ms;
padding-bottom: 16px;
padding-right: 8px;
margin-right: -8px;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs {
padding: 0;
margin: 0;
border-collapse: collapse;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs td {
margin: 0;
padding: 0 0 0 5px;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs td.name {
width: 100%;
white-space: pre;
padding-left: 0;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs td.val {
text-align: center;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs a {
display: inline-block;
padding: 0 2px;
transition: padding 250ms;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs a.less:hover {
padding: 0 4px 0 0;
transition: padding 250ms;
}
.config .bulk .ui-prefs .ui-prefs-bulk div .f-prefs a.more:hover {
padding: 0 0 0 4px;
transition: padding 250ms;
}
.config .bulk .ui-prefs:hover .ui-prefs-more {
@ -1266,6 +1303,13 @@
<a href="#" class="switch-font" font="segoe-ui">Use Segoe UI</a>
<a href="#" class="switch-font" font="maven-pro">Use Maven Pro</a>
<div class=break>
<table class='f-prefs no-user-select'>
<tr class='ui-fs'><td class=name>Font size:</td> <td><a href=# class=less>&lt;</a></td><td class=val>13</td><td><a href=# class=more>&gt;</a></td></tr>
<tr class='ui-lh'><td class=name>Line height:</td><td><a href=# class=less>&lt;</a></td><td class=val>1.2</td><td><a href=# class=more>&gt;</a></td></tr>
</table>
</div>
<a href="#" class="switch-theme break">Use <i>light</i><b>dark</b> theme</a>
<a href="#" class="switch-fsize ">Use <i>smaller</i><b>larger</b> font</a>
</div>
@ -3461,13 +3505,62 @@
return false;
});
$('.config').on('click', '.switch-font', function() {
$('.config').on('click', '.switch-font', function(){
var font = $(this).attr('font');
selectFont(font);
NB.storage.setFname(font);
return false;
});
$('.config').on('click', '.f-prefs .ui-fs .less', function(){
var $html = $('html');
var fs = parseInt( 2*$html.css('--fs') );
if (--fs <= 2*6)
return;
fs /= 2.;
$html.css('--fs', fs +'');
$(this).closest('tr').find('.val').html( fs.toFixed(1) );
});
$('.config').on('click', '.f-prefs .ui-fs .more', function(){
var $html = $('html');
var fs = parseInt( 2*$html.css('--fs') );
var lh = parseInt( 2*$html.css('--lh') );
if (++fs >= 2*24)
return;
fs /= 2.;
if (fs > lh/2.)
{
$html.css('--lh', fs +'');
$('.config .f-prefs .ui-lh .val').html( fs.toFixed(1) );
}
$html.css('--fs', fs +'');
$(this).closest('tr').find('.val').html( fs.toFixed(1) );
});
$('.config').on('click', '.f-prefs .ui-lh .less', function(){
var $html = $('html');
var fs = parseInt( 2*$html.css('--fs') );
var lh = parseInt( 2*$html.css('--lh') );
if (--lh < fs)
return;
lh /= 2.;
$html.css('--lh', lh +'');
$(this).closest('tr').find('.val').html( lh.toFixed(1) );
});
$('.config').on('click', '.f-prefs .ui-lh .more', function(){
var $html = $('html');
var fs = parseInt( 2*$html.css('--fs') );
var lh = parseInt( 2*$html.css('--lh') );
if (++lh > 3*fs)
return;
lh /= 2.;
$html.css('--lh', lh +'');
$(this).closest('tr').find('.val').html(lh.toFixed(1) );
});
//
$('.overlay').click(function(ev){
if (ev.originalEvent.target != this)
@ -3558,6 +3651,13 @@
}
});
//
var fs = parseInt(2 * $('html').css('--fs')) / 2.;
var lh = parseInt(2 * $('html').css('--lh')) / 2.;
$('.config .f-prefs .ui-fs .val').html( fs.toFixed(1) );
$('.config .f-prefs .ui-lh .val').html( lh.toFixed(1) );
//
if (conf.theme)
$('html').addClass('theme-' + conf.theme);