full screen help dialog

This commit is contained in:
zadam 2019-02-16 19:42:58 +01:00
parent c849d719e9
commit a1b610fc50
3 changed files with 132 additions and 132 deletions

View File

@ -668,12 +668,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
padding: 20px;
}
/* if modal height overflows, then only modal body scrolls */
.modal-body {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* this should help with tooltip flickering */
.tooltip {
pointer-events: none;

View File

@ -1,18 +1,20 @@
<div id="attributes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mr-auto">Note attributes</h5>
<button class="help-button" type="button" data-help-page="Attributes" title="Help on Attributes">?</button>
<button class="help-button" type="button" data-help-page="Attributes" title="Help on Attributes">?
</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form data-bind="submit: save">
<div class="modal-body">
<div style="height: 97%; overflow: auto">
<form data-bind="submit: save">
<input type="submit" style="display: none"/>
<table id="owned-attributes-table" class="table">
<thead>
<tr>
@ -49,7 +51,8 @@
placeholder="search for note by its name"
data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
<div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation target note
<div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation
target note
can't be empty.
</div>
</div>
@ -67,7 +70,9 @@
<div data-bind="visible: labelDefinition.labelType === 'number'"
title="Precision of floating point numbers - 0 means effectively integer, 2 allows entering e.g. 1.23">
Number precision: <input type="number" min="0" max="9" data-bind="value: labelDefinition.numberPrecision" style="width: 50px;"/>
Number precision: <input type="number" min="0" max="9"
data-bind="value: labelDefinition.numberPrecision"
style="width: 50px;"/>
</div>
</div>
@ -83,7 +88,8 @@
<label>
Inverse relation:
<input type="text" value="true" class="attribute-name" data-bind="value: relationDefinition.inverseRelation"/>
<input type="text" value="true" class="attribute-name"
data-bind="value: relationDefinition.inverseRelation"/>
</label>
</div>
</td>
@ -98,6 +104,7 @@
</tr>
</tbody>
</table>
</form>
<div data-bind="if: inheritedAttributes().length > 0">
<h4>Inherited attributes</h4>
@ -138,12 +145,11 @@
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button"
data-bind="click: save">
Save changes <kbd>enter</kbd></button>
</div>
</form>
</div>
</div>
</div>

View File

@ -1,6 +1,6 @@
<div id="help-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document" style="max-width: 95%; height: 90%;">
<div class="modal-content" style="min-height: 100%">
<div id="help-dialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
<div class="modal-content" style="height: auto;">
<div class="modal-header">
<h5 class="modal-title mr-auto">Help (full documentation is available <a class="external" href="https://github.com/zadam/trilium/wiki">online</a>)</h5>
@ -8,7 +8,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
<div class="card-columns help-cards">
<div class="card">
<div class="card-body">