From a1b610fc5044ea6c96da5b4feed63f59d76776ba Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sat, 16 Feb 2019 19:42:58 +0100
Subject: [PATCH] full screen help dialog

---
 src/public/stylesheets/style.css |   6 -
 src/views/dialogs/attributes.ejs | 262 ++++++++++++++++---------------
 src/views/dialogs/help.ejs       |   8 +-
 3 files changed, 138 insertions(+), 138 deletions(-)

diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index b94cd1f06f..f862925381 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -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;
diff --git a/src/views/dialogs/attributes.ejs b/src/views/dialogs/attributes.ejs
index 608a9f5783..b548852fa2 100644
--- a/src/views/dialogs/attributes.ejs
+++ b/src/views/dialogs/attributes.ejs
@@ -1,149 +1,155 @@
 <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">
-                        <table id="owned-attributes-table" class="table">
-                            <thead>
-                            <tr>
-                                <th>Type</th>
-                                <th>Name</th>
-                                <th>Value</th>
-                                <th>Inheritable</th>
-                            </tr>
-                            </thead>
-                            <tbody data-bind="foreach: ownedAttributes">
-                            <tr data-bind="if: !isDeleted">
-                                <td>
-                                    <input type="hidden" name="position" data-bind="value: position"/>
-
-                                    <select class="form-control attribute-type-select" style="width: auto;"
-                                            data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
-                                </td>
-                                <td>
-                                    <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
-                                    <input type="text" class="attribute-name form-control"
-                                           data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
-                                    <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name
+            <div class="modal-body">
+                <form data-bind="submit: save">
+                    <input type="submit" style="display: none"/>
+
+                    <table id="owned-attributes-table" class="table">
+                        <thead>
+                        <tr>
+                            <th>Type</th>
+                            <th>Name</th>
+                            <th>Value</th>
+                            <th>Inheritable</th>
+                        </tr>
+                        </thead>
+                        <tbody data-bind="foreach: ownedAttributes">
+                        <tr data-bind="if: !isDeleted">
+                            <td>
+                                <input type="hidden" name="position" data-bind="value: position"/>
+
+                                <select class="form-control attribute-type-select" style="width: auto;"
+                                        data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
+                            </td>
+                            <td>
+                                <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
+                                <input type="text" class="attribute-name form-control"
+                                       data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
+                                <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name
+                                    can't be empty.
+                                </div>
+                            </td>
+                            <td>
+                                <input type="text" class="label-value form-control"
+                                       data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
+                                       style="width: 300px"/>
+
+                                <div class="relation-value input-group" data-bind="visible: type == 'relation'"
+                                     style="width: 300px;">
+                                    <input class="form-control relation-target-note-id"
+                                           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
                                         can't be empty.
                                     </div>
-                                </td>
-                                <td>
-                                    <input type="text" class="label-value form-control"
-                                           data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
-                                           style="width: 300px"/>
-
-                                    <div class="relation-value input-group" data-bind="visible: type == 'relation'"
-                                         style="width: 300px;">
-                                        <input class="form-control relation-target-note-id"
-                                               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
-                                            can't be empty.
-                                        </div>
-                                    </div>
+                                </div>
 
-                                    <div data-bind="visible: type == 'label-definition'">
-                                        <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
+                                <div data-bind="visible: type == 'label-definition'">
+                                    <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
 
-                                        <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
+                                    <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
 
-                                        <label>
-                                            <input type="checkbox" value="true"
-                                                   data-bind="checked: labelDefinition.isPromoted"/>
-                                            Promoted
-                                        </label>
+                                    <label>
+                                        <input type="checkbox" value="true"
+                                               data-bind="checked: labelDefinition.isPromoted"/>
+                                        Promoted
+                                    </label>
 
-                                        <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;"/>
-                                        </div>
+                                    <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;"/>
                                     </div>
-
-                                    <div data-bind="visible: type == 'relation-definition'">
-                                        <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
-
-                                        <label>
-                                            <input type="checkbox" value="true"
-                                                   data-bind="checked: relationDefinition.isPromoted"/>
-                                            Promoted
-                                        </label>
-                                        <br/>
-                                        <label>
-                                            Inverse relation:
-
-                                            <input type="text" value="true" class="attribute-name" data-bind="value: relationDefinition.inverseRelation"/>
-                                        </label>
-                                    </div>
-                                </td>
-                                <td title="Inheritable relations are automatically inherited to the child notes">
-                                    <input type="checkbox" value="1" data-bind="checked: isInheritable"/>
-
-                                    &nbsp;
-
-                                    <span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
-                                          data-bind="click: $parent.deleteAttribute"></span>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-
-                        <div data-bind="if: inheritedAttributes().length > 0">
-                            <h4>Inherited attributes</h4>
-
-                            <table class="table">
-                                <thead>
-                                <tr>
-                                    <th>Type</th>
-                                    <th>Name</th>
-                                    <th>Value</th>
-                                    <th>Owning note</th>
-                                </tr>
-                                </thead>
-                                <tbody data-bind="foreach: inheritedAttributes">
-                                <tr>
-                                    <td data-bind="text: type"></td>
-                                    <td data-bind="text: name"></td>
-                                    <td>
-                    <span data-bind="if: type == 'label'">
-                      <span data-bind="text: value"></span>
-                    </span>
-                                        <span data-bind="if: type == 'relation'">
-                      <span data-bind="noteLink: value"></span>
-                    </span>
-                                        <span data-bind="if: type == 'label-definition'">
-                      <span data-bind="text: value.labelType"></span>
-                      <span data-bind="text: value.multiplicityType"></span>
-                      promoted: <span data-bind="text: value.isPromoted"></span>
-                    </span>
-                                        <span data-bind="if: type == 'relation-definition'">
-                      <span data-bind="text: value.multiplicityType"></span>
-                      promoted: <span data-bind="text: value.isPromoted"></span>
-                    </span>
-                                    </td>
-                                    <td data-bind="noteLink: noteId"></td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
-                        Save changes <kbd>enter</kbd></button>
+                                </div>
+
+                                <div data-bind="visible: type == 'relation-definition'">
+                                    <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
+
+                                    <label>
+                                        <input type="checkbox" value="true"
+                                               data-bind="checked: relationDefinition.isPromoted"/>
+                                        Promoted
+                                    </label>
+                                    <br/>
+                                    <label>
+                                        Inverse relation:
+
+                                        <input type="text" value="true" class="attribute-name"
+                                               data-bind="value: relationDefinition.inverseRelation"/>
+                                    </label>
+                                </div>
+                            </td>
+                            <td title="Inheritable relations are automatically inherited to the child notes">
+                                <input type="checkbox" value="1" data-bind="checked: isInheritable"/>
+
+                                &nbsp;
+
+                                <span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
+                                      data-bind="click: $parent.deleteAttribute"></span>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </form>
+
+                <div data-bind="if: inheritedAttributes().length > 0">
+                    <h4>Inherited attributes</h4>
+
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th>Type</th>
+                            <th>Name</th>
+                            <th>Value</th>
+                            <th>Owning note</th>
+                        </tr>
+                        </thead>
+                        <tbody data-bind="foreach: inheritedAttributes">
+                        <tr>
+                            <td data-bind="text: type"></td>
+                            <td data-bind="text: name"></td>
+                            <td>
+                <span data-bind="if: type == 'label'">
+                  <span data-bind="text: value"></span>
+                </span>
+                                <span data-bind="if: type == 'relation'">
+                  <span data-bind="noteLink: value"></span>
+                </span>
+                                <span data-bind="if: type == 'label-definition'">
+                  <span data-bind="text: value.labelType"></span>
+                  <span data-bind="text: value.multiplicityType"></span>
+                  promoted: <span data-bind="text: value.isPromoted"></span>
+                </span>
+                                <span data-bind="if: type == 'relation-definition'">
+                  <span data-bind="text: value.multiplicityType"></span>
+                  promoted: <span data-bind="text: value.isPromoted"></span>
+                </span>
+                            </td>
+                            <td data-bind="noteLink: noteId"></td>
+                        </tr>
+                        </tbody>
+                    </table>
                 </div>
-            </form>
+            </div>
+            <div class="modal-footer">
+                <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>
         </div>
     </div>
 </div>
diff --git a/src/views/dialogs/help.ejs b/src/views/dialogs/help.ejs
index 981dd8f8b1..683b0437cc 100644
--- a/src/views/dialogs/help.ejs
+++ b/src/views/dialogs/help.ejs
@@ -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">